https://github.com/utpal-barman/flutter-form-with-focus-node
This a flutter demo with the correct use of Focus Node in form.
https://github.com/utpal-barman/flutter-form-with-focus-node
dart flutter flutter-demo flutter-form focusnode form
Last synced: 27 days ago
JSON representation
This a flutter demo with the correct use of Focus Node in form.
- Host: GitHub
- URL: https://github.com/utpal-barman/flutter-form-with-focus-node
- Owner: utpal-barman
- Created: 2020-01-08T08:53:54.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-08-20T04:53:47.000Z (almost 6 years ago)
- Last Synced: 2025-10-05T01:18:50.988Z (8 months ago)
- Topics: dart, flutter, flutter-demo, flutter-form, focusnode, form
- Language: Dart
- Size: 3.03 MB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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: [
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](https://flutter.dev/docs/get-started/install) Flutter SDK.
3. [Download](https://developer.android.com/studio/) Android Studio and install flutter plugin.
3. [OPTIONAL] [Download](https://code.visualstudio.com/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](https://flutter.dev/docs/get-started/editor?tab=androidstudio).
## 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](https://github.com/utpal-barman/Flutter-Form-with-Focus-Node/issues/new)
### Request or submit a feature :postbox:
Would you like to request a feature? Please get in touch with me on [LinkedIn](https://www.linkedin.com/in/utpal-barman/) , [Telegram](https://t.me/utpal_barman)
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 :hatched_chick:
To learn more about me, join the conversation:
- [LinkedIn](https://www.linkedin.com/in/utpal-barman/)
- [Skype](https://join.skype.com/invite/YKZe1ad0yuyK)
- [Telegram](https://t.me/utpal_barman)
- [Facebook](https://www.facebook.com/utpal777)
- [Instagram](https://www.instagram.com/utpal_barman_/)
## Contributor
## License
This app is available under the MIT license. Free for commercial and non-commercial use.
