Splash Screen is the first screen that we see when we run our application. It is also known as Launch Screen. We will implement three basic methods to add a splash screen in our app.
Method 1 :
In this method, we will create a splash screen with the help of the Timer() function.
Steps :
1. Create a new Flutter app using Command Prompt.
2. Delete the code from main.dart file and copy the below code.
main.dart
Dart
import 'dart:async';import 'package:flutter/material.dart';void main() { runApp(MyApp());}class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Splash Screen', theme: ThemeData( primarySwatch: Colors.green, ), home: MyHomePage(), debugShowCheckedModeBanner: false, ); }}class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState();}class _MyHomePageState extends State<MyHomePage> { @override void initState() { super.initState(); Timer(Duration(seconds: 3), ()=>Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => SecondScreen() ) ) ); } @override Widget build(BuildContext context) { return Container( color: Colors.white, child:FlutterLogo(size:MediaQuery.of(context).size.height) ); }}class SecondScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title:Text("GeeksForGeeks")), body: Center( child:Text("Home page",textScaleFactor: 2,) ), ); }} |
Explanation of above code :
- We have a main() function which calls runApp() by taking any widget as an argument to create the layout.
- Then we have the home as MyHomePage() which is a stateful class(Mutable class).
- MyHomePage() returns a Container which has a child as FlutterLogo(which will be shown initially when app starts).
- Now, we have one most important method which is initState().
- initState() method called once when the stateful widget is inserted in the widget tree.
- initState() first call super.initState() and then Timer of duration 4 seconds(Timer function has 2 arguments,first is Duration and second is action to be performed). After 4 seconds,Current screen will be replaced by new Screen i.e. SecondScreen() .
- We can also use Asset Image/Network Image instead of FlutterLogo.
Output:
Method 2:
In this method, we will create a splash screen using splashscreen package.
The constructor of the SplashScreen class :
SplashScreen({Color loaderColor,
int seconds,
double photoSize,
dynamic onClick,
dynamic navigateAfterSeconds,
Text title,
Color backgroundColor,
TextStyle styleTextUnderTheLoader,
Image image,
Text loadingText,
ImageProvider<dynamic> imageBackground,
Gradient gradientBackground})
Steps :
- Create a new Flutter Application.
- Delete all the code from main.dart file for now.
- Add the dependency to your pubspec.yaml file :
pubspec.yaml
- Copy the below code :
main.dart
Dart
import 'dart:async';import 'package:flutter/material.dart';import 'package:splashscreen/splashscreen.dart';void main() { runApp(MyApp());}class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Splash Screen', theme: ThemeData( primarySwatch: Colors.green, ), home: Splash2(), debugShowCheckedModeBanner: false, ); }}class Splash2 extends StatelessWidget { @override Widget build(BuildContext context) { return SplashScreen( seconds: 6, navigateAfterSeconds: new SecondScreen(), title: new Text('GeeksForGeeks',textScaleFactor: 2,), loadingText: Text("Loading"), photoSize: 100.0, loaderColor: Colors.blue, ); }}class SecondScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title:Text("GeeksForGeeks")), body: Center( child:Text("Home page",textScaleFactor: 2,) ), ); }} |
Explanation of above code :
- We have home as Splash2() which is StatelessWidget class(Immutable class).
- It return SplashScreen class which has so many properties like title, image,gradientBackground etc.
- After completion of 6 seconds, it will navigate to a new screen i.e SecondScreen().
Output:
Method 3:
In this method, we will add a splash screen from the android folder.
Steps:
1. Create a new flutter application.
2. Delete all the code from main.dart file and write your own code. For example purpose, we will use the below code :
main.dart
Dart
import 'dart:async';import 'package:flutter/material.dart';void main() { runApp(MyApp());}class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Splash Screen', theme: ThemeData( primarySwatch: Colors.green, ), home: Splash3(), debugShowCheckedModeBanner: false, ); }}class Splash3 extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title:Text("GeeksForGeeks")), body: Center( child:Text("Home page",textScaleFactor: 2,) ), ); }} |
3. Currently, we have no splash screen.
4. Now, to add splash screen, go to android -> app -> src -> main -> res
5. Paste your asset image in a drawable folder for splash screen.
6. Open drawable folder and open launch_background.xml file.
7. Uncomment the item tag and add your asset image(android:src=”@drawable/YOUR_ASSET_IMAGE“) or you can copy the below code :
launch_background.xml
<?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/green" />
<!-- You can insert your own image assets here -->
<item>
<bitmap
android:gravity="center"
android:src="@drawable/bg" />
<!-- bg is asset image for splash screen -->
</item>
</layer-list>
Now, go to the values folder and modify styles.xml file. Delete the style tag with name=”NormalTheme“.After that,styles.xml file looks like this:
styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Theme applied to the Android Window while the process is starting -->
<style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
<item name="android:windowBackground">@drawable/launch_background</item>
</style>
</resources>
8. Create a new file in the values folder with the name “color.xml”.
9. Paste the below code:
color.xml
<?xml version="1.0" encoding="utf-8"?> <resources> <color name = "green">#808080</color> </resources>
10. Now, the last step is to modify the content in AndroidManifest.xml file because we have made so many changes.
My app name is splash_screen so my package name is “com.example.splash_screen” and android:label=”splash_screen” . So make sure you have your correct package name and android:label in AndroidManifest.xml.
AndroidManifest.xml :
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.splash_screen">
<application
android:name="io.flutter.app.FlutterApplication"
android:label="splash_screen"
android:icon="@mipmap/ic_launcher">
<activity
android:name=".MainActivity"
android:launchMode="singleTop"
android:theme="@style/LaunchTheme"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
android:hardwareAccelerated="true"
android:windowSoftInputMode="adjustResize">
<meta-data
android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
android:value="true" />
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
</application>
</manifest>
11. We have made all the necessary changes. Now, run the app to see the output :
Output:
For the complete code, you can refer to https://github.com/singhteekam/splash_screen
Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.
