How to create a custom animated launch screen in flutter
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
Pratheesh Russell
A mechanical engineer with interest in web designing and programming
Updated on December 17, 2022Comments
-
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 insidelaunch_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 toMainActivity.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?