Mastering the Flutter Splash Screen [2023]

Welcome to our Ultimate Flutter Splash Screen Tutorial! In today’s digital landscape, capturing users’ attention right from the start is essential for the success of any mobile application. That’s where the power of a well-crafted splash screen comes into play.

An app’s splash screen is like its first impression, setting the tone and creating anticipation for what lies ahead. It’s an opportunity to engage users, showcase your brand, and provide a seamless transition into the app’s main interface.

In this tutorial, we’ll take you on a journey to master the art of creating captivating splash screens in Flutter. Whether you’re a beginner or an experienced Flutter developer, this comprehensive guide will equip you with the knowledge and techniques needed to make your app’s splash screen truly stand out.

We’ll delve into the core concepts of designing visually stunning splash screens that align with your app’s branding and purpose. From understanding the importance of color schemes and typography to incorporating animations and loading indicators, you’ll learn how to create a mesmerizing user experience right from the moment your app launches.

Our step-by-step instructions, along with code examples and best practices, will empower you to implement various splash screen designs and functionalities. You’ll gain insights into optimizing loading times, handling network requests, and gracefully transitioning to your app’s main interface.

Are you ready to take your Flutter app to the next level? Let’s dive into the world of splash screens and unlock the secrets to creating an unforgettable first impression for your users. Get ready to captivate your audience and leave a lasting impact with our Ultimate Flutter Splash Screen Tutorial!

Splash Screen is the very first screen that we see after launching an application. It is also called the launch screen. We will implement three main methods to add a splash screen to our app. So in this tutorial, we will create Flutter Splash Screen by using flutter_native_splash package.

Customize Flutter’s default white native splash screen with background color and splash image. We can also create a full-screen animated splash screen using the Lottie package

How To Make Splash Screen in Flutter

This will add a line like this to your package’s pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  flutter_native_splash: ^2.2.14

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:flutter_native_splash/flutter_native_splash.dart';

Setting the splash screen

Customize the following settings and add them to your project’s pubspec.yaml file or place in a new file in your root project folder named flutter_native_splash.yaml.

