Implementing Splash Screen Animations with Lottie in Flutter

6 min readMay 30, 2024

In a world of increasing demand for applications, there is a need to enhance user engagement and user experience. Using animations is one way of achieving this to result in improved user engagement, and enhanced brand recognition creating memorable visual impact.

Well, in Flutter development we can use the animations to achieve various App feature needs. In this tutorial am going to show you how to add a custom animated splash screen in your Flutter Apps using LottieFiles.

In case you are new to Flutter, check out Flutter's Official Documentation on Getting Started with Flutter. As a bonus, you can check out this article on resources to get started with Flutter 😃

Lottie Files

LottieFiles is a platform that offers lightweight animations for websites, apps, ads, and even docs.

With amazing animations from LottieFiles, you can implement visually appealing splash screens in your Flutter Apps.

Getting Started

1. Step One.

We will use Lottie for Flutter library, which parses Adobe Effects exported as JSON files and renders them natively on mobile — Both Android and iOS.

i). Create a new Flutter Demo App called lottie_flutter, (you can give it a name of your choice)

$ flutter create lottie_flutter

ii). Remove the generated code, and replace it with the following code in your main.dart file:

main.dart file

iii). Add the Package

Run this command with Flutter

$ flutter pub add lottie

Or directly add the package to your dependencies with

dependencies:
  lottie: ^3.1.2

Then run flutter pub get the command to update the dependencies. (Always remember to use an updated package version from pub.dev)

iv). Import the Package.

In our Dart Code, we will import and use the package with:

import 'package:lottie/lottie.dart';

v). Create a new Splash Screen page.

In our lottie_flutter demo app, create a new splash screen file where we will implement the splash effect loading from Lottie animations. I will name it splash_screen.dart file. Then, add the following code which we will keep building upon as we go.

2. Step Two.

There are various ways of adding Lottie animation JSON to your app.

Using Lottie.network() -> Accessing your animation JSON directly through a remote URL.
Using Lottie.asset() -> Adding animation JSON to an asset folder and using it in your App by referring to the asset path.

1. Adding the Animation JSON file directly via network URL.

In this method, you will add the link to the Lottie animation JSON network URL directly to your Flutter App using Lottie.network().

On your Lottie dashboard, search for an animation of your choice. In this example, I will use the ‘rocket’ keyword. Pick one animation, you can edit it if you want, to enhance the color theme from your Lottie editor using the edit icon.

Then in the Animation details, select the Asset Link & embed option from the tab to generate a link.

We will use the above copied JSON link in our demo app.

In the splash_screen.dart page that we created previously from our lottie_flutter demo app, add the following code using Lottie.network() , which allows us to use a remote animation URL we have copied from the Lottie dashboard above.

Lottie anim from network URL

You can modify the code according to your preference to suit your needs. Running this code, results to this:

2. Adding the Animation JSON to your Assets folder.

Note: The next steps of this tutorial will majorly focus on implementing adding animation JSON files to your assets folder in your Flutter App.

In this step, you will download an animation JSON file from Lottie's dashboard and later create an asset folder in your Flutter App where you will use it.

Now head over to LottieFiles to pick the sample animation we want to use. In this example, I will use a login animation, on the search bar, type in login and pick your preferred choice of the login Anim.

If you prefer, you can also edit the selected animation according to your preference.

The animation is downloaded in the form of a JSON file.

3. Step Three

Now back to our lottie_files Flutter demo app,

At the root of your project, create an /assets folder.

In the assets folder, create another folder for the animations and name it animations — (You can use your preferred name).

Then drag and drop the above downloaded login Animation JSON file into the animations folder.

4. Step Four

In the pubspec.yaml file, un-comment the commented asset line of code, and add the path of your recently added animation file. — Keep in mind that the yaml is case-sensitive so make sure the syntax is correct. The path should now display as assets/animations/.

You can leave it this way in case you want to add more JSON files to your animations folder and you don't want to specify each file name separately, this will include all files in the animations/ folder.

Now that we have downloaded the preferred animation from LottieFiles and added it to the project, the next step is the actual implementation.

5. Step Five

In the lottie_flutter project, let's update our splash_screen.dart file to use Lottie.asset() , specifying the path of the animation JSON file we have in our assets folder.

Note: You can add other animation properties according to your preference and use AnimationController to adjust the motion according to your needs.

Now the splash_screen.dart page code with this updated implementation should look like this:

6. Step Six

Next, we want the animated splash to display for some seconds then navigate to the HomeScreen page.

So let's add a method to help us load the splash for a given duration before navigating to the HomeScreen page.

Next, add a method to Navigate to HomeScreenPage() when the duration for loading the splash screen elapses.

With all these new methods added, Now the full code for the splash_screen.dart page would be:

This translates to this Splash display:

7. Step 7

Next, let's create a simple HomeScreen Page to test the navigation once the splash screen is loaded.

Create a new file home_screen.dart page and add the code below to it:

Final Step.

Now all the pieces of code are together, and we will do a full end to test the changes.

Here is the full code sample from GitHub.

You should have the following changes in your app as displayed on this demo app.

Other resources to check:

Conclusion

In this article, you have learned how to download and use Lottie Files animations to create amazing animated splash screens on your Flutter App. With this, you can get as much creative as you want with different variations of the animations to create a sleek splash for your Flutter Apps.

Thank you 😍

Happy Fluttering 🙌.

Should you have any questions, feel free to ping me on Twitter or in the comment sections below.