Create number input field in flutter with increment/decrement buttons attached to the field. I have laid out my Number input widget as shown below. I think I will go ahead with this approach until someone has any different idea for the same.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 | import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; void main() => 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() => _NumberInputWithIncrementDecrementState(); } class _NumberInputWithIncrementDecrementState extends State<NumberInputWithIncrementDecrement> { 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: Center( child: Container( width: 60.0, foregroundDecoration: BoxDecoration( borderRadius: BorderRadius.circular(5.0), border: Border.all( color: Colors.blueGrey, width: 2.0, ), ), child: Row( children: <Widget>[ Expanded( flex: 1, child: TextFormField( textAlign: TextAlign.center, decoration: InputDecoration( contentPadding: EdgeInsets.all(8.0), border: OutlineInputBorder( borderRadius: BorderRadius.circular(5.0), ), ), controller: _controller, keyboardType: TextInputType.numberWithOptions( decimal: false, signed: true, ), inputFormatters: <TextInputFormatter>[ WhitelistingTextInputFormatter.digitsOnly ], ), ), Container( height: 38.0, child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Container( decoration: BoxDecoration( border: Border( bottom: BorderSide( width: 0.5, ), ), ), child: InkWell( child: Icon( Icons.arrow_drop_up, size: 18.0, ), onTap: () { int currentValue = int.parse(_controller.text); setState(() { currentValue++; _controller.text = (currentValue) .toString(); // incrementing value }); }, ), ), InkWell( child: Icon( Icons.arrow_drop_down, size: 18.0, ), onTap: () { int currentValue = int.parse(_controller.text); setState(() { print("Setting state"); currentValue--; _controller.text = (currentValue > 0 ? currentValue : 0) .toString(); // decrementing value }); }, ), ], ), ), ], ), ), ), ), ); } } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
