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.

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 whateveryou want.

#dart #dark-mode #flutter