Flutter: unexpected space at the top of ListView


I have the following source code:

Widget build(BuildContext context) {
  return Scaffold(
    body: CustomScrollView(
      controller: scrollController,
      slivers: <Widget>[
          delegate: SliverChildBuilderDelegate(
            (context, cardIndex) {
              return Container(
                color: Colors.white,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                      'Main Course',
                      style: kRestaurantMenuTypeStyle,
                      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.

enter image description here

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


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

Source : ListView

Answered By – Victor Eronmosele

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published