How to Add Done Button in Number Keyboard In Flutter??

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.