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


        ],
      ),
    );
  }
}

Hogfish

Hello! You can use Single Child Scroll View to avoid pixel over flow.Thank You – Zinkenite

Answer 1

There are two solutions to this problem.

resizeToAvoidBottomPadding is now deprecated.

Below property of scaffold will work now. resizeToAvoidBottomInset set to false in scaffold widget.

1. Add resizeToAvoidBottomInset: false to your Scaffold

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

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

Pelaga

resizeToAvoidBottomPadding is now deprecated. Use resizeToAvoidBottomInset: false instead. – Knawel

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. – Rife

Answer 2

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.

Tragicomedy

omg thank you! doinght both of this like you told me worked! – Wallack

Answer 3

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

Mind

Answer 4

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.

Burthen

Answer 5

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( 
              ....
          )
      )
   )
 );

Perithecium

Answer 6

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

Phooey

Answer 7

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

Guinea

Answer 8

Used SigleChildScrollView

sample code

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

Cloison

Answer 9

Use CustomScrollView with SliverToBoxAdapter:

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

Farthermost

Answer 10

Use Scaffold and make "resizeToAvoidBottomInset" false.

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

Glutathione

not working............ – Lidstone

Answer 11

Solution 1: Using SingleChildScrollView Wrap the body of your Scaffold with SingleChildScrollView. This will make the entire body scrollable and prevent overflow when the keyboard appears.

Scaffold(
  body: SingleChildScrollView(
    child: Column(
      children: <Widget>[
        // Your other widgets go here
      ],
    ),
  ),
);

Solution 2: Using resizeToAvoidBottomInset Set resizeToAvoidBottomInset to false in the Scaffold. This will prevent the layout from resizing when the keyboard appears.

Scaffold(
  resizeToAvoidBottomInset: false,
  body: Column(
    children: <Widget>[
      // Your other widgets go here
    ],
  ),
);

Author