Native Splash Screen in Flutter Using Lottie (Deprecated in Android)

Published in

The Startup

6 min readDec 8, 2020

This article describes how you can add an animated splash screen natively using Android(Kotlin) and iOS(Swift) with Lottie animation.

Update: The implemntation for Android is deprecated. According to the documentation:

Please use the new Splash screen API available on Android S. On lower versions of Android, it’s no longer necessary to display a splash screen to wait for the Flutter first frame.

If you still want to achieve that (not recommended for a better UX), you can refer to this Github repository for a workaround.

Adding an animated splash screen directly in Flutter using dart code is possible, however, the way Flutter application starts as a FlutterActivity or a FlutterViewController in Android and iOS adds a few seconds before Flutter actually draws its first frame. Therefore, having a splash screen natively will start the animation the moment the app launches, resulting in a better user experience.

It is worth mentioning that adding a static image as a splash screen is fairly easy and well documented at Flutter’s official documentation, where you can simply add your images in Android’s drawable and iOS assets then use them in styles.xml in Android and LaunchScreen.storyboard in iOS. However, I could not find many resources on how to achieve that for an animated splash screen using Lottie for instance, and that’s what I am gonna explain in this article.

Why Lottie?

Lottie is a library with support for multiple platforms including Android and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively. That means the animation is created by designers and exported as a json file with no additional efforts by the developers. In this tutorial, I will be using a free sample file created by LottieFiles and can be found at this link. So let’s get started.

Create a new flutter project, and follow these steps;

Android

1. Start by adding Lottie dependency to your project’s build.gradle file found at /android/app/: (I added constraint layout dependency as well)

dependencies {
   ...
   implementation "com.airbnb.android:lottie:3.5.0"
   implementation "com.android.support.constraint:constraint-layout:2.0.4"
   ...
}

2. In AndroidManifest.xml remove meta data tag with the name io.flutter.embedding.android.SplashScreenDrawable and replace LaunchTheme under activity tag with NormalTheme so your the file will look like the following;

You can remove LaunchTheme from /android/app/res/values/styles.xml as you will not need it any more.

3. Create a raw directory under /android/app/res/values and copy the .json file, whether you created your own or downloaded a free sample from the link above. In this tutorial, it’s named splash_screen.json .

4. In order to use the .json file and display the animation view, we need to create a splash view class with its layout. Under /android/app/res, create a new directory called layout (if it does not exist) and then create a new resource file called splash_view.xml . Open the xml file and ensure it looks like the following;

For this demo, I set the animation to auto play, with a speed of 1.0. And I don’t want it to loop. You can play with the different values as you wish. The most important part is app:lottie_rawRes that indicates we want to use the json file we added in raw directory. Now, we need to create the splash view class. You can do that by going to /android/app/src/main/kotlin/YOUR-PACKAGE-NAME/ and create a new kotlin class. Call it SplashView then ensure it looks like the following;

As you can see, this view is inflatting splash_view layout. The final step is to let MainActivity know about our custom splash view.

5. Go to /android/app/src/main/kotlin/YOUR-PACKAGE-NAME/ and click on MainActivity.kt . FlutterActivity provides a method called provideSplashScreen and we just need to implement it as follows;

The project directory should look like this now;

That’s all for Android. Just run the app and you should see the animated screen at app launch.

iOS

Let’s add the splash screen in iOS now.

Open the project with xcode by navigating to the directory where your project is located, click on ios folder and double click on Runner.xcworkspace .
Click on Main.storyboard , you will see the layout editor with one screen visible. We need to add a new ViewController which will be our Splash screen. You can do that by clicking on the + sign at the top right, a popup will appear, search for View Controller and drag it to the editor as the following screenshot shows;

3. When step 2 is done, you will see 2 screens. Choose the new view controller and click on attributes inspector then check is initial view controller .

Set splash view controller as initial view controller

4. We need to add Lottie dependency to /ios/podFile;

pod 'lottie-ios'

So the file will look like this;

#platform :ios, '9.0' target 'Runner' do  
   use_frameworks!  
  
   pod 'lottie-ios' end

Then run; (Ensure you are in ios directory, if not, run cd ios from the root of your flutter project)

pod install

5. Drag and drop the .json file under /ios/Runner/ (select the Copy items if needed option), whether you created your own or downloaded a free sample from the link above. In this tutorial, it’s named splash_screen.json .

6. With the dependency and the splash_screen.json file already added, we can create our splash view controller that will handle showing the animation and then navigating to Flutter’s application. In /ios/Runner/, create a new swift file, call it SplashViewController . Before writing anything in the class, we should modify AppDelegate.swift to create a FlutterEngine. If we skip this step, we will not be able to navigate to FlutterViewController after the animated splash screen completes its animation.

So we created a FlutterEngine called MyApp (You can choose any name you want), and in application ‘s didFinishLaunchingWithOptions, we should run the engine and register the plugins with the engine. Note that the default code isGeneratePluginRegistrant.register(with: self) . Ensure that it is registered with self.flutterEngine instead.

7. With that done, now we can prepare SplashViewController to show the animation and then navigates to Flutter’s View Controller.

In viewDidAppear we initialise the animation view with the added splash_screen.json file. You can play around the settings such as loopMode, animationSpeed, etc. When the animation is done, we start the flutter app.

In order to get FlutterViewController , we MUST get an instance of the FlutterEngine we created and ran at AppDelegate.swift.

let appDelegate = UIApplication.shared.delegate as! AppDelegate        let flutterEngine = appDelegate.flutterEngine
        
let flutterViewController = FlutterViewController(engine:    flutterEngine, nibName: nil, bundle: nil)

Then present(completion:) is used to start the view controller.

8. It’s time now to link the ViewController created at step 2 with the SplashViewController class. That can be done by clicking on Main.storyboard and selecting the new ViewController, then from identity inspector choose SplashViewController as the screenshot shows;

9. The final step is to set the main interface for Main.storyboard instead of LauncherScreen.storyboard . To achieve that, click on Runner, select General tab, under deployment info , set Main interface to Main from the dropdown menu as the screenshot shows;