How to Shift Focus to Next TextField in Flutter

In this example, we will show you how to enable Next focus, or Done the key on the keyboard so that the user can shift the focus on the next TextField or TextFormField in Flutter. See the example below:

How to Enable Next Focus on TextField in Flutter:

TextField(
    textInputAction: TextInputAction.next,
)

Whenever this Textfield gets focused, the keyboard will popup with the next button like below:

Here, the blue button at the bottom right is the next button, whenever user presses this button, the focus will shift to the next text field. On the iOS keyboard, there will be written "Next" instead of the next icon.

How to Enable Done Keyboard Button on TextField:

TextField(
    textInputAction: TextInputAction.done,
)

When the user enters all the info in the form, at the last TextField, you can add a "Done" button instead of "Next" using the above code. The output will look like below:

Full App Example:

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("Next Focus on TextField"),
            backgroundColor: Colors.redAccent
          ),
          
          body: Container(
              padding: EdgeInsets.all(20),
              child: Column(
                 children: [
                    TextField(
                       decoration: InputDecoration( 
                          hintText: "TextField One"
                       ),
                       textInputAction: TextInputAction.next,
                    ),

                    TextField(
                       decoration: InputDecoration( 
                          hintText: "TextField Two"
                       ),
                       textInputAction: TextInputAction.next,
                    ),

                    TextField(
                       decoration: InputDecoration( 
                          hintText: "TextField Three"
                       ),
                       textInputAction: TextInputAction.done,
                    ),
                 ],
              )
          )
       );
  }
}

In this way, you can enable the "Next" or "Done" button on the keyboard of TextField in Flutter.