Vertical wrapping layout. Children wrap to the next column when they overflow. Requires a fixed height.
{
"type": "flow_column",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "Tag 1",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"background": {
"palette": "primary",
"shade": 50
},
"color": {
"palette": "primary",
"shade": 500
},
"cornerRadius": 16
},
"layout": {
"padding": {
"horizontal": 12,
"vertical": 6
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Tag 2",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"background": {
"palette": "success",
"shade": 50
},
"color": {
"palette": "success",
"shade": 500
},
"cornerRadius": 16
},
"layout": {
"padding": {
"horizontal": 12,
"vertical": 6
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Tag 3",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"background": {
"palette": "warning",
"shade": 50
},
"color": {
"palette": "warning",
"shade": 500
},
"cornerRadius": 16
},
"layout": {
"padding": {
"horizontal": 12,
"vertical": 6
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Tag 4",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"background": {
"palette": "error",
"shade": 50
},
"color": {
"palette": "error",
"shade": 500
},
"cornerRadius": 16
},
"layout": {
"padding": {
"horizontal": 12,
"vertical": 6
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Tag 5",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"background": {
"palette": "purple",
"shade": 50
},
"color": {
"palette": "purple",
"shade": 500
},
"cornerRadius": 16
},
"layout": {
"padding": {
"horizontal": 12,
"vertical": 6
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Tag 6",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"background": {
"palette": "cyan",
"shade": 50
},
"color": {
"palette": "cyan",
"shade": 500
},
"cornerRadius": 16
},
"layout": {
"padding": {
"horizontal": 12,
"vertical": 6
}
}
}
}
}
],
"ui": {
"layout": {
"spacing": 8,
"cross_axis_spacing": 8,
"size": {
"height": 100,
"width": "fill"
}
}
}
}
}{
"type": "flow_column",
"data": {}
}| Field | Type | Default | Description |
|---|---|---|---|
spacing | int | 0 | Vertical gap between children in dp |
cross_axis_spacing | int | 0 | Horizontal gap between wrapped columns in dp |
main_axis | enum startendcenterspace_betweenspace_aroundspace_evenly | start | Vertical arrangement |
cross_axis | enum startendcenter | start | Horizontal alignment |
max_items_per_line | int | — | Max items per column (Android only) |
max_lines | int | — | Max number of wrapped columns (Android only) |