flutter_animated_splash 0.0.2

A package to automates the task of creating an animated splash screen in a flutter to enhance a beauti of app.

Getting started

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

Platform support

Android	IOS	Windows	Mac	Linux	Chrome OS	Web

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 ..

Installation

1. Depend on it

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

dependencies:
   flutter_animated_splash: ^0.0.1

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

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

Example_2

Splash Screen with Icon Widget

Splashanimatedscreen(
    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

Splashanimatedscreen(
    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
)

Page Transition Curve Animation

1. bounceIn.

curve : Curves.bounceIn

Splashanimatedscreen(
    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

Splashanimatedscreen(
    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

Splashanimatedscreen(
    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

Splashanimatedscreen(
    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

Splashanimatedscreen(
    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

Splashanimatedscreen(
    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

Curves	Usage
bounceIn	curve : Curves.bounceIn
bounceInOut	curve : Curves.bounceInOut
bounceOut	curve : Curves.bounceOut
decelerate	curve : Curves.decelerate
ease	curve : Curves.ease
easeIn	curve : Curves.easeIn
easeInBack	curve : Curves.easeInBack
easeInOutCubicEmphasized	curve : Curves.easeInOutCubicEmphasized
elasticOut	curve : Curves.elasticOut
fastOutSlowIn	curve : Curves.fastOutSlowIn
easeOutBack	curve : Curves.easeOutBack
easeInOutSine	curve : Curves.easeInOutSine
easeInQuart	curve : Curves.easeInQuart
easeInCubic	curve : Curves.easeInCubic
easeInOutQuad	curve : Curves.easeInOutQuad