Flutter Splash Screen

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