Flutter: TextFormField Hidden by Keyboard

Question

I have an authentication screen like this:

  @override
  Widget build(BuildContext context) {
    final bottom = MediaQuery.of(context).viewInsets.bottom;

    return Scaffold(
      resizeToAvoidBottomInset: false,
      resizeToAvoidBottomPadding: false,
      body: SingleChildScrollView(
        reverse: true,
        child: Padding(
          padding: EdgeInsets.only(bottom: bottom),
          child: Column(
            children: <Widget>[
              SizedBox(height: 48),
              Image.asset(
                "assets/images/logo.png",
                width: 132,
              ),
              SizedBox(height: 48),
              Form(
                child: Column(
                  children: <Widget>[
                    AuthTextFormField(
                      icon: Icons.email_outlined,
                      labelText: 'Email',
                      keyboardType: TextInputType.emailAddress,
                    ),
                    AuthTextFormField(
                      icon: Icons.lock_outline,
                      labelText: 'Password',
                      obscureText: true,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

I have followed this answer, but it still did not work for me. The keyboard still covered the text field. Any idea?

Thank you.

[UPDATE] I use the code written in the answer above (by Jay Jay). And, this is the screenshot:

Its covered like this:

Can you show the full code for that file, plus can you show the output of your screen ? — Mukul, Dec 31 '20 at 07:51
@Mukul thats all is the file, it is only stateless widget without any logic yet. And I have updated the screenshot — hallz12, Dec 31 '20 at 08:06
Please check my Code, I have made some minor changes to your code, and It worked fine for me. — Mukul, Dec 31 '20 at 08:19
I have copy paste your code but it still did not work for me — hallz12, Dec 31 '20 at 08:30
try to remove resizeToAvoidBottomInset: false, resizeToAvoidBottomPadding: false, these lines and also comment the reverse : true for the SingleChildScrollView — Mukul, Dec 31 '20 at 09:11
instead add this line resizeToAvoidBottomPadding: true, like I have done in the code. — Mukul, Dec 31 '20 at 09:18
yes, I have copy and pasted your code, unfortunately is still did not work for me — hallz12, Dec 31 '20 at 10:43
Can you show the full file Code, Coz I have made a new Project and pasted the code and its working fine my side, maybe a link to your code may help in finding the issue. — Mukul, Dec 31 '20 at 10:55
I don't know why it's not working in my old project. I tried creating a new project, and copy all the files, and it works fine. Thanks for the help. I have accepted the answer. — hallz12, Dec 31 '20 at 15:14

score 1 · Accepted Answer · answered Dec 31 '20 at 08:17

This Code works fine for me, I have removed the image and added a Container on its place with some height.

Also I have made some changes to your Code,

Scaffold(
      resizeToAvoidBottomPadding: true,
      body: SingleChildScrollView(
        child: Padding(
          padding: EdgeInsets.only(bottom: bottom),
          child: Column(
            children: <Widget>[
              SizedBox(height: 48),
              Container(
                color: Colors.blue,
                height: 500,
              ),
              SizedBox(height: 48),
              Form(
                child: Column(
                  children: <Widget>[
                    TextFormField(
                      decoration: InputDecoration(
                          icon: Icon(Icons.email), labelText: 'Email'),
                      keyboardType: TextInputType.emailAddress,
                    ),
                    TextFormField(
                      decoration: InputDecoration(
                          icon: Icon(Icons.lock_outline),
                          labelText: 'Password'),
                      obscureText: true,
                    ),
                    TextFormField(
                      decoration: InputDecoration(
                          icon: Icon(Icons.email), labelText: 'Email'),
                      keyboardType: TextInputType.emailAddress,
                    ),
                    TextFormField(
                      decoration: InputDecoration(
                          icon: Icon(Icons.email), labelText: 'Email'),
                      keyboardType: TextInputType.emailAddress,
                    ),
                    TextFormField(
                      decoration: InputDecoration(
                          icon: Icon(Icons.email), labelText: 'Email'),
                      keyboardType: TextInputType.emailAddress,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );

score 0 · Answer 2 · answered Dec 30 '20 at 17:38

After trying it out, I think you should just add a height to your image.asset or better use a Container and specify the image in its decoration property and give the container a fixed height. It should all work correctly.

Here my code which works:

return Scaffold(
  resizeToAvoidBottomInset: false,
  resizeToAvoidBottomPadding: false,
  body: SingleChildScrollView(
    reverse: true,
    child: Padding(
      padding: EdgeInsets.only(bottom: bottom),
      child: Column(
        children: <Widget>[
          SizedBox(height: 48),
          Container(
            height: 300,
            color: Colors.red,
          ),
          SizedBox(height: 48),
          Form(
            child: Column(
              children: <Widget>[
                TextFormField(
                  decoration: InputDecoration(
                    icon:Icon(Icons.email),
                    labelText: 'Email'
                  ),
                  keyboardType: TextInputType.emailAddress,
                ),
                TextFormField(
                  decoration: InputDecoration(
                    icon: Icon(Icons.lock_outline),
                    labelText: 'Password'
                  ),
                  obscureText: true,
                ),
              ],
            ),
          ),
        ],
      ),
    ),
  ),
);

hi, thanks for your answer. Unfortunately after copy paste your code, it still did not work for me. — hallz12, Dec 30 '20 at 17:47

Flutter: TextFormField Hidden by Keyboard

2 Answers2