How to create a custom animated launch screen in flutter

3,159

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

Share:
3,159
Pratheesh Russell
Author by

Pratheesh Russell

A mechanical engineer with interest in web designing and programming

Updated on December 17, 2022

Comments

  • Pratheesh Russell
    Pratheesh Russell over 1 year

    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?