flutter_native_splash:
  # This package generates native code to customize Flutter's default white native splash screen
  # with background color and splash image.
  # Customize the parameters below, and run the following command in the terminal:
  # flutter pub run flutter_native_splash:create
  # To restore Flutter's default white splash screen, run the following command in the terminal:
  # flutter pub run flutter_native_splash:remove

  # color or background_image is the only required parameter.  Use color to set the background
  # of your splash screen to a solid color.  Use background_image to set the background of your
  # splash screen to a png image.  This is useful for gradients. The image will be stretch to the
  # size of the app. Only one parameter can be used, color and background_image cannot both be set.
  color: "#42a5f5"
  #background_image: "assets/background.png"

  # Optional parameters are listed below.  To enable a parameter, uncomment the line by removing
  # the leading # character.

  # The image parameter allows you to specify an image used in the splash screen.  It must be a
  # png file and should be sized for 4x pixel density.
  #image: assets/splash.png

  # The branding property allows you to specify an image used as branding in the splash screen.
  # It must be a png file. It is supported for Android, iOS and the Web.  For Android 12,
  # see the Android 12 section below.
  #branding: assets/dart.png

  # To position the branding image at the bottom of the screen you can use bottom, bottomRight,
  # and bottomLeft. The default values is bottom if not specified or specified something else.
  #branding_mode: bottom

  # The color_dark, background_image_dark, image_dark, branding_dark are parameters that set the background
  # and image when the device is in dark mode. If they are not specified, the app will use the
  # parameters from above. If the image_dark parameter is specified, color_dark or
  # background_image_dark must be specified.  color_dark and background_image_dark cannot both be
  # set.
  #color_dark: "#042a49"
  #background_image_dark: "assets/dark-background.png"
  #image_dark: assets/splash-invert.png
  #branding_dark: assets/dart_dark.png

  # Android 12 handles the splash screen differently than previous versions.  Please visit
  # https://developer.android.com/guide/topics/ui/splash-screen
  # Following are Android 12 specific parameter.
  android_12:
    # The image parameter sets the splash screen icon image.  If this parameter is not specified,
    # the app's launcher icon will be used instead.
    # Please note that the splash screen will be clipped to a circle on the center of the screen.
    # App icon with an icon background: This should be 960×960 pixels, and fit within a circle
    # 640 pixels in diameter.
    # App icon without an icon background: This should be 1152×1152 pixels, and fit within a circle
    # 768 pixels in diameter.
    #image: assets/android12splash.png

    # Splash screen background color.
    #color: "#42a5f5"

    # App icon background color.
    #icon_background_color: "#111111"

    # The branding property allows you to specify an image used as branding in the splash screen.
    #branding: assets/dart.png

    # The image_dark, color_dark, icon_background_color_dark, and branding_dark set values that
    # apply when the device is in dark mode. If they are not specified, the app will use the
    # parameters from above.
    #image_dark: assets/android12splash-invert.png
    #color_dark: "#042a49"
    #icon_background_color_dark: "#eeeeee"

  # The android, ios and web parameters can be used to disable generating a splash screen on a given
  # platform.
  #android: false
  #ios: false
  #web: false

  # Platform specific images can be specified with the following parameters, which will override
  # the respective image parameter.  You may specify all, selected, or none of these parameters:
  #image_android: assets/splash-android.png
  #image_dark_android: assets/splash-invert-android.png
  #image_ios: assets/splash-ios.png
  #image_dark_ios: assets/splash-invert-ios.png
  #image_web: assets/splash-web.png
  #image_dark_web: assets/splash-invert-web.png
  #background_image_android: "assets/background-android.png"
  #background_image_dark_android: "assets/dark-background-android.png"
  #background_image_ios: "assets/background-ios.png"
  #background_image_dark_ios: "assets/dark-background-ios.png"
  #background_image_web: "assets/background-web.png"
  #background_image_dark_web: "assets/dark-background-web.png"
  #branding_android: assets/brand-android.png
  #branding_dark_android: assets/dart_dark-android.png
  #branding_ios: assets/brand-ios.png
  #branding_dark_ios: assets/dart_dark-ios.png

  # The position of the splash image can be set with android_gravity, ios_content_mode, and
  # web_image_mode parameters.  All default to center.
  #
  # android_gravity can be one of the following Android Gravity (see
  # https://developer.android.com/reference/android/view/Gravity): bottom, center,
  # center_horizontal, center_vertical, clip_horizontal, clip_vertical, end, fill, fill_horizontal,
  # fill_vertical, left, right, start, or top.
  #android_gravity: center
  #
  # ios_content_mode can be one of the following iOS UIView.ContentMode (see
  # https://developer.apple.com/documentation/uikit/uiview/contentmode): scaleToFill,
  # scaleAspectFit, scaleAspectFill, center, top, bottom, left, right, topLeft, topRight,
  # bottomLeft, or bottomRight.
  #ios_content_mode: center
  #
  # web_image_mode can be one of the following modes: center, contain, stretch, and cover.
  #web_image_mode: center

  # The screen orientation can be set in Android with the android_screen_orientation parameter.
  # Valid parameters can be found here:
  # https://developer.android.com/guide/topics/manifest/activity-element#screen
  #android_screen_orientation: sensorLandscape

  # To hide the notification bar, use the fullscreen parameter.  Has no effect in web since web
  # has no notification bar.  Defaults to false.
  # NOTE: Unlike Android, iOS will not automatically show the notification bar when the app loads.
  #       To show the notification bar, add the following code to your Flutter app:
  #       WidgetsFlutterBinding.ensureInitialized();
  #       SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom, SystemUiOverlay.top]);
  #fullscreen: true

  # If you have changed the name(s) of your info.plist file(s), you can specify the filename(s)
  # with the info_plist_files parameter.  Remove only the # characters in the three lines below,
  # do not remove any spaces:
  #info_plist_files:
  #  - 'ios/Runner/Info-Debug.plist'
  #  - 'ios/Runner/Info-Release.plist'

Run the package

After adding your settings, run the following command in the terminal:

flutter pub run flutter_native_splash:create

Set up app initialization (optional)

By default, the splash screen will be removed when Flutter has drawn the first frame. If you would like the splash screen to remain while your app initializes, you can use the preserve() and remove() methods together. Pass the preserve() method the value returned from WidgetsFlutterBinding.ensureInitialized() to keep the splash on the screen. Later, when your app has initialized, make a call to remove() to remove the splash screen.

import 'package:flutter_native_splash/flutter_native_splash.dart';

void main() {
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
  runApp(const MyApp());
}

// whenever your initialization is completed, remove the splash screen:
    FlutterNativeSplash.remove();

Full Example Code

flutter pub add flutter_native_splash

import 'package:flutter/material.dart';
import 'package:flutter_native_splash/flutter_native_splash.dart';

