Reputation: 4392
I'm trying to fit each toggle button into each gridview container. Basically with my code all my toggle buttons are trying to fit into one grid view container instead of separated grid view container. Is there any way to mix these two widgets together?
GridView.count(
crossAxisCount: 2,
physics: NeverScrollableScrollPhysics(),
children: <Widget>[
Padding(
padding: const EdgeInsets.all(12.0),
child: ToggleButtons(
selectedColor: Colors.red,
isSelected: selected,
onPressed: onControlPress,
children: <Widget>[
Icon(Icons.info),
Icon(Icons.title),
Icon(Icons.info),
Icon(Icons.info),
],
),
),
],
),
Upvotes: 5
Views: 3146
Reputation: 31
I recommend to use LonelyWolf's answer with this little twitch to it!
GridView.count(
crossAxisCount: 2,
children: [
Icon(Icons.info),
Icon(Icons.title),
Icon(Icons.info),
Icon(Icons.title)
].asMap().entries.map((widget) {
return ToggleButtons(
selectedColor: Colors.red,
isSelected: [selected[widget.key]],
onPressed: (_) => onCapPress(widget.key),
children: [widget.value],
);
}).toList()
Upvotes: 2
Reputation: 3488
Create ToggleButtons
in each grid :
Widget build(BuildContext context) {
var counter = 0;
return GridView.count(
crossAxisCount: 2,
children: [
Icon(Icons.info),
Icon(Icons.title),
Icon(Icons.info),
Icon(Icons.title)
].map((widget) {
final index = ++counter - 1;
return ToggleButtons(
selectedColor: Colors.red,
isSelected: [selected[index]],
onPressed: (_) => onControlPress(index),
children: [widget],
);
}).toList());
}
Upvotes: 5