When I click the autofill on my email TextFormField, I want both email and password to be autofilled. However, my app only auto-fills the email when I autofill, and I have to click on the password TextFormFieldto autofill it.
//email
child: TextFormField(
autofillHints: [AutofillHints.email],
),
//password
child: TextFormField(
autofillHints: [AutofillHints.password],
onEditingComplete: () =>
TextInput.finishAutofillContext(),
),
How can i make both fields autofill at once?
Use AutofillHints.username instead of AutofillHints.email. E-mail autofill only indicates that the field holds an e-mail address but if you use e-mail and password for authentication, you have to use AutofillHints.username.
EDIT: example
child: AutofillGroup(
child: Column(
children: <Widget>[
TextFormField(
keyboardType: TextInputType.emailAddress,
autocorrect: false,
textInputAction: TextInputAction.next,
autofillHints: const [
AutofillHints.username,
AutofillHints.email
],
textCapitalization: TextCapitalization.none,
),
TextFormField(
keyboardType: TextInputType.text,
textInputAction: TextInputAction.done,
autofillHints: const [AutofillHints.password],
obscureText: true,
),
],
),
)),
Related
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'),
),
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
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);
}
I have problem with flutter textformfield. Like I said in title my app show cursor in two textformfield. It appear when I tap previous textfield. I'm using real phone for test, not tried in emulator. Thanks for any help.
Here image from my app:
enter image description here
Form(
key: _formKey,
child: Column(
children: <Widget>[
SizedBox(
height: 20.0,
),
TextFormField(
decoration: InputDecoration(labelText: 'Email'),
focusNode: _emailFocus,
onFieldSubmitted: (term) {
_passwordFocus.nextFocus();
_fieldFocusChange(
context, _emailFocus, _passwordFocus);
},
textInputAction: TextInputAction.next,
validator: (value) =>
value.isEmpty ? 'Enter an email' : null,
onChanged: (value) {
setState(() => email = value);
},
),
SizedBox(
height: 20.0,
),
TextFormField(
decoration: InputDecoration(labelText: 'Password'),
validator: (value) => value.length < 6
? 'Enter an password 6+ chars long'
: null,
obscureText: true,
focusNode: _passwordFocus,
onFieldSubmitted: (term) {
_passwordFocus.unfocus();
_submitForm();
},
textInputAction: TextInputAction.done,
onChanged: (value) {
setState(() => password = value);
},
),
SizedBox(
height: 20.0,
),
RaisedButton(
color: Theme.of(context).primaryColor,
child: Text('Sign in'),
onPressed: () {
_submitForm();
},
),
SizedBox(height: 12.0),
Text(error,
style:
TextStyle(color: Colors.red, fontSize: 14.0)),
],
)),
I found solution from this question:
Multiple cursor in form's TextFormField flutter
It is same as mine. We did same mistake. When I declare FocusNode global it solve problem.
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);
});
},
),
]
)
);