更改提升按钮中文本（前景）的颜色答案

【问题标题】：Change color of text ( foreground ) in Elevated Button更改提升按钮中文本（前景）的颜色
【发布时间】：2021-11-24 05:00:00
【问题描述】：

使用 Flutter，我在 style.dart 中设置了 ElevatedButton 主题。

ThemeData appTheme(BuildContext context) {
  const fontFamilyFallBack = ['Lexend', 'NotoSans'];
  return ThemeData(
    primaryColor: Colors.white,
    backgroundColor: Colors.white,
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
        primary: Colors.green,
        onPrimary: Colors.white,
      ),
    ),
    textTheme: const TextTheme(
      headline1: TextStyle(
        fontFamilyFallback: fontFamilyFallBack,
      ),
      subtitle1: TextStyle(
        fontFamilyFallback: fontFamilyFallBack,
        fontSize: 20,
      ),
      bodyText1: TextStyle(
        fontFamilyFallback: fontFamilyFallBack,
        fontSize: 14,
      ),
    ),
  );
}

但是作为我的文本的前景颜色仍然没有更改为White 作为onPrimary 的值，而背景颜色是适用的。

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

我也试过 ButtonStyle 之一，但我仍然得到相同的结果。

elevatedButtonTheme: ElevatedButtonThemeData(
      style: ButtonStyle(
        backgroundColor: MaterialStateProperty.all<Color>(Colors.green),
        foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
      ),
    ),

【问题讨论】：

它在这里工作。如果是这样，您介意检查一下您是否已将 appTheme 设置为 MaterialApp 中的主题属性吗？
是的，我确实设置了该属性，因为backgroundColor 属性仍然像图像中一样工作
你能告诉我们MaterialApp小部件吗？
当然MaterialApp.router( debugShowCheckedModeBanner: false, theme: appTheme(context), routerDelegate: _appRouter.delegate(), routeInformationParser: _appRouter.defaultRouteParser(), ) 抱歉这个乱码
如果是public a repository的话，我想自己查一次。我可以吗？

标签： flutter dart styles themes foreground

【解决方案1】：

您将ButtonStyle 传递给style 属性，如下所示：

ThemeData(
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ButtonStyle(
            foregroundColor: MaterialStateProperty.all<Color>(Colors.green),
          ),
        ),
      ),

【讨论】：

很抱歉之前没有提到，但我已经尝试过了，得到了相同的结果。
它在这里工作。如果是这样的话，您介意检查一下您是否将appTheme 设置为theme 中的MaterialApp 属性吗？

【解决方案2】：

试试这个

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

【讨论】：

这当然可以，但我需要在全局范围内指定我的整个elevatedButtonTheme 以供将来调整。谢谢顺便说一句