Change color when onPressed in flutter using Provider

Question

How can I change the color using Provider State Management instead of setState()

I have one Button by default color is black then - 1st click color is blue, 2nd click color is red, 3rd click color is green 4th click color is black(by default) or purple how can I do it using Provider

Model:

class DriverStatusState extends ChangeNotifier {
  var numberOfClicks = 0;
  Color buttonColor = Colors.red;

  void changeColor() {
    numberOfClicks++;
    mapNumerOfClicksToColor(numberOfClicks);
    notifyListeners();
  }

  mapNumerOfClicksToColor(int num) {
    switch (num) {
      case 1:
        {
          buttonColor = Colors.orange;
        }
        break;
      case 2:
        {
          buttonColor = Colors.green;
        }
        break;
      default:
        {
          buttonColor = Colors.red;
        }
        break;
    }
    notifyListeners();
  }
}

Widget:

Consumer<DriverStatusState>(
            builder: (context, state, _) => ElevatedButton(
              child: Text('press me'),
              onPressed: () {
                state.mapNumerOfClicksToColor(0);
                     },
              style: ElevatedButton.styleFrom(primary: state.buttonColor),
            ),
          ),

you can create a setter for color value, then call `notifyListener();` — pmatatias, Aug 01 '22 at 15:06
@pmatatias how can I do that? can you provide me proper answer — Ravindra S. Patil, Aug 01 '22 at 15:13

score 1 · Accepted Answer · answered Aug 01 '22 at 15:15

1

You need to hold the number of clicks inside a variable, and every time you click the button, you will increment the varibale, and change the color according to the new value.

Assuming you are familiar with Provider, you would do something like this inside your model:

var numberOfClicks = 0;
Color buttonColor = Colors.white;


void changeColor(){
   numberOfClicks++;
   mapNumerOfClicksToColor(numberOfClicks);
   notifyListeners();
}

mapNumerOfClicksToColor(int num){
  switch(num){
    case 1:
       buttonColor = Colors.Blue;
    case 2:
        ....
    case 3:
        ....
  }
 notifyListeners();
}

answered Aug 01 '22 at 15:15

HKN

264
1
8

Hussein Qabalan not working I have update my question – Ravindra S. Patil Aug 01 '22 at 16:07
You need to call changeColor not the other function. Call it like this Provider.of(context).changeColor () – HKN Aug 01 '22 at 16:30
On onPressed fun? – Ravindra S. Patil Aug 01 '22 at 16:31
Yeah. And that function will handle the color change logic depending on the new value – HKN Aug 01 '22 at 16:33
state.changeColor(); also not work – Ravindra S. Patil Aug 01 '22 at 16:33
can you do that? – Ravindra S. Patil Aug 01 '22 at 16:33
Provider.of(context).changeColor () – HKN Aug 01 '22 at 16:34
not working above comment solution – Ravindra S. Patil Aug 01 '22 at 16:45
Could you please share your ChangeNotifierProvider? – HKN Aug 01 '22 at 16:47
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/246948/discussion-between-ravindra-s-patil-and-hussein-qabalan). – Ravindra S. Patil Aug 01 '22 at 16:50
Can I repeat this statement like infinite loop Like when Last no is red and it will be starting again index 1 – Ravindra S. Patil Aug 02 '22 at 14:24
1

when you hit default in switch case, reassign numberOfClicks to 0. – HKN Aug 02 '22 at 14:28

Change color when onPressed in flutter using Provider

1 Answers1