Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter - How do I toggle the color of a RaisedButton upon click?

I am trying to toggle the color of a raised button. Initially the button should be blue and when it is pressed it turns to grey. Right now I have a bool value called pressAttention and it is set to false. I am using this to initially set this the false. When the button is pressed it toggles the pressAttention bool, but it seems that the widget is never updated again.

new RaisedButton(
                  child: new Text("Attention"),
                  textColor: Colors.white,
                  shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0)),
                  color: pressAttention?Colors.grey:Colors.blue,
                  onPressed: () => doSomething("Attention"),
                )

void doSomething(String buttonName){
if(buttonName == "Attention"){
  if(pressAttention = false){
    pressAttention = true;
  } else {
    pressAttention = false;
  }
}

}

like image 562
Chris Avatar asked Jun 14 '18 18:06

Chris


People also ask

How do you change the button color when you click on a Flutter?

Go to your main. Inside the MaterialApp, find the ThemeData widget. Add the elevatedButtonTheme property inside and assign the ElevatedButtonThemeData(). Add the style property and change the color as you would change it for normal ElevatedButton. Place the ElevatedButton widget anywhere in your Flutter app and see.

How do you style an ElevatedButton in Flutter?

You can custom the shape of an elevated button by using the shape parameter of the styleFrom method. Example: ElevatedButton( onPressed: () {}, child: const Text('Kindacode.com'), style: ElevatedButton. styleFrom( primary: Colors.

How do you change the elevation color in Flutter?

It is not possible to change default elevation color right now in Flutter. And in my opinion, it won't be, because of Material Design principles. Create a wrapper Container then wrap your Button Widget (that has no elevation) with the Container. You can tweak the BoxShadow however you want.


2 Answers

This button will need to be created in the build of a State of a StatefulWidget, and the State must have a member variable bool pressAttention = false;. As Edman suggests, you need to make state changes in a setState callback for the Widget to redraw.

new RaisedButton(
  child: new Text('Attention'),
  textColor: Colors.white,
  shape: new RoundedRectangleBorder(
    borderRadius: new BorderRadius.circular(30.0),
  ),
  color: pressAttention ? Colors.grey : Colors.blue,
  onPressed: () => setState(() => pressAttention = !pressAttention),
);
like image 159
Richard Heap Avatar answered Sep 19 '22 17:09

Richard Heap


If you want the button to change color for the pressed state you just need to use the "highlightColor" property in RaisedButton

       RaisedButton(
          onPressed: () {},
          child: Text("Test"),
          highlightColor: YOUR_PRESSED_COLOR, //Replace with actual colors
          color: IDLE_STATE_COLOR,
        ),
like image 24
king_below_my_lord Avatar answered Sep 18 '22 17:09

king_below_my_lord