Skip to main content

​
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

{
  "type": "clipRRect",
  "borderRadius": 8.0,
  "clipBehavior": "antiAlias",
  "child": {
    "type": "container",
    "color": "#FF0000",
    "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.
clipBehaviorClipantiAliasThe clipping behavior when content extends beyond the rounded rectangle.
childWidgetRequiredThe widget to clip with rounded corners.

​
BorderRadius Format Options

The borderRadius property can be specified in multiple formats:

​
Single Value (applies to all corners)

{
  "type": "clipRRect",
  "borderRadius": 8.0,
  "child": { ... }
}

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

{
  "type": "clipRRect",
  "borderRadius": [8.0, 16.0, 8.0, 16.0],
  "child": { ... }
}

​
Object Format (specify each corner individually)

{
  "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

{
  "type": "clipRRect",
  "borderRadius": 12.0,
  "child": {
    "type": "container",
    "color": "#2196F3",
    "height": 100,
    "width": 200
  }
}

​
Rounded Image

{
  "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

{
  "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
⌘I