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'),
)
{
"type": "elevatedButton",
"style": {
"shape": {
"type": "roundedRectangleBorder",
"borderRadius": 12.0,
"side": {
"color": "#2196F3",
"width": 2.0
}
}
},
"child": {
"type": "text",
"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'),
)
{
"type": "elevatedButton",
"style": {
"shape": {
"type": "circleBorder",
"side": {
"color": "#4CAF50",
"width": 2.0
}
}
},
"child": {
"type": "icon",
"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'),
),
)
{
"type": "card",
"shape": {
"type": "beveledRectangleBorder",
"borderRadius": 16.0
},
"child": {
"type": "padding",
"padding": 16.0,
"child": {
"type": "text",
"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),
),
)
{
"type": "container",
"decoration": {
"color": "#2196F3",
"borderRadius": {
"topLeft": 20.0,
"topRight": 20.0,
"bottomLeft": 0.0,
"bottomRight": 0.0
}
},
"padding": 16.0,
"child": {
"type": "text",
"data": "Top Rounded Container",
"style": { "color": "#FFFFFF" }
}
}
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'),
),
],
)
{
"type": "column",
"children": [
{
"type": "elevatedButton",
"style": {
"shape": {
"type": "roundedRectangleBorder",
"borderRadius": 8.0
}
},
"child": { "type": "text", "data": "Rounded" }
},
{ "type": "sizedBox", "height": 8.0 },
{
"type": "elevatedButton",
"style": {
"shape": {
"type": "roundedRectangleBorder",
"borderRadius": 50.0
}
},
"child": { "type": "text", "data": "Stadium" }
},
{ "type": "sizedBox", "height": 8.0 },
{
"type": "elevatedButton",
"style": {
"shape": { "type": "circleBorder" },
"minimumSize": { "width": 56.0, "height": 56.0 }
},
"child": { "type": "icon", "icon": "favorite" }
}
]
}