Flutter自定义视频启动页不显示，默认Android启动页持续展示

问题现象 #

在Flutter应用中自定义视频启动页时，带应用图标的Android默认启动页会先显示10秒，之后自定义视频启动页仅显示1-2秒就跳转到主页面。

问题原因 #

1. Android端启动主题配置不完整，未完全覆盖默认启动页样式，导致Flutter初始化期间默认启动页持续显示。
2. Flutter代码中使用硬编码的10秒延迟跳转，未监听视频实际播放完成事件，当视频初始化完成后，剩余时间不足就触发跳转。

解决步骤 #

1. 完善Android启动主题配置 #

确保AndroidManifest.xml中为MainActivity指定LaunchTheme，并调整styles.xml的启动主题属性，让启动页完全透明：

修改后的AndroidManifest.xml

<application
    android:usesCleartextTraffic="true"
    android:name="${applicationName}"
    android:icon="@mipmap/ic_launcher">

    <activity
        android:name=".MainActivity"
        android:exported="true"
        android:launchMode="singleTop"
        android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
        android:hardwareAccelerated="true"
        android:windowSoftInputMode="adjustResize"
        android:theme="@style/LaunchTheme"> <!-- 新增指定启动主题 -->

        <meta-data
          android:name="io.flutter.embedding.android.NormalTheme"
          android:resource="@style/NormalTheme"/>
        <intent-filter>
            <action android:name="android.intent.action.MAIN"/>
            <category android:name="android.intent.category.LAUNCHER"/>
        </intent-filter>
    </activity>
</application>

修改后的styles.xml

<style name="LaunchTheme" parent="@android:style/Theme.Translucent.NoTitleBar.Fullscreen">
    <item name="android:forceDarkAllowed">false</item>
    <item name="android:windowDrawsSystemBarBackgrounds">false</item>
    <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
</style>

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/transparent" />
</layer-list>

2. 优化Flutter视频启动页代码 #

去掉硬编码的延迟跳转，改为监听视频播放完成事件，同时优化初始化逻辑：

import 'dart:async';  
import 'package:flutter/material.dart';  
import 'package:video_player/video_player.dart';  
import 'package:armasedu/app/pages/main_page/main_page.dart';  

class SplashPage extends StatefulWidget {  
  static const String pageName = '/splash';  

  @override  
  _SplashPageState createState() => _SplashPageState();  
}  

class _SplashPageState extends State<SplashPage> {  
  late VideoPlayerController _controller;  
  late Future<void> _initializeVideoPlayerFuture;

  @override  
  void initState() {  
    super.initState();  
    _controller = VideoPlayerController.asset('assets/image/png/splash.mp4');
    // 初始化视频并存储Future
    _initializeVideoPlayerFuture = _controller.initialize().then((_) {  
      setState(() {});  
      _controller.play();  
      _controller.setLooping(false);  
      // 监听视频播放完成事件
      _controller.addListener(() {
        if (!_controller.value.isPlaying && _controller.value.position >= _controller.value.duration) {
          Navigator.pushReplacement(
            context,
            MaterialPageRoute(builder: (context) => MainPage()),
          );
        }
      });
    });
  }  

  @override  
  void dispose() {  
    _controller.dispose();  
    super.dispose();  
  }  

  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      backgroundColor: Colors.black, // 避免视频加载前显示白屏
      body: FutureBuilder(
        future: _initializeVideoPlayerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            return AspectRatio(
              aspectRatio: _controller.value.aspectRatio,
              child: VideoPlayer(_controller),
            );
          } else {
            return const Center(
              child: CircularProgressIndicator(color: Colors.white),
            );
          }
        },
      ),
    );  
  }  
}

额外优化建议 #

• 压缩启动视频文件大小，减少初始化加载时间。
• 确保视频编码格式兼容Android设备，避免解码延迟。

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