How to Add Splash Screen in Flutter App?
We all have heard of Flutter right, it’s a cross-platform application development tool. Flutter can be used to make Android, IOS, and Web applications with just one code base (Dart programming language). In this article let’s see how we can add a splash screen to our applications.
What is Splash Screen?
When we open an application on our phones, the first thing we see is a screen with the logo of the app in the center that screen is referred to as a splash screen Now this splash screen can be used to make our applications look fancy but there’s more to it.
When we open an app on our device, some apps are required to authenticate the user (who’s opening the app) before they let us use the app. This authentication sometimes requires a fraction of a second during which time the user is presented with a splash screen so that the application does not appear to be stuck.
How to Implement it?
Flutter is all about packages, there is always a package available for our use. In this problem of ours, we will use a package called animated_splash_screen.
To install this package, add the following code to the pubspec.yaml file and run pub get :
dependencies: animated_splash_screen: ^1.1.0
Note: Watch the indentation, if you get the indentation wrong you will get an error and we definitely don’t like errors.
When we create a flutter app from scratch, we will see some boilerplate code like the one below, in the main.dart file.
In the above code instead of returning MyHomePage, we will return an AnimatedSplashScreen which has also required a nextScreen, where we will return our MyHomePage. Like this:
To use our own image for the splash screen we have to include the images under the assets section in pubspec.yaml file :