void main() {
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });
  }

  @override
  void initState() {
    super.initState();
    initialization();
  }

  void initialization() async {
    // This is where you can initialize the resources needed by your app while
    // the splash screen is displayed.  Remove the following example because
    // delaying the user experience is a bad design practice!
    // ignore_for_file: avoid_print
    print('ready in 3...');
    await Future.delayed(const Duration(seconds: 1));
    print('ready in 2...');
    await Future.delayed(const Duration(seconds: 1));
    print('ready in 1...');
    await Future.delayed(const Duration(seconds: 1));
    print('go!');
    FlutterNativeSplash.remove();
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          // Column is also a layout widget. It takes a list of children and
          // arranges them vertically. By default, it sizes itself to fit its
          // children horizontally, and tries to be as tall as its parent.
          //
          // Invoke "debug painting" (press "p" in the console, choose the
          // "Toggle Debug Paint" action from the Flutter Inspector in Android
          // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
          // to see the wireframe for each widget.
          //
          // Column has various properties to control how it sizes itself and
          // how it positions its children. Here we use mainAxisAlignment to
          // center the children vertically; the main axis here is the vertical
          // axis because Columns are vertical (the cross axis would be
          // horizontal).
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

If you need a custom splash screen using a custom image you need to follow this documentation of this package in detail.

How can I remove the white splash screen in a Flutter app?

A: To remove the default white splash screen that appears before the Flutter app’s UI is rendered, you can change the background color of the splash screen to match your app’s theme. Here’s a step-by-step guide:

1. Open the main.dart file:

Open your Flutter project in your preferred IDE and locate the lib directory. Inside it, open the main.dart file.

2. Wrap the runApp() method:

In the main() function, wrap the runApp() method with the WidgetsFlutterBinding.ensureInitialized() function if it’s not already done. This ensures proper initialization.

3. Set the background color:

Inside the MyApp widget set the home property of MaterialApp to a widget that provides the desired background color for the splash screen. For example, you can use a Container widget with the desired color.

dartCopy codeMaterialApp(
  home: Container(
    color: Colors.blue, // Replace with your desired background color
    child: MyAppHome(),
  ),
)

Replace Colors.blue with the color, you want for your splash screen.

4. Save the changes:

Save the changes in your IDE.

By setting the background color of the Container widget, you can customize the splash screen’s appearance. The white screen will be replaced with the specified background color when the app is launched.

How can I add an image to the splash screen in Flutter?

To add an image to the splash screen in your Flutter app, you can modify the native Android and iOS project settings. Here’s a step-by-step guide:

1. Prepare your image:

Before getting started, make sure you have an image file that you want to use as the splash screen. Ideally, the image should have the appropriate dimensions for different screen sizes.

2. Android:

• Open your Flutter project in Android Studio or your preferred IDE.
• Navigate to the android/app/src/main/res/drawable directory.
• Replace the default launch_background.png file with your desired image file. Ensure that you keep the same filename and extension (e.g., launch_background.png).
• Modify the android/app/src/main/res/drawable-v21/launch_background.xml file to reference your image file. Update the item tag’s android:src attribute with the new image file name: <item android:drawable="@drawable/launch_background" />

3. iOS:

• Open your Flutter project in Xcode or your preferred IDE.
• Navigate to the ios/Runner/Assets.xcassets directory.
• Replace the default LaunchImage.imageset folder with your own image. Ensure that you keep the same folder name.
• Inside the LaunchImage.imageset folder, add the appropriate image assets for different screen sizes and resolutions. Refer to Xcode’s documentation for specific requirements.
• In the Info.plist file located at ios/Runner/Info.plist, remove the UILaunchStoryboardName entry.
• In the Runner project in Xcode, go to the “General” tab, locate the “App Icons and Launch Images” section, and select your custom image from the “Launch Screen File” dropdown menu.

4. Save the changes:

Save the changes in your IDE.

After following these steps, your custom image will be displayed as the splash screen for your Flutter app on both Android and iOS platforms. Test the app thoroughly to ensure the image appears correctly on different devices and orientations.

Q: How can I create a captivating Flutter splash screen that leaves a lasting impression?

A: To create an engaging and visually appealing splash screen in your Flutter app, you can follow this tutorial. Here’s a step-by-step guide to help you make a powerful splash screen:

1. Prepare your image:

Before diving in, select a captivating image that aligns with your app’s branding and resonates with your target audience.

2. Android:

• Harness the Android Studio’s potential and begin your visual journey.
• Navigate to the android/app/src/main/res/drawable directory and swap out the default launch_background.png file with your selected image, ensuring the file name remains the same.
• Customize the android/app/src/main/res/drawable-v21/launch_background.xml file by updating the item tag’s android:src attribute to point to your image file: <item android:drawable="@drawable/launch_background" />

3. iOS:

• Elevate your design prowess in Xcode and create an enchanting splash screen.
• Journey to the ios/Runner/Assets.xcassets directory and replace the default LaunchImage.imageset folder with your own, retaining the folder name.
• Within the LaunchImage.imageset folder, curate exquisite image assets, adhering to the diverse screen sizes and resolutions. Discover Xcode’s documentation for specific requirements.
• In Info.plist (found at ios/Runner/Info.plist), remove the UILaunchStoryboardName entry.
• Navigate to the “General” tab within the Runner project in Xcode, locate the “App Icons and Launch Images” section, and choose your custom image from the enticing “Launch Screen File” dropdown menu.

4. Save the changes:

Save the captivating changes within your preferred IDE, and let your splash screen captivate your app’s users.

With this tutorial, you have the power to craft a mesmerizing splash screen that sets the tone for your Flutter app. It’s time to captivate users from the moment they launch your app. Now go forth and make an unforgettable first impression!

Possible Title Ideas:

Flutter splash screen example GitHub