Skip to content

The easiest way to create your animated splash screen in a fully customizable way.

License

Notifications You must be signed in to change notification settings

LeonHoog/animated_splash_screen

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Animated Splash Screen

Check it out at Pub.Dev

Do it your way

Assets image

ezgif com-video-to-gif (1)

Custom Widget

ezgif com-video-to-gif (4)

Url image

ezgif com-video-to-gif (3)

IconData

ezgif com-video-to-gif (2)

Or just change PageTransition and/or SplashTransition

ezgif com-video-to-gif (5)

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.

Buy Me A Coffee

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,
)

About

The easiest way to create your animated splash screen in a fully customizable way.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Languages

  • Dart 100.0%