CODEWITHSUNDEEP
listviewuser-interfacedartfluttermargin
Josh Kahane
Josh Kahane

Reputation: 17169

Flutter: Prevent Margin Clipping

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

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

enter image description here

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?

Upvotes: 13

Views: 13773

Answers (1)

Rémi Rousselet
Rémi Rousselet

Reputation: 277617

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

Upvotes: 25

Related Questions