How to use Lottie animation in your flutter splash screen

Splash screens are quite common when building mobile applications. They are usually static screens that are displayed at the start of your app. This screen can help you tell your users what the application is about, by displaying your app logo or app name.

If you want to go a step further and really catch your users' attention, consider using an animated image on your splash screen. Showing an animated image with Lottie is as easy as using an Image widget in your app.

To start, create a new flutter project. Add Lottie package to your pubspec.yaml as a dependency.

flutter pub add lottie

Create your splash screen widget by pasting the following code.

The splash screen widget is a stateful widget that holds the Lottie file in its build method. The animation controller is created in the initState and is used in the controller property.

To navigate to the next page when the animation completes, use the onLoaded callback with LottieComposition.This allows you have more information and control of the Lottie file.

onLoaded: (composition) {
      _controller
      ..duration = composition.duration
      ..forward().whenComplete(() => Navigator.pushReplacement(
      context,
      MaterialPageRoute(builder: (context) => HomePage()),
     ));
  },

When the animation is complete, navigate to the next page.

I added a homepage widget that the splash screen navigates to in my code.

A simple text widget centered in a scaffold.

There you have it! Now you can go on to create more visually appealing apps for your users.

jumping bowl

Don’t forget to add the Lottie file as an asset in your pubspec.yaml, otherwise, the animation won’t display. You can also find the full project here on GitHub.

debbsefe/Lottie-Animation-Splash-Screen