Flutter中如何修改TextButton的文字及图标背景色

FlatButton 从Flutter 2.0版本开始已被官方废弃，直接替换为TextButton即可，二者样式配置逻辑有调整，不需要单独给内部文字、图标分别设置颜色，通过按钮样式属性统一配置就能同时生效。

• 最简实现方式（官方推荐）
  使用TextButton.styleFrom方法构造样式，指定foregroundColor属性，该属性色值会自动应用到按钮内所有前景元素，包括文字、图标，同时按钮点击的水波纹效果也会自动适配该色值的透明度版本。
  示例代码：

// 带图标的TextButton直接用TextButton.icon构造更便捷
TextButton.icon(
  onPressed: () {
    // 填写你的点击逻辑
  },
  style: TextButton.styleFrom(
    foregroundColor: Colors.redAccent, // 文字、图标统一为红色
    // 如需修改按钮整体背景色，配置backgroundColor即可
    // backgroundColor: Colors.grey[200],
  ),
  icon: const Icon(Icons.favorite_border),
  label: const Text('收藏'),
)

如果是普通不带.icon构造的TextButton，自己在child里放Row组合图标和文字，这个配置同样生效。

• 多状态适配场景
  如果需要配置按钮不同交互状态（按下、禁用、聚焦）下的文字、图标颜色，可以直接用ButtonStyle配合MaterialStateProperty做精细控制：

TextButton(
  onPressed: () {
    // 点击逻辑
  },
  style: ButtonStyle(
    foregroundColor: MaterialStateProperty.resolveWith((states) {
      // 禁用状态显示灰色
      if (states.contains(MaterialState.disabled)) return Colors.grey;
      // 按下状态显示深橙色
      if (states.contains(MaterialState.pressed)) return Colors.deepOrange;
      // 默认状态显示绿色
      return Colors.green;
    }),
  ),
  child: Row(
    mainAxisSize: MainAxisSize.min,
    children: const [
      Icon(Icons.sharp_share),
      SizedBox(width: 6),
      Text('分享内容'),
    ],
  ),
)

注意：除非你需要单独让某个文字/图标和其他元素显示不同颜色，否则不要单独给内部的Text、Icon组件单独设色，统一在按钮style层配置的方式可维护性更高，也符合Material Design的组件设计规范。

内容的提问来源于stack exchange，提问作者pro playzz