Skip to content
Related Articles

Related Articles

Improve Article

Splash Screen in Flutter

  • Difficulty Level : Hard
  • Last Updated : 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.

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:

splash in flutter

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 :
splash in flutter

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:

splash in flutter



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

splash in flutter

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”.

splash in flutter

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:

splash in flutter

For the complete code, you can refer to https://github.com/singhteekam/splash_screen




My Personal Notes arrow_drop_up
Recommended Articles
Page :