Create a Simple Splash Screen with Flutter and Dart

Hi, flutter developer in this flutter tutorial I, am Create a simple splash screen with flutter and dart. Flutter Splash Screen created to understand how to create different types of Splash Screens both for Android and iOS.

splash screen as per iOS developer would provide a bit of a hassle due to the OS-specification and limitations, but as per  Android developers, Splash screens are merely a cakewalk. Now the solution of these with the advantages of  Flutter, I think flutter dart can greatly both Android and iOS.

let’s Create your flutter splash screen easy example.

 Step 1:  Start Your Android Studio and make a flutter Project. 

Start your android studio and make your splash screen flutter dart project with a flutter application screen. and set your application name, package name, etc. after successfully syncs your project open your main.dart file.

Step 2: Open main.dart file in your lib folder.

open your main.dart file and clear all code on main. dart file and add this code in your dart file.

maim.dart file source code 

import 'dart:async';

import 'Constant/Constant.dart';
import 'Screen/AnimatedSplashScreen.dart';
import 'Screen/HomePage.dart';
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

Future main() async {
  runApp(new MaterialApp(
    title: 'FluterSplashDemo',
    debugShowCheckedModeBanner: false,
    theme: new ThemeData(
      primarySwatch: Colors.red,
    ),
    home: new AnimatedSplashScreen(),
    routes: <String, WidgetBuilder>{
      ANIMATED_SPALSH: (BuildContext context) => new AnimatedSplashScreen()
    },
  ));
}

Step 3: Add a Constant Package in the lib folder and in Constant package create a Constant.dart file and add these codes.

String HOME_SCREEN='/HomeScreen', ANIMATED_SPALSH='/AnimatedSplashScreen';

Step 4: Make an assets folder in your project and add an image folder in the assets folder.

in this step, you can create an assets folder in your project for image. right-click on your project and New in new click on Directory  with name assets. after that in assets folder make an image folder and copy your image nad past hare for use in the splash screen.

and all these images in your project pubspec.yaml file

assets:
  - assets/image/animation.png
  - assets/image/image.png
  - assets/image/video.png
  - assets/image/logo.png
  - assets/image/powered_by.png

Step 5:  Create an AnimatedSplashScreen dart file and add these codes. 

import 'dart:async';

import 'package:flutter_spleshscreen/Constant/Constant.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class AnimatedSplashScreen extends StatefulWidget {
  @override
  SplashScreenState createState() => new SplashScreenState();
}

class SplashScreenState extends State<AnimatedSplashScreen>
    with SingleTickerProviderStateMixin {
  var _visible = true;

  AnimationController animationController;
  Animation<double> animation;

  startTime() async {
    var _duration = new Duration(seconds: 3);
    return new Timer(_duration, navigationPage);
  }

  void navigationPage() {
    Navigator.of(context).pushReplacementNamed(HOME_SCREEN);
  }

  @override
  void initState() {
    super.initState();
    animationController = new AnimationController(
        vsync: this, duration: new Duration(seconds: 2));
    animation =
    new CurvedAnimation(parent: animationController, curve: Curves.easeOut);

    animation.addListener(() => this.setState(() {}));
    animationController.forward();

    setState(() {
      _visible = !_visible;
    });
    startTime();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          new Column(
            mainAxisAlignment: MainAxisAlignment.end,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[

              Padding(padding: EdgeInsets.only(bottom: 30.0),child:new Image.asset('assets/images/powered_by.png',height: 25.0,fit: BoxFit.scaleDown,))


            ],),
          new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new Image.asset(
                'assets/images/logo.png',
                width: animation.value * 250,
                height: animation.value * 250,
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Step 6 Create A HOME_SCREEN Dart file for Home Screen.

create a home screen dart file after complete your splash time screen redirect on the home screen.