I'm trying to make a horizontally scrollable ButtonGroup.
I have a list of categories
and for each one I need a button to be rendered.
My code looks like this:
GroupButton(
buttons: [
for(final cat in categories)
ElevatedButton.icon(
onPressed: () {
_getCategory(cat.id);
},
icon: cat.icon,
label: Text(cat.name, style: const TextStyle(color: Colors.black),
),
),
],
)
I have the expected result but the buttons won't render
With this code the output looks like this:
How do I render the buttons properly?
As suggested by @Ivo in the comments
"It seems this group_button package is meant to just be used with text as input
"
The solution to my problem was adding a ListView with scrollDirection
set to horizontal
just like this:
SizedBox(
height: 40.0,
child: ListView(
scrollDirection: Axis.horizontal,
children:[
for(final cat in categories)
ElevatedButton.icon(
onPressed: () {
_getCategory(cat.id);
},
icon: cat.icon,
label: Text(cat.name, style: const TextStyle(color: Colors.black),),
style: ButtonStyle(minimumSize: MaterialStateProperty.all<Size>(const Size(150, 40))),
),
],
),
),