将 ButtonStyle 属性全局应用于所有按钮

Question

我已经在我的 flutter 项目中实现了几个包含 ElevatedButton 的长 ListView，现在我想将各种 ButtonStyle 属性应用于所有这些。我确信有一种方法可以避免将这些属性单独应用于每个按钮，但无法在 Flutter 文档或 Stack Overflow 上找到任何内容。这个任务可以全局完成吗？

目前按钮具有基本样式：

            ElevatedButton(
                style: const ButtonStyle(),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => authorA()),
                  );
                },
                child: const Text("Author A")),
            ElevatedButton(
                style: const ButtonStyle(),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => AuthorB()),
                  );
                },
                child: const Text("Author B")),
            ElevatedButton(
                style: const ButtonStyle(),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => AuthorC()),
                  );
                },
                child: const Text("Author C)")),

我的 ListView 包含数百个这样的按钮，还有其他几个包含我也想设置样式的按钮的长 ListView。如果我想像下面那样为所有这些修改 ButtonStyle() 属性怎么办：

            ElevatedButton(
                style:   ButtonStyle(
                  backgroundColor: MaterialStateProperty.all<Color>(Colors.green),
                ),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => AuthorA()),
                  );
                },
                child: const Text("Author A")),

Answer 1

使用 MaterialApp 的 theme 或 darkTheme 属性设置全局样式。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            primary: Colors.green,
          ),
        ),
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

Answer 2

main.dart

MaterialApp(
  theme: ThemeData(
    elevatedButtonTheme: ElevatedButtonThemeData(
        style: ElevatedButton.styleFrom(
        primary: Colors.orange,
      ),
    ),
  ),
);

Answer 3

A ButtonStyle that overrides the default appearance of ElevatedButtons when it's used with ElevatedButtonTheme or with the overall Theme's ThemeData.elevatedButtonTheme.

The style's properties override ElevatedButton's default style, i.e. the ButtonStyle returned by ElevatedButton.defaultStyleOf. Only the style's non-null property values or resolved non-null MaterialStateProperty values are used.

 MaterialApp(
      theme: ThemeData(
        elevatedButtonTheme: ElevatedButtonThemeData(
            style: ElevatedButton.styleFrom(
            primary: Colors.orange,
          ),
        ),
      ),
    );

Answer 4

使用相同的属性根据需要添加不同的样式，这可以使用 .. 运算符。

ElevatedButton(
                style: const ButtonStyle()..,//Just Add .. here and add new color and properties
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => authorA()),
                  );
                },
                child: const Text("Author A")),

Answer 5

使用 -> MaterialApp -> 主题 -> elevatedButtonTheme -> 样式 -> with styleForm -> primary : #Color

将 ButtonStyle 属性全局应用于所有按钮

Apply ButtonStyle Properties to All Buttons Globally

flutter

flutter-layout

flutter-theme