Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Last Updated: Mar 27, 2024
Difficulty: Easy

Flutter Splash Screen

Leveraging ChatGPT - GenAI as a Microsoft Data Expert
Speaker
Prerita Agarwal
Data Specialist @
23 Jul, 2024 @ 01:30 PM

Introduction

For a developer, the most crucial thing he thinks about when he is making an app is that people come to his app and use it. But there are many similar apps available in almost every field, so how will you make your app keep up with the competition?

The answer is either to provide some extra features other than the rest of the competition or to make your existing app more interesting than the others. So let me ask you what the first thing the user sees after opening an application is?

The answer is the splash screen(the first screen after opening the application), so it will make an impression on the user's mind continuously or subconsciously. So if you make your splash screen attractive, this will be a plus point in your application. Don’t worry if you don’t know about the splash screen. We will help you learn and under about it. So, without wasting any time, let's further get on with our topic.

Splash Screen and its Overview

The splash screen or launch screen is the first screen a user sees when he opens the application, even before the main page loads. The splash screen generally contains the current version, app logo, and an image.

Most developers think that a splash screen is not much as it is visible only for some time. But it is the first impression of the application by the user. It will give an overall idea about the theme of the application. This will also be visible in case of any network issue, as the app's main page will not be loaded, so the user will only see the splash screen.

You have to realize the importance of a splash screen, so if you want to implement it in your app, you must also learn to integrate it properly with other elements. 

We will use a package known as splashscreen to integrate the splash screen. We will use this package because it will help us set up a splash screen and the time for which it will be visible, and that also by not affecting the native or original code.

Characteristics of Splash Screen

There are many characteristics of splash screens available, but here we will discuss some of the important ones.

  • It is mainly used for identifying recognition and branding.
  • When the loading time of the splash screen completes, the user will see the home screen or menu screen.
  • It can also be used to show the loading progress indicator while the hardware loads.
Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Steps to create Flutter Splash Screen 

In this blog, the section will follow specific steps to make a splash screen in a flutter. We will see every step in detail.

Create a new Flutter Project

Make sure you have all the flutter app development and Flutter SDK-related components installed as we have to create a new flutter project. Now set up everything properly, and after completing that run the following command in any local directory of your choice.

flutter create splashSceenExample

This will set up your project. You can navigate through the directory, execute the given command in the terminal, and run the project on either the actual device or the emulator screen.

flutter run

After building the project, the result will be as follows:

Source

Install the splashscreen Package

Now we have our project running, so now we can add a splash screen by changing the native code. But we can also add a splash screen without changing the native code, and that is by using the splashscreen package. This will make adding the splash screen in your futter application easy. The package provides many features like various widgets and customization parameters for the splash screen.

You first need to add it to your list of dependencies, and to do so, copy the code given below in your .yaml file:

splashscreen: ^1.3.5

This package will provide you with a splashscreen widget that you can use in your app's splash screen or launch screen.

Add a Splash Screen in your App

Now we will use the splashscreen package that we installed earlier. The basic approach will be to use the installed widgets with your MaterialApp widgets. The code for doing the above procedure will look like this:

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
visualDensity: VisualDensity.adaptivePlatformDensity,
        primarySwatch: Colors.blue,
       
      ),
      home: SplashScreen(
        seconds: 6,
        navigateAfterSeconds:MyHomePage(title: 'Flutter Demo Home Page'),
        title: new Text(
          'SplashScreen Example',
          style: new TextStyle(
          
              color: Colors.white,
    fontWeight: FontWeight.bold,
              fontSize: 20.0),
        ),
        backgroundColor: Colors.lightBlue[200],
      )
    );
  }
}

Let’s understand the parameters used in the above code.

  • navigateAfterSeconds: This will allow you to show the widget which is visible at the end of the splash screen.
  • Seconds: This option will allow you to set the time for which the splash screen will be visible.
  • backgroundColor: As the name suggests, it will set the overall background color of the splash screen.
  • title: This option will allow you to add the text visible on your splash screen.

Your screen will be looking like this:

 

Source

Add Logo or Image in the Splash Screen

We can add the image or the logo of the required app to the splash screen to make it more impressive.

You can set the image by using the image option and the image's dimension by using the photoSize option.

Below is the code to add the image:

home: SplashScreen(
        seconds: 5,
        navigateAfterSeconds:MyHomePage(title: 'Flutter Demo Home Page'),
        title: new Text(
          'SplashScreen Example',
          style: new TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 20.0,
              color: Colors.white),
        ),
        image: new Image.asset('assets/flut.png'),
        photoSize: 100.0,        
        backgroundColor: Colors.blue,
        styleTextUnderTheLoader: new TextStyle(),
        loaderColor: Colors.white
      )

The output after adding the above code will look like this:

Source

The above method will work for both Android and IOS.

Frequently Asked Questions

What is the general function of Splash Screen? 

The general purpose of the splash screen is to enhance the feel and look of the website or application.

Can we adjust the size of the splash screen?

Yes, you can adjust the splash screen size by using the photoSize option.

What is Dart?

Dart is an object-oriented and general-purpose programming language with C syntax and is used for creating a front-end for the user interface in web and mobile apps.

Mention some of the advantages of using Flutter?

It has FLexible and Expressive UI. It provides Faster Deployment, and With the help of Flutter, you can use a wide variety of applications globally.

Conclusion

In this article, we have extensively discussed Splash Screen in Flutter, its overview, splashscreen plugin, its characteristics, adding text in the splash screen, adjusting its visible time, adding logos and images in the splash screen, and much more.

We hope this blog has helped you enhance your knowledge of Splash Screen in Flutter.

And if you have any questions about Flutter, you must visit this blog here. You will most probably have answers to all of your questions.

Refer to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, React, JavaScript, System Design, etc. Enroll in our courses and refer to the mock test and problems available; look at the interview experiences and interview bundle for placement preparations. Do upvote our blog to help other ninjas grow.

 “Happy Coding!”

Topics covered
1.
Introduction
2.
Splash Screen and its Overview
2.1.
Characteristics of Splash Screen
3.
Steps to create Flutter Splash Screen 
3.1.
Create a new Flutter Project
3.2.
Install the splashscreen Package
3.3.
Add a Splash Screen in your App
3.4.
Add Logo or Image in the Splash Screen
4.
Frequently Asked Questions
4.1.
What is the general function of Splash Screen? 
4.2.
Can we adjust the size of the splash screen?
4.3.
What is Dart?
4.4.
Mention some of the advantages of using Flutter?
5.
Conclusion