Properties
| Property | Type | Description |
|---|---|---|
| direction | StacAxis | The direction to use as the main axis. |
| alignment | StacWrapAlignment | How the children within a run should be placed in the main axis. |
| spacing | double | How much space to place between children in a run in the main axis. |
| runAlignment | StacWrapAlignment | How the runs themselves should be placed in the cross axis. |
| runSpacing | double | How much space to place between the runs themselves in the cross axis. |
| crossAxisAlignment | StacWrapCrossAlignment | How the children within a run should be aligned relative to each other in the cross axis. |
| textDirection | StacTextDirection | Determines the order to lay children out horizontally and how to interpret start and end in the horizontal direction. |
| verticalDirection | StacVerticalDirection | Determines the order to lay children out vertically and how to interpret start and end in the vertical direction. |
| clipBehavior | StacClip | The content will be clipped (or not) according to this option. |
| children | List<StacWidget> | The widgets below this widget in the tree. |
Example
- Dart
- JSON
- Preview
StacWrap(
spacing: 8.0,
runSpacing: 4.0,
children: [
StacContainer(
color: StacColors.red,
width: 100,
height: 100,
child: StacCenter(child: StacText(data: '1', style: StacTextStyle(color: StacColors.white))),
),
StacContainer(
color: StacColors.pink,
width: 100,
height: 100,
child: StacCenter(child: StacText(data: '2', style: StacTextStyle(color: StacColors.white))),
),
StacContainer(
color: StacColors.purple,
width: 100,
height: 100,
child: StacCenter(child: StacText(data: '3', style: StacTextStyle(color: StacColors.white))),
),
StacContainer(
color: StacColors.deepPurple,
width: 100,
height: 100,
child: StacCenter(child: StacText(data: '4', style: StacTextStyle(color: StacColors.white))),
),
],
)
{
"type": "wrap",
"spacing": 8,
"runSpacing": 4,
"children": [
{
"type": "container",
"color": "#FFF44336",
"width": 100,
"height": 100,
"child": {
"type": "center",
"child": {
"type": "text",
"data": "1",
"style": {
"color": "#FFFFFFFF"
}
}
}
},
{
"type": "container",
"color": "#FFE91E63",
"width": 100,
"height": 100,
"child": {
"type": "center",
"child": {
"type": "text",
"data": "2",
"style": {
"color": "#FFFFFFFF"
}
}
}
},
{
"type": "container",
"color": "#FF9C27B0",
"width": 100,
"height": 100,
"child": {
"type": "center",
"child": {
"type": "text",
"data": "3",
"style": {
"color": "#FFFFFFFF"
}
}
}
},
{
"type": "container",
"color": "#FF673AB7",
"width": 100,
"height": 100,
"child": {
"type": "center",
"child": {
"type": "text",
"data": "4",
"style": {
"color": "#FFFFFFFF"
}
}
}
}
]
}