Skip to main content
Stac provides various shape border classes to define the shape of widgets like buttons, cards, and containers.

Available Shape Borders

ClassDescription
StacRoundedRectangleBorderRectangle with rounded corners.
StacCircleBorderCircular shape.
StacBeveledRectangleBorderRectangle with beveled (cut) corners.
StacContinuousRectangleBorderRectangle with smooth continuous corners.

StacRoundedRectangleBorder

Properties

PropertyTypeDescription
borderRadiusMap<String, dynamic>?Border radius for rounded corners.
sideMap<String, dynamic>?Border side properties.

Example

StacElevatedButton(
  style: StacButtonStyle(
    shape: StacRoundedRectangleBorder(
      borderRadius: StacBorderRadius.all(12.0),
      side: StacBorderSide(
        color: StacColors.blue,
        width: 2.0,
      ),
    ),
  ),
  child: StacText(data: 'Rounded Button'),
)

StacCircleBorder

Properties

PropertyTypeDescription
eccentricitydouble?Eccentricity of the circle (0.0 to 1.0).
sideMap<String, dynamic>?Border side properties.

Example

StacElevatedButton(
  style: StacButtonStyle(
    shape: StacCircleBorder(
      side: StacBorderSide(
        color: StacColors.green,
        width: 2.0,
      ),
    ),
  ),
  child: StacIcon(icon: 'add'),
)

StacBeveledRectangleBorder

Properties

PropertyTypeDescription
borderRadiusMap<String, dynamic>?Border radius for beveled corners.
sideMap<String, dynamic>?Border side properties.

Example

StacCard(
  shape: StacBeveledRectangleBorder(
    borderRadius: StacBorderRadius.all(16.0),
  ),
  child: StacPadding(
    padding: StacEdgeInsets.all(16.0),
    child: StacText(data: 'Beveled Card'),
  ),
)

With Container

StacContainer(
  decoration: StacBoxDecoration(
    color: StacColors.blue,
    borderRadius: StacBorderRadius.only(
      topLeft: 20.0,
      topRight: 20.0,
      bottomLeft: 0.0,
      bottomRight: 0.0,
    ),
  ),
  padding: StacEdgeInsets.all(16.0),
  child: StacText(
    data: 'Top Rounded Container',
    style: StacTextStyle(color: StacColors.white),
  ),
)

Button Shapes Comparison

StacColumn(
  children: [
    // Rounded Rectangle
    StacElevatedButton(
      style: StacButtonStyle(
        shape: StacRoundedRectangleBorder(
          borderRadius: StacBorderRadius.all(8.0),
        ),
      ),
      child: StacText(data: 'Rounded'),
    ),
    StacSizedBox(height: 8.0),
    // Stadium (pill shape)
    StacElevatedButton(
      style: StacButtonStyle(
        shape: StacRoundedRectangleBorder(
          borderRadius: StacBorderRadius.all(50.0),
        ),
      ),
      child: StacText(data: 'Stadium'),
    ),
    StacSizedBox(height: 8.0),
    // Circle
    StacElevatedButton(
      style: StacButtonStyle(
        shape: StacCircleBorder(),
        minimumSize: StacSize(width: 56.0, height: 56.0),
      ),
      child: StacIcon(icon: 'favorite'),
    ),
  ],
)