Flutter中如何无需设置固定等待时长实现启动页？

你当前用固定3秒延迟的方式跳转，存在性能好的设备等待冗余、性能差的设备未完成准备就跳转的问题。想要根据设备处理情况自动跳转，核心思路是等待启动页相关的资源加载、应用初始化操作全部完成后再执行跳转，以下是几种实用实现方式：

方式一：等待启动页UI资源加载完成 #

如果启动页主要是展示一张启动图，可监听图片的加载状态，等图片完全加载后再跳转，避免设备性能差时启动图还没显示完就跳走：

@override
void initState() {
  super.initState();
  _waitForSplashImageAndNavigate();
}

void _waitForSplashImageAndNavigate() async {
  // 替换为你的启动图资源路径
  final splashImage = AssetImage('assets/splash_screen.png');
  final imageConfig = createLocalImageConfiguration(context);
  
  // 等待图片加载完成
  await splashImage.resolve(imageConfig).completed;
  
  // 跳转首页
  Navigator.pushReplacement(
    context, 
    MaterialPageRoute(builder: (context) => const Home())
  );
}

方式二：等待所有应用初始化操作完成 #

如果启动阶段需要完成SDK初始化、缓存读取、首页资源预加载等操作，可将这些任务全部放入异步队列，等所有任务完成后再跳转：

@override
void initState() {
  super.initState();
  _finishInitThenNavigate();
}

Future<void> _finishInitThenNavigate() async {
  // 并行执行所有初始化任务，提升效率
  await Future.wait([
    _initThirdPartySDKs(),
    _loadAppCachedData(),
    _preloadHomePageAssets(),
    // 可选：添加最小等待时长，避免启动页闪瞬即逝
    Future.delayed(const Duration(milliseconds: 500)),
  ]);
  
  // 所有准备工作完成，跳转首页
  Navigator.pushReplacement(
    context, 
    MaterialPageRoute(builder: (context) => const Home())
  );
}

// 模拟第三方SDK初始化
Future<void> _initThirdPartySDKs() async {
  // 实际替换为SDK初始化逻辑，比如友盟、推送等
  await Future.delayed(const Duration(milliseconds: 700));
}

// 模拟读取本地缓存数据
Future<void> _loadAppCachedData() async {
  // 实际替换为读取SharedPreferences、SQLite等缓存的逻辑
  await Future.delayed(const Duration(milliseconds: 400));
}

// 预加载首页需要的资源，减少首页加载耗时
Future<void> _preloadHomePageAssets() async {
  final homeBanner = AssetImage('assets/home_banner.png');
  await homeBanner.resolve(createLocalImageConfiguration(context)).completed;
}

注意事项 #

• 若所有初始化操作耗时极短（比如<200ms），建议添加最小等待时长，保证启动页有足够的展示时间，符合用户对启动流程的感知。
• 可结合两种方式，既等待启动图加载，也完成应用初始化，确保启动流程的完整性。

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