Flutter: keyboard actions and next focus field

When our application has many textfields that require to display the action key in a field and handle the next focus field. In this post, I will demonstrate how to show keyboard actions in an application with the form input that contains the fields.

What is the keyboard actions?

Keyboard action is the key that indicates the action of the current field when the users tap into it. Example the below images show two different keys that are the next and done action. The next action usually uses in the middle field of the form that will drive the focus to the next field when user tap on it. The done action indicate that is the last field of the form and process the behaviour of form action.

In the beginning, Flutter didn’t support the keyboard actions and there had the issue that was reported by Eric Seidel. Google proposes the solution to display the keyboards’ action in the post https://github.com/flutter/engine/pull/5620.

To show the keyboard action when the text field is focused. We need to declare the textInputAction in TextFormField widget.

Example:

TextFormField( 
  ...
  textInputAction: TextInputAction.next,
  ...
)

‘Next’ action in Android

TextFormField( 
  ...
  textInputAction: TextInputAction.done,
  ...
)

‘Done’ action in Android

After displaying the keyboard action, we need to handle their behaviour when the users hit. In the Flutter Textfield, onFieldSubmitted is the place to handle the action.

onFieldSubmitted: (term){
  // process
}

How do we process for the next focus?

Each Textfield has a focusnode that help us easy to control the field action base on this attribute. When user tap on the keyboard’s action, the current Textfield need to unfocus and request next Textfield focus. The code snipe below demonstrate for that:

onFieldSubmitted: (term){
  currentNode.unfocus();
  FocusScope.of(context).requestFocus(nextFocus);
}

You can see the handling of done action in my BMI sample app or the source code of handle keyboard action

var _ageController = TextEditingController();
var _heightController = TextEditingController();
var _weightController = TextEditingController();
final FocusNode _ageFocus = FocusNode();  
final FocusNode _heightFocus = FocusNode();  
final FocusNode _weightFocus = FocusNode();
var _mainPartView = Container(
  width: 380.0,
  height: 240.0,
  color: Colors.grey,
  child: Column(
    children: <Widget>[
      TextFormField(
        controller: _ageController,
        keyboardType: TextInputType.number,
        textInputAction: TextInputAction.next,
        focusNode: _ageFocus,
        onFieldSubmitted: (term){
          _fieldFocusChange(context, _ageFocus, _heightFocus);
        },
        decoration: InputDecoration(
          labelText: 'Age',
          hintText: 'Age',
          icon: Icon(Icons.person_outline),
          fillColor: Colors.white,
        ),
      ),
      TextFormField(
        controller: _heightController,
        keyboardType: TextInputType.number,
        textInputAction: TextInputAction.next,
        focusNode: _heightFocus,
        onFieldSubmitted: (term) {
          _fieldFocusChange(context, _heightFocus, _weightFocus);
        },
        decoration: InputDecoration(
            labelText: _heightMessage,
            hintText: _heightMessage,
            icon: Icon(Icons.assessment),
            fillColor: Colors.white,
        ),
      ),
      TextFormField(
        controller: _weightController,
        keyboardType: TextInputType.number,
        textInputAction: TextInputAction.done,
        focusNode: _weightFocus,
        onFieldSubmitted: (value){
          _weightFocus.unfocus();
          _calculator();
        },
        decoration: InputDecoration(
            labelText: _weightMessage,
            hintText: _weightMessage,
            icon: Icon(Icons.menu),
            fillColor: Colors.white
        ),
      ),
      Padding(padding: EdgeInsets.all(4.5)),
      Center(
        child: RaisedButton(
          onPressed: _calculator,
          color: Colors.pinkAccent,
          child: Text(
            'Calculate',
            style: TextStyle(fontSize: 16.9),
          ),
          textColor: Colors.white70,
        ),
      )
    ],
  ),
);
_fieldFocusChange(BuildContext context, FocusNode currentFocus,FocusNode nextFocus) {
    currentFocus.unfocus();
    FocusScope.of(context).requestFocus(nextFocus);  
}

Summary — This is the small note but I hope it saves a lot of time to find out the solution handle the action and next focus.

The BMI screen after applying the key actions and focus.

The Flutter Pub is a medium publication to bring you the latest and amazing resources such as articles, videos, codes, podcasts, etc. about this great technology to teach you how to build beautiful apps with it. You can find us on Facebook, Twitter, and Medium or learn more about us here. We’d love to connect! And if you are a writer interested in writing for us, then you can do so through these guidelines.