CODEWITHSUNDEEP
flutterflutter-layout
Hitanshu Gogoi
Hitanshu Gogoi

Reputation: 987

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


        ],
      ),
    );
  }
}

Upvotes: 45

Views: 96053

Answers (11)

Kumail Raza
Kumail Raza

Reputation: 19

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

Upvotes: 0

Dinesh Balasubramanian
Dinesh Balasubramanian

Reputation: 21718

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)

Upvotes: 101

amit_roy
amit_roy

Reputation: 1

Use Scaffold and make "resizeToAvoidBottomInset" false.

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

Upvotes: 0

Hashem Aboonajmi
Hashem Aboonajmi

Reputation: 13830

Use CustomScrollView with SliverToBoxAdapter:

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

Upvotes: 0

Musfiq Shanta
Musfiq Shanta

Reputation: 1615

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

Upvotes: 1

Innocent
Innocent

Reputation: 31

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

Upvotes: 3

Mahmoud Salah Eldin
Mahmoud Salah Eldin

Reputation: 2098

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.

Upvotes: 4

srijan439
srijan439

Reputation: 450

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

Upvotes: 4

Dhanaji Yadav
Dhanaji Yadav

Reputation: 1412

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.

Upvotes: 14

CopsOnRoad
CopsOnRoad

Reputation: 267404

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

Upvotes: 10

user9139407
user9139407

Reputation: 1012

Used SigleChildScrollView

sample code

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

Upvotes: 0

Related Questions