如何实现Flutter应用每次启动时随机展示不同splash screen图片？

当然有可行方案，推荐用Flutter自定义启动页来实现——比系统默认的静态原生启动页灵活太多，具体步骤如下：

核心思路 #

放弃系统自带的静态原生启动页，改用Flutter层面自定义的启动页。这样可以在Flutter初始化阶段随机选择图片展示，等应用核心资源加载完成后再跳转到主页面。

步骤1：准备图片资源 #

• 将需要随机展示的图片放到项目的assets/images/目录下（路径可自行调整）
• 在pubspec.yaml中配置资源路径，确保Flutter能识别这些图片：

flutter:
  assets:
    - assets/images/splash1.png
    - assets/images/splash2.png
    - assets/images/splash3.png
    # 根据实际数量添加更多图片路径

步骤2：实现随机启动页逻辑 #

创建一个Flutter页面作为启动页，初始化时随机挑选一张图片展示，同时处理应用的初始化任务（比如加载本地缓存、初始化第三方SDK等），完成后跳转主页。示例代码：

import 'dart:math';
import 'package:flutter/material.dart';

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

  @override
  State<RandomSplashScreen> createState() => _RandomSplashScreenState();
}

class _RandomSplashScreenState extends State<RandomSplashScreen> {
  // 存放所有启动页图片的路径
  final List<String> _splashImages = [
    'assets/images/splash1.png',
    'assets/images/splash2.png',
    'assets/images/splash3.png',
  ];
  String? _selectedImage;

  @override
  void initState() {
    super.initState();
    // 随机选中一张图片
    _selectedImage = _splashImages[Random().nextInt(_splashImages.length)];
    // 执行应用初始化逻辑，完成后跳转
    _runInitialization();
  }

  Future<void> _runInitialization() async {
    // 替换成你的实际初始化任务：比如加载本地数据、初始化SDK等
    await Future.delayed(const Duration(seconds: 2));
    
    // 确保页面未被销毁时再跳转，替换成你的主页路由
    if (mounted) {
      Navigator.of(context).pushReplacement(
        MaterialPageRoute(builder: (context) => const MainScreen()),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _selectedImage != null
          ? Center(
              child: Image.asset(
                _selectedImage!,
                fit: BoxFit.cover, // 可根据需求调整图片适配方式，比如contain
                width: double.infinity,
                height: double.infinity,
              ),
            )
          : const Center(child: CircularProgressIndicator()),
    );
  }
}

// 示例主页面，替换成你自己的主页即可
class MainScreen extends StatelessWidget {
  const MainScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('主页')),
      body: const Center(child: Text('应用已启动')),
    );
  }
}

步骤3：隐藏原生启动页（避免视觉闪烁） #

系统会先显示原生启动页，再切换到Flutter启动页，因此需要把原生启动页设为透明或和Flutter启动页底色一致，减少突兀感：

Android端

打开android/app/src/main/res/values/styles.xml，修改LaunchTheme的windowBackground为透明：

<style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowFullscreen">true</item>
</style>

iOS端

打开ios/Runner/LaunchScreen.storyboard，选中背景视图，将背景颜色设置为透明（或与Flutter启动页底色一致）。

补充说明 #

如果非要在原生启动页实现随机图片，需要在原生层编写逻辑（比如Android用代码动态设置windowBackground，iOS用代码修改LaunchScreen的图片），但这种方式复杂度高，且受限于原生启动页的加载时机，远不如Flutter自定义启动页灵活。

你还可以根据需求调整图片的适配方式，或者在启动页添加logo、文字等额外元素。

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