TextInputAction.next Makes the Keyboard Dissapear - flutter

I am using TextFormField in my Flutter app, like in this snippet:
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
TextField(
decoration: InputDecoration(hintText: "TextField A"),
textInputAction: TextInputAction.next,
onSubmitted: (_) => FocusScope.of(context).nextFocus(), // move focus to next
),
TextField(
decoration: InputDecoration(hintText: "TextField B"),
textInputAction: TextInputAction.next,
onSubmitted: (_) => FocusScope.of(context).nextFocus(), // move focus to next
),
TextField(
decoration: InputDecoration(hintText: "TextField C"),
textInputAction: TextInputAction.done,
onSubmitted: (_) => FocusScope.of(context).unfocus(), // submit and hide keyboard
),
],
),
);
}
My problem is that whenever the next field is behind the keyboard, the keyboard just disappears instead of moving to the next focus...
This is a video of the problem:
https://www.youtube.com/watch?v=h-Cv2UpnHrY&feature=youtu.be
As you can see, my wanted behaviour is the focus to move from the email field to the address field, but instead the keyboard disappears and nothing happens.
How can I solve it?

I think you have to create a new object first of all that is..I am using another example just to demonstrate:
final FocusNode _emailFocusNode = FocusNode();
final FocusNode _passwordFocusNode = FocusNode();
TextField(
decoration: InputDecoration(
labelText: 'Email',
hintText: 'test#test.com',
errorText: emailErrorText),
textInputAction: TextInputAction.next,
keyboardType: TextInputType.emailAddress,
controller: _emailController,
focusNode: _emailFocusNode,
onEditingComplete: _newFocusNode
TextField(
decoration: InputDecoration(
labelText: 'Password',
errorText: passwordErrorText,
),
obscureText: true,
textInputAction: TextInputAction.done,
controller: _passwordController,
focusNode: _passwordFocusNode,
}
void _newFocusNode() {
final newFocus=_emailFocusNode?_passwordFocusNode:_emailFocusNode;
FocusScope.of(context).requestFocus(newFocus);
}

Related

Flutter FormBuilderTextField remove autocorrection and other formatters

I have FormBuilderTextField, where user provide his login.
FormBuilderTextField(
textInputAction: TextInputAction.next,
name: 'login',
validator: FormBuilderValidators.required(),
decoration: const InputDecoration(labelText: 'Login'),
),
But keyboard force first letter as Capital, and moreover add space after write one word. How to block this features? I need exatly same phrase like user fill in form
Try setting as follows:
FormBuilderTextField(
textCapitalization: TextCapitalization.none, // Added
autocorrect: false, // Added
textInputAction: TextInputAction.next,
name: 'login',
validator: FormBuilderValidators.required(),
decoration: const InputDecoration(labelText: 'Login'),
you can use autocorrect : false as showing below :
FormBuilderTextField(
autocorrect : false
textInputAction: TextInputAction.next,
name: 'login',
validator: FormBuilderValidators.required(),
decoration: const InputDecoration(labelText: 'Login'),
),

how to create a TextFormField function in flutter

TextFormField function in flutter
A FormField that contains a TextField.
This is a convenience widget that wraps a TextField widget in a FormField.
static formField({
required String label,
String? initialValue,
FormFieldSetter? onSaved,
ValueChanged? onChanged,
Icon? icon,
int? maxLines,
TextEditingController? controller,
TextInputType? keyboard,
}) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 8),
child: TextFormField(
validator: (value) {
if (value!.isEmpty) {
return 'please type the $label above';
}
},
initialValue: initialValue,
controller: controller,
maxLines: maxLines,
onChanged: onChanged,
onSaved: onSaved,
keyboardType: keyboard,
decoration: InputDecoration(
label: Text(label),
prefixIcon: icon,
hintText: 'Type $label here',
border: const OutlineInputBorder(),
),
),
);
}
return Padding(
padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 8),
child: Container(
child: TextFormField(
validator: (value) {
if (value!.isEmpty) {
return 'please type the $label above';
}
},
initialValue: initialValue,
controller: controller,
maxLines: maxLines,
onChanged: onChanged,
onSaved: onSaved,
keyboardType: keyboard,
decoration: InputDecoration(
label: Text(label),
prefixIcon: icon,
hintText: 'Type $label here',
border: const OutlineInputBorder(),
),
),
),
);
i think this will work... wrap the TextFormField inside the container.. if there is any wrong syntax change it

Not able to disable keyboard appearing automatically

The moment I come on this page the keyboard appears automatically, I want to disable that.When someone press on the enter email.I want keyboard to come at that time only.
I have tried every thing nothing seems to work.Can someone please help me out
Form(
child: Column(
children: [
TextFormField(
// focusNode: fEmail,
onFieldSubmitted: (term) {
// fEmail!.unfocus();
FocusScope.of(context).unfocus();
// FocusScope.of(context).requestFocus(fPass);
},
textInputAction: TextInputAction.next,
autofocus: true,
style:TextStyle(color: Colors.black, fontSize: 30),
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Enter Your Email',
hintStyle: TextStyle(color: Colors.white60),
),
),
TextFormField(
onFieldSubmitted: (term) {
fPass!.unfocus();
FocusScope.of(context).unfocus();
// FocusScope.of(context).requestFocus(fButton);
},
focusNode: fPass,
textInputAction: TextInputAction.next,
autofocus: true,
style:TextStyle(color: Colors.black, fontSize: 30),
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Enter Your PassWord',
hintStyle: TextStyle(color: Colors.white60),
),
),
],
),
),
Remove autofocus: true, from your code or set it to autofocus: false,
Refer Focus and text fields here
Refer autofocus property here
You can use focus node to control the behaviour.
If you put autofocus=true in your code it will automatically focus on the topmost textfield widget in the current tree.
put autofocus = false or remove the parameter as it is false by default.
You can use focus Node to control the behaviour.
if you put autofocus: true if your code. this line will automatically focus on the top most Textfield widget.
put autofocus: false in our code it will be disable your keyboard which is opening automatically in the text filed.
Refer Focus and text fields: here
Refer autofocus property: here

