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.
Stac provides various shape border classes to define the shape of widgets like buttons, cards, and containers.
Available Shape Borders
| Class | Description |
|---|
StacRoundedRectangleBorder | Rectangle with rounded corners. |
StacCircleBorder | Circular shape. |
StacBeveledRectangleBorder | Rectangle with beveled (cut) corners. |
StacContinuousRectangleBorder | Rectangle with smooth continuous corners. |
StacRoundedRectangleBorder
Properties
| Property | Type | Description |
|---|
| borderRadius | Map<String, dynamic>? | Border radius for rounded corners. |
| side | Map<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
| Property | Type | Description |
|---|
| eccentricity | double? | Eccentricity of the circle (0.0 to 1.0). |
| side | Map<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
| Property | Type | Description |
|---|
| borderRadius | Map<String, dynamic>? | Border radius for beveled corners. |
| side | Map<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),
),
)
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'),
),
],
)
