In Flutter, the keyboard focus system allows us to manage the focus of widgets in response to user input from the keyboard. It provides a way to customize the focus system's behavior to suit our application's needs.
The key component of the focus system is the "focus node." A focus node is an object that represents a widget that can receive focus. When a user interacts with a widget by tapping or navigating to it using the keyboard, the widget's focus node becomes active.
Developers can use the keyboard focus system to:
Control the order in which sequence widgets will receive focus when a user navigates using the keyboard.
Control what occurs when a user presses the “tab” key to navigate to the next focusable widget.
Change the type of keyboard that is displayed or offer custom actions that can be triggered from the keyboard to alter how the keyboard behaves when it appears.
Create more accessible user-friendly applications for users who rely on keyboard input by using the keyboard for focus approach.
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Keyboard Focus Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: KeyboardDemo(), ); } } class KeyboardDemo extends StatefulWidget { @override _KeyboardDemoState createState() => _KeyboardDemoState(); } class _KeyboardDemoState extends State<KeyboardDemo> { final FocusNode _nameFocusNode = FocusNode(); final FocusNode _emailFocusNode = FocusNode(); @override void dispose() { _nameFocusNode.dispose(); _emailFocusNode.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Keyboard Focus Demo'), ), body: Padding( padding: EdgeInsets.all(16.0), child: Column( children: <Widget>[ TextField( focusNode: _nameFocusNode, decoration: InputDecoration( labelText: 'Name', ), onSubmitted: (value) { // Handle Name field submission _nameFocusNode.unfocus(); FocusScope.of(context).requestFocus(_emailFocusNode); }, ), SizedBox(height: 16.0), TextField( focusNode: _emailFocusNode, decoration: InputDecoration( labelText: 'Email', ), onSubmitted: (value) { // Handle Email field submission _emailFocusNode.unfocus(); }, ), ], ), ), ); } }
Here’s an explanation of the code:
Line 18: We define a new class named KeyboardDemo
, which extends the StatefulWidget
class. It represents a widget that can change its state.
Line 23: This line defines a new class named _KeyboardDemoState
, which extends the State
class. It represents the mutable state of the KeyboardDemo
widget.
Lines 24–25: We declare two FocusNode
objects, _nameFocusNode
and _emailFocusNode
, which are used to manage the focus of the text fields.
Lines 27–32: We create an override method that is called when the state object is removed from the widget tree. It is used to clean up resources which in this case is the disposing of the FocusNode
objects.
Line 36–64: We create a Flutter widget tree with Scaffold
as the root widget. Scaffold
contains an AppBar
for the title and a Column
as the body. Inside Column
, there are two TextField
widgets for entering name and email, respectively. When the Name
field is submitted, it unfocuses the name field and requests focus for the email field. Similarly, when the Email
field is submitted, it unfocuses the email field.