Creating Splash Screens in Flutter Apps
First of all, What is a splash screen?
Splash Screen is the screen that you, or a user, sees when the app first loads up. The default splash screen is usually white and is shown till the app loads up. After the app loads up, the developer can then choose to show a forced splash screen to provide users with some info or to display their logo for a bit long.
Forced Splash Screen
As explained in the starting, this screen is built as a dart file in your project and is not actually required but is forced by many apps to give a brief introduction to the users about the app.
Steps to include a forced splash screen:-
- Create a new flutter project
Use Android Studio or your terminal to create a new flutter project and run your project in any IDE like Android Studio or Visual Studio Code and delete all the default code written in the project.
2. Creating the splash screen
Create a new dart file, here I create a new package called screens and in that I create 2 new dart files named splash_screen.dart and home.dart.
After this create a stateful widget for the splash screen in the file splash_screen.dart with anything you like in it. Here I used a simple text with flutter_spinkit package which you need to depend upon by adding it to your pubspec.yaml file.
import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
class SplashScreen extends StatefulWidget {
@override
_SplashScreenState createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
'Forced \nSplash Screen',
style: TextStyle(
color: Colors.black,
fontSize: 30
),
textAlign: TextAlign.center,
),
SpinKitDualRing(color: Colors.black, size: 100,)
],
),
),
);
}
}
3. Coding the home screen
Now we need a different screen to which we will direct the user after the splash screen. Create a stateless/stateful widget in the home.dart file. Here I create a simple home page with an app bar and a body.
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'Splash Screen Examples'
),
),
body: Center(
child: Text(
'Home Page',
style: TextStyle(
color: Colors.black,
fontSize: 25
),
),
),
);
}
}
4. Setting up the timer for splash screen
Now we need to set up the time for which we want this splash screen to be shown to a user.
We do so by creating a new method called splashTimer and then we call it in the initstate method. In the splashTimer, we use Timer to hold the splash screen for some seconds, in my case 3 seconds, and then push the home page using pushReplacement because we don’t want the user to go back to the splash screen.
Additionally to use async and to call HomePage(), we will also need to add 2 extra imports at the top.
import 'dart:async';
import 'package:medium_article1/screens/home.dart';The code :-
@override
void initState() {
super.initState();
splashTimer(); // calling the function
}
splashTimer() {
Timer(Duration(seconds: 3), () async {
Navigator.pushReplacement(
context, MaterialPageRoute(builder: (context) => HomePage())); // pushing HomePage()
});
}The complete code for splash_screen.dart
import 'dart:async';
import 'package:medium_article1/screens/home.dart';
import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
class SplashScreen extends StatefulWidget {
@override
_SplashScreenState createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> {
@override
void initState() {
super.initState();
splashTimer();
}
splashTimer() {
Timer(Duration(seconds: 3), () async {
Navigator.pushReplacement(
context, MaterialPageRoute(builder: (context) => HomePage()));
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
'Forced \nSplash Screen',
style: TextStyle(
color: Colors.black,
fontSize: 30
),
textAlign: TextAlign.center,
),
SpinKitDualRing(color: Colors.black, size: 100,)
],
),
),
);
}
}The final output:-
True Splash Screen
As explained above, this screen is shown when the app is launched till the app loads up in the background. By default it is white and can be changed easily in our project. We will be using the previous project to add this.
Steps:-
- Create a new color for the splash screen
In the existing project navigate to android -> app -> src -> main -> res -> values.
Here create a new file named color.xml.
2. Adding code in color.xml file
Add the following code in the file where you can add any number of colors by naming them and writing their hex codes in a similar fashion.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name = "deepPurple">#673ab7</color>
</resources>3. Adding the color to splash screen
navigate to android -> app -> src -> main -> res -> drawable and open launch_background.xml.
Replace the following code
<item android:drawable="@android:color/white" />with
<item android:drawable="@color/deepPurple" />as I created a color named deepPurple above.
The whole code now looks like this-
<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/deepPurple" />
<!-- You can insert your own image assets here -->
<!-- <item>
<bitmap
android:gravity="center"
android:src="@mipmap/launch_image" />
</item> -->
</layer-list>Final output -
Similarly images can also be added to this splash screen by uncommenting the lines already present in launch_background.xml and by pasting your image in the drawable folder.
