Flutter: Prevent Margin Clipping

Question

I have a horizontal ListView.builder. The image attached demonstrates my UI.

The listView (red). itemBuilder button widgets (blue); The margin (green).

When the list is scrolled to the edge, without a margin, my button will be visibly against the edge of the screen.

If I add a margin or padding via a Container or the ListView, it moves my UI in as expected.

However, when I scroll my list, items in the list are now clipped by this margin and do not scroll to the edge of the screen, but the margin boundary.

How can I have an inset that doesn't clip my list when scrolling?

Solution

ListView possess a padding property for that purpose.

The following code will offset the first element by 8. But that padding won't clip the list content, as opposed to wrapping ListView inside a Padding.

   ListView.builder(
      padding: EdgeInsets.only(top: 8.0),
      itemBuilder: (context, index) {
        return Container(
          height: 42.0,
          color: index % 2 == 0 ? Colors.red : Colors.blue,
        );
      },
    ),

Comments

[Josh Kahane]

This is not the case with horizontal scrolling and left/right padding.

[Rémi Rousselet]

I tested it on both axis, with and without reverse, and it does work.

[Rémi Rousselet]

If it doesn't work for you either submit a bug or add your code here. Because that shouldn't be. padding of listview exists only to not clip it's children.