'Flutter: unexpected space at the top of ListView

I have the following source code:

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: CustomScrollView(
      controller: scrollController,
      slivers: <Widget>[
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (context, cardIndex) {
              return Container(
                color: Colors.white,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      'Main Course',
                      style: kRestaurantMenuTypeStyle,
                    ),
                    ListView.builder(
                      itemCount: menuCards[cardIndex].menuItems.length,
                      shrinkWrap: true,
                      physics: NeverScrollableScrollPhysics(),
                      scrollDirection: Axis.vertical,
                      itemBuilder: (context, itemIndex) {
                        return RestaurantMenuItem(
                          menuItem: menuCards[cardIndex].menuItems[itemIndex],
                        );
                      },
                    ),
                  ],
                ),
              );
            },
            childCount: menuCards.length,
          ),
        ),
      ],
    ),
  );
}

Unfortunately, the ListView.builder() creates this extra space on top automatically. This is shown in the image below. That is the big white space between the 'Main Course' and 'Pancit Malabon' texts.

I don't understand why ListView does that. How do I remove the space?

flutter listview

Solution 1:^[1]

Looking at your screenshot, the ListView scrolls close to the top of the screen and by default, ListView adds a padding to avoid obstructing the system UI. So a zero padding would remove the extra space.

By default, ListView will automatically pad the list's scrollable extremities to avoid partial obstructions indicated by MediaQuery's padding. To avoid this behavior, override with a zero padding property.

Source : ListView

Solution 2:^[2]

To avoid this behaviour of listview, override padding property with a zero [padding]

return ListView.builder(
      padding: EdgeInsets.zero,
      itemCount: data.items.length,
      itemBuilder: (context, index) {}
);

Solution 3:^[3]

Add padding: EdgeInsets.zero, inside of ListView.builder to remove the extra spacing. ListView adds extra padding so that it doesn't break the UI.

Example:

ListView.builder(
  padding: EdgeInsets.zero,
  // other parameters
),

Solution 4:^[4]

I solved the issue by adding a padding to my list view like so:

ListView.builder(
  padding: EdgeInsets.only(top: 0.0),
  ...
),

I don't understand why the solution works. If someone can explain the bug, I can accept theirs as the correct answer.

Solution 5:^[5]

You can wrap your listview with MediaQuery.removePadding

MediaQuery.removePadding(
  context: context,
  removeTop: true,
  child: ListView(...),
)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Victor Eronmosele
Solution 2	Ashraful
Solution 3	Imran Sefat
Solution 4
Solution 5	Shailandra Rajput

'Flutter: unexpected space at the top of ListView

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]