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:

Answer 1

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

Answer 2

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