如何在Flutter中更改按钮主题的文本颜色

Question

如果我将主题添加到我的应用中，如下所示：

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(),
      ),
    );
  }
}

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

Answer 1

Suragch 的回答是正确的，但有时我们希望将完全自定义的颜色设置为按钮文本颜色。它是通过提供一个自定义的实现colorScheme与secondary颜色设置：

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
),

Answer 2

更新（新按钮）：

启用状态：

禁用状态：

ButtonTheme不适用于像 之类的新按钮ElevatedButton。为此你应该设置elevatedButtonTheme.

• 更少的定制：

  MaterialApp(
    theme: ThemeData(
      elevatedButtonTheme: ElevatedButtonThemeData(
        style: ElevatedButton.styleFrom(
          backgroundColor: Colors.red, // Button color
          foregroundColor: 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
          }),
        ),
      ),
    ),
  )
  

同样，您可以通过替换 和 的属性来完成OutlinedButton此TextButton操作ElevatedButton。

Answer 3

如果您使用ButtonTextTheme.primaryFlutter，它将自动为您选择正确的颜色。

例如，如果您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
    )
  ),

Answer 4

我相信更新的答案主要在这里找到：https : //flutter.dev/docs/release/break-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()

Answer 5

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

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

在https://www.woolha.com/tutorials/flutter-using-textbutton-widget-examples 上找到