The easiest way to create your animated splash screen

Flutterappworld

3 years ago

Animated Splash Screen

Check it out at Pub.Dev

Do it your way

Assets image

Custom Widget

Url image

IconData

Or just change PageTransition and/or SplashTransition

Help Maintenance

I’ve been maintaining quite many repos these days and burning out slowly. If you could help me cheer up, buying me a cup of coffee will make my life really happy and get much energy out of it.

Getting Started

To use is simple, just do this:

@override
  Widget build(BuildContext context) {
    return AnimatedSplashScreen(
      splash: 'images/splash.png',
      nextScreen: MainScreen(),
      splashTransition: SplashTransition.rotationTransition,
      pageTransitionType: PageTransitionType.scale,
    );
  }

Splash Parameter

Here, you can pass:

String with assets route;
String with your url Image, don’t forget of pass tag like this “[n]www.my-url.com/my-image.png”;
IconData;
Widget;

SplashTransition

enum SplashTransition {
  slideTransition,
  scaleTransition,
  rotationTransition,
  sizeTransition,
  fadeTransition,
  decoratedBoxTransition
}

PageTransitionType

enum PageTransitionType {
  fade,
  rightToLeft,
  leftToRight,
  upToDown,
  downToUp,
  scale,
  rotate,
  size,
  rightToLeftWithFade,
  leftToRightWithFade,
}

Others:

AnimatedSplashScreen({
    Curve curve = Curves.easeInCirc,
    Future Function() function, // Here you can make something before change of screen
    int duration = 2500,
    @required dynamic splash,
    @required Widget nextScreen,
    Color backgroundColor = Colors.white,
    Animatable customTween,
    bool centered = true,
    SplashTransition splashTransition = SplashTransition.fadeTransition,
    PageTransitionType pageTransitionType = PageTransitionType.downToUp,
 })

With Future Screen

Here you can do something that will return your next screen, ex:

AnimatedSplashScreen.withScreenFunction(
  splash: 'images/splash.png',
  screenFunction: () async{
    return MainScreen();
  },
  splashTransition: SplashTransition.rotationTransition,
  pageTransitionType: PageTransitionType.scale,
)

Contribute and download this package source code on GitHub

https://github.com/clean-code-dev/animated_splash_screen