Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bottom overflow by 30px

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


        ],
      ),
    );
  }
}
like image 959
Hitanshu Gogoi Avatar asked Aug 22 '18 17:08

Hitanshu Gogoi


3 Answers

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)
like image 163
Dinesh Balasubramanian Avatar answered Nov 17 '22 22:11

Dinesh Balasubramanian


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.

like image 20
Dhanaji Yadav Avatar answered Nov 17 '22 22:11

Dhanaji Yadav


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()),
)
like image 8
CopsOnRoad Avatar answered Nov 17 '22 20:11

CopsOnRoad