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