Flutter list with column (Bottom overflowed)

Neeraj Sharma

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.

 Widget drawTitleAndList() {
    return Column(
      children: [
        Container(
          padding: const EdgeInsets.all(4.0),
          child: Text("List title"),
        ),
        ListView.builder(
            shrinkWrap: true,
            itemCount: 50,
            itemBuilder: (BuildContext context, int index) {
              return Text("item ${index}");
            })
      ],
    );
  }

Widget drawTitleAndList() {

return Column(

children: [

Container(

padding: const EdgeInsets.all(4.0),

child: Text("List title"),

ListView.builder(

shrinkWrap: true,

itemCount: 50,

itemBuilder: (BuildContext context, int index) {

return Text("item ${index}");

})

);

}

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 Row, Column, 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 :

 Widget drawTitleAndList() {
    return Column(
      children: [
        Container(
          padding: const EdgeInsets.all(4.0),
          child: Text("List title"),
        ),
        Expanded(
            child: ListView.builder(
                itemCount: 50,
                itemBuilder: (BuildContext context, int index) {
                  return Container(
                      padding: const EdgeInsets.all(4.0),
                      child: Text("item ${index}"));
                }))
      ],
    );
  }

Widget drawTitleAndList() {

return Column(

children: [

Container(

padding: const EdgeInsets.all(4.0),

child: Text("List title"),

Expanded(

child: ListView.builder(

itemCount: 50,

itemBuilder: (BuildContext context, int index) {

return Container(

padding: const EdgeInsets.all(4.0),

child: Text("item ${index}"));

}))

);

}

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 < 😉 />