the problem is as follows.
I implemented autofill to log-in fields. The function works very well on android and iOS. It turned out, however, that the password hint on a Pixel 4 phone isn't obscure.
Does anyone know how to fix this?
[Pixel 4 screenshot][1]
Update, code below:
AutofillGroup(
child: Column(
children: [
TextFormField(
autofillHints: [widget.signUpMode ? AutofillHints.newUsername : AutofillHints.username],
keyboardType: TextInputType.emailAddress,
autovalidateMode: AutovalidateMode.onUserInteraction,
validator: (String? value) {
if (value!.isEmpty) {
return S.of(context).formFieldValueRequiredLabel;
}
return null;
},
),
const SizedBox(height: 12),
if (widget.passwordController != null) ...[
TextFormField(
focusNode: passwordFocusNode,
autofillHints: [widget.signUpMode ? AutofillHints.newPassword : AutofillHints.password],
controller: widget.passwordController,
maxLength: 60,
obscureText: obscureText,
textAlign: TextAlign.center,
decoration: AppTheme.formFieldDecoration(),
style: AppTheme.formFieldStyleText,
keyboardType: TextInputType.text,
autovalidateMode: AutovalidateMode.onUserInteraction,
validator: (String? value) {
if (value!.isEmpty) {
return S.of(context).formFieldValueRequiredLabel;
}
return null;
},
)
],
],
),
)
Did you tried disabling the suggestions to Text Form Field like below
TextFormField(
obscureText: true,
enableSuggestions: false, // add this line
)
Related
How to implement Credential Management API in Flutter
I want save login Credential in google. How to invoke Credential Management API in browser
Use autofillgroup to save your Credential in browser and sync with your google account.
return Form(
key: _mobileKey,
child: AutofillGroup(
child: FocusScope(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
TextFormField(
controller: mobileController,
autofillHints: const [AutofillHints.telephoneNumber],
autofocus: true,
maxLength: 10,
inputFormatters: [
FilteringTextInputFormatter.digitsOnly,
LengthLimitingTextInputFormatter(10),
],
textInputAction: TextInputAction.next,
keyboardType: TextInputType.phone,
// move to the next field
// onEditingComplete: _node.nextFocus,
decoration: const InputDecoration(
border: InputBorder.none,
hintText: "Enter Your Mobile Number",
),
// The validator receives the text that the user has entered.
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter your mobile number';
} else if (value.length < 10) {
return 'Enter Valid mobile number';
} else {
return null;
}
},
),
]))));
you can use it for specified builtin keyword.
example
autofillHints: const [AutofillHints.email],
autofillHints: const [AutofillHints.password],
autofillHints: const [AutofillHints.name]
remember you cant use your own keyword
I want to get two type Inputformatter, 000-000-0000 or 000-0000-0000 for phoneNumber.
I use flutter_multi_formatter. below code just allow put 000-000-0000.
I want inputformatter to make 000-000-0000 if the input length is 12.
I want inputformatter to maek 000-0000-0000 if the input length is 13.
Widget _phoneNumberFormField() {
return Expanded(
child: TextFormField(
focusNode: _telephoneFocusNode,
enabled: _verificationStatus == _VerificationStatus.none ? true : false,
autovalidateMode: AutovalidateMode.onUserInteraction,
style: Theme.of(context)
.textTheme
.titleMedium!
.copyWith(fontSize: 16.0.sp),
controller: _phoneNumberEditingController,
onChanged: (data) {
_areAllTheFormsFilledAndValid();
},
validator: (phoneNumber) {
if (phoneNumber!.length >= 12) {
String pattern = r'(^01([0|1|6|7|8|9])-?([0-9]{3,4})-?([0-9]{4})$)';
RegExp regExp = RegExp(pattern);
if (regExp.hasMatch(phoneNumber)) {
return null;
} else {
return 'check phonenumber.';
}
}
return null;
},
textAlign: TextAlign.center,
keyboardType: TextInputType.phone,
inputFormatters: [
MaskedInputFormatter("000-0000-0000"),
MaskedInputFormatter("000-000-0000"),
],
decoration: InputDecoration(
contentPadding: EdgeInsets.zero,
hintText: "put phonenumber.",
hintStyle: TextStyle(
fontSize: 16.0.sp, color: Theme.of(context).hintColor),
border: _outlineInputBorder()),
),
);
}
I found way.
inputFormatters: [
_phoneNumberEditingController.text.length == 12
? MaskedInputFormatter("000-0000-0000")
: MaskedInputFormatter("000-000-00000")
],
I have 1 functionality of adding TextFormField in Container on Button press upto 4 TextFormField like below image and when there's no text in TextFormField i want to remove that TextFormField so i have put that login in onChange.
When i press the button 1s time and it will add TextFormField and without typing any character if i press delete button from keyboard onChange is not getting called.
Please see this video: https://drive.google.com/file/d/1Yln48d5JHvvYdb4LRDXxmlzPzlC__xYq/view?usp=sharing
Here is my code.
TextFormField(
controller: bullet2Controller,
focusNode: focusNode2,
maxLines: null,
minLines: 1,
textCapitalization:TextCapitalization.sentences,
cursorColor: Colors.black,
showCursor: true,
autofocus: true,
textAlign: TextAlign.start,
inputFormatters: [LengthLimitingTextInputFormatter(140),],
onChanged: (value) {
setState(() {
if (value.isEmpty) {
isBullet2Visible = false;
if (isBullet1Visible) {
focusNode1.requestFocus();
} else if (isBullet3Visible) {
focusNode3.requestFocus();
} else if (isBullet4Visible) {
focusNode4.requestFocus();
} else {
FocusScope.of(context).unfocus();
}
if (_counter > 0) {
_counter--;
}
}
if (kDebugMode) {
print("${value.length.toString()} character(s)");
}
});
},
decoration: const InputDecoration(disabledBorder:
InputBorder.none,
border:
InputBorder.none,
filled: true,
fillColor: Colors.white,
),
keyboardType:
TextInputType
.multiline,
textInputAction:
TextInputAction.done,
),
Is it default behaviour or do i need to do any extra step to make it work.
this is a default behaviour.
when your value = '' and you press delete it is still equal to '' and onChanged not getting called.
to achieve your goals you should use a listener like RawKeyboardListener
Thanks to Vladyslav Ulianytskyi suggestion.
I have done this with the use of RawKEyboardListner. Here is the sample code.
RawKeyboardListener(
autofocus: true,
onKey: (event) {
setState(() {
if (event.isKeyPressed(LogicalKeyboardKey.backspace)) {
print("Perform Your Action");
}
});
},
focusNode: FocusNode(),
child: TextFormField(controller: bullet2Controller,
focusNode: focusNode2,
maxLines: null,
minLines: 1,
textCapitalization: TextCapitalization.sentences,
cursorColor: Colors.black,
showCursor: true,
autofocus: true,
textAlign: TextAlign.start,
inputFormatters: [LengthLimitingTextInputFormatter(140),
],
decoration: const InputDecoration(
disabledBorder: InputBorder.none,
border: InputBorder.none,
filled: true,
fillColor: Colors.white,
),
keyboardType: TextInputType.multiline,
textInputAction: TextInputAction.done,
),
),
)
You can try it will below code hope it's work for you
TextEditingController bullet2Controller = TextEditingController();
int currentTextLength = 0;
TextFormField(
maxLines: null,
controller: bullet2Controller,
decoration: InputDecoration(
hintText: 'Type your observations'
),
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w300,
fontFamily: 'Roboto'
),
onChanged: (String newText){
if (newText != ''){
if(newText[0] != '•'){
newText = '• ' + newText;
bullet2Controller.text = newText;
bullet2Controller.selection = TextSelection.fromPosition(TextPosition(offset: bullet2Controller.text.length));
}
if(newText[newText.length - 1] == '\n' && newText.length > currentTextLength){
bullet2Controller.text = newText + '• ';
bullet2Controller.selection = TextSelection.fromPosition(TextPosition(offset: bullet2Controller.text.length));
}
currentTextLength = bullet2Controller.text.length;
}
}
)
let me know if it's work for you or let me know if there any question.
I have a login page but I only want the form to accept emails with a specific domain (e.g. #abc.net). Here is the code I have so far. How would I implement this?
Widget _showEmailInput() {
return new Padding(
padding: EdgeInsets.fromLTRB(15.0, 15.0, 15.0, 0.0),
child: TextFormField(
maxLines: 1,
keyboardType: TextInputType.emailAddress,
autofocus: false,
decoration: new InputDecoration(
hintText: 'Enter Email', icon: Icon(Icons.email, color: black)),
validator: (value) => value.isEmpty ? 'Email can not be empty' : null,
onSaved: (value) => _email = value.trim(),
));
}
Method 1
var isValid = value.toLowerCase().endsWith('your_domain.com');
Method 2 (RegEx)
validator: (value) {
if (value.isEmpty) return 'Email can not be empty'
var rx = RegExp("\b*#abc\.net\$",caseSensitive: false);
return rx.hasMatch(value) ? null : 'Invalid domain name';
}
Just replace abc.net to your desired domain name
print(rx.hasMatch('sdfsdf#sdf.net')); // false
print(rx.hasMatch('sdfsdf#abc.net')); // true
print(rx.hasMatch('sdfsdf#ABC.org')); // false
print(rx.hasMatch('sdfsdf#ABc.net')); // true
I have a text field that allows only digits. But when my user adds a new model then I need to preassign a value to the field numberOfPets.
Only 0-9 is allowed so I could use 0 but I would rather have an empty string in that text field but that is not possible as String is not a subtype of Int... I have also tried null but that is literally written as initialValue.
How would you display an empty string in that textfield ?
TextFormField(
keyboardType: TextInputType.number,
inputFormatters: [
LengthLimitingTextInputFormatter(3),
WhitelistingTextInputFormatter.digitsOnly,
],
decoration: const InputDecoration(
labelText: 'reps',
),
initialValue: widget.set.numberOfPets.toString() ,
validator: (value) {
return StringFieldValidator.validate(value);
},
onChanged: (value) {
setState(() {
widget.set.numberOfPets= int.parse(value);
});
},
),
Keep the numberOfPets as 0 but while assigning to initialValue check if 0 and change it to empty string
TextFormField(
keyboardType: TextInputType.number,
inputFormatters: [
LengthLimitingTextInputFormatter(3),
WhitelistingTextInputFormatter.digitsOnly,
],
decoration: const InputDecoration(
labelText: 'reps',
),
initialValue: widget.set.numberOfPets ==0 ? '' : widget.set.numberOfPets.toString() ,
validator: (value) {
return StringFieldValidator.validate(value);
},
onChanged: (value) {
setState(() {
widget.set.numberOfPets= int.parse(value);
});
},
),