Animated splash screen in flutter

Hi Guys, Welcome to Proto Coders Point. In this flutter tutorial article will learn how to implement Animated splashscreen in flutter.

To acheive simple & animation splash screen will make use of flutter animated_splash_screen package.

A library/package by which we can easily add a startup screen that too in animation effect in flutter.

Animated splash screen in flutter

How to use this package. Below are steps to add package in your flutter project.

1. Installation

Add dependencies using terminal command

flutter pub add animated_splash_screen

with above command, it will simply add the dependencies in pubspec.yaml, now run below cmd to successfully download package as external library.( make sure you are connected to internet).

flutter pub get

Alernative way to add external package in flutter project

Open pubspec.yaml, then under dependencies section add it:

dependencies:
  animated_splash_screen: ^1.2.0

Now, hit pub get button or run flutter pub get cmd .

2. Import it

Now, once package is been installed successfully, to use the package, we need to import it where required. Eg: main.dart.

import 'package:animated_splash_screen/animated_splash_screen.dart';

How to implement Animated splash screen in flutter

Startup screen in flutter.

@override
  Widget build(BuildContext context) {
    return AnimatedSplashScreen(
      splash: 'logo/splash.png',
      nextScreen: MainPageScreen(),
      splashTransition: SplashTransition.rotationTransition
    );
  }

Properties of AnimatedSplashScreen

• splash: Here you can pass any widget, that you want to show in splash screen, Like: Container widget, Icon Widget, Image.asset, Image.network etc.
• splashTransition: Animated Transition effect to above splash properties. Below are list of splashTransition effect for different anim.
• backGroundColor: Set a backGroundColor to splash screen, by default: background Color is white.
• duration: Set for how much time splash screen should show.
• nextScreen: The screen that will appear after startup welcome screen.

Different Animation Transition

splashTransition

  splashTransition.slideTransition,
  splashTransition.scaleTransition,
  splashTransition.rotationTransition,
  splashTransition.sizeTransition,
  splashTransition.fadeTransition,
  splashTransition.decoratedBoxTransition

Snippet Example

How to use different Widget in splash properties to customize splash screen in flutter

container with Icon

AnimatedSplashScreen(
        splash: Container(
          color: Colors.amber,
          child: Icon(Icons.ac_unit_sharp,size: 50,),
        ),
        nextScreen: MyHomePage(),
        splashTransition: SplashTransition.rotationTransition,
        duration: 3000,
      )

Icon with fadeAnimation

AnimatedSplashScreen(
        splash: Icon(Icons.ac_unit_sharp,size: 50,),
        nextScreen: MyHomePage(),
        splashTransition: SplashTransition.fadeTransition,
        duration: 3000,
)

Image.asset

AnimatedSplashScreen(
        splash: Image.asset("assets/logo.png"),
        nextScreen: MyHomePage(),
        splashTransition: SplashTransition.decoratedBoxTransition,
        duration: 3000,
)

Image.network

AnimatedSplashScreen(
        splash: Image.network("Image url"),
        nextScreen: MyHomePage(),
        splashTransition: SplashTransition.sizeTransition,
        duration: 3000,
)

Complete Source Code – Flutter Animated Splash Screen

main.dart

import 'package:flutter/material.dart';
import 'package:animated_splash_screen/animated_splash_screen.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AnimatedSplashScreen(
        splash: 'assets/logo.png', // use any widget here
        nextScreen: MyHomePage(),
        splashTransition: SplashTransition.rotationTransition,
        duration: 3000,
      )
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 150,
              height: 150,
              child: Image.asset('assets/logo.png'),
            ),
            Container(
              child: Text("Welcome to Proto Coders Point",style: TextStyle(fontSize: 20),),
            ),
          ],
        ),
      ),
    );
  }
}