How to show Keyboard automatically for TextfField in Flutter

Parveen Baghel

5 January 2024

When a text field is selected and accepting input, it is said to have “focus.” Generally, users shift focus to a text field by tapping, and developers shift focus to a text field programmatically by using the tools described in this recipe. It is the most important and functioning part of the Flutter app development focus system. We’re gonna use the FocusNode to handle the Keyboard focus.

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
The keyboard focus system can be used by developers to:
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 behavior 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 code side.

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

  @override
  State&lt;KeyboardFocusDemo&gt; createState() =&gt; _KeyboardFocusDemoState();
}

class _KeyboardFocusDemoState extends State&lt;KeyboardFocusDemo&gt; {
  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: &lt;Widget&gt;&#091;
              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 on it or using the keyboard to navigate to it.

Code Explanation

Created the FocusNodes.
Disposed the FocusNode if it’s not in use, to prevent the memory leak.
unfocus() – as the name suggest this function is work to remove the focus from a node.
To Focussed a Node we use this line of code.
FocusScope.of(context).requestFocus(NODE_NAME);

That’s all for this Article.

Conclusion

We learned about some How to use FocusNode for TextField in Flutter 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.