Flutter splash screen uses Lottie animation

Brother Cat said

I came to Chongqing because of business trips, a beautiful city. Walking on the street feels like climbing a mountain. The pace of life is relatively slow. I hope the epidemic will stay away from us.

Thanks to the Chongqing friends in the group for taking time out to party.

Start of the topic

lottie is an animation library that exaggerates the platform, with which you can make cool animations.

In fact, as a front-end, you still need to know a little bit of art, animation, and geometric math.

https://lottiefiles.com/

https://github.com/airbnb/lottie-web

Old iron remember to forward, Brother Mao will present more Flutter good articles~~~~

WeChat flutter training group ducafecat

original

https://mamuseferha.medium.com/how-to-use-lottie-animation-in-your-flutter-splash-screen-788f1380641d

Code

https://github.com/debbsefe/Lottie-Animation-Splash-Screen

reference

text

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

If you want to go a step further and really attract the user's attention, you can consider using animated pictures on the splash screen. Using Lottie to display an animated image is as easy as using the Image widget in your application.

begin

First, create a new flutter project.

flutter pub add lottie

Create a splash screen widget by pasting the following code.

class SplashScreen extends StatefulWidget {
  const SplashScreen({Key key}) : super(key: key);

  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen>
    with TickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: (5)),
      vsync: this,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Lottie.asset(
        'assets/splash_lottie.json',
        controller: _controller,
        height: MediaQuery.of(context).size.height * 1,
        animate: true,
        onLoaded: (composition) {
          _controller
            ..duration = composition.duration
            ..forward().whenComplete(() => Navigator.pushReplacement(
                  context,
                  MaterialPageRoute(builder: (context) => HomePage()),
                ));
        },
      ),
    );
  }
}

The Splash screen widget is a stateful widget that saves Lottie files in its build method. The animation controller is created in initState and used in the controller properties.

To navigate to the next page after the animation is complete, use the onLoaded callback with LottieComposition. This allows you to have more information and control over the Lottie file.

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

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

I added a homepage widget to which the splash screen navigates to the code.

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Text('Homepage')),
    );
  }
}

A simple text widget centered on scaffold.

Now you can continue to create more visually appealing applications for your users.

Don't forget to add the Lottie file as an asset to pubspec.yaml, otherwise, the animation will not be displayed. You can also find the complete project on GitHub.

https://github.com/debbsefe/Lottie-Animation-Splash-Screen

https://ducafecat.tech/

https://github.com/ducafecat