Flutter预加载首帧图片，实现iOS原生闪屏到Flutter闪屏平滑过渡

核心思路 #

通过预加载闪屏图片到Flutter图片缓存，确保首帧渲染时直接从缓存读取图片，彻底消除因图片加载延迟导致的白屏闪烁。

具体实现方法 #

方法1：全局启动前预加载（推荐）

在App正式启动前完成图片预加载，保证首帧渲染时图片已完全就绪：

import 'package:flutter/material.dart';

void main() async {
  // 初始化Flutter绑定，否则无法调用图片缓存API
  WidgetsFlutterBinding.ensureInitialized();
  
  // 将闪屏图片预加载到全局缓存
  await precacheImage(
    const AssetImage('assets/splashScreen.jpg'),
    WidgetsFlutterBinding.instance.context,
  );
  
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Image.asset(
          'assets/splashScreen.jpg',
          fit: BoxFit.cover,
          width: double.infinity,
          height: double.infinity,
        ),
      ),
    );
  }
}

方法2：闪屏页内预加载

如果闪屏是独立页面，可在页面初始化阶段完成预加载：

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

  @override
  State<SplashScreen> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    // 等待Widget绑定完成后获取上下文，执行预加载
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _preloadSplashImage();
    });
  }

  Future<void> _preloadSplashImage() async {
    await precacheImage(
      const AssetImage('assets/splashScreen.jpg'),
      context,
    );
    // 图片加载完成后可执行跳转等后续逻辑
    // Navigator.pushReplacement(context, MaterialPageRoute(builder: (_) => HomePage()));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Image.asset(
        'assets/splashScreen.jpg',
        fit: BoxFit.cover,
        width: double.infinity,
        height: double.infinity,
      ),
    );
  }
}

关键注意事项 #

• 图片一致性：确保Flutter使用的splashScreen.jpg与iOS原生闪屏图（Assets.xcassets或LaunchScreen.storyboard中的图片）完全一致，包括尺寸、比例和适配方式，避免过渡时出现视觉断层。
• 缓存机制：precacheImage会将图片存入Flutter全局缓存，后续调用Image.asset时直接读取缓存，无需重复加载。
• 性能取舍：预加载会小幅增加启动时间，但完全符合你"接受短暂卡顿换取无闪烁过渡"的诉求。

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