Auto Keyboard Focus in Flutter for TextField

Sakshi Rai

23 December 2024

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:-

Auto Keyboard Focus in Flutter for TextField

Keyboard Focus in Flutter as the name suggests, manages the focus node. It is the most important and functioning part of Flutter’s.

That’s all for this Article.

Conclusion

We learned about How to show automatically keyboard focus in Flutter for textField in this blog.

Visit the link for additional information on the Keyboard Focus in Flutter.

Thanks for reading this blog. You can also check other blogs from here for more knowledge.