How to set Custom View as Real Splash Screen in Flutter Android

Question

I am trying to show a custom view as real splash screen that pops up when flutter is initialising its first frame. I am following the documentation but as it says we need to create a flutter fragment and override provideSplashScreen method. I did that but I don't know how to add that fragment to the activity or how to reference that fragment in the manifest.

My Manifest File

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.neer.neer">
    <!-- 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:icon="@mipmap/ic_launcher"
        android:label="neer">
        <activity
            android:name=".MainActivity"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:windowSoftInputMode="adjustResize">
            <meta-data
                android:name="io.flutter.embedding.android.FlutterFragment"
                android:value=".MyFlutterFragment" />
            <!-- Specifies an Android theme to apply to this Activity as soon as
                 the Android process has started. This theme is visible to the user
                 while the Flutter UI initializes. After that, this theme continues
                 to determine the Window background behind the Flutter UI. -->
            <meta-data
                android:name="io.flutter.embedding.android.NormalTheme"
                android:resource="@style/NormalTheme" />
            <!-- Displays an Android View that continues showing the launch screen
                 Drawable until Flutter paints its first frame, then this splash
                 screen fades out. A splash screen is useful to avoid any visual
                 gap between the end of Android's launch screen and the painting of
                 Flutter's first frame. -->
            <meta-data
                android:name="io.flutter.embedding.android.SplashScreenProvider"
                android:resource=".MyFlutterFragment" />
            <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>

My MainActivity.java

package com.neer.neer;

import android.animation.Animator;
import android.animation.ObjectAnimator;
import android.content.Context;
import android.os.Bundle;
import android.os.PersistableBundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.animation.LinearInterpolator;

import androidx.annotation.Nullable;

import io.flutter.embedding.android.FlutterActivity;
import io.flutter.embedding.android.SplashScreen;

class MainActivity extends FlutterActivity {
    @Override
    public void onCreate(@Nullable Bundle savedInstanceState, @Nullable PersistableBundle persistentState) {
        super.onCreate(savedInstanceState, persistentState);
    }

}

MyFlutterFragment.java file. I Need this fragment to show as splash screen

package com.neer.neer;

import android.graphics.drawable.Drawable;

import io.flutter.embedding.android.DrawableSplashScreen;
import io.flutter.embedding.android.FlutterFragment;
import io.flutter.embedding.android.SplashScreen;

public class MyFlutterFragment extends FlutterFragment {
    @Override
    public SplashScreen provideSplashScreen() {
        // Load the splash Drawable.
//        Drawable splash = getResources().getDrawable(R.drawable.my_splash);

        // Construct a DrawableSplashScreen with the loaded splash
        // Drawable and return it.
//        return new DrawableSplashScreen(splash);
        return new MySplashScreen();
    }
}

MySplashScreen.java file.

package com.neer.neer;

import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;

import io.flutter.embedding.android.SplashScreen;

public class MySplashScreen implements SplashScreen {
    @Nullable
    @Override
    public View createSplashView(@NonNull Context context, @Nullable Bundle savedInstanceState) {
        return LayoutInflater.from(context).inflate(R.layout.splash_screen, null, false);
    }

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

spash_screen.xml file (Layout for the splash screen)

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/background_dark"
    >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="N E E R"
        android:layout_gravity="center"
        android:textColor="@android:color/white"
        android:textSize="@android:dimen/notification_large_icon_width"
        android:textStyle="bold"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal|bottom"
        android:text="Powered by ICCW"
        android:textColor="@android:color/white"
        android:textSize="26sp"
        android:layout_marginBottom="20dp"
        />

</FrameLayout>

Solution

In Flutter documentation it is not mentioned that you Flutter Activity also has the method provideSplashScreen that can be overriden. So, I looked at the list of overrides that FlutterActivity provide and saw the method provideSplashScreen there. and it worked.

for someone else who find themselves in same situation

Just override provideSplashScreen method in you MainActivity that extends FlutterActivity

public class MainActivity extends FlutterActivity {
    @Nullable
    @Override
    public SplashScreen provideSplashScreen() {
        return new MySplashScreen(); //Your Custom Splash Screen
    }
}

class MySplashScreen implements SplashScreen {
    @Nullable
    @Override
    public View createSplashView(@NonNull Context context, @Nullable Bundle savedInstanceState) {
        return LayoutInflater.from(context).inflate(R.layout.splash_screen, null, false);
    }

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

Comments

[Ekta Padaliya]

When I added provideSplashScreen in main activity then its giving me error for Expecting member declaration

[Taha Malik]

make sure MainActivity extends FlutterActivity