Buttons not rendering properly inside GroupButton

Question

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:

If I don't wrap the buttons with the GroupButtons I obtain this result:

How do I render the buttons properly?

Answer 1

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

The output will look like this: