What is Keyboard request Focus, How to handle Keyboard Next Button events in Flutter?
In Every Flutter application, there will be a UI design to enter user data, To take the user inputs we will use TextInput fields inside Form.
When we open the form will it keyboard shown on the first TextField or not.
After filling the First TextField we should navigate to the second TextField
. To direct navigate to the next filed keyboard should show the next button to navigate.
Request focus is used to set automatically the keypad function on TextFiled.
To handle the Keyboard we will use FocusScope widget
Constructor
FocusScope({
Key key,
FocusScopeNode node,
@required Widget child,
bool autofocus = false,
ValueChanged<bool> onFocusChange,
bool canRequestFocus,
bool skipTraversal,
FocusOnKeyCallback onKey,
String debugLabel,
})
|
This FocusScope having the below properties to handle the focus of the Keyboard on the Current UI screen.
FocusScopeNode: which represents a scope node in the focus hierarchy.
FocusNode: which represents a node in the focus hierarchy and has an explanation of the focus system.
Focus: a widget that manages a [FocusNode] and allows easy access to managing focus without having to manage the node.
FocusManager: a singleton that manages the focus and distributes key events to focused nodes.
FocusTraversalPolicy: an object used to determine how to move the focusto other nodes.
FocusTraversalGroup: a widget used to configure the focus traversal policy for a widget subtree.
To show next focus on the keyboard Next button we will use the below function
FocusScope.of(context).nextFocus()
|
To remove keyboard focus we will use
FocusScope.of(context).unfocus()
|
To Handle auto submission of the Form on Keyboard done button by
onSubmitted: (_){}
|
In this function, we can perform Form submission logic. When we tap on Keyboard submit/Done button this function will execute and form data will be submitted.
Simple Example on Show Next Text Field Select Button on Keyboard RequestFocus Android iOS
import 'package:ecommerce/src/homepage/appbar.dart';
import 'package:flutter/material.dart';
class KeyBoradNextButton extends StatelessWidget{
final name = TextEditingController();
final phoneNumber = TextEditingController();
final studentClass = TextEditingController();
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
@override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(title: Text("Keboard Next Button"),backgroundColor: Colors.green,),
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 Course Here'),
textInputAction: TextInputAction.done,
onSubmitted: (_) => FocusScope.of(context).unfocus(),
)),
RaisedButton(
onPressed: () => printOutPut(context),
color: Colors.green,
textColor: Colors.white,
padding: EdgeInsets.fromLTRB(12, 12, 12, 12),
child: Text('Save Details'),
),
],
),
));
}
printOutPut(BuildContext context) {
_scaffoldKey.currentState.showSnackBar(SnackBar(content:
Container(color:Colors.green,child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text( 'Name' + '=' + name.text+"\n"+'Phone Number' + '=' + phoneNumber.text+"\n "+'Course' + '=' + studentClass.text,style: TextStyle(color:Colors.white,fontSize: 20),),
))
));
}
}
|
Tags: Keyboard Next Button, Focus Event, Auto Form Submission
|
Article Contributed By :
|
|
|
|
|
1372 Views |
|