The easiest way to create your animated splash screen

October 8, 2021 Splash screens

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