Redeem Now
Read More
Read now

Flutter list with column (Bottom overflowed)


List with a column in Flutter

Flutter is in trend to develop the mobile application for the cross-platform because of its beautiful UI and performance. We most of the time use lists in our apps as ListView or GridList.

When we are using the list in the column then we are facing an issue as the list scrolling is stopped and showing BOTTOM OVERFLOWED BY 221 PIXELS.

When we use the list in the column?

Suppose I need to show a Title and then show a list below of the title. So we normally create this type of code in our codebase.

When we run this code then the output of this code as below:


How can we solve the BOTTOM OVERFLOWED BY 221 PIXELS issue?

The issue is it will not scroll and showing BOTTOM OVERFLOWED BY 221 PIXELS. Due to space acquire as list acquire the extra space as the column. To remove this issue we will use the Expanded widget.

Expanded widget definition from flutter official site – “Using an Expanded widget makes a child of a RowColumn, or Flex expand to fill the available space along the main axis (e.g., horizontally for a Row or vertically for a Column). If multiple children are expanded, the available space is divided among them according to the flex factor”

The final code will be as below :

We have added some padding to the list item view so it will look as readable now the output screen will be :


Same as for the Grid list. Please do not use the List or Grid list to direct child of the column. Use the expanded widget and put your list widget inside. Hope your issue will be resolved.

For any query or suggestion please comment in the below section.

To read more exciting blogs –
Happy coding < 😉 />

. . .


Add Your Comment

Be the first to comment.

Hire Us!
Brief us about your requirements and we'll get back to you.
Woo! Hooy!
We have just recieved your project brief and our expert will contact you shortly.
Send Again