SliverClipRRect class

A sliver that clips its child using a rounded rectangle.

By default, it clips the child to its bounds with the given borderRadius. 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: the entire rounded rectangle shifts inward so that corners are never hidden by the overlap. This produces a smoother visual when items scroll underneath a pinned header.
• 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('SliverClipRRect'),
      ),
    ),
    SliverClipRRect(
      borderRadius: .circular(16.0),
      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:

• SliverClipRect, which clips a sliver with a rectangle.
• ClipRRect, which clips a box widget with a rounded rectangle.
• ClipOverlapBehavior, which describes the available overlap-clipping strategies.
• CustomClipper, for creating custom clips.