Flutter - Bottom Overflowed by XX Pixels

Question

So I'm learning Flutter. So far it feels fascinating to build cross-platform apps. I have one concern that keeps popping up. How can I make my app truly "Responsive"? I had tried to use MediaQuery wherever possible as suggested on flutter docs. Can someone please have a look at my code to point out flaws causing this problem?

This is basic Login page code:

import 'package:flutter/material.dart';

class MyLoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return (Scaffold(
      resizeToAvoidBottomInset: true,
      appBar: AppBar(
        title: Text("Welcome"),
      ),
      body: Container(
        child: ListView(
          children: <Widget>[
            Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height / 3.5,
              decoration: BoxDecoration(
                  color: Colors.blue[100],
                  borderRadius: BorderRadius.only(
                    bottomLeft: Radius.circular(90),
                  ),
                  image: DecorationImage(
                    alignment: Alignment.center,
                    scale: 1.5,
                    image: AssetImage('assets/logo.png'),
                  )),
            ),
            Container(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height / 2,
                margin: EdgeInsets.all(MediaQuery.of(context).size.width / 20),
                decoration: BoxDecoration(
                  color: Colors.blue[0],
                ),
                child: Column(
                  children: <Widget>[
                    Align(
                      alignment: Alignment.center,
                      child: Text(
                        'Please Login',
                        style: TextStyle(color: Colors.blue, fontSize: 24),
                      ),
                    ),
                    Padding(
                        padding: EdgeInsets.all(
                            MediaQuery.of(context).size.height / 100)),
                    Container(
                      child: TextField(
                        decoration: new InputDecoration(
                            border: new OutlineInputBorder(
                              borderRadius: const BorderRadius.all(
                                const Radius.circular(90.0),
                              ),
                            ),
                            filled: true,
                            hintStyle: new TextStyle(color: Colors.grey[800]),
                            hintText: "Username",
                            fillColor: Colors.white70),
                      ),
                    ),
                    Padding(
                        padding: EdgeInsets.all(
                            MediaQuery.of(context).size.height / 200)),
                    Container(
                      child: TextField(
                        decoration: new InputDecoration(
                            border: new OutlineInputBorder(
                              borderRadius: const BorderRadius.all(
                                const Radius.circular(90.0),
                              ),
                            ),
                            filled: true,
                            hintStyle: new TextStyle(color: Colors.grey[800]),
                            hintText: "Password",
                            fillColor: Colors.white70),
                      ),
                    ),
                    Align(
                      alignment: Alignment.centerRight,
                      child: Padding(
                        padding: EdgeInsets.only(
                            top: MediaQuery.of(context).size.width / 50,
                            right: MediaQuery.of(context).size.width / 50),
                        child: Text(
                          'Forgot Password ?',
                          style: TextStyle(color: Colors.grey[600]),
                        ),
                      ),
                    ),
                    Padding(
                        padding: EdgeInsets.all(
                            MediaQuery.of(context).size.height / 12)),
                    ButtonTheme(
                      minWidth: MediaQuery.of(context).size.width / 2.5,
                      height: MediaQuery.of(context).size.width / 6,
                      child: RaisedButton(
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(40)),
                        onPressed: () {},
                        child: Text(
                          'Login',
                          style: TextStyle(color: Colors.white, fontSize: 18),
                        ),
                      ),
                    ),
                  ],
                ))
          ],
        ),
      ),
    ));
  }
}

As you can see, it is running on iPhone without this issue in portrait mode (issue crops up in Landscape mode) but having trouble on Android (even in Portrait mode).

Link to image

Any sort of help will be really appreciated. Thanks!

Answer 1

The problem is that you have the 'Please Login' text, TextFields and Button into a same Container with a height that was overflowed. If you delete the height property of that Container your problem should be resolved.