CODEWITHSUNDEEP
listviewflutterheight
Nelino Takam
Nelino Takam

Reputation: 23

How to fix 'Bottom Overflowed by XXX pixels' with ListViews in Flutter

I'm using a ListView(children:[]) in a container with fixed height:300, but when the soft-keyboard opens, I get a bottom overflow error.

bottom overflowed by 123 pixels

I'm new in flutter and while following a tutorial, I did wrap in a column 2 widgets, one wrapping 2 TextFields() in a card and another with height property set to 300 wrapping a ListView() widget using the 'children :' method (if I can say so, instead of ListView.builder()).

I tried wrapping in an Expandable() widget but it persists. Its only when the height is set to 100 that the error actually disappears, but then i get a tiny scroll-able section. Is there any way to go around or is this a normal reaction?

NB: I also tried all the solutions shown here which applied to my situation, but none worked for me.

Flutter: how to fix bottom overflow

Here's my column

 return Column(
      children: <Widget>[
        NewTransaction(_addNewTransaction),
        TransactionList(_userTransaction),
      ],
    );

NewTransaction() contains the TextFields and works just fine,

Here is my container wrapping the ListView (the code has been simplified for visibility)

return Container(
      height: 300,
      child: ListView(
          children: [
               Container(
                   height: 200,
               ),
               Container(
                   height: 200,
               ),
               Container(
                   height: 200,
               ),
               Container(
                   height: 200,
               ),
          ],
      ),
);

Normally when the soft keyboard opens, it shouldn't display any bottom overflow error but it does. In the tutorial I followed for this, it had no issues, but then I get a

bottom overflowed by 123 pixels.

error

Here's a screenshot of the result

Upvotes: 2

Views: 1142

Answers (1)

Maureen Josephine
Maureen Josephine

Reputation: 516

For bottom overflow, wrap the container or the column inside a SingleChildScrollView widget.Or you can place the whole body: property of the function in a singlechildScrollView.You can also increase the height of the container. For instance:

 `return SingleChildScrollView(
    child: Container(
    height: 300,
      child: ListView(
      children: [
           Container(
               height: 200,
           ),
           Container(
               height: 200,
           ),
           Container(
               height: 200,
           ),
           Container(
               height: 200,
           ),
         ),
         ],
         ),
       );  `

Upvotes: 3

Related Questions