TextFormField, which integrates with the聽Form Widget. This is a convenience widget that wraps a TextField Widget in a FormField. So in this article, We will go through how to add a done button in the number keyboard in flutter.
Let’s dive into it.
How to Add Done Button in Number Keyboard In Flutter ??
Follow the below steps to perform the same action. Here we need to change
keyboardType: TextInputType.number
to
keyboardType: TextInputType.numberWithOptions(signed: true, decimal: true)
You can also take a look at the plugin like https://pub.dev/packages/keyboard_actions.
import 'package:flutter/material.dart'; import 'package:keyboard_actions/keyboard_actions.dart'; //... FocusNode _nodeText1 = FocusNode(); FocusNode _nodeText2 = FocusNode(); FocusNode _nodeText3 = FocusNode(); FocusNode _nodeText4 = FocusNode(); FocusNode _nodeText5 = FocusNode(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Keyboard Actions Sample"), ), body: FormKeyboardActions( keyboardActionsPlatform: KeyboardActionsPlatform.ALL, //optional keyboardBarColor: Colors.grey[200], //optional nextFocus: true, //optional actions: [ KeyboardAction( focusNode: _nodeText1, ), KeyboardAction( focusNode: _nodeText2, closeWidget: IconButton( icon: Icon(Icons.close), onPressed: () {}, ), ), KeyboardAction( focusNode: _nodeText3, onTapAction: () { showDialog( context: context, builder: (context) { return AlertDialog( content: Text("Custom Action"), actions: <Widget>[ FlatButton( child: Text("OK"), onPressed: () => Navigator.of(context).pop(), ) ], ); }); }, ), KeyboardAction( focusNode: _nodeText4, displayCloseWidget: false, ), KeyboardAction( focusNode: _nodeText5, closeWidget: Padding( padding: EdgeInsets.all(5.0), child: Text("CLOSE"), ), ), ], child: Padding( padding: const EdgeInsets.all(15.0), child: SingleChildScrollView( child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[ TextField( keyboardType: TextInputType.number, focusNode: _nodeText1, decoration: InputDecoration( hintText: "Input Number", ), ), TextField( keyboardType: TextInputType.text, focusNode: _nodeText2, decoration: InputDecoration( hintText: "Input Text with Custom Close Widget", ), ), TextField( keyboardType: TextInputType.number, focusNode: _nodeText3, decoration: InputDecoration( hintText: "Input Number with Custom Action", ), ), TextField( keyboardType: TextInputType.text, focusNode: _nodeText4, decoration: InputDecoration( hintText: "Input Text without Close Widget", ), ), TextField( keyboardType: TextInputType.number, focusNode: _nodeText5, decoration: InputDecoration( hintText: "Input Number with Custom Close Widget", ), ), ], ), ), ), ), ); }
Our final output will look like the below:

You don’t need a done button just wrap MaterialApp with a GestureDetector.
Conclusion:
Thanks for being with us on a Flutter Journey !!! Stay Connected 馃檪
Let us know in the comments what were the methods you have used before this article!!
So in this article, We have been through how to add the done button in the number keyboard in Flutter.
Keep Learning!!! Keep Fluttering!!!
Don’t forget to leave your valuable feedback right below!!
A lot of amazing content coming up your way !!!!!! Stay Tuned 馃檪
Flutter Agency聽is our portal Platform dedicated to聽Flutter Technology聽and聽Flutter Developers. The portal is full of cool resources from Flutter like聽Flutter Widget聽Guide,聽Flutter Projects,聽Code libs聽and etc.
Flutter Agency聽is one of the most popular online portals dedicated to聽Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of聽Flutter.