How can i change the focus to other textfield after i complete max characters in Flutter?

How do I change the focus to other node after completion max characters without pressing next/done in Flutter ?. How do I pass the control to other TextField using Focus node. I want to pass the control to next textfield after 4 characters of every textfield.
Widget serailKey1() {
return TextField(
controller: controller_key1,
focusNode: _serialKeyFN1,
textAlign: TextAlign.center,
keyboardType: TextInputType.text,
textCapitalization: TextCapitalization.characters,
style: textStyle,
maxLength: 4,
decoration: new InputDecoration(
counterText: "",
border: new OutlineInputBorder(
borderRadius: const BorderRadius.all(
const Radius.circular(0.0),
),
),
),
onEditingComplete: ()=> FocusScope.of(context).requestFocus(_serialKeyFN2),
);
}
Widget serailKey2() {
return TextField(
controller: controller_key2,
focusNode: _serialKeyFN2,
textAlign: TextAlign.center,
keyboardType: TextInputType.text,
style: textStyle,
textCapitalization: TextCapitalization.characters,
maxLength: 4,
decoration: new InputDecoration(
counterText: "",
border: new OutlineInputBorder(
borderRadius: const BorderRadius.all(
const Radius.circular(0.0),
),
),
),
onEditingComplete: ()=> FocusScope.of(context).requestFocus(_serialKeyFN3),
);
}
This works fine for me:
FocusNode fNode = FocusNode();
...
TextField(onChanged: (value){
if(value.length == 4)
FocusScope.of(context).requestFocus(fNode);
}),
TextField(focusNode: fNode),

How to SingleChildScrollView scroll to TextField focus in dialog

I have a problem when show an alert dialog. My AlertDialog too tall (many TextFields). When I click any below TextFields, keyboard makes dialog short and SingleChildScrollView (I wrap my content in it) does not scroll to the TextField which has focus. However, when I type a character on that textfield, SingleChildScrollView works fine, scrolls to that TextField automatically. So, how do SingleChildScrollView scrolls to a TextField when user click in the first time (has focus).
p/s: I tried add a listener into FocusNode, but it does not work.
For example: I will click 'Fullname' field (picture 1) and the keyboard makes dialog short and I can not see the 'Fullname' field (picture 2). When I type a character, the scrollview scroll to that correctly (picture 3).
#override
Widget build(BuildContext context) {
return AlertDialog(
title: Text(
'Dialog Title',
textAlign: TextAlign.center,
),
titleTextStyle: TextStyle(
fontSize: 16.0,
color: Theme.of(context).textTheme.title.color,
fontWeight: FontWeight.w800,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
actions: <Widget>[
FlatButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('Cancel'.toUpperCase()),
),
FlatButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('OK'.toUpperCase()),
),
],
content: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
TextField(
focusNode: _nodePhone,
maxLength: 10,
keyboardType: TextInputType.phone,
decoration: InputDecoration(
labelText: 'Phone number',
),
textInputAction: TextInputAction.next,
onEditingComplete: () {
FocusScope.of(context).requestFocus(_nodeEmail);
},
),
TextField(
focusNode: _nodeEmail,
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
labelText: 'Email',
),
textInputAction: TextInputAction.next,
onEditingComplete: () {
FocusScope.of(context).requestFocus(_nodeFullname);
},
),
TextField(
focusNode: _nodeFullname,
keyboardType: TextInputType.text,
decoration: InputDecoration(
labelText: 'Fullname',
),
textInputAction: TextInputAction.next,
onEditingComplete: () {
FocusScope.of(context).requestFocus(_nodePassword);
},
),
TextField(
focusNode: _nodePassword,
obscureText: true,
keyboardType: TextInputType.text,
decoration: InputDecoration(
labelText: 'Password',
),
textInputAction: TextInputAction.done,
),
],
),
),
);
}
I also have this problem, I manage to solve it by give a controller to SingleChildScrollView then when onTap on TextField. Await for few millisecond for dialog to collapse then scroll to the end of dialog
Here is some sample code
//declare first
ScrollController _scrollController = ScrollController();
//your field code
SingleChildScrollView(
// give a controller
controller: _scrollController,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: < Widget > [
TextField(
focusNode: _nodePhone,
maxLength: 10,
keyboardType: TextInputType.phone,
decoration: InputDecoration(
labelText: 'Phone number',
),
textInputAction: TextInputAction.next,
onEditingComplete: () {
FocusScope.of(context).requestFocus(_nodeEmail);
},
),
//suppose this is your very last textfield
TextField(
focusNode: _nodeEmail,
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
labelText: 'Email',
),
textInputAction: TextInputAction.next,
onEditingComplete: () {
FocusScope.of(context).requestFocus(_nodeFullname);
},
onTap: () {
Future.delayed(Duration(milliseconds: 500), () {
_scrollController.animateTo(
_scrollController.position.maxScrollExtent,
duration: Duration(milliseconds: 200),
curve: Curves.ease);
});
},
),
]
)
);