How To Create a Splash Screen In Flutter in 2021

In this article, we will explain to you how we can create a splash screen in a flutter.  A splash screen is an image or animated design which you can see on your mobile screen of the desktop screen before loading an actual app or web page.

How to Create a Splash Screen in Flutter?

We need to import the image files into the project. It is common practice to put image files in a images or assets the folder at the root of a Flutter project.

Declare the Image in the pubspec.yaml

flutter:
uses-material-design: true
assets:
– images/flutterwithlogo.png

main.dart File:

Packages

import ‘dart:async’;import ‘package:flutter/material.dart’;
import ‘package:flutter_ui_splash_screen/homeScreen.dart’;

Main Function:

 void main() {
runApp(new MaterialApp(
home: new SplashScreen(),
routes: <String, WidgetBuilder>{
‘/HomeScreen’: (BuildContext context) => new HomeScreen()
},
));

When a named route is pushed with [Navigator.pushNamed], the route name is looked up in this map.

If [home] is specified, then it implies an entry in this table for the [Navigator.defaultRouteName] route (`/`), and it is an error to redundantly provide such a route in the [routes] table.

SplashScreen class:

In this class just extends the StatefulWidget.

class SplashScreen extends StatefulWidget {
@override
_SplashScreenState createState() => new _SplashScreenState();
}

Usually, we use StatefulWidget while making a dynamic user interface.

SplashScreen State:

This class extends to SplashScreen class.

[StatefulWidget], where the current configuration of a [State] is hosted, and whose documentation has sample code for [State].

class _SplashScreenState extends State
{ startTime() async {
var _duration = new Duration(seconds: 2);
return new Timer(_duration, navigationPage);
}

Timer: The [callback] function is invoked after the given [duration]. Here callback is navigationPage and duration is _duration.

void navigationPage() {
Navigator.of(context).pushReplacementNamed(‘/HomeScreen’);
}

pushReplacementNamed: Replace the current route by pushing the route named [routeName] and then disposing of the previous route.

@override
void initState() {
super.initState();
startTime();
}

initState(): The framework will call this method exactly once for each [State] object it creates.If you override this, make sure your method starts with a call to
super.initState().

@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Center(
child: new Image.asset(‘images/flutterwithlogo.png’),
),
);
}
}

Creating Home class:

flutterProjectDirectory -> lib -> homescreen.dart

import ‘package:flutter/material.dart’;

class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => new _HomeScreenState();
}

class _HomeScreenState extends State {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(‘HomeScreen’),
),
body: new Center(
child: new Text(‘Welcome to Home.!’),
),
);
}
}

Final Words:

I hope you guys liked our article. If you still have any problem with creating a splash screen then kindly let us know. Kindly also Share this article with others.