Flutter中ElevatedButtonThemeData文本样式不生效问题

核心问题分析 #

• 文本颜色配置逻辑错误：ElevatedButton.styleFrom中，textStyle内的color属性不会直接生效——ElevatedButton的文本颜色由foregroundColor单独控制，而非嵌套在textStyle里。
• 主题获取方式不当：直接实例化AppTheme()获取主题，未通过Theme.of(context)关联当前上下文的主题配置，可能导致样式未正确应用。

修复方案 #

1. 修正主题内的按钮样式配置 #

将文本颜色通过foregroundColor单独设置，textStyle仅控制字体、字号等排版属性：

elevatedButtonTheme: ElevatedButtonThemeData(
  style: ElevatedButton.styleFrom(
    elevation: 5,
    backgroundColor: AppColors.primary,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(20),
    ),
    // 单独配置文本颜色
    foregroundColor: AppColors.primary,
    // 控制字体、字号、字族等排版样式
    textStyle: TextStyle(
      fontSize: 20,
      fontFamily: 'OpenSans-SemiBold',
    ),
  ),
),

2. 正确获取应用主题样式 #

通过Theme.of(context)获取当前上下文的主题，而非直接实例化主题类：

Widget build(BuildContext context) {
  return SizedBox(
    height: context.percentHeight * 8,
    width: context.percentWidth * 76,
    child: ElevatedButton(
      onPressed: onPressed,
      // 从上下文获取主题内的按钮样式
      style: Theme.of(context).elevatedButtonTheme.style,
      child: Text(text),
    ),
  );
}

补充：多状态文本颜色适配 #

如果需要适配按钮不同状态（如按下、禁用）的文本颜色，可使用MaterialStateProperty实现：

foregroundColor: MaterialStateProperty.resolveWith((states) {
  if (states.contains(MaterialState.pressed)) {
    return AppColors.primaryPressed;
  } else if (states.contains(MaterialState.disabled)) {
    return AppColors.primaryDisabled;
  }
  return AppColors.primary;
}),

内容的提问来源于stack exchange，提问作者Zoheth George