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 attached image. I also want a Raised button icon should be on the right side of the button.

Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        body: Stack(
          fit: StackFit.expand,
          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>[
                Expanded(
                  flex: 1,
                  child: Container(
                    margin: new EdgeInsets.only(top: 42.0),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Image.asset('assets/logo.png',
                            width: 250.0, height: 200.21),
                      ],
                    ),
                  ),
                ),
                Expanded(
                  flex: 2,
                  child: Container(
                    margin: new EdgeInsets.only(bottom: 40.0),
                    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();
                            }, ),)],),),)],)],),),);

Intital state

Error/overflowed State

CopsOnRoad · Answer 1 · 2022-01-10T21:12:38.813

49

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()),
)

PS: If you like to scroll your widget when the keyboard opens, you can take a look at this answer

edited Jan 10 '22 at 21:12

answered Aug 10 '19 at 12:02

CopsOnRoad

237,138
77
654
440

2

I had to set `resizeToAvoidBottomInset: true` for the second example above - so that `SingleChildScrollView ` scrolling kicked in when the keyboard appears. Whereas setting the value to `false` means the keyboard overlays the UI and obscures things, and the scrolling didn't seem to work anymore. – abulka Aug 22 '20 at 07:11

score 14 · Accepted Answer · edited Apr 16 '21 at 19:54

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: SingleChildScrollView(
          child: 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.

it through an exception I/flutter ( 2894): EXCEPTION CAUGHT BY RENDERING LIBRARY I/flutter ( 2894): The following assertion was thrown during performLayout(): — Muhammad Usman, Mar 23 '19 at 10:35
on all container? because by giving width and height to the root container cause same problem — Muhammad Usman, Mar 23 '19 at 10:50
give the root container width and height as `MediaQuery.of(context).size.width` and `MediaQuery.of(context).size.height` — Ryosuke, Mar 23 '19 at 11:07
I edited my answer...now refactored the code instead of just looking at it and guessing the problem. Your code was too inefficient but I tried to keep most of it as it is. — Ryosuke, Mar 24 '19 at 12:30
This surely can't be the accepted answer because it allows the view to scroll way too to high to the top.Bad design — Ojonugwa Jude Ochalifu, May 18 '20 at 08:47
Maybe it's me but there's no SingleChildScrollView in this code — funder7, Dec 23 '20 at 12:18
As you can see from comments and edit history, it was changed after further discussions. Forgot to change the description. — Ryosuke, Dec 23 '20 at 14:20

score 7 · Answer 3 · answered Jun 03 '19 at 16:24

7

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: ...

answered Jun 03 '19 at 16:24

Rami Alloush

2,308
2
27
33

4

FYI: `resizeToAvoidBottomPadding` is flagged as deprecated and it's recommended to use `resizeToAvoidBottomInset` instead. – emragins Jan 14 '21 at 23:54

score 6 · Answer 4 · answered Sep 29 '20 at 16:56

6

Add resizeToAvoidBottomPadding: false, and resizeToAvoidBottomInset: false, to your Scaffold widget.
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.

answered Sep 29 '20 at 16:56

Hermann Käbi

61
2
2

For some mystical reason, this was the only solution that worked to me. Scaffold widget was basically ignoring the `resizeToAvoidBottomInset` option. No idea why. Thanks man! – Gui Silva Aug 01 '21 at 14:33

score 2 · Answer 5 · answered Nov 08 '22 at 13:14

2

you should make the scaffold's floating widgets should size themselves to avoid the onscreen keyboard using :

Scaffold(
  resizeToAvoidBottomInset: false, 
  ... 
)

answered Nov 08 '22 at 13:14

Zakaria Ferzazi

364
3
4

score 1 · Answer 6 · answered Oct 22 '20 at 15:48

1

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

answered Oct 22 '20 at 15:48

Aknahseh_tg

158
7

score 0 · Answer 7 · answered Apr 02 '20 at 22:36

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

Overflow Error in Flutter when keyboard open

7 Answers7

Linked

Related