如何为Flutter应用添加Android和iOS自定义原生启动页？

针对你需要的类似TrueCuller/WhatsApp的原生启动页效果（含渐变/动画），以下是具体实现方案，弥补flutter_native_splash静态启动页的局限：

Android 平台实现 #

1. 配置启动页主题 #

打开android/app/src/main/res/values/styles.xml，修改LaunchTheme为自定义样式：

<style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
    <!-- 绑定自定义背景Drawable -->
    <item name="android:windowBackground">@drawable/custom_splash</item>
    <!-- 全屏显示（可选） -->
    <item name="android:windowFullscreen">true</item>
</style>

2. 创建自定义背景Drawable #

根据需求选择静态渐变或动态动画：

静态渐变+Logo（类似WhatsApp）

在res/drawable下新建custom_splash.xml：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 渐变背景层 -->
    <item>
        <shape android:shape="rectangle">
            <gradient
                android:startColor="#25D366"
                android:endColor="#128C7E"
                android:angle="135"/>
        </shape>
    </item>
    <!-- 居中显示的Logo -->
    <item>
        <bitmap
            android:src="@mipmap/ic_launcher"
            android:gravity="center"/>
    </item>
</layer-list>

动态动画背景（类似TrueCuller）

如果需要动画效果，推荐使用Lottie：

• 将Lottie动画文件（.json）放入res/raw目录
• 创建布局文件res/layout/splash_layout.xml：

<com.airbnb.lottie.LottieAnimationView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@raw/splash_anim"
    android:scaleType="centerCrop"/>

• 修改styles.xml的windowBackground为@layout/splash_layout，并在MainActivity中启动动画：

class MainActivity : FlutterActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        setTheme(R.style.NormalTheme) // 切换到应用主题
        super.onCreate(savedInstanceState)
        val lottieView = findViewById<LottieAnimationView>(R.id.lottie_splash)
        lottieView.playAnimation()
    }
}

3. 绑定启动主题到Activity #

确保AndroidManifest.xml中启动Activity使用LaunchTheme：

<activity
    android:name=".MainActivity"
    android:theme="@style/LaunchTheme"
    <!-- 其他原有配置 -->
    >
    <intent-filter>
        <action android:name="android.intent.action.MAIN"/>
        <category android:name="android.intent.category.LAUNCHER"/>
    </intent-filter>
</activity>

iOS 平台实现 #

1. 静态启动页（基础版） #

直接编辑ios/Runner/LaunchScreen.storyboard：

• 添加渐变背景：通过CAGradientLayer或导入渐变图片作为背景
• 拖拽ImageView放置Logo，设置居中对齐

2. 动态过渡启动页（带动画） #

iOS原生LaunchScreen为静态，需通过过渡ViewController实现动画：
打开ios/Runner/AppDelegate.swift，修改代码：

import UIKit
import Flutter

@UIApplicationMain
class AppDelegate: FlutterAppDelegate {
    var splashVC: UIViewController?

    override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // 初始化自定义启动页
        splashVC = UIViewController()
        // 添加渐变背景
        let gradientLayer = CAGradientLayer()
        gradientLayer.colors = [UIColor(red: 37/255, green: 211/255, blue: 102/255, alpha: 1).cgColor, UIColor(red: 18/255, green: 140/255, blue: 126/255, alpha: 1).cgColor]
        gradientLayer.frame = UIScreen.main.bounds
        splashVC?.view.layer.insertSublayer(gradientLayer, at: 0)

        // 添加Logo
        let logoIV = UIImageView(image: UIImage(named: "AppLogo"))
        logoIV.center = splashVC?.view.center ?? .zero
        splashVC?.view.addSubview(logoIV)

        // 显示启动页
        window?.rootViewController = splashVC
        window?.makeKeyAndVisible()

        // 动画过渡到Flutter页面
        DispatchQueue.main.asyncAfter(deadline: .now() + 1.2) {
            UIView.animate(withDuration: 0.6) {
                logoIV.transform = CGAffineTransform(scaleX: 0.7, y: 0.7)
                logoIV.alpha = 0
            } completion: { _ in
                self.window?.rootViewController = self.flutterViewController
            }
        }

        GeneratedPluginRegistrant.register(with: self)
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}

• 需将Logo图片添加到Assets.xcassets，命名为AppLogo

关键注意事项 #

• 动画时长控制在1-2秒内，避免拖慢启动速度
• 保持双平台启动页视觉风格统一
• 可先用flutter_native_splash生成基础静态启动页，再在此基础上修改动画部分
• 测试冷启动/热启动场景，确保无黑屏或闪烁问题

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