animated splash screen flutter

Question

I wanted to display an animated splash screen so I tried a gif image it doesn't work so, I took a look at that answer Can I Add GIF format Image as a Splash Screen but it doesn't work, is there's a recommended approach to achieve this

Answer 1

I would go the Flare (https://www.2dimensions.com/about-flare) way. You can author the animation pretty simple with a web authoring tool which is free.

Then they have a Flutter runtime plugin (https://pub.dev/packages/flare_flutter). With it you can just play the exported animation from the authoring webapp. Its really easy once you mastered how to use the web authoring tool. In any way its easier then creating the animation 100% with code.

This is how a splashscreen could look like (assumed you put the flare animation export in /assets/flare in the project folder)

import 'package:flare_flutter/flare_actor.dart';
import 'package:flutter/material.dart';

class SplashScreen extends StatelessWidget {

  SplashScreen() {
  }

  @override
  Widget build(BuildContext context) {
    String asset = "assets/flare/splash.flr";
    return Container(
        // use same color as native splashscreen GIF/PNG so that the user cant tell the difference
        color: const Color.fromRGBO(250, 224, 61, 1.0), 
        child: FlareActor(
          asset,
          callback: (nameOfAnimation) async {
             Navigator.pushReplacementNamed(context, "/login");                      
          },
          fit: BoxFit.contain,
          alignment: Alignment.center,
          sizeFromArtboard: false,
          animation: "splash",
        )
    );
  }
}

in your materialApp just do:

return MaterialApp(
      title: 'My App',
      debugShowCheckedModeBanner: false,
      home: SplashScreen()
);