Search code examples
flutterkeyboardtextfield

Flutter keyboard covers textfields


I know this questions seems to get asked alot but most of them in the end dont get a positive answer.

I have login, signup, showmodalbottomsheet, and a few other spots where none of them will shift up when the leyboard opens. Im starting to think this is a bug in flutter.

What Ive tried so far

-SingleScrollView wrapped around containers and columns and a few other varieties, anywhere Ive tried singleScrollview doesnt work no matter where I attempt to use it. I also read not to have expanded widget inside anywhere while trying this so I shuffled a screen or two around to remove using them with no result -removing the fullscreen:true option in the android build manifest and that didnt make a difference. -tried listview inside containers and columns, tried them inside and out of other widgets on the pages -the scaffolding resizebottominset property countless times during all the other tests to see if that made any difference as well

  • Padding.mediaquery.of(context).viewInsets.bottom in a bunch of places along the widget tree and no changes

heres my signup screen, nothing fancy or out of the ordinary

  Widget build(BuildContext context) {
    _deviceHeight = MediaQuery.of(context).size.height;
    _deviceWidth = MediaQuery.of(context).size.width;
    return SafeArea(
      child: Scaffold(
        body: SingleChildScrollView(
          child: Container(
            padding: EdgeInsets.symmetric(
              horizontal: _deviceWidth * 0.03,
              vertical: _deviceHeight * 0.02,
            ),
            width: _deviceWidth * 0.97,
            height: _deviceHeight * 0.98,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                LoginTitle(
                  title: 'Sign Up',
                  subtitle: 'Create an account...',
                  titleFontSize: 75.sp,
                  subFontSize: 25.sp,
                ),
                SizedBox(height: 10.h),
                buildSignUpForm(),
                SizedBox(height: 20.h),
                Text(
                  'Already have an account?',
                  style: TextStyle(
                    fontSize: 20.sp,
                    color: Colors.orange,
                  ),
                ),
                TextButton(
                  onPressed: () {
                    FocusScope.of(context).unfocus();
                    Get.to(() => LoginScreen());
                  },
                  child: Text(
                    'Sign In',
                    style: TextStyle(
                      color: kSecondaryColor,
                      fontSize: 20.sp,
                    ),
                  ),
                  style: ButtonStyle(
                    overlayColor: MaterialStateColor.resolveWith((states) => Colors.transparent),
                  ),
                ),
                // Padding(
                //   padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
                // ),
              ],
            ),
          ),
        ),
      ),
    );
  }

and heres the buildSignUpForm thats nested on the page

  // Sign-up form Section
  SizedBox buildSignUpForm() {
    return SizedBox(
      height: _deviceHeight * 0.6,
      child: Form(
        key: _signUpFormKey,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            RoundedTextFormField(
              autoFocus: true,
              focusNode: _nameFocus,
              onFieldSubmitted: _fieldFocusChange(context, _nameFocus, _emailFocus),
              keyboardType: TextInputType.name,
              keyboardAction: TextInputAction.next,
              controller: _nameController,
              hintText: 'Name',
              validator: (value) {
                if (value.toString().length <= 2 || value!.isEmpty) {
                  return 'Enter a valid Name';
                }
                return null;
              },
            ),
            SizedBox(height: _deviceHeight * 0.03),
            RoundedTextFormField(
              focusNode: _emailFocus,
              onFieldSubmitted: _fieldFocusChange(context, _emailFocus, _passwordFocus),
              keyboardType: TextInputType.emailAddress,
              keyboardAction: TextInputAction.next,
              controller: _emailController,
              hintText: 'Email',
              validator: (email) => email != null && !EmailValidator.validate(email) ? 'Enter a valid email' : null,
            ),
            SizedBox(height: _deviceHeight * 0.03),
            RoundedTextFormField(
              focusNode: _passwordFocus,
              onFieldSubmitted: _fieldFocusChange(context, _passwordFocus, _passwordConfirmFocus),
              keyboardType: TextInputType.visiblePassword,
              keyboardAction: TextInputAction.next,
              obsecureText: true,
              controller: _passwordController,
              hintText: 'Password',
              validator: (value) {
                if (value.toString().length < 6 || value!.isEmpty) {
                  return 'Password should be longer or equal to 6 characters.';
                }
                return null;
              },
            ),
            SizedBox(height: _deviceHeight * 0.03),
            RoundedTextFormField(
              focusNode: _passwordConfirmFocus,
              keyboardAction: TextInputAction.send,
              onFieldSubmitted: (_) {
                Utilities.logInfo('Signup Submit button Pressed');
                if (_signUpFormKey.currentState!.validate()) {
                  _signUpFormKey.currentState!.save();
                  setState(() {
                    _isLoading = true;
                  });
                  FocusScope.of(context).unfocus();
                  String name = _nameController.text.trim();
                  String email = _emailController.text.trim();
                  String password = _passwordController.text.trim();

                  Utilities.logInfo('Attempting Signup with Firebase');
                  _authController.signUpWithEmail(name, email, password);
                  setState(() {
                    _isLoading = false;
                  });
                }
              },
              keyboardType: TextInputType.visiblePassword,
              obsecureText: true,
              hintText: 'Confirm Password',
              validator: (value) {
                if (value!.trim() != _passwordController.text.trim() || value.isEmpty) {
                  return 'Passwords do not match!';
                }
                return null;
              },
            ),
            SizedBox(height: _deviceHeight * 0.03),
            _isLoading
                ? const CircularProgressIndicator() // TODO custom progress indicator
                : VextElevatedButton(
                    buttonText: 'Sign Up',
                    onPressed: () {
                      debugPrint('Signup Submit button Pressed');
                      if (_signUpFormKey.currentState!.validate()) {
                        _signUpFormKey.currentState!.save();
                        setState(() {
                          _isLoading = true;
                        });
                        FocusScope.of(context).unfocus();
                        String name = _nameController.text.trim();
                        String email = _emailController.text.trim();
                        String password = _passwordController.text.trim();

                        debugPrint('Attempting Signup with Firebase');
                        _authController.signUpWithEmail(name, email, password);
                        setState(() {
                          _isLoading = false;
                        });
                      }
                    },
                  ),
            SizedBox(height: _deviceHeight * 0.03),
          ],
        ),
      ),
    );
  }
}

I'm out of ideas and am now starting to read the same forums results from web searching that are all saying the try the same things over and over. Am I missing something? Any help or options other than the ones Ive seen posted all over the web would be much appreciated.

Oh and I'm using Dart 2.16.2(Stable) and Flutter 2.10.5 Please don't ask me to upgrade, I did that once from 2.2 to 2.5 and spent a few days trying to get it all working again. then tried to 3.0 and I spent a few hours trying to downgrade everything back to working order and messed my whole project up lol.


Solution

  • So after 3 months of not being able to have my login and sign up screens scroll from behind a keyboard I finally figured it out.

    Well... Tucked into a comment from another solution I was looking at. Anyways in the main.dart file where we use MaterialApp or GetMaterialApp in my case, there is a property called useInheritedMediaQuery. I had that set to true. Do not use this if you have any sort of screen scrolling you will want to do. Soon as I commented that line out and restarted my app every screen I had setup for textfields are now scrolling as they should.