Splash Screen in Flutter

20 Jul, 2021
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.
In this method, we will create a splash screen with the help of the Timer() function.
How to Create a Splash Screen in Flutter App? | GeeksforGeeks - YouTubeGeeksforGeeks529K subscribersHow to Create a Splash Screen in Flutter App? | GeeksforGeeksWatch laterShareCopy linkInfoShoppingTap to unmuteIf playback doesn't begin shortly, try restarting your device.You're signed outVideos you watch may be added to the TV's watch history and influence TV recommendations. To avoid this, cancel and sign in to YouTube on your computer.CancelConfirmMore videosMore videosSwitch cameraShareInclude playlistAn error occurred while retrieving sharing information. Please try again later.Watch on0:000:000:00 / 14:21•Live•<div class="player-unavailable"><h1 class="message">An error occurred.</h1><div class="submessage"><a href="https://www.youtube.com/watch?v=XXISgdYHdYw" target="_blank">Try watching this video on www.youtube.com</a>, or enable JavaScript if it is disabled in your browser.</div></div>
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:
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})

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,),      image: new Image.network('https://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200.png'),      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:
In this method, we will add a splash screen from the android folder.
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:
Dart
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Flutter - Custom Bottom Navigation Bar
Flutter - Checkbox Widget
ListView Class in Flutter
Flutter - Stack Widget
Flutter - Search Bar
Flutter - FutureBuilder Widget
Flutter - Flexible Widget
Operators in Dart
Flutter - ListTile Widget
Flutter - Dialogs