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?

Mayorga

Answer 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

Crissman

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

Substantialism

Just to note, there's a bug on iOS where you can't tap the top items if you do this. github.com/flutter/flutter/issues/114498 – Watt

@OliverDixon you forgot to update this comment that this was user error with double scaffold, not in solution it self. It is not bugged nor it was – Folly

Answer 3

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.

Mayorga

Because its not a bug, its weird default behaviour of ListView... – Folly

Answer 4

You can wrap your listview with MediaQuery.removePadding

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

Breannabreanne

Great solution to remove the paddings for widgets not exposing the padding property! I was struggled for 3hrs trying to remove unexpected paddings added by Flutter overlay from the CalendarDatePicker, this is excellent! – Samons

You can just put padding: EdgeInsets.zero now, no need for all the extra stuff. – Watt

This solution works perfectly – Tabaret

this solution is unnecessarily complicated – Folly

Answer 5

MediaQuery.removePadding(
              context: context,
              removeTop: true,
              child: Padding(
                padding: EdgeInsets.zero,
                child: ListView.builder(
this will remove any excess padding issue that is hard to solve in the listview.builder

Taste