Flutter如何全局设置ThemeData，避免跨页面重复调用Theme.of(context)?

首先要明确：你之前的问题出在主题属性的对应关系上，Flutter的Material组件只会自动继承ThemeData中为它们专门定义的属性，而不是通用的backgroundColor。下面给你几种实用的解决办法：

方法1：配置对应组件的主题属性，让Material组件自动继承 #

Flutter的Scaffold默认会使用ThemeData.scaffoldBackgroundColor作为背景色，而你之前设置的backgroundColor是给Material组件用的，并非Scaffold的默认属性。你可以修改main.dart里的主题配置，用更规范的方式统一管理颜色：

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 用colorScheme统一管理颜色，符合Flutter设计规范
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.green, // 主色种子
          background: Colors.red, // 全局背景色
        ),
        primaryColor: Colors.green,
      ),
      home: LoadingScreen(),
    );
  }
}

修改后你的LoadingScreen就不用给Container手动设置颜色了，直接用Scaffold的默认背景：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: Image.asset(
        height: 100.0,
      ),
    ),
  );
}

这样跳转后的StartScreen只要用Scaffold包裹页面，背景色就会自动继承主题配置，完全不用额外写Theme.of(context)。

方法2：自定义通用组件封装主题样式 #

如果是像Container这种非Material组件，想要自动应用主题样式，可以自己封装一个通用组件，避免重复代码：

// 封装自动使用主题背景色的容器
class ThemedContainer extends StatelessWidget {
  final Widget? child;
  final EdgeInsetsGeometry? padding;

  const ThemedContainer({super.key, this.child, this.padding});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Theme.of(context).colorScheme.background,
      padding: padding,
      child: child,
    );
  }
}

之后在所有页面里用ThemedContainer代替普通Container，就不用每次手动设置color了。

方法3：扩展ThemeData添加自定义全局属性 #

如果有自己的自定义样式需要全局统一，可以用ThemeExtension扩展主题，方便后续维护：

// 定义自定义主题扩展
class MyThemeExtension extends ThemeExtension<MyThemeExtension> {
  final Color customBgColor;

  MyThemeExtension({required this.customBgColor});

  @override
  ThemeExtension<MyThemeExtension> copyWith({Color? customBgColor}) {
    return MyThemeExtension(
      customBgColor: customBgColor ?? this.customBgColor,
    );
  }

  @override
  ThemeExtension<MyThemeExtension> lerp(
      ThemeExtension<MyThemeExtension>? other, double t) {
    if (other is! MyThemeExtension) return this;
    return MyThemeExtension(
      customBgColor: Color.lerp(customBgColor, other.customBgColor, t)!,
    );
  }
}

然后在主题中添加这个扩展：

theme: ThemeData(
  colorScheme: ColorScheme.fromSeed(seedColor: Colors.green),
  extensions: [
    MyThemeExtension(customBgColor: Colors.red),
  ],
),

之后在组件中可以这样获取自定义属性：

final customBg = Theme.of(context).extension<MyThemeExtension>()?.customBgColor;

内容的提问来源于stack exchange，提问作者Icaroto