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'), ), ],)