How to create a custom animated launch screen in flutter

Question

I want to create a launch screen with minimal animations(like rotating an image). From the documentation found here I thought it was possible to do so, using the method mentioned under the 'Creating a custom SplashScreen' section. But I have no idea where to start. I first created a flutter java project using

 flutter create -a java custom_splash

Then I tried to copy paste the code given in the documentation link inside the MainActivity.java file and run the app but the app simply failed to build. I also tried to use the rotate drawable inside launch_background.xml although it did rotate the image to a particular angle, it was static and not animated.

Note: I have not built any native android apps and java is new to me too

EDIT 1: I guess I must display it as a view instead of a drawable. So I tried this. Created a file called SplashScreenWithTransition.java next to MainActivity.java

package com.example.native_splash;

import android.content.Context;
import android.os.Bundle;
import android.view.View;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import com.example.native_splash.mySplashView;

import io.flutter.embedding.android.SplashScreen;

public class SplashScreenWithTransition implements SplashScreen {
    @Override
    @Nullable
    public View createSplashView(
            @NonNull Context context,
            @Nullable Bundle savedInstanceState
    ) {
        return new mySplashView(context);
    }

    @Override
    public void transitionToFlutter(@NonNull Runnable onTransitionComplete) {
        onTransitionComplete.run();
    }
}

and another file called mySplashView.java

package com.example.native_splash;
import android.content.Context;

public class mySplashView extends android.view.View {

    public mySplashView(Context context) {
        super(context);
    }
}

and a view.xml inside drawable folder

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_centerVertical="true"
    android:gravity="center"
    android:orientation="vertical">

    <rotate
        android:fromDegrees="0"
        android:toDegrees="90"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="infinite"
        android:drawable="@mipmap/ic_launcher"/>
    
</LinearLayout>

Modified the styles.xml as follows

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             Flutter draws its first frame -->
        <item name="android:windowBackground">@drawable/launch_background</item>
        <item name="android:windowFullscreen">true</item>
    </style>
    <style name="ViewTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <item name="android:windowBackground">@drawable/view</item>
    </style>
</resources>

Finally modified the AndroidManifest.xml as follows

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.native_splash">
    <!-- io.flutter.app.FlutterApplication is an android.app.Application that
         calls FlutterMain.startInitialization(this); in its onCreate method.
         In most cases you can leave this as-is, but you if you want to provide
         additional functionality it is fine to subclass or reimplement
         FlutterApplication and put your custom class here. -->
    <application
        android:name="io.flutter.app.FlutterApplication"
        android:label="native_splash"
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name=".MainActivity"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">
            <meta-data
            android:name="com.example.native_splash.SplashScreenWithTransition"
            android:resource="@style/ViewTheme"
            />
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
        <!-- Don't delete the meta-data below.
             This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
        <meta-data
            android:name="flutterEmbedding"
            android:value="2" />
    </application>
</manifest>

Now when I run it with F5 the app builds and runs but does not show the content in the view.xml although the Launch screen does show the LaunchTheme.
Is it possible to have simple animations on the launch screen in a flutter app? if so what am I doing wrong?

Answer 1

In MainActivity Add

@Nullable
    override fun provideSplashScreen(): SplashScreen? {
        return SimpleSplashScreen()
    }
}

Refer the following github example https://github.com/flutter/flutter/tree/master/dev/integration_tests/android_splash_screens