如何在Flutter中实现自定义启动屏？请提供Splash Screen接口实操示例

Got it, let's walk through how to implement a custom splash screen in Flutter using the SplashScreen interface on Android—since your code snippet targets the Android platform. I'll break this down into actionable, practical steps with full code examples.

The SplashScreen interface has two mandatory methods you need to implement, which your snippet already hints at:

• createSplashView: This is where you inflate or instantiate your custom splash UI. It runs before Flutter starts initializing, so this is your chance to show a native Android view immediately.
• transitionToFlutter: This triggers when Flutter is ready to take over. You'll add your exit animation here, and must call onTransitionComplete() once the animation finishes to let Flutter display its first frame.

First, create a custom View that holds your splash content (like a logo, background color, or animation). Here's a complete example that includes a centered logo and a fade-out animation:

import android.content.Context;
import android.graphics.Color;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class MySplashView extends LinearLayout {

    private ImageView logoImageView;

    public MySplashView(Context context) {
        super(context);
        init();
    }

    public MySplashView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        // Set full-screen background color
        setBackgroundColor(Color.parseColor("#2196F3"));
        setOrientation(LinearLayout.VERTICAL);
        setGravity(CENTER);

        // Add your logo (replace with your drawable resource)
        logoImageView = new ImageView(getContext());
        logoImageView.setImageResource(R.drawable.ic_flutter_logo);
        // Add layout params to size the logo
        LayoutParams logoParams = new LayoutParams(200, 200);
        addView(logoImageView, logoParams);
    }

    // Method to trigger the exit animation
    public void animateAway(Runnable onAnimationComplete) {
        AlphaAnimation fadeOut = new AlphaAnimation(1.0f, 0.0f);
        fadeOut.setDuration(800);
        fadeOut.setFillAfter(true);
        // Listen for animation end to notify Flutter
        fadeOut.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {}

            @Override
            public void onAnimationEnd(Animation animation) {
                setVisibility(View.GONE);
                onAnimationComplete.run();
            }

            @Override
            public void onAnimationRepeat(Animation animation) {}
        });
        startAnimation(fadeOut);
    }
}

Next, update your Flutter activity to implement the SplashScreen interface. You'll use the methods from your original snippet, paired with the custom view we just built:

import android.os.Bundle;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import io.flutter.embedding.android.FlutterActivity;
import io.flutter.embedding.android.SplashScreen;

public class MainActivity extends FlutterActivity implements SplashScreen {

    private MySplashView mySplashView;

    @Nullable
    @Override
    public View createSplashView(@NonNull Context context, @Nullable Bundle savedInstanceState) {
        // Initialize and return your custom splash view
        mySplashView = new MySplashView(context);
        return mySplashView;
    }

    @Override
    public void transitionToFlutter(@NonNull Runnable onTransitionComplete) {
        // Trigger the exit animation, then notify Flutter
        if (mySplashView != null) {
            mySplashView.animateAway(onTransitionComplete);
        } else {
            // Fallback if view is null—immediately transition
            onTransitionComplete.run();
        }
    }
}

Finally, tell Flutter to use your custom splash screen implementation by adding a meta-data tag to your activity in the manifest:

<activity
    android:name=".MainActivity"
    android:exported="true"
    android:launchMode="singleTop"
    android:theme="@style/LaunchTheme">
    <!-- Add this meta-data tag -->
    <meta-data
        android:name="io.flutter.embedding.android.SplashScreen"
        android:value="com.yourpackage.MainActivity"/> <!-- Use your activity class path -->
    <intent-filter>
        <action android:name="android.intent.action.MAIN"/>
        <category android:name="android.intent.category.LAUNCHER"/>
    </intent-filter>
</activity>

• Always call onTransitionComplete(): If you forget this, Flutter will never display its UI—your splash screen will stay forever.
• Keep createSplashView lightweight: Don't do heavy operations here (like network calls) since it runs on the main thread before Flutter loads.
• Test on real devices: Emulators might have different animation timing than physical devices, so verify the transition feels smooth.

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