Flutter splash screen with logic inside it

Question

I want to make a splash screen in flutter with some logic inside it to know if the user has already signed in or not in order to direct him to the right page.

I've made the Android and iOS splash screens separately but ofcourse I can't have any logic inside them, then made another splash screen in flutter to know whether the user has previously logged in or not, the problem is there's a small weird transition between the native splash screen and the flutter one, so is there a solution to avoid that transition? Or to have logic inside native splash screen that communicates with SharedPreferences?

Solution

Don't make a Flutter splash. Let the native iOS/Android splash fill the screen while the Flutter app's main code decides to show the Home or Login page. It should be a very quick process if all you are doing is looking in SharedPreferences for a session token.

I just answered two other questions today that deal with this very same issue. It think they should help...

https://stackoverflow.com/a/60121967/7034640

https://stackoverflow.com/a/60122485/7034640

UPDATE

I created a Flutter test app.

I set the Android splash screen to be red.

I changed the contents of main.dart to the following.

import 'package:flutter/material.dart';

void main() async {
  await Future.delayed(Duration(seconds: 5));
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(final BuildContext context) {
    return MaterialApp(
      title: 'Splash Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(final BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("My Home Page")),
      body: Center(child: const Text("My Home Page")),
    );
  }
}

I ran the app on an Android device with flutter run --release.

I see the red screen for about 0.5 seconds, then see a black screen for 5 seconds, and finally see the home screen.

Hmm. I expected the red screen to show for about 5.5 seconds and then the home screen. I did not expect the black screen to show.

Comments

[Taha Malas]

The problem is that I'm using route generator in my app, so I have to use an initial route in the app

[Ted Henry]

How is that related? The first thing you do inside main is load from SharedPreferences then do everything else as usual.

[Ted Henry]

Use the info you get from SharedPreferences to determine the initial route.

[Taha Malas]

It's still the same as it is, when the main function starts it removes the native splash screen!

[Ted Henry]

When the main function starts it removes the native splash?! Are you sure about that?

[Taha Malas]

Yes I believe so

[Ted Henry]

The black screen may be only in debug mode. See github.com/flutter/flutter/issues/20827

[Ted Henry]

Hmm. I updated my "answer". I'd like to know why the black screen shows between the native splash screen and the home page.

[Taha Malas]

So as I said the black screen is always showing, any ideas ?

[Ted Henry]

Post an issue on the Flutter Github?

[Taha Malas]

Great it solved the issue, there's still some black screen showing but for a very small time, also it's still in the backstack so if I press return it shows the splash screen

[Ted Henry]

Hmm. I don't know that any black is acceptable. Did you try release mode?

[Taha Malas]

No not yet, but I think it'll be solved completely, anyway do you know a solution for the backstack problem?