Flutter中如何改变按钮主题的文字颜色

Posted 2023-02-23

【中文标题】Flutter中如何改变按钮主题的文字颜色

【英文标题】：How to change the text color of the button theme in Flutter

【发布时间】：2019-10-05 05:51:05

【问题描述】：

如果我像这样向我的应用添加主题：

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Color(0xff393e46),
        primaryColorDark: Color(0xff222831),
        accentColor: Color(0xff00adb5),
        backgroundColor: Color(0xffeeeeee),
        buttonTheme: ButtonThemeData(
          buttonColor: Color(0xff00adb5),
        )
      ),
      home: Scaffold(
        body: MyHomePage(),
      ),
    );
  

如何更改按钮主题的文本颜色？

【参考方案1】：

如果你使用ButtonTextTheme.primary，Flutter 会自动为你选择合适的颜色。

例如，如果您像这样使buttonColor 变暗

  ThemeData(
    . . . 
    buttonTheme: ButtonThemeData(
      buttonColor: Colors.deepPurple,     //  <-- dark color
      textTheme: ButtonTextTheme.primary, //  <-- this auto selects the right color
    )
  ),

文字自动变亮。如果你让buttonColor 变亮，那么文本就会变暗。

  ThemeData(
    . . . 
    buttonTheme: ButtonThemeData(
      buttonColor: Colors.yellow,         //  <-- light color
      textTheme: ButtonTextTheme.primary, //  <-- dark text for light background
    )
  ),

【讨论】：

这适用于许多颜色，但有些不适用，或者在某些情况下我们想要不同于黑白的颜色......那么如何定义它？

@mFeinstein，您可以使用 colorScheme，正如 Andrey Gordeev 所示。

太棒了！谢谢！ PS：你能在这里看看我的问题吗：***.com/questions/59294421/…

如何将原色应用于 buttonColor 属性而不是硬编码？无论如何？

@ShajeelAfzal，您可以像这样从主题中获取原色：Theme.of(context).primaryColor。

【参考方案2】：

Suragch 的回答是正确的，但有时我们想设置一个完全自定义的颜色作为按钮文本颜色。可以通过提供带有secondary 颜色集的自定义colorScheme 来实现：

buttonTheme: ButtonThemeData(
  buttonColor: Color(0xffff914d), // Background color (orange in my case).
  textTheme: ButtonTextTheme.accent,
  colorScheme:
    Theme.of(context).colorScheme.copyWith(secondary: Colors.white), // Text color
),

【讨论】：

这很好用，如果我出于任何原因不想在上下文中传递怎么办

亲爱的，我仍然得到蓝色按钮颜色。谢谢

【参考方案3】：

我相信更新的答案主要在这里找到： https://flutter.dev/docs/release/breaking-changes/buttons

elevatedButtonTheme: ElevatedButtonThemeData(
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all<Color>(Colors.black,), //button color
    foregroundColor: MaterialStateProperty.all<Color>(Color(0xffffffff),), //text (and icon)
  ),
),

取决于按钮变化...

elevatedButtonTheme: ElevatedButtonThemeData()
outlinedButtonTheme: OutlinedButtonThemeData()
textButtonTheme: textButtonThemeData()

【讨论】：

重要，必须使用ThemeData.from(colorScheme: ColorScheme.light())构建主题

【参考方案4】：

相关：当我专门寻找 TextButton 颜色时偶然发现了这一点，设置 MaterialApp 主题解决了这个问题：

theme: ThemeData(
      textButtonTheme: TextButtonThemeData(
        style: TextButton.styleFrom(
          primary: Colors.blueGrey[900],
        ),
      ),
    ),

发现于https://www.woolha.com/tutorials/flutter-using-textbutton-widget-examples

【参考方案5】：

我建议你在应用主题中设置它，这样它就会被应用到任何地方：

src/theme/style.dart

final appTheme = () => ThemeData(
      accentColor: Colors.white,
      buttonTheme: ButtonThemeData(
        buttonColor: Colors.orange,
        textTheme: ButtonTextTheme.accent,
      ),
    );

然后在你的 src/app.dart 中使用它作为theme: appTheme(),

试试看：

RaisedButton(
  onPressed: () => print('pressed'),
  child: Text('Press me'),
)

【参考方案6】：

Andrey Gordeev 的回答有效。但是我很好奇发生了什么，所以请检查一下，因为缺乏一些解释。基本上您需要将textTheme 设置为accent，以便使用colorScheme 设置按钮颜色。您还可以使用colorScheme 中的主要颜色覆盖按钮颜色。

来自源代码

The colors for new button classes can be defined exclusively in termsof [colorScheme].  
When it's possible, the existing buttons will (continue to) gradually migrate to it.

buttonTheme: ButtonThemeData(
    textTheme: ButtonTextTheme.accent,
    colorScheme: Theme.of(context).colorScheme.copyWith(
          primary: Colors.orange,
          // secondary will be the textColor, when the textTheme is set to accent
          secondary: Colors.white,
    ),
),

【参考方案7】：

更新（新按钮）：

启用状态：

禁用状态：

ButtonTheme 不适用于 ElevatedButton 等新按钮。为此，您应该设置elevatedButtonTheme。

更少的自定义：

MaterialApp(
  theme: ThemeData(
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
        primary: Colors.red, // Button color
        onPrimary: Colors.white, // Text color
      ),
    ),
  ),
)

更多自定义：

MaterialApp(
  theme: ThemeData(
    brightness: Brightness.dark,
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ButtonStyle(
        backgroundColor: MaterialStateProperty.resolveWith<Color?>((s) 
          if (s.contains(MaterialState.disabled)) return Colors.brown; // Disabled button color
          return Colors.red; // Enabled button color
        ),
        foregroundColor: MaterialStateProperty.resolveWith<Color?>((s) 
          if (s.contains(MaterialState.disabled)) return Colors.white30; // Disabled text color
          return Colors.white; // Enabled text color
        ),
      ),
    ),
  ),
)

同样，您可以通过替换 ElevatedButton 及其属性来对 OutlinedButton 和 TextButton 执行此操作。