I'm trying to capture touch on device backspace, I'm using RawKeyBoardListener, works on Android but not IoS.
Here's a code sample, the expectation is that when the back space key is pressed, the print will be displayed on the console.
RawKeyboardListener(
onKey: (event){
if (event.logicalKey == LogicalKeyboardKey.backspace) {
print("event detected");
}
},
focusNode: generalFocus,
child: TextField(
enableSuggestions: false,
autocorrect: false,
autofocus: true,
controller: wordControllerGeneral,
decoration: InputDecoration(
hintText: ' ',
contentPadding: EdgeInsets.symmetric(horizontal: 10.0),
),
onChanged: (value){
},
)
)
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 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 am implementing a Flutter app having TextFormField in my login screen to capture credentials. When I ran it on Android Emulator with 12.0 or real device with Android 12 it is showing white container instead of keyboard. It is happening with Android 12 only.
What can I try next?
Note: It is working fine on all iOS Versions.
return Form(
key: _formKeySignInInputs,
child: Stack(
children: [
SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
children: [
Padding(padding: EdgeInsets.fromLTRB(0, 8, 0, 8.vw),
child: buildEmailFormField()),
Padding(padding: EdgeInsets.fromLTRB(0, 0, 0, 2.vw),
child: buildPasswordFormField()),
Padding(padding: EdgeInsets.fromLTRB(2.vw, 0, 0, 4.vw),
],
),
)
],
)
);
}
TextFormField buildPasswordFormField() {
var localeContext = AppLocalizations.of(context)!;
return TextFormField(
autocorrect: false,
obscureText: true,
enableSuggestions: false,
onSaved: (newValue) => password = newValue,
onChanged: (value) {
if (value.isNotEmpty) {
removeError(error: localeContext.password_null_error);
} else if (value.length >= 4) {
removeError(error: localeContext.short_password_error);
}
return;
},
validator: (value) {
if (value!.isEmpty) {
addError(error: localeContext.password_null_error);
return "";
} else if (value.length < 4) {
addError(error: localeContext.short_password_error);
return "";
}
},
decoration: InputDecoration(
labelText: localeContext.password,
hintText: localeContext.password_hint,
floatingLabelBehavior: FloatingLabelBehavior.always,
suffixIcon: const InputFieldSurffixIcon(svgIcon: "assets/icons/password.svg"),
),
);
}
TextFormField buildEmailFormField() {
var localeContext = AppLocalizations.of(context)!;
return TextFormField(
autocorrect: false,
enableSuggestions: false,
keyboardType: TextInputType.emailAddress,
onSaved: (newValue) => email = newValue,
onChanged: (value) {
if (value.isNotEmpty) {
removeError(error: localeContext.email_null_error);
} else if (emailValidatorRegExp.hasMatch(value)) {
removeError(error: localeContext.invalid_email_error);
}
},
validator: (value) {
if (value!.isEmpty) {
addError(error: localeContext.email_null_error);
return "";
} else if (!emailValidatorRegExp.hasMatch(value)) {
addError(error: localeContext.invalid_email_error);
return "";
}
},
decoration: InputDecoration(
labelText: localeContext.email,
hintText: localeContext.email_hint,
floatingLabelBehavior: FloatingLabelBehavior.always,
suffixIcon: const InputFieldSurffixIcon(svgIcon: "assets/icons/temp/mail.svg"),
),
);
}
In my application We have a Close icon at the end of the Textfield.
closeIcon was added in textField's suffix icon. So it is not read out by the voice over and not functioning as expected. (Overriding by textfield's semantic widget) Without voiceOver it is working fine. We have added this closeIcon to textfield SuffixIcon. (It must be like this). Anyone please help me how closeIcon will work with voiceOver.
code:
child:
TextField(
key: widget.inputKey,
textInputAction: widget.textInputAction,
onEditingComplete: widget.onEditCompleted,
style: style.inputStyle.textStyle,
decoration: InputDecoration(
isDense: true,
hintText: widget.hint,
errorStyle: style.errorStyle.textStyle,
hintStyle: style.hintStyle.textStyle,
prefixStyle: style.prefixStyle.textStyle,
suffixStyle: style.suffixStyle.textStyle,
counterStyle: style.counterStyle.textStyle,
suffixIconConstraints: context.theme.getIconStyle(formInputPrefixIconStyleId).constraints,
suffixIcon: _suffixIcon(context),
prefixIconConstraints: const BoxConstraints(minWidth: 8, minHeight: 8),
prefixIcon: widget.textFieldPrefix != null ? _fieldPrefix(style) : null,
border: _getBorderStyle(style),
focusedBorder: _getFocusedBorderStyle(style),
enabledBorder: _getEnabledBorderStyle(style),
),
onChanged: (text) {
setState(() {
_shouldShowClearIcon = text.isNotEmpty;
});
widget.onChanged.call(text);
},
focusNode: widget.focusNode,
controller: widget.controller,
showCursor: true,
keyboardAppearance: style.keyboardAppearance,
),
),
),
Visibility(
visible: _hasError(),
child: AppFieldError(
key: const Key('bottomErrorContainer'),
errorText: widget.alertMessage,
style: context.theme
.getContainerStyle(widget.showWarning ? formWarningContainerStyleId : formErrorContainerStyleId),
),
),
],
),
));
}
Widget _suffixIcon(BuildContext context) {
if (widget.hasShowSuccess) {
return _successIcon(context);
}
if (_shouldShowClearIcon && widget.isEnabled) {
return _clearIcon(context);
}
return null;
}
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
)