⇉

Flow Row

Horizontal wrapping layout. Children wrap to the next line when they overflow.

type: "flow_row"layoutscontainer

Wrapping Chip Cloud

Tags that wrap to next line

All

Cars

Real Estate

Electronics

Services

Fashion

{
  "type": "flow_row",
  "data": {
    "children": [
      {
        "type": "chip",
        "data": {
          "checked": true,
          "child": {
            "type": "text",
            "data": {
              "value": "All",
              "ui": {
                "style": {
                  "typography": {
                    "style": "captionSemiBold"
                  }
                }
              }
            }
          }
        }
      },
      {
        "type": "chip",
        "data": {
          "checked": false,
          "child": {
            "type": "text",
            "data": {
              "value": "Cars",
              "ui": {
                "style": {
                  "typography": {
                    "style": "captionSemiBold"
                  }
                }
              }
            }
          }
        }
      },
      {
        "type": "chip",
        "data": {
          "checked": false,
          "child": {
            "type": "text",
            "data": {
              "value": "Real Estate",
              "ui": {
                "style": {
                  "typography": {
                    "style": "captionSemiBold"
                  }
                }
              }
            }
          }
        }
      },
      {
        "type": "chip",
        "data": {
          "checked": false,
          "child": {
            "type": "text",
            "data": {
              "value": "Electronics",
              "ui": {
                "style": {
                  "typography": {
                    "style": "captionSemiBold"
                  }
                }
              }
            }
          }
        }
      },
      {
        "type": "chip",
        "data": {
          "checked": false,
          "child": {
            "type": "text",
            "data": {
              "value": "Services",
              "ui": {
                "style": {
                  "typography": {
                    "style": "captionSemiBold"
                  }
                }
              }
            }
          }
        }
      },
      {
        "type": "chip",
        "data": {
          "checked": false,
          "child": {
            "type": "text",
            "data": {
              "value": "Fashion",
              "ui": {
                "style": {
                  "typography": {
                    "style": "captionSemiBold"
                  }
                }
              }
            }
          }
        }
      }
    ],
    "ui": {
      "layout": {
        "spacing": 8,
        "size": {
          "width": 300
        }
      }
    }
  }
}

Quick Start

{
  "type": "flow_row",
  "data": {}
}

Style Fields

Layout Fields

Field	Type	Default	Description
spacing	int	0	Horizontal gap between children in dp
cross_axis_spacing	int	0	Vertical gap between wrapped lines in dp
main_axis	enum startendcenterspace_betweenspace_aroundspace_evenly	start	Horizontal arrangement
cross_axis	enum startendcenter	start	Vertical alignment
max_items_per_line	int	—	Max items per line (Android only)
max_lines	int	—	Max number of wrapped lines (Android only)

Parent Layout Fields

Examples

Cross-Axis Spacing

Different horizontal and vertical gaps

Tag A

Tag B

Tag C

Tag D

Tag E

{
  "type": "flow_row",
  "data": {
    "children": [
      {
        "type": "text",
        "data": {
          "value": "Tag A",
          "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 B",
          "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 C",
          "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 D",
          "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 E",
          "ui": {
            "style": {
              "typography": {
                "style": "captionSemiBold"
              },
              "background": {
                "palette": "purple",
                "shade": 50
              },
              "color": {
                "palette": "purple",
                "shade": 500
              },
              "cornerRadius": 16
            },
            "layout": {
              "padding": {
                "horizontal": 12,
                "vertical": 6
              }
            }
          }
        }
      }
    ],
    "ui": {
      "layout": {
        "spacing": 12,
        "cross_axis_spacing": 4,
        "size": {
          "width": 250
        }
      }
    }
  }
}

Horizontal Grid

Flow Column