skip to Main Content

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,
              ),
            ),
          ),
      ],
    );
  }
}

2

Answers


  1. I think you have added wrong controller as I can see from name, please confirm it or could you please add more code to check the full code to resolve it?

    Login or Signup to reply.
  2. No, 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();
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search