如何在Flutter主题中设置全局Scaffold背景图片？

Flutter的ThemeData本身没有直接提供设置Scaffold背景图片的属性，不过可以通过自定义ThemeExtension+封装全局Scaffold组件的方式实现全局统一配置，具体步骤如下：

1. 自定义ThemeExtension存储背景图片信息 #

先定义一个继承自ThemeExtension的类，用来存放全局背景图片的配置，这样就能把它纳入ThemeData中统一管理：

class ScaffoldBackgroundTheme extends ThemeExtension<ScaffoldBackgroundTheme> {
  final ImageProvider? backgroundImage;

  const ScaffoldBackgroundTheme({this.backgroundImage});

  @override
  ThemeExtension<ScaffoldBackgroundTheme> copyWith({ImageProvider? backgroundImage}) {
    return ScaffoldBackgroundTheme(
      backgroundImage: backgroundImage ?? this.backgroundImage,
    );
  }

  @override
  ThemeExtension<ScaffoldBackgroundTheme> lerp(ThemeExtension<ScaffoldBackgroundTheme>? other, double t) {
    if (other is! ScaffoldBackgroundTheme) return this;
    return ScaffoldBackgroundTheme(
      backgroundImage: ImageProvider.lerp(backgroundImage, other.backgroundImage, t),
    );
  }
}

2. 封装全局通用的GlobalScaffold组件 #

创建一个自定义的Scaffold组件，它会自动从当前Theme中读取背景图片，并将其作为底层背景，同时保留原生Scaffold的所有功能：

class GlobalScaffold extends StatelessWidget {
  final Widget? appBar;
  final Widget? body;
  final Widget? floatingActionButton;
  final Widget? bottomNavigationBar;
  final Color? backgroundColor;
  // 可根据需求添加更多原生Scaffold的参数

  const GlobalScaffold({
    super.key,
    this.appBar,
    this.body,
    this.floatingActionButton,
    this.bottomNavigationBar,
    this.backgroundColor,
  });

  @override
  Widget build(BuildContext context) {
    // 从Theme中获取全局背景图片配置
    final backgroundTheme = Theme.of(context).extension<ScaffoldBackgroundTheme>();
    final backgroundImage = backgroundTheme?.backgroundImage;

    return Scaffold(
      backgroundColor: backgroundColor ?? Theme.of(context).scaffoldBackgroundColor,
      appBar: appBar,
      floatingActionButton: floatingActionButton,
      bottomNavigationBar: bottomNavigationBar,
      body: Stack(
        children: [
          // 背景图片层
          if (backgroundImage != null)
            Positioned.fill(
              child: Image(
                image: backgroundImage,
                fit: BoxFit.cover, // 根据需求调整图片适配方式
              ),
            ),
          // 内容层
          if (body != null) body!,
        ],
      ),
    );
  }
}

3. 在ThemeData中添加自定义背景配置 #

修改你的MyApp代码，把自定义的ScaffoldBackgroundTheme加入到ThemeData的extensions中：

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
        scaffoldBackgroundColor: const Color(0xFF696969),
        // 添加自定义背景主题
        extensions: const [
          ScaffoldBackgroundTheme(
            // 替换成你的背景图片路径，比如本地资源AssetImage或网络图片NetworkImage
            backgroundImage: AssetImage('assets/images/background.png'),
          ),
        ],
      ),
      home: const MainScreen(),
    );
  }
}

4. 页面中使用GlobalScaffold #

之后所有页面都用GlobalScaffold代替原生的Scaffold，就能自动应用全局背景图片了：

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

  @override
  Widget build(BuildContext context) {
    return const GlobalScaffold(
      appBar: AppBar(title: Text('首页')),
      body: Center(child: Text('全局背景图片已生效')),
    );
  }
}

补充说明 #

• 如果某个页面需要单独覆盖全局背景，可以在GlobalScaffold中传入backgroundColor，或者在body最外层自行添加背景元素，会覆盖全局背景图片。
• 使用本地图片时，需在pubspec.yaml中正确声明assets路径。

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