Handling Flutter Splash Screens like a Pro

This is Part #6 of the series in Flutter Production Level Development where I teach you all the tips and tricks used in an Industry Level Production app.

When developing a production-ready Flutter app, the first thing you see when you run the default counter app provided by Flutter is the Splash screen with the Flutter Logo on it. In this article, we will be taking the easiest route to adding your very own splash screen and get it running in few seconds with the help of flutter_native_splash package.

1. Add the flutter_native_splash in your pubspec.yaml file.

name: skeleton_app
description: "A new Flutter project."
publish_to: 'none'
version: 1.0.0+1

environment:
  sdk: '>=3.2.2 <4.0.0'

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
#TODO1: Add the package
  flutter_native_splash: ^2.3.13

2. Create the assets folder in your project and place the image you want as png. Name the file splash.png. The file can either be jpg or png.

3. Add the asset in pubspec.yaml file

#TODO2: Add the asset
flutter:
  assets:
    - assets/splash.png

4. Add the specification for your splash screen

name: skeleton_app
description: "A new Flutter project."
publish_to: 'none' 
version: 1.0.0+1

environment:
  sdk: '>=3.2.2 <4.0.0'

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
#TODO1: Add the package
  flutter_native_splash: ^2.3.9

dev_dependencies:
  flutter_test:
    sdk: flutter
#TODO2: Add the asset
flutter:
  uses-material-design: true
  assets:
    - assets/splash.png

#TODO3: Add the specification for your splash screen
flutter_native_splash:
  android: true
  ios: true
  web: false
  image: assets/splash.png
  color: "#FFFFFF"
  android_12:
    image: assets/splash.png
    color: "#FFFFFF"

5. In your terminal run this command.

dart run flutter_native_splash:create

It will build and generate all types of splash screen according to different screen size modifications. That’s it!

In 5 simple steps you have created your splash screen.

All seems fine in Flutterland but there are some caveats that you need to keep in mind when generating your splash screen.

To get the best Splash screen quality of correct size and not get rejected in the AppStore/PlayStore, make sure to follow these things when creating your splash screen.

1. Your image type must be jpg or png, other types are not supported by this package yet.
2. Make sure your image is a square with a minimum resolution of 1024*1024.
3. Make sure your image doesn’t have Alpha properties otherwise your app will be rejected by the AppStore. To remove alpha properties from your image, check this.

In a production-level Flutter app, having a custom splash screen which matches your apps brand is a must. Start implementing this practice in your Flutter apps today to enhance your app.

I hope you liked the article. I plan to bring more short articles like these to teach tips and tricks used in Production Level Flutter Development!

You can read about Handling Flutter Imports like a Pro in Part #1 of the series.

You can follow me on Twitter, Github, or Youtube to stay updated with all my new articles and videos.