CODEWITHSUNDEEP
flutterlistview
user1506104
user1506104

Reputation: 7086

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.

enter image description here

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

Upvotes: 20

Views: 10249

Answers (5)

Dipnarayan Roy
Dipnarayan Roy

Reputation: 81

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

NB: This will remove any excess padding issue that is hard to solve in the ListView.builder

Upvotes: 0

Shailendra Rajput
Shailendra Rajput

Reputation: 2902

You can wrap your listview with MediaQuery.removePadding

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

Upvotes: 4

Ashraful Haque
Ashraful Haque

Reputation: 1698

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

Upvotes: 50

Victor Eronmosele
Victor Eronmosele

Reputation: 7706

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

Upvotes: 15

user1506104
user1506104

Reputation: 7086

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.

Upvotes: 6

Related Questions