Made with Flutter Flutter Version - @latest Made with Dart Dart Version - @latest Made with Dart

Getting started 🚀

A Animated splash screen API for flutter which can programatically hide and show the splash screen with Transitions.

Version badge Version badge Version badge Version badge

Platform support

AndroidIOSWindowsMacLinuxChrome OSWeb

OverView

Splash screens (also known as launch screens) provide a simple initial experience while your app loads. They set the stage for your application, while allowing time for the app engine to load and your app to initialize.Below guide teaches you how to use splash screens appropriately on Android , IOS , Windows , Mac etc ..

Features ⛏

  • New Transition Animation

  • New Curve Animation

  • Multi Platform Support

  • Easy to Use

Installation

1. Depend on it

Add this to your package's pubspec.yaml file:

dependencies:
   flutter_animated_splash: ^0.0.10

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub add flutter_animated_splash

Usage 🎨

Import

Now in your Dart code, you can use:

import 'package:flutter_animated_splash/flutter_animated_splash.dart';

Include short and useful examples for package users.

Example_1

Splash Screen with Text Widget


AnimatedSplash(
    type: Transition.fade,
    child:Text("Your Splash"),
    curve:Curves.fastLinearToSlowEase,
    background:Colors.white,
    navigator:const Home(),
    durationInSeconds:3
)

Example_2

Splash Screen with Icon Widget


AnimatedSplash(
    type: Transition.size,
    child:Icon(
      Icons.audiotrack,
      color: Colors.green,
      size: 30.0,
    ),
    curve:Curves.fastLinearToSlowEase,
    background:Colors.white,
    navigator:const Home(),
    durationInSeconds:3
)

Example_3

Splash Screen with Image Widget


AnimatedSplash(
    type: Transition.slide,
    child:Image(
    image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
    curve:Curves.fastLinearToSlowEase,
    background:Colors.white,
    navigator:const Home(),
    durationInSeconds:3
)

ScreenShots

Page Transition

In general, a transition is nothing but moving an object from one place to another. In flutter, it is also the same but in terms of widgets like container, button, and also pages since everything in flutter is itself a widget.

We will be using a certain transition technique to animate our transition between two pages or widgets.

Page Transition Animation types

Animated TransitionsUsage
fadetype : Transition.fade
rightToLefttype : Transition.rightToLeft
leftToRighttype : Transition.leftToRight
topToBottomtype : Transition.topToBottom
bottomToToptype : Transition.bottomToTop
scaletype : Transition.scale
sizetype : Transition.size
leftToRightWithFadetype : Transition.leftToRightWithFade
elasticOuttype : Transition.elasticOut
fastOutSlowIntype : Transition.fastOutSlowIn
slidetype: Transition.slide

Page Curve Animation

1. bounceIn.

curve : Curves.bounceIn


AnimatedSplash(
    type: Transition.slide,
    child:Image(
    image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
    curve:Curves.bounceIn,
    background:Colors.white,
    navigator:const Home(),
    durationInSeconds:3
)

2. decelerate.

curve : Curves.decelerate


AnimatedSplash(
    type: Transition.rotate,
    child:Image(
    image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
    curve:Curves.decelerate,
    background:Colors.white,
    navigator:const Home(),
    durationInSeconds:3
)

3. easeOutCirc.

curve : Curves.easeOutCirc


AnimatedSplash(
    type: Transition.size,
    child:Image(
    image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
    curve:Curves.easeOutCirc,
    background:Colors.white,
    navigator:const Home(),
    durationInSeconds:3
)

4. slowMiddle.

curve : Curves.slowMiddle


AnimatedSplash(
    type: Transition.rightToLeftWithFade,
    child:Image(
    image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
    curve:Curves.slowMiddle,
    background:Colors.white,
    navigator:const Home(),
    durationInSeconds:3
)

4. elasticInOut.

curve : Curves.elasticInOut


AnimatedSplash(
    child:Image(
    image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
    curve:Curves.elasticInOut,
    background:Colors.white,
    navigator:const Home(),
    durationInSeconds:3
)

5. linearToEaseOut.

curve : Curves.linearToEaseOut


AnimatedSplash(
   type: Transition.rightToLeft,
    child:Image(
    image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
    curve:Curves.linearToEaseOut,
    background:Colors.white,
    navigator:const Home(),
    durationInSeconds:3
)

Types of Animated Curves

Animated CurvesUsage
bounceIncurve : Curves.bounceIn
bounceInOutcurve : Curves.bounceInOut
bounceOutcurve : Curves.bounceOut
deceleratecurve : Curves.decelerate
easecurve : Curves.ease
easeIncurve : Curves.easeIn
easeInBackcurve : Curves.easeInBack
easeInOutCubicEmphasizedcurve : Curves.easeInOutCubicEmphasized
elasticOutcurve : Curves.elasticOut
fastOutSlowIncurve : Curves.fastOutSlowIn
easeOutBackcurve : Curves.easeOutBack
easeInOutSinecurve : Curves.easeInOutSine
easeInQuartcurve : Curves.easeInQuart
easeInCubiccurve : Curves.easeInCubic
easeInOutQuadcurve : Curves.easeInOutQuad

Libraries

flutter_animated_splash