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

我相信更新的答案主要在这里： 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 2

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

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

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

Answer 3

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 4

我建议您在应用程序主题中进行设置，以便将其应用于所有地方：

src / theme / style.dart

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

然后将其作为theme: appTheme(),

在您的 src / app.dart 中使用

尝试一下：

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

Answer 5

安德烈·戈尔德耶夫（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 6

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

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

6 个答案: