Splash Screen in Flutter

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,),
      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:

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