ClipRRect

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

Dart
JSON
Preview

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

{
  "type": "clipRRect",
  "borderRadius": 8,
  "clipBehavior": "antiAlias",
  "child": {
    "type": "container",
    "color": "#FF0000",
    "height": 100,
    "width": 100
  }
}

Properties

Property	Type	Default	Description
`borderRadius`	`StacBorderRadius`	`StacBorderRadius()` (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.
`clipBehavior`	`StacClip`	`antiAlias`	The clipping behavior when content extends beyond the rounded rectangle.
`child`	`StacWidget`	Required	The 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: /* ... */,
)

{
  "type": "clipRRect",
  "borderRadius": 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: /* ... */,
)

{
  "type": "clipRRect",
  "borderRadius": [8.0, 16.0, 8.0, 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: /* ... */,
)

{
  "type": "clipRRect",
  "borderRadius": {
    "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,
  ),
)

{
  "type": "clipRRect",
  "borderRadius": 12.0,
  "child": {
    "type": "container",
    "color": "#2196F3",
    "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,
  ),
)

{
  "type": "clipRRect",
  "borderRadius": 8.0,
  "child": {
    "type": "image",
    "src": "https://example.com/image.jpg",
    "width": 200,
    "height": 200,
    "fit": "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'),
      ],
    ),
  ),
)

{
  "type": "clipRRect",
  "borderRadius": {
    "topLeft": 20.0,
    "topRight": 20.0,
    "bottomLeft": 0.0,
    "bottomRight": 0.0
  },
  "child": {
    "type": "container",
    "color": "#FFFFFF",
    "padding": 16.0,
    "child": {
      "type": "column",
      "children": [
        {
          "type": "text",
          "text": "Card Title",
          "style": {
            "fontSize": 18.0,
            "fontWeight": "bold"
          }
        },
        {
          "type": "text",
          "text": "Card content goes here"
        }
      ]
    }
  }
}

Container - Often used as a child of ClipRRect
Card - A pre-styled container with elevation and rounded corners

Layout Widgets

Display Widgets

Interactive Widgets

Data Widgets

Usage

Properties

BorderRadius Format Options

Single Value (applies to all corners)

List Format (topLeft, topRight, bottomLeft, bottomRight)

Object Format (specify each corner individually)

Clip Behavior Options

Examples

Basic Rounded Container

Rounded Image

Card with Different Corner Radii

​Usage

​Properties

​BorderRadius Format Options

​Single Value (applies to all corners)

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

​Object Format (specify each corner individually)

​Clip Behavior Options

​Examples

​Basic Rounded Container

​Rounded Image

​Card with Different Corner Radii

​Related Widgets

Usage

Properties

BorderRadius Format Options

Single Value (applies to all corners)

List Format (topLeft, topRight, bottomLeft, bottomRight)

Object Format (specify each corner individually)

Clip Behavior Options

Examples

Basic Rounded Container

Rounded Image

Card with Different Corner Radii

Related Widgets