Flutter splash flicker issue

user_2931489 0
Viewed 1176

Flicker issue query:

Conditions:

  1. Install the app from Testflight/Playstore
  2. Open it directly from Testflight/Playstore for the first time which gives output like this

Note: On next launches it flickers time gets smaller in terms of white screen delay.

Framework used: Flutter => Using latest version of flutter

Implementation:

To avoid the initial white screen issue I've added the launch image in LaunchScree.storyboard with appropriate sizes. But still, it flickers while transitioning between Native engine to Flutter engine.

Requirements:

We need a splash screen at the flutter engine to request initial data from the server to present future screens without loaders.

Main function code

void main() async {

WidgetsFlutterBinding.ensureInitialized();
  await getServices();
  await FlutterLibphonenumber().init();

  await Sentry.init((options) {
    options.dsn = SENTRY_DSN;
  }, appRunner: initApp);
}

void initApp() {
  runApp(
    EasyLocalization(
      child: YieldTrustApp(StringResource.appTitle),
      path: "assets/langs",
      supportedLocales: [
        const Locale('en', 'US'), // English
      ],
      fallbackLocale: const Locale('en', 'US'),
    ),
  );
}

Is it possible this issue can happen because of async main function?

This is the actual behaviour which I'm facing right now.

flutter-layout flutter mobile android ios
1 Answers

So I found the solution of this issue.

Issue:

I was using multiple splash screens in the code. Multiple splash screen means

  1. Launch screen which is shown by the core system from the android/ios.
  2. Another is the Stateful widget with the splash screen image in flutter side.

So the core process of initialisation of the application, Flutter initialize the all depenedent libraries first then transfer control to the flutter main.dart. And for that we use ensureInitialised method in the main.dart.

Well, i needed two splash because one which is in the native side eliminates the initial white screen and another in the flutter side can help you to call initial resources like, before letting user proceeds to the login screen some APIs should be called. And because of this kind of structure i got the issue of flickering. Now i can't remove the flutter splash screen because 5-6 APIs were getting called at it.

Solution:

  1. Removed the flutter side splash screen
  2. Called all the APIs in the main.dart file before calling the runApp() function.
  3. Above thing resolved the issue.

I'm pasing a code of the main.dart for the reference.

///Call function which will be needed before initializing our application.
///Ensure all widgets are initialized
///Set system status bar color
///Get all services
///Initialise phone number library
///Call master data to get all required data
///Set connectivity variable initial value
///Init sentry with default settings.
void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  initProductFlavour();

  await getServices();
  await FlutterLibphonenumber().init();

  await callMasterData();
  isConnected =
      (await Connectivity().checkConnectivity()) != ConnectivityResult.none;

  await SentryFlutter.init((options) {
    options.dsn = SENTRY_DSN;
  }, appRunner: initApp);
}

///Init application
void initApp() {
  runApp(App());
}


///Pre-cache the data to boost up the performance.
Future callMasterData() async {
  MasterSyncProvider _masterSyncProvider = getIt.get<MasterSyncProvider>();

  var result = await Future.wait([
    _masterSyncProvider.getCountryList(),
    _masterSyncProvider.getAppConfig(),
    _masterSyncProvider.getJourneyFramework(),
    _masterSyncProvider
        .getMobileCMSData(),
  ]);

  return result;
}

///Init product flavouring
void initProductFlavour() {
  var appConfig = new BaseConfig();
  appConfig.baseUrl = DEV_SERVER;
  appConfig.flavour = Flavours.DEV;
}
user_29314890
Related