Create Splash Screen in Flutter App

In this post, You will learn how to create a Splash Screen in Flutter without using any package.

What is Splash Screen?

Splash Screen is nothing but, it is a screen that displays whenever the application is loading. In general, the splash screen contains the company logo or logo animation, company name, company tagline, progress indicators, etc. In this tutorial, we implement a splash screen by using the Timer() function.

Flutter Splash Screen Without using package.

Implementation

  • First, create an empty project by using an IDE or use flutter create command.
  • Then copy the main.dart code and paste your code as per your requirement.

This Project uses,

Flutter Version2.0.6 (stable)
Dart Version2.12.3
Flutter version

Here, the main.dart file.

import 'dart:async';
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.transparent
  ));
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.orange,
      ),
      home: SplashScreen(),
    );
  }
}


class SplashScreen extends StatefulWidget{

  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {

    super.initState();
    Timer(Duration(seconds: 3),
            ()=>Navigator.pushReplacement(context,
            MaterialPageRoute(builder:
                (context) =>
                    HomeScreen()
            )
        )
    );
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        height: double.infinity,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topRight,
            end: Alignment.bottomLeft,

            colors: [Color(0xFFFF800B),Color(0xFFCE1010),]
          ),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Column(
              children: [
                Image.asset(
                  "assets/images/grocery.png",
                  height: 300.0,
                  width: 300.0,
                ),
                Text("A whole grocery store\n at your fingertips",textAlign:TextAlign.center,
                  style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                    fontSize: 18.0,
                  ),
                ),
              ],
            ),

            CircularProgressIndicator( 
              valueColor:  AlwaysStoppedAnimation<Color>(Colors.orange),
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
          child: Text("Home Screen"),
        ),
    );
  }
}

In initState(), the Timer()  waits for 3 seconds. After 3 seconds SplashScreen will be replaced by HomeScreen.

Click here to download the source code of this project.

Video Tutorial

%d bloggers like this: