Flutter: Create Splash Screen

According to a recent survey, 50% of mobile users will stop using an app or Website that is loading for more than 3 seconds. So that you need to create the loading screen more creatively and innovative. For that reason, we used to take more concentrate on this splash screen. This article will completely tell you the reason for using the splash screen, its importance, and how to add it to your Application.

Step 1: Import Image Files

1. Right-click your Filename.
2. Tap “New”.
3. Choose “File”.
4. Enter the required name and tap “Ok”.

Step 2: Add the Image to the Created File

1. Copy the image into your system.
2. Right-click the created file.
3. Tap “Paste”.
4. Now, your image is added to this file.

Step 3: Declare the Image in pubspec.yaml

1. Double click the “pubspec.yaml”.
2. Here you can see the default codes.
3. Find “assets”.
4. Here, you see the default image code.
5. Just edit it by using the following code.

CODE:

“assets:
images/flutter.png
images/icon.png”

“Images” declared above is the name of the file which you created.

“Flutter.png” is the name of the image.

Step 4: Add Packages to the Main Dart File

import ‘package:flutter/material.dart’;

Step 5: Add Function

void main() {
runApp(new MaterialApp(
home: new SplashScreen(),
routes: <String, WidgetBuilder>{
'/HomeScreen': (BuildContext context) => new HomeScreen()
},
));
}

Step 6: Create Splash Screen Class

Class SplashScreen extends StatefulWidget {
@override
_SplashScreenState createState() => _SplashScreenState();
}

A stateful widget is useful when you describing a user interface you are describing can change dynamically.

Step 7: Create Home Class

import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
theme:
ThemeData(primaryColor: Colors.red, accentColor: Colors.yellowAccent),
debugShowCheckedModeBanner: false,
home: SplashScreen(),
));
class SplashScreen extends StatefulWidget {
@override
_SplashScreenState createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
fit: StackFit.expand,
children: <Widget>[
Container(
decoration: BoxDecoration(color: Colors.greenAccent),
),
],
),
);
}
}

Step 8: Add Icon inside the Splash Screen

Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 2,
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircleAvatar(
backgroundColor: Colors.purpleAccent,
radius: 50.0,
child: Icon(
Icons.shopping_basket,
color: Colors.greenAccent,
size: 50.0,
),
)

 

Step 9: Add Image inside Splash Screen

Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 2,
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircleAvatar(
backgroundColor: Colors.purpleAccent,
radius: 50.0,
child: Icon(
Icons.shopping_basket,
color: Colors.greenAccent,
size: 50.0,
),
)