Flutter list with column (Bottom overflowed)

Updated 28 April 2023


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.

You may also check our interactive app designs by our Flutter app development company

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 – https://mobikul.com/blog/
Happy coding < 😉 />

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*

Be the first to comment.

Start a Project

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home