What is Flutter's keyboard focus system?

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.

Using the keyboard focus system

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.

Coding example

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();
              },
            ),
          ],
        ),
      ),
    );
  }
}
Flutter keyboard focus demo app

Code explanation:

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.

Copyright ©2024 Educative, Inc. All rights reserved