Flutter Lottie animated splash screen on Android

Question

I want to add a Lottie animation as a splash screen in a Flutter Android app. I would like it to start before Flutter draws its first frame, so I'm thinking about doing it natively.

I found two examples online but they both use Flutter's deprecated SplashScreen:

• flutter_animated_splash_screen
• flutter_lottie_splash_app

I get the following warning message during build:

W/FlutterActivityAndFragmentDelegate(23263): A splash screen was
provided to Flutter, but this is deprecated. See
flutter.dev/go/android-splash-migration for migration steps.

Is there any way to do a splash animation like this video that:

1. Accepts Lottie format
2. Visible during a cold start before Flutter draws its first frame
3. Doesn't use the deprecated Flutter SplashScreen

Things tried that didn't work:

• The documentation for Android 12 SplashScreen only seems to works for Animated Vector Drawable (AVD) format animations.
• The flutter_native_splash package doesn't support the Lottie animation format yet, though the documentation states that they would accept a PR adding support.

Video courtesy of flutter_animated_splash_screen.

Richers

Any luck with that ? Still haven't found a viable solutuon. – Filaria

Answer 1

Use the package lottie

Create a stateful Splash Screen:

Now use it as :

  import 'package:lottie/lottie.dart';
  import 'package:flutter/material.dart';
        
  class Example extends StatefulWidget {
          const Example({Key? key}) : super(key: key);
        
         @override
      State<Example> createState() => _ExampleState();
    }
    
    class _ExampleState extends State<Example> {


 String loadingString = 'Loading.....';
  Duration delayInterval = const Duration(milliseconds: 2000);

          @override
          Widget build(BuildContext context) {
            return Container(
              child: Lottie.asset('images/ex.json'),
            );
          }
        }

Now in the initState , you can call a function which can navigate to the home/login screen depending on the status of the user or whatever your use-case is.

For eg:

  void gotoaPage() async {
    dynamic cookie = global.prefs!.getString('something');
    if (cookie != null) {
      loadingString;
      await Future.delayed(delayInterval);
      Future(
        () => Navigator.of(context).pushReplacementNamed('/home'),
      );
    } else {
      await Future.delayed(delayInterval);
      Future(
        () => Navigator.of(context).pushReplacementNamed('/login'),
      );
    }
  }

Call gotoaPage() in the initState

Allot

Thanks for the answer! This doesn't meet the requirement of being visible during cold start before Flutter draws its first frame. Is there a reason why you don't think that's necessary? – Richers

I’m marking this answer as accepted. I think a native solution would start faster but would slow down Flutter’s startup and since SplashView is deprecated it would eventually stop working. If anyone else has a different answer I will consider accepting it. – Richers