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.

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 Version | 2.0.6 (stable) |
Dart Version | 2.12.3 |
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.
Useful. Thank you.
It looks minimalist and beautiful.