Flutter Show Next Text Field Select Button on Keyboard RequestFocus

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.

2. Create void main runApp() method and here we would call our main MyApp Root class.

3. Creating our main MyApp class extends StatelessWidget. In this class we would call the Home() class in widget Build area.

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.

5. Creating our main Child class named as HomeState extends State. In this class we would make all the TextField widgets.

6. Creating 3 TextEditingController named as name, phoneNumber, studentClass. TextEditingController is used to extract value from Text Field widgets.

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.

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.

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.

10. Complete source code for main.dart file:

Screenshots:

Flutter Show Next Text Field Select Button on Keyboard RequestFocus

Flutter Show Next Text Field Select Button on Keyboard RequestFocus

Leave a Reply

Your email address will not be published.