How to Shift Focus to Next TextField In Flutter?

· 4 min read
How to Shift Focus to Next TextField In Flutter
How to Shift Focus to Next TextField In Flutter

Generally, the Mobile Application Screen has a form which has a multiple Text Input In it. Now when the user clicks on the First TextField Widget and fills the data in it after we need to Shift Focus to Next TextField. So in this article, We will walk through  How to Shift Focus to Next TextField In Flutter?

How to Shift Focus to Next TextField In Flutter?

To Shift Focus to Next TextField Widget. we need to use FocusNode or FocusScopeNode. Consider a code snippet like the below:

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      children: <Widget>[
        TextField(
          decoration: InputDecoration(hintText: "TextField A"),
          textInputAction: TextInputAction.next,
          onSubmitted: (_) => FocusScope.of(context).nextFocus(), // move focus to next
        ),
        TextField(
          decoration: InputDecoration(hintText: "TextField B"),
          textInputAction: TextInputAction.next,
          onSubmitted: (_) => FocusScope.of(context).nextFocus(), // move focus to next
        ),
        TextField(
          decoration: InputDecoration(hintText: "TextField C"),
          textInputAction: TextInputAction.done,
          onSubmitted: (_) => FocusScope.of(context).unfocus(), // submit and hide keyboard
        ),
      ],
    ),
  );
}

We will get output like the below:

Focus to Next TextField In Flutter
Focus to Next TextField In Flutter
  • Displaying Next Icon instead of Done – setting textInputAction parameter to TextInputAction.next
  • Using onFieldSubmitted callback to request the focus node of the next field.
    class FormWidget extends StatelessWidget{    
       final focus = FocusNode();
       @override
       Widget build(BuildContext context) {
        return Form(
          child: SingleChildScrollView(
            padding: EdgeInsets.symmetric(horizontal: 16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                TextFormField(
                  textInputAction: TextInputAction.next,
                  autofocus: true,
                  decoration: InputDecoration(labelText: "Input 1"),
                  onFieldSubmitted: (v){
                    FocusScope.of(context).requestFocus(focus);
                  },
                ),
                TextFormField(
                  focusNode: focus,
                  decoration: InputDecoration(labelText: "Input 2"),
                ),
              ],
            ),
          ),
        );
      }
    }

    For TextFormField use can use onFieldSubmitted. consider a code snippet like the below:

    TextFormField(
              decoration: InputDecoration(hintText: "Username"),
              textInputAction: TextInputAction.next,
              onFieldSubmitted: (_) => FocusScope.of(context).nextFocus(), // focus to next
            ),
    TextFormField(
              decoration: InputDecoration(hintText: "Password"),
              textInputAction: TextInputAction.done,
              onFieldSubmitted: (_) => FocusScope.of(context).unfocus(), // Unfocus and hide keyboard
            ),

    Users can also try below code snippets.

    Row(
                      children: <Widget>[
                        Expanded(
                          child: TextFormField(
                            textInputAction: TextInputAction.next,
                            onChanged: (_) => FocusScope.of(context).nextFocus(),
                              controller:c1 ,)
                        ),
                        SizedBox(
                          width: 20.0,
                        ),
                        Expanded(
                          child: TextFormField(
                            textInputAction: TextInputAction.next,
                            onChanged: (_) => FocusScope.of(context).nextFocus(),
                              controller:c2 ,),
                        ),
                        SizedBox(
                          width: 20.0,
                        ),
                        Expanded(
                          child: TextFormField(
                              controller:c3 ,
                            textInputAction: TextInputAction.next,
                            onChanged: (_) => FocusScope.of(context).nextFocus(),),
                        ),
                        SizedBox(
                          width: 20.0,
                        ),
                        Expanded(
                          child: TextFormField(
                              controller:c4 ,
                            textInputAction: TextInputAction.next,
                            onChanged: (_) => FocusScope.of(context).nextFocus(),),
                        ),
                        SizedBox(
                          width: 20.0,
                        ),
                        Expanded(
                          child: TextFormField(
    
                              controller:c5 ,
                            textInputAction: TextInputAction.next,
                            onChanged: (_) => FocusScope.of(context).nextFocus(),),
                        ),
                        SizedBox(
                          width: 20.0,
                        ),
                        Expanded(
                          child: TextFormField(
                              controller:c6 ,
                            textInputAction: TextInputAction.next,
                            onChanged: (_) => FocusScope.of(context).unfocus(),
                              ),
                        )
                      ],
                    )

Conclusion:

In this article, We have been through How to Shift Focus to Next TextField In Flutter?

Thanks for being with us on a Flutter Journey !!!

Keep Learning !!! Keep Fluttering !!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply