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


        ],
      ),
    );
  }
}

回答1:

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)

回答2:

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.

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

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

回答5:

Used SigleChildScrollView

sample code

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

来源：https://stackoverflow.com/questions/51972371/bottom-overflow-by-30px

标签

Flutter

flutter-layout