Overflow Error in Flutter when keyboard open

Question

I am designing a login page it overflowed when I click on any text form field it open keyboard and through overflow warning like this see a

Answer 1

1. Add resizeToAvoidBottomPadding: false, and resizeToAvoidBottomInset: false, to your Scaffold widget.

2. Wrap your code with a Container, set the Container's parameters height: MediaQuery.of(context).size.height, and width: MediaQuery.of(context).size.width,. Then wrap your Container with a SingleChildScrollView.

Answer 2

This is happening because when the keyboard comes on screen, the height of the canvas to draw decreases. One solution is to wrap your root container inside SingleChildScrollView like this :

Widget build(BuildContext context) {
return Scaffold(
      body: Stack(
        fit: StackFit.loose,
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
                image: new DecorationImage(
                    image: new AssetImage('assets/login_page_bg_1.jpg'),
                    fit: BoxFit.cover,
                    colorFilter: new ColorFilter.mode(
                        Colors.black.withOpacity(0.55), BlendMode.dstATop)
                        )
            ),
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              SizedBox(height: 42,),
              Expanded(
                flex: 1,
                child: Center(
                  child:
                    Image.asset('assets/logo.png',
                        width: 250.0, height: 200.21),
                ),
              ),
              Expanded(
                flex: 2,
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                    //form filed goes here
                    Text('Login As User',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                        fontWeight: FontWeight.bold, fontSize: 35.0)),
                TextFormField(
                  keyboardType: TextInputType.emailAddress,
                  decoration: InputDecoration(
                    hintText: 'you@example.com',
                    labelText: 'Email Address',
                  )
                ),
                  new Container(
                    // width: MediaQuery.of(context).size.width,
                    child: RaisedButton.icon(
                      color: Color.fromARGB(251, 188, 74, 1),
                      label: Text('LOGIN'),
                      icon: Icon(Icons.send,
                          size: 10.0, color: Colors.black),
                      onPressed: () {
                        //this.submit();
                      }, ),)],)),
              SizedBox(height: 40,)

            ],)],),);

It will make your screen scrollable when the height of the content gets more than the available height of the viewport.

Answer 3

Set following property to false

Scaffold(
  resizeToAvoidBottomInset: false, 
  ... 
)

---

If you're having issues with overflow error, use SingleChildScrollView with it.

Scaffold(
  resizeToAvoidBottomInset: false, // set it to false
  body: SingleChildScrollView(child: YourBody()),
)

Answer 4

An even easier version is to just wrap the offending container with a ListView widget. It makes the screen scrollable and is simple to implement. You can use multiple children with this widget.

Scaffold(  
   body: ListView(
     children: <Widget> [
       Container(
       ),
       TextView(
       ),
       Column(
       ),
     ],
   ),
 )

Answer 5

A much simpler solution (source) seems to be just setting the Scaffold property resizeToAvoidBottomPadding to false. This works great with me:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        resizeToAvoidBottomPadding: false,
        appBar: AppBar(...),
        body: ...

Answer 6

Setting resizeToAvoidBottomInset: true and using body: ListView() works as well. This enables you to scroll the page when you open the keyboard.