Conditional highlightColor on MaterialButton in flutter - flutter

Question

I'm trying to build a quiz with multiple buttons. When the user presses the button for the right answer I want the button to have a highlightColor of green. If its the wrong button then the highlightColor is red. The issue I have is when I click a button the right highlightColor will show but you also get a glimpse of the wrong color. If I use the splashColor instead then you only see the right color which is good but the effect is not the same.
Here is a simplified version of the code with just one button but with the same issue.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
bool _winner = false;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Press the button:',
),
MaterialButton(
minWidth: MediaQuery.of(context).size.width * 0.90,
height: 60.0,
color: Colors.grey[800],
splashColor: Colors.transparent,
//splashColor: _winner ? Colors.green : Colors.red,
highlightColor: _winner ? Colors.green : Colors.red,
onPressed: () {
setState(() {
});
_winner ? _winner=false : _winner=true;
}
),
],
),
),
);
}
}

Answer 1

Thing here with the highlight fade animation that it last 200 milliseconds and the setState is called before the animation is over, thats why you get glimpse of the other color.
One solution is to setState after 200 milliseconds delay.
onPressed: () {
Future.delayed(Duration(milliseconds: 200), () {
setState(() {});
_winner ? _winner = false : _winner = true;
});
}),

Answer 2

another solution is to use GestureDetector with onTap event
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
bool _winner = true;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('widget.title'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Press the button:',
),
GestureDetector(
onTapDown: (_) {
setState(() {});
_winner ? _winner = false : _winner = true;
},
child: ColorButton(
isWinner: _winner,
),
),
],
),
),
);
}
}
class ColorButton extends StatefulWidget {
const ColorButton({
Key key,
#required this.isWinner,
}) : super(key: key);
final bool isWinner;
#override
_ColorButtonState createState() => _ColorButtonState();
}
class _ColorButtonState extends State<ColorButton> {
bool isPressed = false;
#override
Widget build(BuildContext context) {
return GestureDetector(
onTapDown: (_) {
setState(() {
isPressed = true;
});
},
onTapUp: (_) {
setState(() {
isPressed = false;
});
},
child: AnimatedContainer(
duration: Duration(milliseconds: 300),
height: 60.0,
width: MediaQuery.of(context).size.width * 0.9,
color: isPressed
? widget.isWinner ? Colors.green : Colors.red
: Colors.grey[800],
),
);
}
}