Hi, guys today we learn to create and implement FocusNode in our flutter project but first, we understand what is FocusNode and where and when we implement it. FocusNode basically focuses on the keyboard event. So let’s suppose you want to control your TextFormFiels widget as soon as the user taps on it, and submit data then you use FocusNode. So, FocusNode class is basically an object that can be used to obtain keyboard focus and handle keyboard events.
How to focus on a TextFormField when a button is tapped?
- Create a
<strong>FocusNode</strong>. - Pass the
<strong>FocusNode</strong>. - Give focus to the next
<strong>TextFormField</strong>when the button is tapped.
class FocusNodePage extends StatefulWidget {
const FocusNodePage({Key? key}) : super(key: key);
@override
State<FocusNodePage> createState() => _FocusNodeState();
}
class _FocusNodeState extends State<FocusNodePage> {
late FocusNode fname;
late FocusNode lname;
late FocusNode age;
late FocusNode email;
late FocusNode submit;
@override
void initState() {
super.initState();
fname = FocusNode();
lname = FocusNode();
age = FocusNode();
email = FocusNode();
submit = FocusNode();
}
@override
void dispose() {
fname.dispose();
lname.dispose();
age.dispose();
email.dispose();
submit.dispose();
super.dispose();
}
As you can see above image use the following steps to create a <strong>FocusNode</strong> instance inside a <strong>initState()</strong> method of a state class, and clean it up in a <strong>dispose()</strong> method.
How to pass FocusNode into the Flutter and TextFormField
TextFormField(
autofocus: true,
focusNode: fname,
keyboardType: TextInputType.text,
enabled: true,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
labelText: 'First Name',
hintText: 'Enter your first name',
border: OutlineInputBorder(
borderSide: BorderSide(color:Colors.teal),
),
),
onFieldSubmitted: (term){
fname.unfocus();
FocusScope.of(context).requestFocus(lname);
},
)
How to pass FocusNode into the Flutter and next TextFormField when the button is tapped?
TextFormField(
onFieldSubmitted: (term){
fname.unfocus();
FocusScope.of(context).requestFocus(lname);
},
)
We will use the <strong>onFieldSubmitted</strong> property inside the TextFormField widget to get unfocus from the current focus TextFormField and get focus on the next TextFormField as soon as the button is pressed or when the keyboard next or done input type is pressed.
In the above example, we have used <strong><em>fname.unfocus()</em></strong> method to get unfocus from the first<strong>TextFormField</strong>area of an instance named fname as soon as the button is tapped.
main.dart file :
import 'package:flutter/material.dart';
class FocusNodePage extends StatefulWidget {
const FocusNodePage({Key? key}) : super(key: key);
@override
State<FocusNodePage> createState() => _FocusNodeState();
}
class _FocusNodeState extends State<FocusNodePage> {
late FocusNode fname;
late FocusNode lname;
late FocusNode age;
late FocusNode email;
late FocusNode submit;
@override
void initState() {
super.initState();
fname = FocusNode();
lname = FocusNode();
age = FocusNode();
email = FocusNode();
submit = FocusNode();
}
@override
void dispose() {
fname.dispose();
lname.dispose();
age.dispose();
email.dispose();
submit.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Focus Node',
home: Scaffold(
appBar: AppBar(
title: Text('Focus Node'),
centerTitle: true,
),
body:Padding(
padding: const EdgeInsets.all(16.0),
child: SingleChildScrollView(
child: Column(
children: [
Text('Personal Info',
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.w800,
color: Colors.green,
),
),
SizedBox(height: 20,),
TextFormField(
autofocus: true,
focusNode: fname,
keyboardType: TextInputType.text,
enabled: true,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
labelText: 'First Name',
hintText: 'Enter your first name',
border: OutlineInputBorder(
borderSide: BorderSide(color:Colors.teal),
),
),
onFieldSubmitted: (term){
fname.unfocus();
FocusScope.of(context).requestFocus(lname);
},
),
SizedBox(height: 10,),
TextFormField(
focusNode: lname,
enabled: true,
keyboardType: TextInputType.text,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
labelText: 'Last Name',
hintText: 'Enter your last name',
border: OutlineInputBorder(
borderSide: BorderSide(color:Colors.teal),
),
),
onFieldSubmitted: (term){
lname.unfocus();
FocusScope.of(context).requestFocus(email);
},
),
SizedBox(height: 10,),
TextFormField(
focusNode: email,
enabled: true,
keyboardType: TextInputType.emailAddress,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
labelText: 'Email',
hintText: 'Enter your email',
border: OutlineInputBorder(
borderSide: BorderSide(color:Colors.teal),
),
),
onFieldSubmitted: (term){
email.unfocus();
FocusScope.of(context).requestFocus(age);
},
),
SizedBox(height: 10,),
TextFormField(
focusNode: age,
enabled: true,
keyboardType: TextInputType.text,
textInputAction: TextInputAction.done,
decoration: InputDecoration(
labelText: 'Age',
hintText: 'Enter your age',
border: OutlineInputBorder(
borderSide: BorderSide(color:Colors.teal),
),
),
onFieldSubmitted: (term){
age.unfocus();
FocusScope.of(context).requestFocus(submit);
},
),
SizedBox(height: 10,),
ElevatedButton(
focusNode: submit,
onPressed: (){},
child: Text('Submit'),
style: ElevatedButton.styleFrom(
primary: Colors.green,
minimumSize: const Size.fromHeight(50),
),
),
],
),
),
)
),
);
}
}
Thanks for reading this article ❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
If we got something wrong? Let me know in the comments. we would love to improve.
you also read this articles like; how to implement an alert dialog box in a flutter, how to implement an alert dialog box in a flutter, How to create Autocomplete TextField & Autofill Services.
