What is FocusNode in Flutter

What is FocusNode

As per the name FocusNode so our basic idea is focusing on something but what? So, the answer is When a textField is selected and accepting input from a user at that time it is focused for that we have to tap on the textField but you do not need to do tapping without tapping you need to do focus on another TextField in that requirement you can use the FocusNode(). 

How to use the FocusNode with the example:-

We are taking an example to Focus on the password text field on pressed of the floating Button Let's start with the following steps:

1. Create a FocusNode.

we are starting with the create a FocusNode variable for the text field. 

final _passwordFocusNode = FocusNode();

view raw main.dart hosted with ❤ by GitHub

Note: you need to call dispose of the method of the FocusNode when you have finished using it and not further needed. This ensures that you discard any resources used by the object.

	@override
	void dispose() {
	_passwordFocusNode.dispose();
	super.dispose();
	}

view raw main.dart hosted with ❤ by GitHub

2. Pass the FocusNode to a TextField.

In this, we have to pass the FocusNode in the specific text field which we are passing in the text field as per requirement. In the example, I have given two text fields one for Username and the second, for the Password, we are passing the focusNode to the password text field with the use of property focusNode.

	TextField(
	decoration: InputDecoration(
	hintText: 'Enter Password',
	),
	textAlign: TextAlign.justify,
	keyboardType: TextInputType.text,
	textInputAction: TextInputAction.done,
	obscureText: true,
	obscuringCharacter: "*",
	focusNode: _passwordFocusNode,
	),

view raw main.dart hosted with ❤ by GitHub

3.Give focus to the TextField onPressed on the button.

The last step on Pressed of the floating button focuses the Password Textfield with the use of the requestFocus() method for focusing on the text field. 

So, here I have shared the screens in which you can see the text field for the username & password and the login button for retrieving data from the text field.

Full Code :

	import 'package:flutter/material.dart';
	void main() {
	runApp(MyApp());
	}
	class MyApp extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	return MaterialApp(
	title: 'Flutter Demo',
	theme: ThemeData(
	primarySwatch: Colors.purple,
	accentColor: Colors.orange,
	),
	home: MyHomePage(),
	);
	}
	}
	class MyHomePage extends StatefulWidget {
	@override
	_MyHomePageState createState() => _MyHomePageState();
	}
	class _MyHomePageState extends State<MyHomePage> {
	final _passwordFocusNode = FocusNode();
	@override
	void dispose() {
	_passwordFocusNode.dispose();
	super.dispose();
	}
	@override
	Widget build(BuildContext context) {
	return Scaffold(
	appBar: AppBar(
	title: Text("Example FocsNode"),
	),
	body: Container(
	margin: EdgeInsets.all(20),
	child: Column(
	mainAxisAlignment: MainAxisAlignment.center,
	children: [
	TextField(
	decoration: InputDecoration(
	hintText: 'Enter Username',
	),
	textAlign: TextAlign.justify,
	keyboardType: TextInputType.name,
	autofocus: true,
	textInputAction: TextInputAction.next,
	),
	TextField(
	decoration: InputDecoration(
	hintText: 'Enter Password',
	),
	textAlign: TextAlign.justify,
	keyboardType: TextInputType.text,
	textInputAction: TextInputAction.done,
	obscureText: true,
	obscuringCharacter: "*",
	focusNode: _passwordFocusNode,
	),
	],
	),
	),
	floatingActionButton: FloatingActionButton(
	backgroundColor: Colors.teal,
	onPressed: () => _passwordFocusNode.requestFocus(),
	tooltip: 'Focus Second Text Field',
	child: const Icon(
	Icons.whatshot_rounded,
	color: Colors.white,
	),
	),
	);
	}
	}

view raw main.dart hosted with ❤ by GitHub

Example Video :