androidflutterdartbuttongroup

Buttons not rendering properly inside GroupButton


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:
enter image description here


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

enter image description here



How do I render the buttons properly?


Solution

  • 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:
    enter image description here