Flutter] 如何切换多个按钮的 colors

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

-> You can create one object of Color class

-> Assign that object to all OutlinedButton with default color

-> While click on first button, as per your condition set color and refresh it using setState()

Answer 2

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])));
                  })

Answer 3

I solved my problem by ? : ? : operator.

p0_0 = true;
p0_1 = false;
p0_2 = false;

...

onPressed:()
{
p0_0 = false;
p0_1 = true;
p0_2 = false; 
setState(){
};

},
style: OutlinedButton.styleFrom( primary: colorlist_down.elementAt(2),side: BorderSide(color: p0_1? Colors.amberAccent:Colors.white, width: 2),