Auto Keyboard Focus in Flutter for TextField

In this blog, we’ll explore how to show automatically keyboard focus in Flutter for textField.

When a text field is selected and accepting input, it is said to have “focus.”

Generally, users focus on a text field by tapping, and developers shift focus to a text field programmatically using the tools described in this recipe.

You can also check out our Flutter app development services for more Flutter app development.

keyboard focus system works

Making use of the keyboard focus mechanism developers can use the keyboard focus system too.
You can choose which sequence widgets, when a user navigates with a keyboard, will be highlighted first.
You can choose what happens when a user hits the “tab” key to go on to the next widget that is focusable.
To modify the behaviour of the keyboard when it appears, you can either change the type of keyboard that is displayed or provide custom actions that can be triggered via the keyboard.
By employing the keyboard for focus technique, developers can produce more user-friendly and accessible programs for users who depend on keyboard input.

Let’s go to the code side.

class KeyboardFocusDemo extends StatefulWidget {
  const KeyboardFocusDemo({super.key});

  @override
  State<KeyboardFocusDemo> createState() => _KeyboardFocusDemoState();
}

class _KeyboardFocusDemoState extends State<KeyboardFocusDemo> {
  final FocusNode _nameFocusNode = FocusNode();
  final FocusNode _emailFocusNode = FocusNode();
  final FocusNode _passFocusNode = FocusNode();

  @override
  void dispose() {
    _nameFocusNode.dispose();
    _emailFocusNode.dispose();
    _passFocusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            children: <Widget>[
              TextField(
                focusNode: _nameFocusNode,
                decoration: const InputDecoration(
                    labelText: 'Name', border: OutlineInputBorder()),
                onSubmitted: (value) {
                  _nameFocusNode.unfocus();
                  FocusScope.of(context).requestFocus(_emailFocusNode);
                },
              ),
              const SizedBox(height: 16.0),
              TextField(
                focusNode: _emailFocusNode,
                decoration: const InputDecoration(
                    labelText: 'Email', border: OutlineInputBorder()),
                onSubmitted: (value) {
                  _emailFocusNode.unfocus();
                  FocusScope.of(context).requestFocus(_passFocusNode);
                },
              ),
              const SizedBox(height: 16.0),
              TextField(
                focusNode: _passFocusNode,
                decoration: const InputDecoration(
                    labelText: 'Password', border: OutlineInputBorder()),
                onSubmitted: (value) {
                  _passFocusNode.unfocus();
                },
              ),
            ],
          ),
        ));
  }
}

class KeyboardFocusDemo extends StatefulWidget {

const KeyboardFocusDemo({super.key});

@override

State<KeyboardFocusDemo> createState() => _KeyboardFocusDemoState();

}

class _KeyboardFocusDemoState extends State<KeyboardFocusDemo> {

final FocusNode _nameFocusNode = FocusNode();

final FocusNode _emailFocusNode = FocusNode();

final FocusNode _passFocusNode = FocusNode();

@override

void dispose() {

_nameFocusNode.dispose();

_emailFocusNode.dispose();

_passFocusNode.dispose();

super.dispose();

}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(),

body: Padding(

padding: const EdgeInsets.all(8.0),

child: Column(

children: <Widget>[

TextField(

focusNode: _nameFocusNode,

decoration: const InputDecoration(

labelText: 'Name', border: OutlineInputBorder()),

onSubmitted: (value) {

_nameFocusNode.unfocus();

FocusScope.of(context).requestFocus(_emailFocusNode);

const SizedBox(height: 16.0),

TextField(

focusNode: _emailFocusNode,

decoration: const InputDecoration(

labelText: 'Email', border: OutlineInputBorder()),

onSubmitted: (value) {

_emailFocusNode.unfocus();

FocusScope.of(context).requestFocus(_passFocusNode);

const SizedBox(height: 16.0),

TextField(

focusNode: _passFocusNode,

decoration: const InputDecoration(

labelText: 'Password', border: OutlineInputBorder()),

onSubmitted: (value) {

_passFocusNode.unfocus();

));

}

FocusNode

An essential part of the focus system is the “focus node.” An object that represents a widget that can receive focus is called a focus node.

The focus node of a widget becomes active when a user interacts with it by touching it or using the keyboard to navigate to it.

Output:-