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/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 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

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

源代码/主题/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执行此操作。