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

如果你使用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
    )
  ),

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

Answer 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()

Answer 4

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

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

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

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

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

Answer 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 执行此操作。