Flutter Splash Screen配置问题：延长启动页时长至初始化完成并确定跳转页面

我来帮你解决这个问题——你遇到的是原生启动页和Flutter初始化不同步的问题：原生启动页会在Flutter引擎加载完成后立刻消失，但你的业务初始化逻辑还在MyApp里跑，导致还没确定跳转页面就进入了Flutter界面。要实现"启动页保持到初始化完成"，需要原生端保留启动屏直到Flutter发送通知，再加上Flutter端的初始化逻辑配合，下面分步骤拆解：

一、Android端配置（让启动屏持续显示） #

如果你的项目用的是Android 12+的官方SplashScreen API（现在推荐的方式），可以这么改：

1. 先确保你已经在res/drawable或res/layout里配置好了启动页的样式（比如背景图、logo），并在res/values/styles.xml里设置了启动屏相关属性：

<style name="LaunchTheme" parent="Theme.SplashScreen">
    <item name="android:windowSplashScreenBackground">@color/splash_bg</item>
    <item name="android:windowSplashScreenAnimatedIcon">@drawable/splash_icon</item>
    <item name="postSplashScreenTheme">@style/AppTheme</item>
</style>

2. 修改MainActivity.kt（如果是Java就改MainActivity.java），注册MethodChannel接收Flutter的"关闭启动屏"指令：

import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodChannel

class MainActivity : FlutterActivity() {
    private val CHANNEL = "splash_control_channel"

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler { call, result ->
            if (call.method == "dismissSplash") {
                // 收到Flutter指令后，关闭启动屏
                splashScreen?.hide()
                result.success(null)
            } else {
                result.notImplemented()
            }
        }
    }
}

如果是Android 11及以下的旧项目，建议用一个全屏的启动Activity作为过渡：创建一个SplashActivity，布局就是你的启动页，然后在收到Flutter的通知后finish这个Activity，跳转到Flutter的MainActivity。

二、iOS端配置（让启动屏持续显示） #

iOS的LaunchScreen默认会在Flutter引擎初始化完成后自动消失，我们需要通过MethodChannel让它保持到Flutter通知：

1. 确保你的LaunchScreen.storyboard已经配置好启动页样式（图片、文字等）。

2. 修改AppDelegate.swift（iOS 13+如果用SceneDelegate就改SceneDelegate.swift），注册MethodChannel并处理关闭指令：

import UIKit
import Flutter

@UIApplicationMain
class AppDelegate: FlutterAppDelegate {
    private let CHANNEL = "splash_control_channel"
    
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        let controller = window?.rootViewController as! FlutterViewController
        let channel = FlutterMethodChannel(name: CHANNEL, binaryMessenger: controller.binaryMessenger)
        
        channel.setMethodCallHandler { [weak self] call, result in
            if call.method == "dismissSplash" {
                // 找到系统的启动屏视图并移除
                self?.window?.rootViewController?.view.subviews.forEach { subview in
                    if subview.description.contains("UILaunchScreenView") {
                        subview.removeFromSuperview()
                    }
                }
                result.success(nil)
            } else {
                result.notImplemented()
            }
        }
        
        GeneratedPluginRegistrant.register(with: self)
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}

三、Flutter端逻辑（初始化完成后通知原生） #

在MyApp里完成你的初始化操作（比如读取本地缓存、请求用户信息、初始化SDK等），确认跳转页面后，再通知原生关闭启动屏：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:shared_preferences/shared_preferences.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final MethodChannel _splashChannel = const MethodChannel("splash_control_channel");
  Widget? _targetPage;

  @override
  void initState() {
    super.initState();
    // 启动初始化流程
    _doInitialization();
  }

  Future<void> _doInitialization() async {
    try {
      // 1. 执行你的初始化逻辑：比如检查登录状态、初始化第三方SDK等
      await Future.delayed(const Duration(seconds: 2)); // 模拟耗时操作
      bool isLoggedIn = await _checkUserLoginStatus();

      // 2. 确定跳转目标页面
      setState(() {
        _targetPage = isLoggedIn ? const HomePage() : const LoginPage();
      });

      // 3. 通知原生关闭启动屏
      await _splashChannel.invokeMethod("dismissSplash");
    } catch (e) {
      // 初始化失败的处理：跳转到错误页
      setState(() {
        _targetPage = const ErrorPage();
      });
      await _splashChannel.invokeMethod("dismissSplash");
    }
  }

  // 示例：检查用户登录状态
  Future<bool> _checkUserLoginStatus() async {
    final prefs = await SharedPreferences.getInstance();
    return prefs.getString("user_token") != null;
  }

  @override
  Widget build(BuildContext context) {
    // 初始化完成前，返回空容器（因为原生启动屏还在显示）
    return MaterialApp(
      title: "Flutter Splash Demo",
      home: _targetPage ?? const SizedBox.shrink(),
    );
  }
}

// 示例页面：首页
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("首页")),
      body: const Center(child: Text("欢迎回来！")),
    );
  }
}

// 示例页面：登录页
class LoginPage extends StatelessWidget {
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("登录")),
      body: const Center(child: Text("请登录账号")),
    );
  }
}

// 示例页面：错误页
class ErrorPage extends StatelessWidget {
  const ErrorPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("初始化失败")),
      body: const Center(child: Text("请检查网络或重启应用")),
    );
  }
}

关键注意点 #

• 所有初始化操作都要异步处理，不要阻塞Flutter的UI线程；
• 原生端的MethodChannel名称要和Flutter端完全一致，不然会收不到指令；
• Android端如果用旧版本的启动Activity，要注意权限和页面跳转的逻辑，避免出现白屏；
• iOS端的UILaunchScreenView是系统内部类，不同iOS版本可能有变化，如果找不到可以换成自定义的启动页ViewController。

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