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


        ],
      ),
    );
  }
}

Answer 1

There are two solutions to this problem.

1. Add resizeToAvoidBottomPadding: false to your Scaffold

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

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

Answer 2

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

Answer 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 in smaller device bottom items will disappear and hide from show screen and that will be bad for App users.

Answer 4

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

  class RegisterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "Registration Page",
      home: Scaffold(
          resizeToAvoidBottomPadding: false,
          appBar: AppBar(
            title: Text("Registration Page"),
          ),
          body: SingleChildScrollView(
            child: RegisterUser(),
          )),
    );
  }
}

this will solve issue.

Answer 5

Used SigleChildScrollView

sample code

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