ConstrainedBox or as part of button styles.
Properties
| Property | Type | Description |
|---|---|---|
| minWidth | double? | Minimum width constraint in logical pixels. |
| maxWidth | double? | Maximum width constraint in logical pixels. |
| minHeight | double? | Minimum height constraint in logical pixels. |
| maxHeight | double? | Maximum height constraint in logical pixels. |
Example
StacConstrainedBox(
constraints: StacBoxConstraints(
minWidth: 100.0,
maxWidth: 300.0,
minHeight: 50.0,
maxHeight: 200.0,
),
child: StacContainer(
color: StacColors.blue,
child: StacText(data: 'Constrained'),
),
)
{
"type": "constrainedBox",
"constraints": {
"minWidth": 100.0,
"maxWidth": 300.0,
"minHeight": 50.0,
"maxHeight": 200.0
},
"child": {
"type": "container",
"color": "#2196F3",
"child": {
"type": "text",
"data": "Constrained"
}
}
}
Common Constraint Patterns
Fixed Width
StacConstrainedBox(
constraints: StacBoxConstraints(
minWidth: 200.0,
maxWidth: 200.0,
),
child: StacElevatedButton(
child: StacText(data: 'Fixed Width Button'),
),
)
{
"type": "constrainedBox",
"constraints": {
"minWidth": 200.0,
"maxWidth": 200.0
},
"child": {
"type": "elevatedButton",
"child": { "type": "text", "data": "Fixed Width Button" }
}
}
Minimum Size
StacConstrainedBox(
constraints: StacBoxConstraints(
minWidth: 150.0,
minHeight: 100.0,
),
child: StacCard(
child: StacCenter(
child: StacText(data: 'At least 150x100'),
),
),
)
{
"type": "constrainedBox",
"constraints": {
"minWidth": 150.0,
"minHeight": 100.0
},
"child": {
"type": "card",
"child": {
"type": "center",
"child": { "type": "text", "data": "At least 150x100" }
}
}
}
Maximum Size
StacConstrainedBox(
constraints: StacBoxConstraints(
maxWidth: 400.0,
maxHeight: 300.0,
),
child: StacImage(
network: 'https://example.com/large-image.jpg',
fit: StacBoxFit.contain,
),
)
{
"type": "constrainedBox",
"constraints": {
"maxWidth": 400.0,
"maxHeight": 300.0
},
"child": {
"type": "image",
"network": "https://example.com/large-image.jpg",
"fit": "contain"
}
}
With Button Style
StacElevatedButton(
style: StacButtonStyle(
minimumSize: StacSize(width: 200.0, height: 48.0),
maximumSize: StacSize(width: 300.0, height: 56.0),
),
child: StacText(data: 'Styled Button'),
)
{
"type": "elevatedButton",
"style": {
"minimumSize": { "width": 200.0, "height": 48.0 },
"maximumSize": { "width": 300.0, "height": 56.0 }
},
"child": {
"type": "text",
"data": "Styled Button"
}
}
Infinite Constraints
Usedouble.infinity for unbounded constraints:
StacConstrainedBox(
constraints: StacBoxConstraints(
minWidth: double.infinity, // Full width
minHeight: 100.0,
),
child: StacContainer(
color: StacColors.blue,
child: StacCenter(
child: StacText(
data: 'Full Width',
style: StacTextStyle(color: StacColors.white),
),
),
),
)
{
"type": "constrainedBox",
"constraints": {
"minWidth": "infinity",
"minHeight": 100.0
},
"child": {
"type": "container",
"color": "#2196F3",
"child": {
"type": "center",
"child": {
"type": "text",
"data": "Full Width",
"style": { "color": "#FFFFFF" }
}
}
}
}