How to Add a Splash Screen to Your iOS and Android App in Flutter?

Adding a splash screen is one of the essential steps in a mobile app development process. It is the first screen that appears for a second or two when we launch any Android or iOS app before the main page loads.

Also known as a launch screen, it serves as an initial, positive experience for your users. That's why with a minimalistic design, integrating a great splash screen is vital in any mobile application.

In today’s blog, I am going to shed some more light on the actual way of adding a splash screen to your iOS or Android apps with Flutter. And this blog will cover the following points:

• Adding Dependency
• Setting Dependency parameters
• Running the Dependency
• Controlling Splash screen visibility during App Initialization

Adding Dependency

In your Flutter project, go to pubspec.yaml file and search for dev_dependencies.

Under dev_dependencies, we need to add the flutter_native_splash package.

flutter_native_splash package automatically generates iOS as well as Android code for customizing native app splash screen background color and splash image.

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_native_splash: any

Setting Dependency Parameters

We need to specify certain parameters to flutter_native_splash to create a launch screen for iOS and Android apps. Go to your pubspec.yaml, specify the below-mentioned parameters:

color: Solid background color for your app splash screen
image: Image that should be used in a splash screen. (Make sure the image is in PNG format.)
android: true
ios: true

We need to set Android and iOS parameters to true to tell the package to create an app splash screen for both platforms.

flutter_native_splash:
  color: "#FFFFFF"
  image: assets/splash_logo.png
  android: true
  ios: true

Note: Apart from the above-mentioned parameters, you can also define background_image, separate color for light and dark mode, etc. You can check out this link for more information.

Running the Dependency

Once you configure the parameters as mentioned earlier, you need to run the following command in your root project directory to generate the splash screen with the specified color, image, and platforms.

flutter clean && flutter pub get && flutter pub run flutter_native_splash:create

Note: Make sure whenever you change any parameters defined for flutter_native_splash, you need to run the above command every time.

Controlling Splash Screen Visibility during App Initialization

The app splash screen will be removed when Flutter draws the first frame. So for controlling the amount of time you want to show the app splash screen, you can use the preserve and remove function provided by the flutter_native_splash package.

void main() {
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
  runApp(const MyApp());
  Timer(Duration(seconds: 3), () {
    FlutterNativeSplash.remove(); // Remove the splash screen after 3 seconds
  });
}

That's it. You have successfully integrated a Flutter splash screen into your mobile app.

Adding a splash screen to your Android or iOS apps in Flutter is really simple with flutter_native_splash. I hope this tutorial will be helpful as you get started with mobile app design. You can download the sample project from here. Let me know if you have any queries about adding a splash screen in Flutter apps.

Delivering Sleek, Visually Appealing, and User-Friendly Mobile Apps Since a Decade. Reach out to our team now!