Flutter 飞溅闪烁问题

Posted 2023-02-23

【中文标题】Flutter 飞溅闪烁问题

【英文标题】：Flutter splash flicker issue

【发布时间】：2021-04-02 21:19:36

【问题描述】：

闪烁问题查询：

条件：

从 Testflight/Playstore 安装应用 第一次直接从 Testflight/Playstore 中打开它会得到这样的输出

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

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

实施：

为避免出现初始白屏问题，我在 LaunchScree.storyboard 中添加了具有适当尺寸的启动图像。 但是，在 Native 引擎和 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'),
    ),
  );

这个问题是否可能因为 async main 功能？

【问题讨论】：

我有同样的问题

@Ali 我找到了解决方案，如果您需要我的帮助，请告诉我。这是电子邮件地址：[e-mail]

苛刻的帕特尔，请回答这个问题，我很高兴知道你的解决方案

我面临同样的问题@HarshPatel 你能解释一下这个解决方案吗？

【参考方案1】：

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

问题：

我在代码中使用了多个启动画面。多重闪屏的意思

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

所以初始化应用的核心流程，Flutter先初始化所有依赖的库，然后将控制权交给fluttermain.dart。为此，我们在main.dart 中使用ensureInitialised 方法。

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

解决方案：

移除了颤振侧闪屏 在调用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;

【讨论】：

是的，你是对的。启动图像会一直显示，直到调用 runApp()。因此，我们应该在启动 runApp() 之前设置所有初始配置。这是我的小东西。 ` void main() // 避免flutter升级导致的错误（在启动数据库之前）。 // 需要导入 'package:flutter/widgets.dart'。 // flutter.dev/docs/cookbook/persistence/sqlite WidgetsFlutterBinding.ensureInitialized(); AppManager.startup().then((值) App.launch(); ); ` 抱歉，回复格式的代码不起作用。看起来好乱。