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
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 :
- Copy the below code :
main.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
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: