Flutter splash 闪烁问题

Question

闪烁问题查询：

条件：

从 Testflight/Playstore
第一次直接从 Testflight/Playstore 打开它，输出如下

注意：下次启动时闪烁时间变小，白屏延迟。

使用的框架：Flutter => 使用最新版本的 flutter

实施：

为避免初始白屏问题，我在 LaunchScree.storyboard 中添加了适当尺寸的启动图像。但是，在 Native 引擎和 Flutter 引擎之间转换时，它仍然会闪烁。

要求：

我们需要在 flutter 引擎上有一个启动画面，以从服务器请求初始数据，以便在没有加载程序的情况下呈现未来的屏幕。

主要功能代码

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?

Answer 1

所以我找到了这个问题的解决方案。

问题：

我在代码中使用了多个启动画面。多个启动画面意味着

核心系统从 android/ios 显示的启动屏幕。
另一个是带有启动画面图像的有状态小部件。

所以应用程序初始化的核心过程，Flutter首先初始化所有依赖库，然后将控制权交给flutter main.dart。为此，我们在 main.dart.

中使用 ensureInitialised 方法

好吧，我需要两个 splash，因为一个在 native 端消除初始白屏，另一个在 flutter 端可以帮助你调用初始资源，比如，在让用户进入登录屏幕之前，一些 API 应该叫做。由于这种结构，我遇到了闪烁的问题。现在我无法删除抖动启动画面，因为它调用了 5-6 个 API。

解法：

删除了 flutter 侧闪屏
在调用 runApp() 函数之前调用了 main.dart 文件中的所有 API。
以上内容解决了问题。

我正在传递 main.dart 的代码以供参考。

///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;
}

Flutter splash 闪烁问题

Flutter splash flicker issue

mobile

android

ios

flutter

flutter-layout