Flutter实现带3秒视频的启动页，解决启动前白屏问题

现有代码的问题 #

你这段代码存在几个会导致异常或效果不达标的问题：

• 变量名笔误：controller.initialize()应该是_controller.initialize()，直接运行会报未定义错误
• 视频未完成初始化就调用play()，大概率会播放失败，因为资源还没加载完成
• 没有处理视频初始化失败的场景，一旦视频加载出错，会卡在启动页
• 视频结束后的跳转逻辑没有判断duration是否有效（比如视频文件损坏时duration为null）

修复后的可运行代码 #

import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
import 'package:get/get.dart';
import 'package:flutter/services.dart';

class _MyAppState extends State<MyApp> {
  late VideoPlayerController _controller;
  bool _isVideoInitialized = false;

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

  void _initVideoPlayer() async {
    // 初始化视频控制器
    _controller = VideoPlayerController.asset("assets/video.mp4");
    try {
      await _controller.initialize();
      setState(() {
        _isVideoInitialized = true;
      });
      // 添加播放完成监听
      _controller.addListener(_checkVideoCompletion);
      // 开始播放
      _controller.play();
    } catch (e) {
      // 视频初始化失败，直接跳转到首页
      Get.offAll(() => FirstScreen());
    }
  }

  void _checkVideoCompletion() {
    if (_controller.value.isInitialized &&
        !_controller.value.isPlaying &&
        _controller.value.position >= _controller.value.duration) {
      // 视频播放完成，释放资源并跳转
      _controller.removeListener(_checkVideoCompletion);
      _controller.dispose();
      Get.offAll(() => FirstScreen());
    }
  }

  @override
  void dispose() {
    if (_controller.value.isInitialized) {
      _controller.removeListener(_checkVideoCompletion);
      _controller.dispose();
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);

    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: _isVideoInitialized
            ? VideoPlayer(_controller)
            // 初始化过程中显示视频首帧或静态启动图，避免白屏
            : Image.asset("assets/splash_placeholder.png", fit: BoxFit.cover),
      ),
    );
  }
}

解决启动前白屏的核心方案 #

你要解决的启动时视频启动页出现前的白屏，本质是Flutter引擎初始化阶段的空白，纯Dart层的代码无法覆盖这个阶段，必须配合原生配置：

Android 端 #

1. 提取视频的第一帧作为静态图片（比如splash_bg.png）
2. 修改android/app/src/main/res/drawable/launch_background.xml，把背景图替换成这张首帧图，确保Flutter引擎启动前显示的原生启动页和视频开头一致
3. 进阶方案：直接用原生实现视频启动页（在SplashActivity中使用VideoView播放视频，完成后再启动FlutterActivity）

iOS 端 #

1. 同样提取视频首帧作为启动图
2. 修改ios/Runner/Assets.xcassets/LaunchImage.imageset中的图片，或者编辑LaunchScreen.storyboard，设置背景为视频首帧
3. 进阶方案：用原生AVPlayer在LaunchScreen中播放视频，完成后跳转Flutter

额外优化建议 #

• 视频压缩：把3秒视频压缩到1MB以内，采用H.264编码，分辨率匹配主流设备（比如1080P），避免拖慢启动速度
• 预加载优化：可以在main函数中提前初始化视频资源，减少Dart层的等待时间：

  void main() async {
    WidgetsFlutterBinding.ensureInitialized();
    // 提前初始化视频控制器（可选）
    VideoPlayerController controller = VideoPlayerController.asset("assets/video.mp4");
    await controller.initialize();
    runApp(MyApp(controller: controller));
  }
  

• 异常 fallback：如果视频加载失败，直接显示静态启动图并跳转，避免用户卡住
• 沉浸模式同步：在原生启动页也设置全屏沉浸，避免状态栏/导航栏闪现

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