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'),
    ),
  ],
)