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:
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.
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:
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.
Please Wait...
No any Comments on this Article