Flutter ThemeData：colorScheme 优先用于按钮文本颜色而不是 ElevatedButtonTheme textStyle

Question

我目前正在尝试为我的 material 应用程序定义 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: ,
      ),
    ),

Flutter ThemeData：colorScheme 优先用于按钮文本颜色而不是 ElevatedButtonTheme textStyle

Flutter ThemeData: colorScheme is prioritized for button text color instead of ElevatedButtonTheme textStyle

color-scheme

themes

material-design

flutter

flutter-layout