Flutter] How can I toggle colors of multiple buttons-CodePudding

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 .

CodePudding user response：

-> 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()

CodePudding user response：

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

CodePudding user response：

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