Learn how to shift focus to the next TextField or TextFormField in flutter applications. The whole idea is that when you’re done typing text in one TextField, we want our application to navigate to the next TextField when the Done key on the Keyboard is pressed. Enabling Next focus on TextFormField improves user experience and makes your application looks professional. You can easily do it by applying below examples:

Solution one: Easy way to enable next focus on TextField

TextField(
    textInputAction: TextInputAction.next,
)

Setting textInputAction: TextInputAction.next will make the above TextField focus when the blue next button is clicked on the previous TextField. This will add a next button to the keyaobard instead of a Done button.

Solution Two: Enable Done Keyboard Button on TextField or TextFormField

TextField(
    textInputAction: TextInputAction.done,
)

Also, setting textInputAction: TextInputAction.done will add a Done button to the keyboard so that the user can click on it to exit the keyboard or move to the next TextFormField. Try it and see how it works easily.  

Full example of using above solution one and two:

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> { 

  @override
  Widget build(BuildContext context) { 
    return  Scaffold(
          appBar: AppBar(
            title: Text("My flutter application appBar"),
            backgroundColor: Colors.redAccent
          ),
          
          body: Container(
              padding: EdgeInsets.all(10),
              child: Form(
                    child: Column(
                   children: [
                    TextField(
                       decoration: InputDecoration( 
                          hintText: "First TextField"
                       ),
                       textInputAction: TextInputAction.next,
                    ),

                    TextField(
                       decoration: InputDecoration( 
                          hintText: "Second TextField"
                       ),
                       textInputAction: TextInputAction.next,
                    ),
                    TextField(
                       decoration: InputDecoration( 
                          hintText: "Third TextField"
                       ),
                       textInputAction: TextInputAction.next,
                    ),
                    TextField(
                       decoration: InputDecoration( 
                          hintText: "Fourth TextField"
                       ),
                       textInputAction: TextInputAction.done,
                    ),
                 ],
              )
            )
          )
       );
  }
}

Flutter example to shift focus to next TextField by clicking the keyboard next button. So, with the above example, the first three TextField will auto focus to the next TextFormField when the user is done typing text. The fourth TextField will display a Done key on the keyboard instead of a Done button.

Solution Three: Enable Next Focus on TextField by using FocusNode in flutter:

class MyApp extends StatelessWidget{
  // A unique key for the signupForm only
final _signUPFormKey = GlobalKey<FormState>();
final _userNameController = TextEditingController();
final _fullNameController = TextEditingController();
final _phnNumbController = TextEditingController();
final _passwdController = TextEditingController();
final _comfPasswdController = TextEditingController();

// Focus node
FocusNode _focusNodeUserName = FocusNode();
FocusNode _focusNodephnNumb = FocusNode();
FocusNode _focusNodepasswd = FocusNode();
FocusNode _focusNodeComfPasswd = FocusNode();

  @override
  Widget build(BuildContext context) { 
    return  Scaffold(
          appBar: AppBar(
            title: Text("My flutter application appBar"),
            backgroundColor: Colors.redAccent
          ),
          
          body: Form(
  key: _signUPFormKey,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      // Full Name InputField
      TextFormField(
        controller: _fullNameController,
        keyboardType: TextInputType.text,
        onFieldSubmitted: (text){
          FocusScope.of(context).requestFocus(_focusNodeUserName);
        },
      ),
      // Full Name InputField
      TextFormField(
        controller: _userNameController,
        focusNode: _focusNodeUserName,
        keyboardType: TextInputType.text,
        cursorColor: AppColors.black,
        onFieldSubmitted: (text){
          FocusScope.of(context).requestFocus(_focusNodephnNumb);
        },
      ),
      // Full Name InputField
      TextFormField(
        controller: _phnNumbController,
        focusNode: _focusNodephnNumb,
        keyboardType: TextInputType.number,
        cursorColor: AppColors.black,
        onFieldSubmitted: (text){
          FocusScope.of(context).requestFocus(_focusNodepasswd);
        },
      ),
      TextFormField(
        controller: _passwdController,
          focusNode: _focusNodepasswd,
          keyboardType: TextInputType.visiblePassword,
        decoration:InputDecoration(
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(22.0),
            borderSide: BorderSide.none,
          ),
          labelText: "Password",
        onFieldSubmitted: (text){
          FocusScope.of(context).requestFocus(_focusNodeComfPasswd);
        },
      ),
      TextFormField(
        controller: _comfPasswdController,
        focusNode: _focusNodeComfPasswd,
        keyboardType: TextInputType.visiblePassword,
        obscureText: true,
      ),

    ],
  ),
);
}
}

You have to declare and set different focusNode for each TextField then when you want to switch to the next Focus You use  FocusScope.of(context).requestFocus(focusNode);