Flutter ThemeData：按钮文本颜色优先考虑 colorScheme，而不是 ElevatedButtonTheme textStyle

Question

我目前正在尝试为我的材质应用程序定义 ThemeData，我需要 ElevatedButtonThemeData 中的 ButtonStyle 来控制我的应用程序中所有按钮的外观。到目前为止，一切正常，但由于某种原因，我的按钮 TextStyle 的“颜色”字段被主题 ColorScheme 中的“onPrimary”字段覆盖。

textStyle 中的其他一切都工作正常，例如，如果我更改 TextStyle 中的 fontSize，则字体大小会在整个应用程序中更新，但更改颜色不会执行任何操作。 另外，backgroundColor 对于 ButtonStyle 来说效果很好。

我知道我可以将所有按钮包装在主题小部件中，但如果可能的话我想避免这种情况。

这是最终使用的颜色

      theme: ThemeData(
        brightness: Brightness.light,
        colorScheme: const ColorScheme(
          brightness: Brightness.light,
          primary: Colors.white,

          ///////////////////////////////////////
          onPrimary: Colors.red,
          //this is the color that is used
       ),

这就是我想用的颜色

elevatedButtonTheme: ElevatedButtonThemeData(
          //this themedata controls themedata for elevated buttons
          style: ButtonStyle(
            //for some reason the MarterialStateProperty must be called to explicitly define types for buttons
            //ie: "MaterialStateProperty.all<Color>(const Color(0xFF50D2C2))" just allows "const Color(0xFF50D2C2)" to be used
            backgroundColor: MaterialStateProperty.all<Color>(const Color(0xFF50D2C2)), //this is the color of the button background
            textStyle: MaterialStateProperty.all<TextStyle>(const TextStyle(
              //this determines the text style of the text displayed on buttons
              fontSize: 14,
              fontFamily: 'Lato',

              ///////////////////////////////////
              color: Colors.white,
              //this is the color I want

            ),),
            enableFeedback: true,
          ),
        ),

这是我使用 flutter 的默认演示重新创建该问题的重现。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        brightness: Brightness.light,
        colorScheme: const ColorScheme(
          brightness: Brightness.light,
          primary: Colors.white,

          ///////////////////////////////////////
          onPrimary: Colors.red,
          //this is the color that is used

          secondary: Color(0xFFe8f3f2),
          onSecondary: Color(0xFF7a7a7a),
          error: Color(0xFFff3366),
          onError: Colors.white,
          background: Colors.white,
          onBackground: Color(0xFF7a7a7a),
          surface: Color(0xFF50D2C2),
          onSurface: Colors.white,
        ),

        elevatedButtonTheme: ElevatedButtonThemeData(
          //this themedata controls themedata for elevated buttons
          style: ButtonStyle(
            //for some reason the MarterialStateProperty must be called to explicitly define types for buttons
            //ie: "MaterialStateProperty.all<Color>(const Color(0xFF50D2C2))" just allows "const Color(0xFF50D2C2)" to be used
            backgroundColor: MaterialStateProperty.all<Color>(const Color(0xFF50D2C2)), //this is the color of the button background
            textStyle: MaterialStateProperty.all<TextStyle>(const TextStyle(
              //this determines the text style of the text displayed on buttons
              fontSize: 14,
              fontFamily: 'Lato',

              ///////////////////////////////////
              color: Colors.white,
              //this is the color I want

            ),),
            enableFeedback: true,
          ),
        ),
      ),
      home: const MyHomePage(title: 'Flutter Button Theme'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              child: const Text("This is a button"),
              onPressed: () { },
            )
          ],
        ),
      ),
    );
  }
}

Answer 1

好吧，我花了 6 个小时试图找到这个问题的答案，然后在发布问题后 5 分钟就找到了答案。

按钮文本颜色由 foregroundColor 参数控制，而不是 textStyle。

elevatedButtonTheme: ElevatedButtonThemeData(
      //style: ElevatedButton.styleFrom(onPrimary: Colors.white)
      //this themedata controls the 
      style: ButtonStyle(
        //for some reason the MarterialStateProperty must be called to explicitly define types for buttons
        //ie: "MaterialStateProperty.all<Color>(const Color(0xFF50D2C2))" just allows "const Color(0xFF50D2C2)" to be used
        backgroundColor: MaterialStateProperty.all<Color>(const Color(0xFF50D2C2)),
        foregroundColor: MaterialStateProperty.all<Color>(Colors.white), //actual text color
        textStyle: MaterialStateProperty.all<TextStyle>(const TextStyle(
          //this determines the text style of the text displayed on buttons
          fontSize: 14,
          fontFamily: 'Lato',
          color: Colors.red, //color not used
        ),),
        enableFeedback: true,
        //minimumSize: ,
      ),
    ),

Answer 2

在

v3.19.0-0.3.pre 之后，

MaterialStateProperty 已弃用。

如重大变更中所述 — 请参阅 重大变更 |将 MaterialState 重命名为 WidgetState) — 它已重命名为

WidgetStateProperty

，并将在未来版本中删除。使用 MaterialStateProperty 的代码应迁移为使用 WidgetStateProperty。

迁移

David Martin的答案中提供的代码将变为：

elevatedButtonTheme: ElevatedButtonThemeData(
  //style: ElevatedButton.styleFrom(onPrimary: Colors.white)
  //this themedata controls the 
  style: ButtonStyle(
    //for some reason the MarterialStateProperty must be called to explicitly define types for buttons
    //ie: "MaterialStateProperty.all<Color>(const Color(0xFF50D2C2))" just allows "const Color(0xFF50D2C2)" to be used
    backgroundColor: WidgetStatePropertyAll(const Color(0xFF50D2C2)),
    foregroundColor: WidgetStatePropertyAll(Colors.white), //actual text color
    textStyle: WidgetStatePropertyAll(const TextStyle(
      //this determines the text style of the text displayed on buttons
      fontSize: 14,
      fontFamily: 'Lato',
      color: Colors.red, //color not used
    ),),
    enableFeedback: true,
    //minimumSize: ,
  ),
),