Flutter: unexpected space at the top of ListView

user_1506104 0
Viewed 3507

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.

enter image description here

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

flutter listview
5 Answers

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

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

user_110391640

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
),
user_112652900

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.

user_15061040

You can wrap your listview with MediaQuery.removePadding

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