I've discovered that my app resets the keyboard back to default keyboardtype for a split second when i dissmis it with onsubmit or when i change focus. I'm not sure why it's happening, but can't seem to find a fix for it. Here's a video
As you can see in the last split second the keyboard changes back to default Here's AppInputField class
AppInputField(
key: ValueKey(1),
label: context.localizations.phone,
placeholder:
context.localizations.phonePlaceholderLogin,
controller: _emailController,
isPhoneField: true,
keyboardType: TextInputType.phone,
countryCodePicker: CountryCodePicker(
countryCodes: _countries,
onChanged: (value) {
setState(() {
_currentCountry = value;
});
},
selectedCountry: _currentCountry,
),
onChanged: (phone) {
context
.read<LoginBloc>()
.add(LoginEvent.phoneChanged(phone));
},
),
class AppInputField extends StatelessWidget {
final String label;
final String placeholder;
final String helperText;
final bool isDestructive;
final bool obscureText;
final TextEditingController? controller;
final Widget? prefixIcon;
final Widget? suffixIcon;
final TextInputType? keyboardType;
final ValueChanged<String>? onChanged;
final bool isPhoneField;
final CountryCodePicker? countryCodePicker;
const AppInputField({
super.key,
required this.label,
required this.placeholder,
this.helperText = '',
this.keyboardType,
this.isDestructive = false,
this.obscureText = false,
this.controller,
this.prefixIcon,
this.suffixIcon,
this.onChanged,
this.isPhoneField = false,
this.countryCodePicker,
});
@override
Widget build(BuildContext context) {
final appTheme = SBTAppThemeProvider.watch(context);
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
label,
style: AppTextStylesParagraph.paragraphSmallMedium.copyWith(
color: appTheme.colorsScheme.secondary.appBarSecondaryText,
),
),
const SizedBox(height: 4),
Row(
children: [
if (isPhoneField && countryCodePicker != null) countryCodePicker!,
if (isPhoneField && countryCodePicker != null)
const SizedBox(width: 8),
Expanded(
child: Container(
decoration: BoxDecoration(
color: appTheme.colorsScheme.primary.inputBg,
borderRadius: BorderRadius.circular(16),
border: Border.all(
color: appTheme.colorsScheme.primary.inputBorderColor,
width: 1,
),
),
padding: const EdgeInsets.symmetric(horizontal: 12),
child: Row(
children: [
if (prefixIcon != null) prefixIcon!,
Expanded(
child: TextField(
controller: controller,
obscureText: obscureText,
keyboardType: keyboardType,
style: AppTextStylesParagraph.paragraphMediumMedium
.copyWith(
color: appTheme.colorsScheme.primary.textColor,
),
onChanged: onChanged,
decoration: InputDecoration(
border: InputBorder.none,
hintText: placeholder,
hintStyle: AppTextStylesParagraph
.paragraphMediumMedium
.copyWith(
color: appTheme.colorsScheme.primary.hintText,
),
),
),
),
if (suffixIcon != null) suffixIcon!,
],
),
),
),
],
),
if (helperText.isNotEmpty)
Padding(
padding: const EdgeInsets.only(top: 4.0),
child: Text(
helperText,
key: ValueKey(helperText),
style: TextStyle(
color: isDestructive
? Colors.red
: appTheme.colorsScheme.primary.hintText,
fontSize: 12,
),
),
),
],
);
}
}
I've discovered that my app resets the keyboard back to default keyboardtype for a split second when i dissmis it with onsubmit or when i change focus. I'm not sure why it's happening, but can't seem to find a fix for it. Here's a video https://photos.app.goo.gl/FL75ugrLbvDxwpjFA
As you can see in the last split second the keyboard changes back to default Here's AppInputField class
AppInputField(
key: ValueKey(1),
label: context.localizations.phone,
placeholder:
context.localizations.phonePlaceholderLogin,
controller: _emailController,
isPhoneField: true,
keyboardType: TextInputType.phone,
countryCodePicker: CountryCodePicker(
countryCodes: _countries,
onChanged: (value) {
setState(() {
_currentCountry = value;
});
},
selectedCountry: _currentCountry,
),
onChanged: (phone) {
context
.read<LoginBloc>()
.add(LoginEvent.phoneChanged(phone));
},
),
class AppInputField extends StatelessWidget {
final String label;
final String placeholder;
final String helperText;
final bool isDestructive;
final bool obscureText;
final TextEditingController? controller;
final Widget? prefixIcon;
final Widget? suffixIcon;
final TextInputType? keyboardType;
final ValueChanged<String>? onChanged;
final bool isPhoneField;
final CountryCodePicker? countryCodePicker;
const AppInputField({
super.key,
required this.label,
required this.placeholder,
this.helperText = '',
this.keyboardType,
this.isDestructive = false,
this.obscureText = false,
this.controller,
this.prefixIcon,
this.suffixIcon,
this.onChanged,
this.isPhoneField = false,
this.countryCodePicker,
});
@override
Widget build(BuildContext context) {
final appTheme = SBTAppThemeProvider.watch(context);
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
label,
style: AppTextStylesParagraph.paragraphSmallMedium.copyWith(
color: appTheme.colorsScheme.secondary.appBarSecondaryText,
),
),
const SizedBox(height: 4),
Row(
children: [
if (isPhoneField && countryCodePicker != null) countryCodePicker!,
if (isPhoneField && countryCodePicker != null)
const SizedBox(width: 8),
Expanded(
child: Container(
decoration: BoxDecoration(
color: appTheme.colorsScheme.primary.inputBg,
borderRadius: BorderRadius.circular(16),
border: Border.all(
color: appTheme.colorsScheme.primary.inputBorderColor,
width: 1,
),
),
padding: const EdgeInsets.symmetric(horizontal: 12),
child: Row(
children: [
if (prefixIcon != null) prefixIcon!,
Expanded(
child: TextField(
controller: controller,
obscureText: obscureText,
keyboardType: keyboardType,
style: AppTextStylesParagraph.paragraphMediumMedium
.copyWith(
color: appTheme.colorsScheme.primary.textColor,
),
onChanged: onChanged,
decoration: InputDecoration(
border: InputBorder.none,
hintText: placeholder,
hintStyle: AppTextStylesParagraph
.paragraphMediumMedium
.copyWith(
color: appTheme.colorsScheme.primary.hintText,
),
),
),
),
if (suffixIcon != null) suffixIcon!,
],
),
),
),
],
),
if (helperText.isNotEmpty)
Padding(
padding: const EdgeInsets.only(top: 4.0),
child: Text(
helperText,
key: ValueKey(helperText),
style: TextStyle(
color: isDestructive
? Colors.red
: appTheme.colorsScheme.primary.hintText,
fontSize: 12,
),
),
),
],
);
}
}
- Without a code is hard to help but maybe something with a declared key position. When call SetState is reseting this key. – Alexandre B. Commented Nov 20, 2024 at 16:36
- 1 @AlexandreB. Hi! I've added a code snippet that might help – Aldiyarskiy Commented Nov 20, 2024 at 16:44
- I edit my answer so maybe can help you. Is something about the api version – Alexandre B. Commented Nov 20, 2024 at 18:25
1 Answer
Reset to default 0No, it's not about Controllers or keys.
In the code below I made a simple reproducible code and it is keeping reseting the keyboard.
Something courious. When we start for the first time a new emulator like I did with the 30 and 31 always in the first time that keyboard back, it back as spected, only numbers. But in second time that we try to write something and keyboard hide, change to text automatically!
Tested also in a mobile.
So probably is about Android and not Flutter. Need more further research.
TextField(
key: kk,
keyboardType: TextInputType.phone,
decoration: InputDecoration(
filled: true,
fillColor: Colors.white.withOpacity(0.6),
hintText: "Email address",
hintStyle: TextStyle(
color: Colors.grey[400],
fontWeight: FontWeight.bold
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20),
borderSide: BorderSide.none,
),
),
onChanged: (data){},
),
And here the variables:
TextEditingController _emailController = TextEditingController();
GlobalKey kk = GlobalKey();