Flutter Form with Focus Node

Implementation of a form in flutter with using the widget Form(). This form uses focusNode:.

Implementation

This is actually not a complete project, in this repository, I showed how to implement a form correctly with the focus node.

This project demonstrates how TextFormFields() communicate with each other, how to pass FocusNode() instance to any TextFormFields(). Also, it handles all active focus nodes by clicking dropdown menu.

Form(
          key: _formGlobalKey,
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              children: <Widget>[
              
                TextFormField(
                  focusNode: _textFocusNode1,
                  textInputAction: TextInputAction.next,
                  onFieldSubmitted: (_) {
                    // PASS THE FOCUS NODE TO NEXT FIELD
                    FocusScope.of(context).requestFocus(_textFocusNode2);
                  },  
                ),

                TextFormField(
                  focusNode: _textFocusNode2,
                  textInputAction: TextInputAction.next,
                  onFieldSubmitted: (_) {
                    // DON'T HAVE NEXT TEXT FIELD, UNFOCUS FOCUS-NODE
                    _textFocusNode2.unfocus(),
                  },
                  
                ),
   
                DropdownButtonFormField(
                  
                  //...some codes are omitted
                  
                  onChanged: (value) {
                    setState(() {
                      FocusScope.of(context).requestFocus(new FocusNode());
                      _selectedText = value;
                    });
                  },
                  
                  //... other codes like decoration, items etc.
                ),
                    
             ],
         ),
     ),
),

Putting this on the dropdown will unfocus all active focus node.

onChanged: (value) {
           setState(() {
                FocusScope.of(context).requestFocus(new FocusNode());
                _selectedText = value;
            });     
},

Preview

Getting Started

1. Download Flutter SDK.
2. Download Android Studio and install flutter plugin.
3. [OPTIONAL] Download VS Code and install flutter plugin in it. (If you want to code in VS Code only, but you must have Android Studio installed on your system.)
4. Clone this repository, Terminal: https://github.com/utpal-barman/Flutter-Form-with-Focus-Node.git
5. Run the app, Debug > Run without debugging in VS Code, also you can run the app with terminal by flutter run

Find more information to get started check the official documentation.

How to Contribute

You can submit feedback and report bugs as Github issues. Please be sure to include your operating system, device, version number, and steps to reproduce reported bugs.

Report a Github Issue

Request or submit a feature 📮

Would you like to request a feature? Please get in touch with me on LinkedIn , Telegram

If you’d like to contribute code with a Pull Request, please make sure to follow code submission guidelines. Create your own branch and then pull a request.

Spread the word 🐥

To learn more about me, join the conversation:

• LinkedIn
• Skype
• Telegram
• Facebook
• Instagram

Contributor

_{Utpal Barman}

License

This app is available under the MIT license. Free for commercial and non-commercial use.