RequestFocus is a functionality in mobile app development where developer can show a Next button on Keyboard or Keypad. RequestFocus is used with multiple TextField widgets. It allow user to navigate to next TextField component without minimizing the keypad. The textInputAction: TextInputAction.next property is used to show the NEXT button on keypad which would navigate to next TextField widget. So in this tutorial we would create tutorial on Flutter Show Next Text Field Select Button on Keyboard RequestFocus Android iOS Example Tutorial.
Contents in this project Flutter Show Next Text Field Select Button on Keyboard RequestFocus Android iOS Example Tutorial:
1. Open your project’s main.dart file and import material.dart package.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and here we would call our main MyApp Root class.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our main MyApp class extends StatelessWidget. In this class we would call the Home() class in widget Build area.
|
1 2 3 4 5 6 7 8 9 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Flutter Requestfocus Example')), body: Center(child: Home()))); } } |
4. Creating Home class extends StatefulWidget. In this class we would create the createState() method with HomeState which allow us to use the State in given class tree.
|
1 2 3 |
class Home extends StatefulWidget { HomeState createState() => HomeState(); } |
5. Creating our main Child class named as HomeState extends State. In this class we would make all the TextField widgets.
|
1 2 3 4 5 |
class HomeState extends State<Home> { } |
6. Creating 3 TextEditingController named as name, phoneNumber, studentClass. TextEditingController is used to extract value from Text Field widgets.
|
1 2 3 |
final name = TextEditingController(); final phoneNumber = TextEditingController(); final studentClass = TextEditingController(); |
7. Creating a function named as showValues. Inside this function we would print all the TextField widgets entered values on Terminal screen on button click event.
|
1 2 3 4 5 |
showValues(BuildContext context) { print('Name' + '=' + name.text); print('Phone Number' + '=' + phoneNumber.text); print('Class' + '=' + studentClass.text); } |
8. Creating Widget Build Area -> Scaffold Widget -> Center Widget -> Column Widget. Inside the Column widget we would put all 3 Text Field widget with 1 Raised Button widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
Widget build(BuildContext context) { return Scaffold( body: Center( child: Column( children: <Widget>[ Container( ], ), )); } } |
9. Creating 3 TextField widget with 1 Raised Button widget.
- controller :- Used to set the TextEditingController which would use to get entered value from Text Field widget.
- autocorrect :- Used to enable Auto Correction.
- decoration :- To decorate the Text Field widget like setting up Hint Text.
- textInputAction :- TextInputAction.next is used to show the NEXT button on keypad.
- textInputAction: TextInputAction.done is used to set the Done button on Keypad.
- onEditingComplete :- FocusScope.of(context).nextFocus() To command the existing selected TextField widget so when user click on NEXT button it will navigate to next TextField widget.
- onSubmitted: (_) :- FocusScope.of(context).unfocus() is used to set the final Submit action on keypad which would minimize the keypad.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
Container( width: 320, padding: EdgeInsets.all(10.0), child: TextField( controller: name, autocorrect: true, decoration: InputDecoration(hintText: 'Enter Name Here'), textInputAction: TextInputAction.next, onEditingComplete: () => FocusScope.of(context).nextFocus(), )), Container( width: 320, padding: EdgeInsets.all(10.0), child: TextField( controller: phoneNumber, autocorrect: true, decoration: InputDecoration(hintText: 'Enter Phone Number Here'), textInputAction: TextInputAction.next, onEditingComplete: () => FocusScope.of(context).nextFocus(), )), Container( width: 320, padding: EdgeInsets.all(10.0), child: TextField( controller: studentClass, autocorrect: true, decoration: InputDecoration(hintText: 'Enter Class Here'), textInputAction: TextInputAction.done, onSubmitted: (_) => FocusScope.of(context).unfocus(), )), RaisedButton( onPressed: () => showValues(context), color: Colors.green, textColor: Colors.white, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), child: Text('Show All Entered Values in Terminal'), ), |
10. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Flutter Requestfocus Example')), body: Center(child: Home()))); } } class Home extends StatefulWidget { HomeState createState() => HomeState(); } class HomeState extends State<Home> { final name = TextEditingController(); final phoneNumber = TextEditingController(); final studentClass = TextEditingController(); showValues(BuildContext context) { print('Name' + '=' + name.text); print('Phone Number' + '=' + phoneNumber.text); print('Class' + '=' + studentClass.text); } @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Column( children: <Widget>[ Container( width: 320, padding: EdgeInsets.all(10.0), child: TextField( controller: name, autocorrect: true, decoration: InputDecoration(hintText: 'Enter Name Here'), textInputAction: TextInputAction.next, onEditingComplete: () => FocusScope.of(context).nextFocus(), )), Container( width: 320, padding: EdgeInsets.all(10.0), child: TextField( controller: phoneNumber, autocorrect: true, decoration: InputDecoration(hintText: 'Enter Phone Number Here'), textInputAction: TextInputAction.next, onEditingComplete: () => FocusScope.of(context).nextFocus(), )), Container( width: 320, padding: EdgeInsets.all(10.0), child: TextField( controller: studentClass, autocorrect: true, decoration: InputDecoration(hintText: 'Enter Class Here'), textInputAction: TextInputAction.done, onSubmitted: (_) => FocusScope.of(context).unfocus(), )), RaisedButton( onPressed: () => showValues(context), color: Colors.green, textColor: Colors.white, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), child: Text('Show All Entered Values in Terminal'), ), ], ), )); } } |
Screenshots:
