Flow Layout in flutter example
Use Wrap
instead of Flow
.
Flow
is for more complicated custom layout. Wrap
is what is used to achieve the layout in your screenshot.
Wrap(
spacing: 8.0, // gap between adjacent chips
runSpacing: 4.0, // gap between lines
children: <Widget>[
Chip(
avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('AH')),
label: Text('Hamilton'),
),
Chip(
avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('ML')),
label: Text('Lafayette'),
),
Chip(
avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('HM')),
label: Text('Mulligan'),
),
Chip(
avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('JL')),
label: Text('Laurens'),
),
],
)
In Flutter wrap is batter widget for creating layout like your screenshot
Wrap : It can adjust its children according to the space available to it on the Screen. The default arrangement is horizontal (like a row) but you can make it vertical (like a column).
chip : This widget use for create TAG or chips
new Wrap(
spacing: 5.0, // horizontal gap between chips
runSpacing: 2.0, // gap between row
children: <Widget>[
new Chip(
label: new Text('One'),
),
new Chip(
label: new Text('Two'),
),
new Chip(
label: new Text('Three'),
),
new Chip(
label: new Text('Four'),
),
],
)