How can I toggle the colors of multiple buttons in flutter?

Question

Let's suppose that I have 3 button( OutlinedButton, in my case).

What I want to make is to toggle the color of outlines of all buttons, not individually.

For example If I press button 1, the outline color of button 1 goes yellow, and the color of outlines of button 2 and 3 goes white.

What I tried is this :

    List<dynamic> colorlist_down = [Colors.amber,Colors.white,Colors.white];

...

return Row(
children:
[
OutlinedButton(
                        onPressed: (){
                          setState(() {
                            mode=0;
                            colorlist_down = [Colors.amber,Colors.white,Colors.white];
                          });
                        },
                    style: OutlinedButton.styleFrom(
                      primary: colorlist_down.elementAt(0),
                      side: BorderSide(color: colorlist_down.elementAt(0), width: 2),
                    ),

                        child: Text('Filter : Age',style: TextStyle(color: Colors.brown[900]))
                    ),
                      OutlinedButton(
                          onPressed: (){

                            setState(() {
                              mode=1;
                              colorlist_down = [Colors.white,Colors.amber,Colors.white];
                            });
                          },
                          style: OutlinedButton.styleFrom(
                              primary: colorlist_down.elementAt(1),
                            side: BorderSide(color: colorlist_down.elementAt(1), width: 2),

                          ),

                          child: Text('Filter : Gender',style: TextStyle(color: Colors.brown[900]))
                      ),
                      OutlinedButton(
                          onPressed: (){
                            setState(() {
                              mode=2;
                              colorlist_down = [Colors.white,Colors.white,Colors.amber];

                            });
                          },
                          style: OutlinedButton.styleFrom(
                              primary: colorlist_down.elementAt(2),
                            side: BorderSide(color: colorlist_down.elementAt(2), width: 2),

                          ),
                          child: Text('Filter : Location',style: TextStyle(color: Colors.brown[900]))
                      ),

]
);

Of course it did not work.

I think that the style of buttons do not react to state change and somehow found that I should use MaterialStateProperty, but cannot get how to use it correctly for my purpose. Somebody please give me a help .

Answer 1

For Each button to have its text and function, you may create a Label And Function class somewhere else.

class LabelAndFunction {
  String label;
  Function function;
  LabelAndFunction({required this.label, required this.function});
}

Then for you buttons create a list of TextLAbel and Functions

 List<LabelAndFunction> btnLbelsAndFunctions = [
    LabelAndFunction(
        label: "Filter : Age",
        function: () {
          // your function for filtering by age
        }),
    LabelAndFunction(
        label: "Filter: Gender",
        function: () {
          // your function for filtering by gender
        }),
    LabelAndFunction(
        label: "Filter: Location",
        function: () {
          // your function for filtering by location
        }),
  ];

Now to know which of the button is active, you can create an activeBtnIndex variable

int activeBtnIndex = 0

Then Make a listview Builder

ListView.builder(
                  itemCount: btnLbelsAndFunctions.length,
                  itemBuilder: (context, index) {
                    return OutlinedButton(
                        onPressed: () {
                          setState(() {
                            activeBtnIndex = index;
                          });
                          btnLbelsAndFunctions.elementAt(index).function();
                        },
                        style: OutlinedButton.styleFrom(
                          primary: activeBtnIndex == index
                              ? Colors.amber
                              : Colors.white,
                          side: BorderSide(
                            color: activeBtnIndex == index
                                ? Colors.amber
                                : Colors.white,
                          ),
                        ),
                        child: Text(btnLbelsAndFunctions.elementAt(index).label,
                            style: TextStyle(color: Colors.brown[900])));
                  })