Flutter中如何添加壁纸与应用背景图？Android Studio环境求助

方法一：用Container作为根组件设置全屏背景 #

这是最常用的全屏背景实现方式，核心是让Scaffold背景透明，避免覆盖Container的背景图。

1. 先在pubspec.yaml中配置图片资源：

flutter:
  assets:
    - assets/background.png # 替换成你的图片路径

2. 页面代码实现：

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Container(
      // 配置背景图
      decoration: const BoxDecoration(
        image: DecorationImage(
          image: AssetImage('assets/background.png'),
          fit: BoxFit.cover, // 适配方式：cover填充全屏，contain保持比例，fill拉伸填充
        ),
      ),
      // 嵌套Scaffold并设置背景透明
      child: Scaffold(
        backgroundColor: Colors.transparent,
        appBar: AppBar(title: const Text('带背景图的页面')),
        body: const Center(
          child: Text('页面内容会显示在背景图上方'),
        ),
      ),
    );
  }
}

方法二：用Stack组件实现局部/全屏背景 #

如果需要背景图仅覆盖部分区域，或者和其他组件层叠，用Stack更灵活。

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        fit: StackFit.expand, // 让Stack占满整个屏幕
        children: [
          // 背景图放在最底层
          Image.asset(
            'assets/background.png',
            fit: BoxFit.cover,
          ),
          // 上层内容
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: const [
                Text('叠加在背景上的文本'),
                SizedBox(height: 20),
                ElevatedButton(onPressed: null, child: Text('按钮')),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

要实现设置系统壁纸，需要借助第三方插件，以下是基于wallpaper_manager插件的实现步骤：

1. 添加插件依赖到pubspec.yaml：

dependencies:
  wallpaper_manager: ^2.0.1 # 可查看pub.dev获取最新版本

2. 配置Android权限：
   打开android/app/src/main/AndroidManifest.xml，添加以下权限：

<uses-permission android:name="android.permission.SET_WALLPAPER" />
<uses-permission android:name="android.permission.SET_WALLPAPER_HINTS" />

3. 实现设置壁纸的逻辑：

import 'package:flutter/material.dart';
import 'package:wallpaper_manager/wallpaper_manager.dart';
import 'package:flutter/services.dart';

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

  Future<void> setWallpaper() async {
    // 选择壁纸设置位置：HOME_SCREEN / LOCK_SCREEN / BOTH_SCREENS
    int wallpaperLocation = WallpaperManager.HOME_SCREEN;
    
    try {
      String result = await WallpaperManager.setWallpaperFromAsset(
          'assets/wallpaper.png', wallpaperLocation);
      print('壁纸设置成功: $result');
      // 可添加弹窗提示用户设置成功
    } on PlatformException catch (e) {
      print('壁纸设置失败: ${e.message}');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('设置壁纸')),
      body: Center(
        child: ElevatedButton(
          onPressed: setWallpaper,
          child: const Text('设置为桌面壁纸'),
        ),
      ),
    );
  }
}

注意：图片资源同样需要在pubspec.yaml中配置。

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