Flutter应用中TextButtonTheme设置的textColor属性未生效问题

问题根因 #

Flutter 按钮组件的样式优先级规则中，ButtonStyle内textStyle的color属性，会被按钮自身的foregroundColor状态控制属性覆盖，因此仅配置textStyle的颜色不会生效，只有字号、字重、字间距这类非颜色属性会正常透传给文本组件。

解决方案 #

直接在按钮主题配置中新增foregroundColor参数指定文本颜色即可，修改后的ThemeData配置参考如下：

final applicationTheme = ThemeData(
  fontFamily: 'Raleway',
  primarySwatch: MyColors.primary,
  appBarTheme: AppBarTheme(
    backgroundColor: MyColors.primary.shade900,
    toolbarTextStyle: TextStyles.appBar,
  ),
  elevatedButtonTheme: ElevatedButtonThemeData(
    style: ElevatedButton.styleFrom(
      primary: MyColors.primary.shade900,
      // 配置ElevatedButton文本颜色
      foregroundColor: Colors.white,
      textStyle: TextStyles.elevatedButton,
    ),
  ),
  textButtonTheme: TextButtonThemeData(
    style: TextButton.styleFrom(
      // 配置TextButton文本颜色
      foregroundColor: MyColors.primary.shade500,
      textStyle: TextStyles.textButton,
      shadowColor: MyColors.primary.shade500,
    ),
  ),
);

修改完成后，无需手动给TextButton的Text组件指定样式，全局配置的文本颜色即可正常生效。如果需要适配按钮禁用、按下等不同状态的文本颜色，可使用MaterialStateProperty实现更灵活的状态控制，示例如下：

foregroundColor: MaterialStateProperty.resolveWith((states) {
  // 禁用状态下文本为灰色
  if (states.contains(MaterialState.disabled)) return Colors.grey;
  // 按下状态下文本加深
  if (states.contains(MaterialState.pressed)) return MyColors.primary.shade700;
  // 默认状态文本颜色
  return MyColors.primary.shade500;
}),

内容的提问来源于stack exchange，提问作者Michał Powłoka