Flutter Splash Screen dilemma

Splash Screen is the basic necessity of any Production level app. Other than good UX, the main purpose of the Splash Screen is to set the initial state of the App. For eg: Check whether the user is authenticated and redirect to the next screen accordingly, to load the HomeScreen data if user is authenticated, etc.

I have so far been doing this using an initial screen in flutter with splash screen UI, making the checks and setting the initial state and then redirecting to the next screen. But, the drawback with using Flutter code for splash screen is the delay of 2-3 seconds till the dart code is initialised, which leads to a white screen with no data after which the UI is loaded.

This is bad UX for anyone who is looking to achieve a smooth, perfect flow.

The straightforward way would be to use native splash screen. But I don’t want to write native code to set the initial state of the App. How are you guys doing this? Is there any guideline/documentation that I may have missed?

Any help would be highly appreciated!

Thanks.

2 Likes

Hi Sakina, are you using Firebase to authenticate?

No, it’s a mix of few things as per requirement:

  1. Check if auth token is present in sharedPreferences.
  2. REST API call to check if the user is on the latest version.
  3. More REST API to load initial data

I see, there are two things I can think of you may try to do.

First and easiest is to run all your queries before you run the app in the flutter main:

Void main(){
  WidgetsFlutterBinding.ensureInitialized();
 Do all the things you want...
RunApp(MyApp());
}

This will delay the splash screen until everything is done.

The second thing would be to create a custom splashscreen and connected to a flutter activity that talks to native and tells it when to close the Splash.

But personally I think that you probably can use the first method. The only thing I don’t know is if you can access shared preferences before running the app. But don’t see why not.

Ohh, and this wouldn’t have a white screen longer? Interesting, let me try it.

No it shouldn’t have any white screen. It should keep the regular SplashScreen for longer.

I have made an edit to the code below as I forgot to metion that before you do anything you need to call for WidgetsFlutterBinding.ensureInitialized();, but just that detail.