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(),
),
),]);
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With