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 tertiary 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 tertiary 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.
CodePudding user response:
Instead of using a SizedBox I suggest you to use the buttons provided by flutter dev: https://docs.flutter.dev/release/breaking-changes/buttons
A simple try you can give is:
RaisedButton(
child: new Text('Attention'),
textColor: Colors.white,
color: pressColor ? Colors.grey : Colors.blue, //Choose your personal colors
onPressed: () => setState(() => pressColor = !pressColor), //change the button colors
);
CodePudding user response:
Inside Material property, replace color: pressed ?
with color: pressed == true ?
CodePudding user response:
Is it necessary to use tertiary operator? you me change value of buttonColor in function you are calling in onClickAction.
Color buttonColor = const Color(0xff2196f3);
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;
const Color iconColor = Color(0xffffffff);
const Color buttonTextColor = Color(0xffffffff);
const Color clickedcolor = Color.fromARGB(255, 143, 143, 143);
return Container(
padding: const EdgeInsets.only(
left: buttonMargin,
right: buttonMargin,
top: buttonMargin,
bottom: buttonMargin),
child: SizedBox.fromSize(
size: Size(buttonSizeX, buttonSizeY),
child: Material(
color: buttonColor,
child: InkWell(
onTap: () {
setState(() {});
onClickAction();
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(icon_, color: iconColor, size: iconSize),
Text(text_,
style: TextStyle(
fontSize: buttonTextSize,
color: buttonTextColor)),
])))));
}
//pass it on onClickAction
onClick() {
debugPrint("CLICKED");
buttonColor = Color.fromARGB(255, 143, 143, 143);
}