How to create a custom animated launch screen in flutter

Pratheesh

unread,

Feb 8, 2020, 5:47:20 AM2/8/20

to Flutter Development (flutter-dev)

This is a copy of my question at StackOverflow. 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 the following

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 a new MySplashView without saving a reference, because it
        // has no state that needs to be tracked or controlled.
        return new mySplashView(context);
    }


    @Override
    public void transitionToFlutter(@NonNull Runnable onTransitionComplete) {
        // Immediately invoke onTransitionComplete because this SplashScreen
        // doesn't display a transition animation.
        //
        // Every SplashScreen *MUST* invoke onTransitionComplete at some point
        // for the splash system to work correctly.
        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?