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.