Flutter: unexpected space at the top of ListView

Question

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?

Answer 1

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) {}
);

Answer 2

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