title: Is there a number input field in flutter with increment/decrement buttons attached to the field?
body: <p>I am trying to create a number input field with and up and down arrow button to increment and decrement its value. I am wondering if there is any inbuilt widget which already provides this functionality. I have to create couple of such fields in my UI and creating so many stateful widgets makes me wonder if there is any simpler approach.</p>
  
  <pre><code>import 'package:flutter/services.dart';
  import 'package:flutter/material.dart';
  
  
  void main() =&gt; runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      final title = 'Increment Decrement Demo';
      return MaterialApp(
        title: title,
        home: NumberInputWithIncrementDecrement(),
      );
    }
  }
  
  class NumberInputWithIncrementDecrement extends StatefulWidget {
    @override
    _NumberInputWithIncrementDecrementState createState() =&gt;
        _NumberInputWithIncrementDecrementState();
  }
  
  class _NumberInputWithIncrementDecrementState
      extends State&lt;NumberInputWithIncrementDecrement&gt; {
    TextEditingController _controller = TextEditingController();
  
    @override
    void initState() {
      super.initState();
      _controller.text = "0"; // Setting the initial value for the field.
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Number Field increment decrement'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Row(
            children: &lt;Widget&gt;[
              Expanded(
                flex: 1,
                child: TextFormField(
                  controller: _controller,
                  keyboardType: TextInputType.numberWithOptions(
                      decimal: false, signed: false),
                  inputFormatters: &lt;TextInputFormatter&gt;[
                    WhitelistingTextInputFormatter.digitsOnly
                  ],
                ),
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: &lt;Widget&gt;[
                  MaterialButton(
                    minWidth: 5.0,
                    child: Icon(Icons.arrow_drop_up),
                    onPressed: () {
                      int currentValue = int.parse(_controller.text);
                      setState(() {
                        currentValue++;
                        _controller.text =
                            (currentValue).toString(); // incrementing value
                      });
                    },
                  ),
                  MaterialButton(
                    minWidth: 5.0,
                    child: Icon(Icons.arrow_drop_down),
                    onPressed: () {
                      int currentValue = int.parse(_controller.text);
                      setState(() {
                        print("Setting state");
                        currentValue--;
                        _controller.text =
                            (currentValue).toString(); // decrementing value
                      });
                    },
                  ),
                ],
              ),
              Spacer(
                flex: 2,
              )
            ],
          ),
        ),
      );
    }
  }
  </code></pre>
  
  <p>current output looks some thing like this.</p>
  
  <p><a href="https://i.stack.imgur.com/sn7oY.png" rel="noreferrer"><img src="https://i.stack.imgur.com/sn7oY.png" alt="enter image description here"></a></p>
  
  <p>I am looking for something like the following in a simpler manner like in HTML number input field.</p>
  
  <p><a href="https://i.stack.imgur.com/Z90rM.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Z90rM.png" alt="enter image description here"></a></p>