Flutter中ElevatedButton设置onPrimary后前景文字颜色未生效如何解决

你为ElevatedButton的子Text组件显式指定了Theme.of(context).textTheme.bodyText1样式，默认的bodyText1自带固定前景色（通常为黑色），该显式设置的文本样式优先级高于ElevatedButton主题中配置的onPrimary前景色规则，导致按钮的白色前景色配置被覆盖，无法生效。

可根据需求选择以下任意一种方案解决：

• 方案一：移除Text组件的显式style配置，ElevatedButton会自动将onPrimary配置的白色应用到子Text上。如果需要统一按钮文本的字号、字体 fallback 等属性，可直接在全局ElevatedButton主题中配置textStyle，修改主题代码如下：

ThemeData appTheme(BuildContext context) {
  const fontFamilyFallBack = ['Lexend', 'NotoSans'];
  const buttonTextStyle = TextStyle(
    fontFamilyFallback: fontFamilyFallBack,
    fontSize: 14,
  );
  return ThemeData(
    primaryColor: Colors.white,
    backgroundColor: Colors.white,
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
        primary: Colors.green,
        onPrimary: Colors.white,
        textStyle: buttonTextStyle, // 统一配置按钮内文本样式
      ),
    ),
    textTheme: const TextTheme(
      headline1: TextStyle(
        fontFamilyFallback: fontFamilyFallBack,
      ),
      subtitle1: TextStyle(
        fontFamilyFallback: fontFamilyFallBack,
        fontSize: 20,
      ),
      bodyText1: TextStyle(
        fontFamilyFallback: fontFamilyFallBack,
        fontSize: 14,
      ),
    ),
  );
}

之后使用按钮时不需要再给Text指定style：

ElevatedButton(
  child: Text('Tap go to second page'),
  onPressed: () => context.router.pushNamed('/error'),
)

• 方案二：保留Text的style配置，通过copyWith方法覆盖其中的color属性，将color设为null即可自动继承父组件ElevatedButton的前景色配置，代码示例：

ElevatedButton(
  child: Text(
    'Tap go to second page',
    style: Theme.of(context).textTheme.bodyText1?.copyWith(color: null),
  ),
  onPressed: () => context.router.pushNamed('/error'),
)

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