TextButton's text color not changing - flutter

Question

I added this theme for my TextButton.
textButtonTheme: TextButtonThemeData(
style: ButtonStyle(
shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0))),
textStyle: MaterialStateProperty.resolveWith(
(Set<MaterialState> states) {
if (states.contains(MaterialState.pressed) || states.contains(MaterialState.hovered))
return TextStyles.headline3.copyWith(
color: AppColors.dustyOrange,
);
return TextStyles.headline3;
},
),
side: MaterialStateProperty.resolveWith(
(Set<MaterialState> states) {
if (states.contains(MaterialState.pressed) || states.contains(MaterialState.hovered))
return BorderSide(
width: 1,
color: AppColors.dustyOrange,
);
return BorderSide(width: 1, color: AppColors.white.withOpacity(0.2));
},
),
),
)
and here is my TextButton:
TextButton(
onPressed: () => widget.onTap(),
child: Text(widget.title, style: theme?.textTheme.headline3),
style: theme?.textButtonTheme.style!.copyWith(
padding: MaterialStateProperty.all(EdgeInsets.symmetric(vertical: 15, horizontal: 20)),
)
)
The problem is that when the button pressed, the style of the button is changing, but the color is not.

Answer 1

There are generally three issue in your code. First, you don't need to assign style to the Text because TextButton itself has a style property. Second, you need to create a copy of TextStyle before you return it. And last, the color property needs to be changed to the foreground because the later gets precedence when there's a conflict between color and foreground.
Here's the minimal reproducible code:
#override
Widget build(BuildContext context) {
return Material(
body: Center(
child: Theme(
data: Theme.of(context).copyWith(
textButtonTheme: TextButtonThemeData(
style: ButtonStyle(
shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0))),
textStyle: MaterialStateProperty.resolveWith(
(Set<MaterialState> states) {
final headline3 = Theme.of(context).textTheme.headline3;
if (states.contains(MaterialState.pressed) || states.contains(MaterialState.hovered)) {
final textStyle = headline3.copyWith(foreground: Paint()..color = Colors.orange);
return textStyle;
}
return headline3;
},
),
),
),
),
child: TextButton(
onPressed: () {},
style: Theme.of(context).textButtonTheme.style,
child: Text('Button'),
),
),
),
);
}
Output of it