如何在Flutter应用中添加全屏图片作为闪屏启动页

方案1：Flutter 层实现（适合快速验证，存在启动短暂白屏问题） #

• 第一步将闪屏图片存入项目assets/images目录，在pubspec.yaml中完成资源配置：

flutter:
  assets:
    - assets/images/splash.png

• 编写闪屏页Widget，通过BoxFit.cover保证图片全屏无变形：

class SplashPage extends StatefulWidget {
  const SplashPage({super.key});

  @override
  State<SplashPage> createState() => _SplashPageState();
}

class _SplashPageState extends State<SplashPage> {
  @override
  void initState() {
    super.initState();
    // 2秒后跳转主页
    Future.delayed(const Duration(seconds: 2), () {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => const HomePage()),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        height: double.infinity,
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage("assets/images/splash.png"),
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
}

• 在main.dart中设置闪屏页为启动入口即可。

方案2：原生层实现（推荐，彻底消除启动白屏） #

仅修改Flutter层代码时，Flutter引擎初始化阶段会出现短暂白屏，修改原生启动页配置可以解决该问题。

Android 端配置 #

• 按分辨率准备好闪屏图，放入android/app/src/main/res对应的drawable-xxhdpi等分辨率目录下，文件命名为splash.png
• 打开android/app/src/main/res/drawable/launch_background.xml，修改为以下内容：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 可自定义背景色 -->
    <item android:drawable="@android:color/black" />
    <item>
        <bitmap
            android:gravity="fill"
            android:src="@drawable/splash" />
    </item>
</layer-list>

• 针对Android 12+设备，额外修改values-v31/styles.xml中的windowSplashScreen相关配置，将启动图标替换为全屏图片即可。

iOS 端配置 #

• 打开iOS项目Runner/Assets.xcassets，新建LaunchImage图片集，按提示导入对应分辨率的闪屏图
• 打开Runner/LaunchScreen.storyboard，删除默认文本控件，新增全屏ImageView，关联到LaunchImage，设置Content Mode为Aspect Fill
• 确认Info.plist中Launch screen interface file base name字段值为LaunchScreen即可。

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