如何延长Flutter中launch_background.xml启动屏的显示时长？

一、调试模式卡顿原因（无需修复） #

• 调试模式（flutter run默认模式）启用了热重载、断言检查、调试信息输出等功能，同时采用JIT编译，代码未做任何性能优化，这些都会占用大量CPU和内存资源，导致帧率无法稳定达到60fps，属于正常现象。
• 发布模式（flutter run --release）采用AOT编译，将代码直接编译为机器码，移除了所有调试相关逻辑，性能达到最优，能稳定跑满60fps是预期结果。

二、发布模式启动屏延长至3-5秒的解决方案 #

针对Android平台launch_background.xml启动屏消失过快的问题，提供两种可行方案：

方案1：修改Android原生代码（推荐） #

通过在启动Activity中添加延迟，让系统启动屏多显示一段时间再初始化Flutter引擎：

1. 打开Android项目下的MainActivity文件（路径：android/app/src/main/java/[你的包名]/MainActivity.java或.kt）
2. 根据语言修改代码：

Java版本

import android.os.Bundle;
import android.os.Handler;
import android.os.Looper;
import io.flutter.embedding.android.FlutterActivity;

public class MainActivity extends FlutterActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // 保留启动屏背景
        getWindow().setBackgroundDrawableResource(R.drawable.launch_background);
        // 设置延迟时间（3000=3秒，可调整为3000-5000）
        new Handler(Looper.getMainLooper()).postDelayed(() -> {
            super.onCreate(savedInstanceState);
        }, 3000);
    }
}

Kotlin版本

import android.os.Bundle
import android.os.Handler
import android.os.Looper
import io.flutter.embedding.android.FlutterActivity

class MainActivity : FlutterActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        window.setBackgroundDrawableResource(R.drawable.launch_background)
        // 设置延迟时间（3000=3秒）
        Handler(Looper.getMainLooper()).postDelayed({
            super.onCreate(savedInstanceState)
        }, 3000)
    }
}

方案2：Flutter端实现启动页 #

在Flutter首屏添加与原生启动屏一致的页面，延迟后跳转主页面：

1. 确保启动屏图片已放入assets目录，并在pubspec.yaml中声明：

assets:
  - assets/launch_background.png # 替换为你的图片路径

2. 创建启动页Widget：

import 'package:flutter/material.dart';

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

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

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    // 延迟3秒跳转主页面
    Future.delayed(const Duration(seconds: 3), () {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => const MainPage()), // 替换为你的主页面
      );
    });
  }

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

3. 将SplashScreen设为App的初始路由：

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const SplashScreen(), // 设置启动页为初始路由
      // ...其他配置
    );
  }
}

方案对比 #

• 原生方案：体验更接近系统启动屏，无Flutter初始化后的过渡空白，适合追求原生体验的场景。
• Flutter端方案：跨平台通用（iOS也可复用），但需确保图片与原生启动屏完全一致，避免视觉差异。

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