I'm trying to make buttons that turn grey after having been pressed. I read up on how to do this. The best way I could find is to set the material color with a ternary operator and then change the condition for that in a setState(() {})
block:
Container vehicleButton(IconData icon_, String text_, {required Function onClickAction}){
const double buttonSizeX = 200;
const double buttonSizeY = 100;
const double iconSize = 60;
const double buttonTextSize = 15;
const double buttonMargin = 5;
Color buttonColor = const Color(0xff2196f3);
const Color iconColor = Color(0xffffffff);
const Color buttonTextColor = Color(0xffffffff);
bool pressed = false;
return Container(padding: const EdgeInsets.only(left: buttonMargin, right: buttonMargin, top: buttonMargin, bottom: buttonMargin), child: SizedBox.fromSize(
size: Size(buttonSizeX, buttonSizeY), child: Material(color: pressed ? Color.fromARGB(255, 143, 143, 143) : buttonColor, child: InkWell(
onTap: () {
setState(() {
pressed = true;
});
onClickAction();
},
child: Column(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
Icon(icon_, color: iconColor, size: iconSize),
Text(text_, style: TextStyle(fontSize: buttonTextSize, color: buttonTextColor)),
])))));
}
However, I'm getting a warning that the code after the ? in my ternary operator is dead code. And indeed, the button does not turn grey after pressing.
I thought maybe the values of Material are final and cannot be changed, but this wouldn't explain why all the examples I could find on the internet use this method.