SliverClipRect class

A sliver that clips its child using a rectangle.

By default, it clips the child to its bounds. It can also clip based on a custom clipper.

This widget is particularly useful when used in a CustomScrollView with pinned slivers (like SliverAppBar with SliverAppBar.pinned set to true).

The clipOverlap parameter controls how the clip reacts to the area that overlaps with a preceding pinned sliver:

• ClipOverlapBehavior.followEdge (default): the clip rectangle is truncated at the overlap boundary.
• ClipOverlapBehavior.preserveShape: behaves exactly like ClipOverlapBehavior.followEdge here, because a plain rectangle has no rounded corners to preserve. Use SliverClipRRect to get the shifting behavior.
• ClipOverlapBehavior.none: the overlap is ignored and no additional clipping is applied.

CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      pinned: true,
      expandedHeight: 200.0,
      backgroundColor: Colors.blue.withAlpha(128), // Semi-transparent
      flexibleSpace: const FlexibleSpaceBar(
        title: Text('SliverClipRect'),
      ),
    ),
    SliverClipRect(
      sliver: SliverList(
        delegate: SliverChildBuilderDelegate(
          (BuildContext context, int index) {
            return Container(
              height: 100.0,
              color: index.isEven ? Colors.grey[200] : Colors.grey[300],
              child: Center(child: Text('Item $index')),
            );
          },
          childCount: 20,
        ),
      ),
    ),
  ],
)

See also:

• SliverClipRRect, which clips a sliver with a rounded rectangle.
• ClipRect, which clips a box widget.
• CustomClipper, for creating custom clips.