'Flutter wrapping row elements
I was wondering what the best way is to make the code below make the elements go into a row, and lets say show 3 per row, and then wrap over to a new column. Sort of like flexbox, width 33% and set to wrap. I'm having trouble with this and any help is appreciated!
Expanded(
child :
ListView(
children: List.keys.map((String key) {
return new CheckboxListTile(
title: new Text(key),
value: List[key],
activeColor: Colors.deepPurple[400],
checkColor: Colors.white,
onChanged: (bool value) {
setState(() {
List[key] = value;
});
},
);
}).toList(),
),
),]);
Solution 1:[1]
What you are looking for is a GridView or a GridView.builder:
GridView.builder(
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
childAspectRatio: 3 / 2, // width/height ratio
mainAxisSpacing: 0, // between rows
crossAxisSpacing: 0, // between columns
),
itemBuilder: (BuildContext ctx, index) {
return YourWidget();
},
itemCount: yourListOfWidgets.length,
);
You can learn more about GridView the flutter docs, there is even a video which gives you a great overview about everything you need to know.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Jahn E. |
