7

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

Osama Gamal
  • 2,280
  • 5
  • 17
  • 28
  • you can check this tutorial, it's a splash screen from Dart: https://medium.com/@vignesh_prakash/flutter-splash-screen-84fb0307ac55 – diegoveloper Aug 08 '18 at 16:41
  • 2
    this not the correct way to implement a splash screen, please check this answer https://stackoverflow.com/questions/43879103/adding-a-splash-screen-to-flutter-apps – Osama Gamal Aug 08 '18 at 16:48
  • oh yeah of course is not the best way, but you want to display animated images, in the case that you only want to use an image and a real splash screen, I wrote a post about that: https://medium.com/@diegoveloper/flutter-splash-screen-9f4e05542548 – diegoveloper Aug 08 '18 at 16:51
  • Thanks @diegoveloper, This is very correct way to implement splash screen, but I'm looking for a animated splash screen like using a gif image for instance, is there's a better approach than making a custom widget – Osama Gamal Aug 08 '18 at 18:10
  • 1
    You will need a custom activity and viewcontroller in native to display a gif with a duration, but it would be the same if you make this in dart. – diegoveloper Aug 08 '18 at 18:15
  • @diegoveloper is it possible to remove the original splash screen from the styels.xml and then in the flutter side I would start a new widget on app start to reduce the time of starting the app if There's no possible way to display a gif or an animated image/ video? – Osama Gamal Aug 09 '18 at 11:07
  • you can remove the splash screen from native apps – diegoveloper Aug 09 '18 at 14:17

1 Answers1

4

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()
);
Logemann
  • 2,767
  • 33
  • 53
  • i think because you answer is useless - there is no example code, also you can’t animate anything while android or ios native activity/controller is staring –  Sep 25 '19 at 06:02
  • 3
    First off, if an answer has to have code, then a lot of useful answers wouldnt exist in the first place. And while you cant animate the native "splash image", you can easily add "your own splash" right after it so that the user doesnt even see the difference. – Logemann Sep 25 '19 at 19:26