Are you struggling to implement a splash screen in Flutter? Maybe you already implemented something but feel it can be done better, or you want to learn how else it can be done.
Then look no further. You are in the right place! You probably noticed some pretty darn good splash screens if you use any popular app. I’ll show you how the big players implement their splash screens in Flutter so that you can do it, too.
Choose The Right Package
At first, I implemented my splash screens on the native side, which was okay but slow and inconvenient. Having multiple flavors just complicated things. Having monthly or seasonal changes to the design also makes the task dreadful.
Then, because we are all lazy and want to reap the benefits of other developers who like to build stuff, I tried a couple of packages to make this task easier. The clear winner by far is flutter_native_splash package.
It supports creating splash screens for Android, iOS, and Web, and it also supports different flavors.
Let’s Code
Let’s do a quick setup to see how it works and get the hang of it. The implementation is straightforward and can be done in a minute or two. Follow the steps below:
Add the package to your pubspec.yaml file.
dependencies: flutter_native_splash: ^2.4.0
Add the default code snippet (preferably below the assets and fonts)
flutter_native_splash: color: "#ffffff" image: assets/logo.png branding: assets/branding.png color_dark: "#121212" image_dark: assets/logo_dark.png branding_dark: assets/branding_dark.png android_12: image: assets/android12/logo.png icon_background_color: "#ffffff" image_dark: assets/android12/logo_dark.png icon_background_color_dark: "#121212" branding: assets/android12/branding.png branding_dark: assets/android12/branding_dark.png web: false
Run the dart command, and you're good to go.
PS: don’t forget to add the assets for logo and branding to your project before running the commanddart run flutter_native_splash:create
Once you run the command, you should see something like this in your terminal:
Running the app on Android and iOS will show something like this:
And if you support dark mode, it should look like this:
The Dark Splash Screen is used when you turn on the Dark Mode in the phones settings.
A working example can be found here: flutter-how-to/package_essentials/splash_screen
Deep(er) Dive
The package supports extensive customization. The list of all supported properties and documentation can be found here. One of the features that I love the most is support for multiple flavors. Every project I worked on had at least 2 flavors, some even more.
The easiest way to help yourself and the QA team distinguish which flavor they are opening is to set custom splash screens for each flavor. You can achieve that simply by creating multiple .yaml files where you put the specific configuration for that flavor and running the command to generate the splash screen by pointing it to the right .yaml file, as follows:
flutter_native_splash-production.yaml
flutter_native_splash-acceptance.yaml
flutter_native_splash-development.yaml
The splash screen's default behavior is to be shown until the first Flutter frame is rendered. The package's preserve() and remove() methods allow you to change that and remove it once you load some important data or initialize some functionalities.
void main() {
WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
runApp(const MyApp());
}
And then whenever you are done, call:
// whenever your initialization is completed, remove the splash screen:
FlutterNativeSplash.remove();
For now, animations, gifs, and Lottie files are not supported on mobile; the web supports gifs.
A Bit About My Experience
After working 6 years with native Android and iOS, I stumbled upon Flutter when it was still in beta (I think it was v0.7.3 ). The experience was clunky and strange but fun. Breaking the monotony of Kotlin/Swift and a working hot reload/hot restart was such a time saver.
I had some problems understanding how it works, how to build the UI in such a different way, and where the UI and the business logic can be combined in the same file (which is, of course, not the way it should be done! Be smart, use BLoC).
As time passed, I left Flutter on the side and played a bit when I could, and each new version improved. Then, around v1.2.1, I went in and did all my projects using Flutter.
It was my best decision ever. Programming became more fun, and things moved much faster than when I did native Android and iOS. Sure, there were some ups and downs. With each new version, there were new things, fixes, and improvements; new packages were coming out, and new standards to be learned and implemented, but that’s just the developer's lifecycle (learn, build, improve, and then over again).
Call To Action
If you like the package and find it useful, give it some love and hit that 👍 on the pub.dev. Optionally, if you enjoy the dev's work, consider buying him a coffee.