Splash screens for dark and light mode in Flutter

Suragch
Suragch
Jul 12, 2020 · 6 min read

A guide for the Android and iOS platforms

This article will guide you through setting up a custom splash screen with a different background color and image for dark and light modes on both iOS and Android. This can be a little tricky for Flutter developers who don’t have native development experience with those platforms, but if you follow the directions below, you’ll be up and running in no time.

If you have your own color scheme and images you can adapt this tutorial to fit your own needs, otherwise follow the steps exactly as written. This tutorial will add a light and dark splash screen to the default counter app that comes with a new Flutter project.

Getting set up

Create a new Flutter project.

Enable Dark Mode in Flutter

In main.dart, add the following line to the MaterialApp widget:

darkTheme: ThemeData.dark(),

Changing the light/dark mode in the device Settings should change how the app looks now.

Light and Dark Mode

Adding the splash screens in iOS

We’ll start with iOS first.

Getting the images

Download the following images:

Light mode image
Dark mode image

Name them whatever you want.

Adding the images as assets

In Xcode, open the ios folder in your Flutter project. Make sure you are showing the Project navigator view:

Show Project navigator in Xcode

Then go to (1) Assets.xcassets > (2) LaunchImage. In the (3) Attributes inspector on the right (a chisel-like icon), select (4) Appearances and choose Any, Dark.

(5) Drag and drop the light mode image into the 1x Any Appearance box. Next drag and drop the dark mode image into the 1x Dark Appearance box.

Notes:

  • If LaunchImage doesn’t exist, then right click where the 2 is in the image above and choose New Image Set. Click on it again to change the name to LaunchImage.
  • You should probably have three different densities for each image file (where the 2x file has twice the density of 1x, and 3x has three times the density of 1x), but I just used a single file each for light and dark in this example. If you put it in the 2x or 3x spot it would look smaller.

Using the images for the launch screen

Then go to LaunchScreen.storyboard and click View. In the Attributes inspector on the right, select System Background Color for the Background. This will allow the background color to change according to the dark mode settings.

Alternate background colors (optional)

If you set the color to the system background color, then you’ll get black for dark mode and white for light mode. If you want some other light or dark shade then you need to use a different method.

Method 1 (iOS 11+): Color Set

Choose Assets.xcassets and in the empty space below the LaunchImage right-click and choose New Color Set. Rename it to MyBackgroundColor.

For the Appearances choose Any, Dark:

Then choose the Any or Dark Appearance, Hexadecimal for the Input Method, and enter your custom color as hex.

Method 2 (support pre-iOS 11): Image Set

Another trick you can do to change the background color is to use an image set with a light mono-colored image and a dark mono-colored image. I won’t show all the screenshots here, but these are the basic steps:

  • In Assets.xcassets create a new Image Set and call it MyBackgroundImage.
  • Change the Appearances to Any, Dark.
  • Drag in a light image and a dark image. You’re going to stretch them, so even a one pixel image is ok.
  • In LaunchScreen.storyboard add a new ImageView to the base view.
  • In the Attributes Inspector set that image to MyBackgroundImage. Set the Content Mode to Scale to Fill.
  • Set the constraints of MyBackgroundImage to pin to the edges.

Anyway, we aren’t doing any of that in this tutorial, so you can go on to test how it looks now.

Testing out the iOS splash screen

When you run the app now (which you can do directly in Xcode by pressing the triangular play button in the top left), you should* see the splash screen image show up briefly when the app starts for the first time.

Light mode splash screen on iOS

* The image wouldn’t show up for me on the first few tries. I did a combination of restarting the simulator and Xcode and reinstalling the app. I’m not sure what made it work, but it finally did show up.

Changing the app to dark mode (Settings > Developer > Dark Appearance on the Simulator), restart the app and you should see the following:

Dark mode splash screen on iOS

That’s it for iOS. Now on to Android!

Adding the splash screens in Android

Light mode

Download the following image:

Light mode image

Name it launch_image.png.

In your Flutter project, save the image in the Android drawable folder. That’s located here:

android/app/src/main/res/drawable

In that same folder, open launch_background.xml. Replace the contents with the following code:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@android:color/white" />
<item>
<bitmap
android:gravity="center"
android:src="@drawable/launch_image" />
</item>
</layer-list>

Here are some things to note:

  • You can choose a different color besides white for the background if you like.
  • Although your file is called launch_image.png, leave off the .png extension here.
  • This launch_background.xml file is referenced in the AndroidManifest.xml file.
  • If you want to have different resolution images for different devices, then you will put the images in the mipmap folders. That’s beyond the scope of this article, though.

Run the app now any you should see this on startup:

Light mode splash screen on Android

Dark mode

Create a folder called drawable-night in the res folder. Then put the following image in that folder:

Dark mode image

Name it launch_image.png.

Also in the drawable-night folder, create another file called launch_background.xml and paste in the following code:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@android:color/black" />
<item>
<bitmap
android:gravity="center"
android:src="@drawable/launch_image" />
</item>
</layer-list>

The difference is that the background color is black now. If you want to use your own hex color value, then you can create a colors.xml file in the values folder to define your colors. See this link for help.

Your file structure should look like this now:

res/
/drawable
launch_background.xml
launch_image.png
/drawable-night
launch_background.xml
launch_image.png

Android uses the folder names to select which resources to show based on the user’s dark mode settings.

Switch your device or emulator to dart mode (Settings > Display > Dark theme), and run the app again. You should see the dark resources showing on the splash screen:

Dark mode splash screen on Android

Congratulations! You have your light and dark splash screens working on Android and iOS now.

https://www.twitter.com/FlutterComm

Flutter Community

Articles and Stories from the Flutter Community

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store