Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.stac.dev/llms.txt

Use this file to discover all available pages before exploring further.

The ClipRRect widget in Stac allows you to clip its child using rounded rectangles. This is useful when you want to create UI elements with rounded corners.

​
Usage

StacClipRRect(
  borderRadius: StacBorderRadius.all(8.0),
  clipBehavior: StacClip.antiAlias,
  child: StacContainer(
    color: StacColors.red,
    height: 100,
    width: 100,
  ),
)

​
Properties

PropertyTypeDefaultDescription
borderRadiusStacBorderRadiusStacBorderRadius() (0 for all corners)The border radius of the rounded corners. Can be specified as a single value, a list of 4 values, or an object with individual corner values.
clipBehaviorStacClipantiAliasThe clipping behavior when content extends beyond the rounded rectangle.
childStacWidgetRequiredThe widget to clip with rounded corners.

​
BorderRadius Format Options

The borderRadius property can be specified in multiple formats:

​
Single Value (applies to all corners)

StacClipRRect(
  borderRadius: StacBorderRadius.all(8.0),
  child: /* ... */,
)

​
List Format (topLeft, topRight, bottomLeft, bottomRight)

StacClipRRect(
  borderRadius: StacBorderRadius.only(
    topLeft: 8.0,
    topRight: 16.0,
    bottomLeft: 8.0,
    bottomRight: 16.0,
  ),
  child: /* ... */,
)

​
Object Format (specify each corner individually)

StacClipRRect(
  borderRadius: StacBorderRadius(
    topLeft: 8.0,
    topRight: 16.0,
    bottomLeft: 8.0,
    bottomRight: 16.0,
  ),
  child: /* ... */,
)

​
Clip Behavior Options

The clipBehavior property accepts the following values:
  • "antiAlias" (default): Clip using anti-aliasing for smoother edges
  • "hardEdge": Clip without anti-aliasing for sharper edges
  • "antiAliasWithSaveLayer": Anti-aliased clipping with an offscreen buffer (higher quality but slower)
  • "none": No clipping (not recommended for ClipRRect)

​
Examples

​
Basic Rounded Container

StacClipRRect(
  borderRadius: StacBorderRadius.all(12.0),
  child: StacContainer(
    color: StacColors.blue,
    height: 100,
    width: 200,
  ),
)

​
Rounded Image

StacClipRRect(
  borderRadius: StacBorderRadius.all(8.0),
  child: StacImage(
    src: 'https://example.com/image.jpg',
    width: 200,
    height: 200,
    fit: StacBoxFit.cover,
  ),
)

​
Card with Different Corner Radii

StacClipRRect(
  borderRadius: StacBorderRadius(
    topLeft: 20.0,
    topRight: 20.0,
    bottomLeft: 0.0,
    bottomRight: 0.0,
  ),
  child: StacContainer(
    color: StacColors.white,
    padding: StacEdgeInsets.all(16.0),
    child: StacColumn(
      children: [
        StacText(
          data: 'Card Title',
          style: StacTextStyle(fontSize: 18.0, fontWeight: StacFontWeight.bold),
        ),
        StacText(data: 'Card content goes here'),
      ],
    ),
  ),
)
  • Container - Often used as a child of ClipRRect
  • Card - A pre-styled container with elevation and rounded corners