Bottom overflow by 30px

Question

I face a problem by wrapping TextField with new Expanded(). When try to search something in textfield its show me bottom overflow by 30px. Below is my code:

 Widget build(BuildContext context) {
    return new Scaffold(
        body:
      Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              IconButton(icon: Icon(Icons.search), onPressed: () {
                setState(() {

                });
              }),
              new Flexible(
                child: new TextField(
                  onChanged: (String value) {
                    onchange(value);
                  },
                  maxLines: 1,
                  autocorrect: true,
//                  decoration: const InputDecoration(helperText: "Search"),
                  style: new TextStyle(fontSize: 10.0, color: Colors.black),
                ),
              ),
              _text != null ? IconButton(
                  icon: Icon(Icons.close), onPressed: (){
              }) : new Container(),

              IconButton(icon: Icon(Icons.bookmark_border), onPressed: () {}),
            ],
          ),
          new Expanded(
              child: FilstList(searchtext: _text,)
          ),


        ],
      ),
    );
  }
}

Hello! You can use Single Child Scroll View to avoid pixel over flow.Thank You — Varun, Aug 22 '18 at 17:47

score 97 · Accepted Answer · answered Aug 22 '18 at 18:20

97

There are two solutions to this problem.

Add resizeToAvoidBottomPadding: false to your Scaffold

Scaffold(
 resizeToAvoidBottomPadding: false,
 body: ...)

Put your FilstList(searchtext: _text,) inside a scrollableView (like SingleChildScrollView or ListView)

answered Aug 22 '18 at 18:20

Dinesh Balasubramanian

20,532
7
64
57

31

`resizeToAvoidBottomPadding` is now [deprecated](https://api.flutter.dev/flutter/material/Scaffold/resizeToAvoidBottomPadding.html). Use `resizeToAvoidBottomInset: false` instead. – asherbret Oct 11 '19 at 19:33
2

This stopped the content of my body from being displayed. The body is a `TabBarView`. Each tab view has a dynamic height as it is populated with data from a server, so the views don't have a size available to them. Placing the `TabBarView` inside a fixed size `Container` reduces UI quality. – louisdeb Nov 18 '19 at 13:56

Dhanaji Yadav · Answer 2 · 2020-05-30T05:53:29.123

12

Use Scaffold property "resizeToAvoidBottomPadding: false" and "SingleChildScrollView" as parent of Scaffold body:

      home: Scaffold(
          resizeToAvoidBottomPadding: false,
          appBar: AppBar(
            title: Text("Registration Page"),
          ),
          body: SingleChildScrollView(
            child: RegisterUser(),
          )),

this will solve issue.

edited May 30 '20 at 05:53

answered Aug 09 '19 at 11:00

Dhanaji Yadav

1,202
1
14
22

1

omg thank you! doinght both of this like you told me worked! – Matteo Toma Mar 09 '22 at 15:32

CopsOnRoad · Answer 3 · 2019-08-15T04:51:03.643

8

You should use resizeToAvoidBottomInset

Scaffold(
  resizeToAvoidBottomInset: false, // set it to false
  ... 
)

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

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

edited Aug 15 '19 at 04:51

answered Aug 10 '19 at 12:00

CopsOnRoad

237,138
77
654
440

score 4 · Answer 4 · answered Jul 31 '20 at 09:38

I faced a similar problem and fixed it in the following way:

You can wrap it with SingleChildScrollView or with a ListView.

Scaffold(
    body: Container(
      height: MediaQuery.of(context).size.height * .50,
      child: SingleChildScrollView(
          child: Column( 
              ....
          )
      )
   )
 );

score 3 · Answer 5 · edited Dec 08 '20 at 10:29

3

put resizeToAvoidBottomPadding as false in Scaffold:

  Scaffold(
    resizeToAvoidBottomPadding: false,

update it is better solution: remove Column and put instead it ListView

because if you run this app on smaller device bottom items will disappear and hide from the show screen and that will be bad for App users.

edited Dec 08 '20 at 10:29

abc

28
1
11

answered Jun 23 '19 at 07:15

Mahmoud Salah Eldin

1,739
16
21

score 3 · Answer 6 · answered Jul 25 '21 at 22:19

3

Use of resizeToAvoidBottomInset: false in your Scaffold is the best solution to that.

answered Jul 25 '21 at 22:19

Innocent

31
2

score 0 · Answer 7 · edited Nov 11 '22 at 08:59

0

Do two way

NO1.

Scaffold(
 resizeToAvoidBottomPadding: false, )

The problem is when you do this body content never gone top when you select input box..

Best practice

SingleChildScrollView widget

edited Nov 11 '22 at 08:59

Ravindra S. Patil

11,757
3
13
40

answered Nov 04 '20 at 13:38

Musfiq Shanta

1,298
13
9

score 0 · Answer 8 · answered Dec 04 '22 at 12:18

0

Use CustomScrollView with SliverToBoxAdapter:

body: CustomScrollView( 
  slivers: [
     SliverToBoxAdapter(
         child: Form(....)
     ),
  ]
)

answered Dec 04 '22 at 12:18

Hashem Aboonajmi

13,077
8
66
75

score 0 · Answer 9 · answered Jan 30 '23 at 15:04

0

Use Scaffold and make "resizeToAvoidBottomInset" false.

 Scaffold(
            resizeToAvoidBottomInset: false,
            ........
   )

answered Jan 30 '23 at 15:04

amit_roy

1
1

not working............ – Muhammad Waleed Jul 06 '23 at 17:31

score -1 · Answer 10 · answered Jul 19 '19 at 08:47

Used SigleChildScrollView

sample code

Scaffold(
          appBar: //AppBar
          body: SingleChildScrollView(
            padding: EdgeInsets.symmetric(horizontal: 5.0, vertical: 3.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,

Bottom overflow by 30px

10 Answers10

Linked