Flutter Add to App 问题记录

news2024/11/17 23:48:02

在这里插入图片描述
前一阵应用中接入了Flutter，使用的是官方的Multiple FlutterEngine管理方案，目前线上运行良好，这里整理一下遇到的问题。

将 Flutter 集成到现有应用整体来说没有什么问题，按照文档的说明结合demo操作就行。接入后多语言，深色模式也可以和原生部分一样正常运行。但还是遇到了一些实际开发中的细节问题。

首屏展示优化

在官方文档中有提到，即使使用了预热的FlutterEngine，第一次展示 Flutter 的内容仍然需要一些时间。为了更进一步提升用户体验，Flutter 支持在第一帧渲染完成之前展示闪屏页。

我这里遇到的问题是这样，首页有四个Tab，其中第三个Tab是Flutter页面。所以当切换到它时，第一次加载会先白屏一下。

我这里提供两种优化方法。第一种可以使用 CachedEngineFragmentBuilder 中的 shouldDelayFirstAndroidViewDraw() 方法。它表示是否延迟 Android 绘制过程，直到 Flutter UI 显示完毕。

FlutterFragment flutterFragment = FlutterFragment.withCachedEngine("my_engine_id")
    .shouldDelayFirstAndroidViewDraw(true)
    .build();

使用这个方法有两点需要注意：

  • 渲染模式必须使用RenderMode.surface。
  • 这个时间延迟并不是消失了，只是显示的策略不同。如果是首次点击tab切换，那么点击后会等待Flutter显示完毕后再切换。在低端机上这里会很明显感到停顿。

第二种方法可以使用SplashScreen来显示一个闪屏页。我们让承载FlutterFragment的Activity实现SplashScreenProvider接口的provideSplashScreen方法。

@Override
public SplashScreen provideSplashScreen() {
    return new DrawableSplashScreen(this.getResources().getDrawable(R.drawable.xxx), 
    ImageView.ScaleType.CENTER_CROP, 300);
}
  • 上面的参数是设置闪屏图片，图片的裁剪方式，以及Flutter UI出现时过渡动画的时间。
  • 过渡动画生效需要渲染模式必须使用RenderMode.texture。

这两个方法各有适用场景，大多数情况下可以使用第一种。由于我们这个页面背景是一张图片，所以可以使用第二种方法。先展示图片，再用动画过渡显示页面内容。可以避免使用第一种方法首次切换时的等待时间。

另外，使用RenderMode.surface渲染模式目前（Flutter 3.10）有个bug，就是在承载页面onResume时。FlutterFragment会突然显示，因为 SurfaceView 在视图层级最顶层。所以覆盖了其他的Fragment页面。目前使用RenderMode.texture无此问题。

问题跟进具体可以看这里。

Activity与Fragment基本一致，默认使用RenderMode.surface渲染模式。所以等到页面第一帧渲染完成后才会打开Activity。如果flutter页面背景是张图片，那么首次进入页面时，因为图片的加载有一定时间，所以会闪一下（release相对好一些）。所以也可以考虑闪屏的方案。

以上问题对应源码位置FlutterActivityAndFragmentDelegate 的onCreateView:

 View onCreateView(
      LayoutInflater inflater,
      @Nullable ViewGroup container,
      @Nullable Bundle savedInstanceState,
      int flutterViewId,
      boolean shouldDelayFirstAndroidViewDraw) {
    Log.v(TAG, "Creating FlutterView.");
    ...

    SplashScreen splashScreen = host.provideSplashScreen();

    if (splashScreen != null) {
      FlutterSplashView flutterSplashView = new FlutterSplashView(host.getContext());
      flutterSplashView.setId(ViewUtils.generateViewId(FLUTTER_SPLASH_VIEW_FALLBACK_ID));
      flutterSplashView.displayFlutterViewWithSplash(flutterView, splashScreen);

      return flutterSplashView;
    }

    if (shouldDelayFirstAndroidViewDraw) {
      delayFirstAndroidViewDraw(flutterView);
    }
    return flutterView;
  }

    private void delayFirstAndroidViewDraw(FlutterView flutterView) {
    if (host.getRenderMode() != RenderMode.surface) {
      throw new IllegalArgumentException(
          "Cannot delay the first Android view draw when the render mode is not set to"
              + " `RenderMode.surface`.");
    }

    if (activePreDrawListener != null) {
      flutterView.getViewTreeObserver().removeOnPreDrawListener(activePreDrawListener);
    }

    activePreDrawListener =
        new OnPreDrawListener() {
          @Override
          public boolean onPreDraw() {
            if (isFlutterUiDisplayed && activePreDrawListener != null) {
              flutterView.getViewTreeObserver().removeOnPreDrawListener(this);
              activePreDrawListener = null;
            }
            return isFlutterUiDisplayed;
          }
        };
    flutterView.getViewTreeObserver().addOnPreDrawListener(activePreDrawListener);
  }

异常处理

  1. FlutterFragment, IllegalStateException
IllegalStateException: The requested cached FlutterEngine did not exist in the FlutterEngineCache: 'my_engine_id'
       at io.flutter.embedding.android.FlutterActivityAndFragmentDelegate.setupFlutterEngine (FlutterActivityAndFragmentDelegate.java:280)
       at io.flutter.embedding.android.FlutterActivityAndFragmentDelegate.onAttach (FlutterActivityAndFragmentDelegate.java:189)
       at io.flutter.embedding.android.FlutterFragment.onAttach (FlutterFragment.java:1046)
       at androidx.fragment.app.Fragment.performAttach (Fragment.java:2922)
       at androidx.fragment.app.FragmentStateManager.attach (FragmentStateManager.java:464)
       at androidx.fragment.app.FragmentStateManager.moveToExpectedState (FragmentStateManager.java:275)
       at androidx.fragment.app.FragmentStore.moveToExpectedState (FragmentStore.java:112)
       at androidx.fragment.app.FragmentManager.moveToState (FragmentManager.java:1647)
       at androidx.fragment.app.FragmentManager.dispatchStateChange (FragmentManager.java:3128)
       at androidx.fragment.app.FragmentManager.dispatchCreate (FragmentManager.java:3061)
       at androidx.fragment.app.FragmentController.dispatchCreate (FragmentController.java)
       at androidx.fragment.app.FragmentActivity.onCreate (FragmentActivity.java:276)

异常位置：

  void setupFlutterEngine() {
    Log.v(TAG, "Setting up FlutterEngine.");

    // First, check if the host wants to use a cached FlutterEngine.
    String cachedEngineId = host.getCachedEngineId();
    if (cachedEngineId != null) {
      flutterEngine = FlutterEngineCache.getInstance().get(cachedEngineId);
      isFlutterEngineFromHost = true;
      if (flutterEngine == null) {
        throw new IllegalStateException(
            "The requested cached FlutterEngine did not exist in the FlutterEngineCache: '"
                + cachedEngineId
                + "'");
      }
      return;
    }
    ...
  }

分析原因应该是页面在后台被回收后，重新打开页面时，在获取FlutterEngine时发现不存在于FlutterEngineCache中。因为cachedEngineId是通过getArguments()获取的，而FlutterEngine在onDetach已经移除。

  @Override
  public String getCachedEngineId() {
    return getArguments().getString(ARG_CACHED_ENGINE_ID, null);
  }

所以处理方法就是在FragmentActivity.onCreate前就判断FlutterEngine是否存在，不存在时创建。

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        if (!FlutterEngineCache.getInstance().contains("my_engine_id")) {
            FlutterEngine flutterEngine = new FlutterEngine(this);
            flutterEngine.getDartExecutor().executeDartEntrypoint(
                    DartEntrypoint.createDefault()
            );
            FlutterEngineCache
                    .getInstance()
                    .put("my_engine_id", flutterEngine);
        }
        super.onCreate(savedInstanceState);
        ...
    }
  1. 个别设备出现UnsatisfiedLinkError
Caused by java.util.concurrent.ExecutionException: java.lang.UnsatisfiedLinkError: No implementation found for
 void io.flutter.embedding.engine.FlutterJNI.nativeUpdateRefreshRate(float) (tried Java_io_flutter_embedding_engine_FlutterJNI_nativeUpdateRefreshRate and Java_io_flutter_embedding_engine_FlutterJNI_nativeUpdateRefreshRate__F)
       at java.util.concurrent.FutureTask.report(FutureTask.java:123)
       at java.util.concurrent.FutureTask.get(FutureTask.java:193)
	   at io.flutter.embedding.engine.loader.FlutterLoader.ensureInitializationComplete(FlutterLoader.java:221)

Caused by java.lang.UnsatisfiedLinkError: No implementation found for void io.flutter.embedding.engine.FlutterJNI.nativeUpdateRefreshRate(float) (tried Java_io_flutter_embedding_engine_FlutterJNI_nativeUpdateRefreshRate and Java_io_flutter_embedding_engine_FlutterJNI_nativeUpdateRefreshRate__F)
       at io.flutter.embedding.engine.FlutterJNI.nativeUpdateRefreshRate(FlutterJNI.java)
       at io.flutter.embedding.engine.FlutterJNI.updateRefreshRate(FlutterJNI.java:7)
       at io.flutter.embedding.engine.loader.FlutterLoader$1.call(FlutterLoader.java:27)
       at io.flutter.embedding.engine.loader.FlutterLoader$1.call(FlutterLoader.java)
       at java.util.concurrent.FutureTask.run(FutureTask.java:266)
       at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1167)
       at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641)
       at java.lang.Thread.run(Thread.java:923)

或：

Caused by java.util.concurrent.ExecutionException: java.lang.UnsatisfiedLinkError: dalvik.system.PathClassLoader[DexPathList[[zip file "/data/app/xx/base.apk"],nativeLibraryDirectories=[/data/app/xx/lib/x86, /system/lib, /vendor/lib]]] couldn't find "libflutter.so"

一般是在创建FlutterEngine或FlutterEngineGroup时出现的，目前也没有较好的方法，但是可以捕获一下此类异常，做一些兜底操作。避免直接崩溃影响用户使用其他功能，这类问题占比很少，目前仅有两个用户上报了此异常。

此问题跟进可以看这里。

热重载

在调试混合开发模块时（Flutter版本3.10.x），发现当存在多个Flutter页面时（使用FlutterEngineGroup创建），热重载会使App卡死。我找到了相关问题，我尝试使用beta 3.13.0版本发现此问题已解决。等待stable的发布。

打包

众所周知Flutter的debug模式性能表现一般，所以在交给测试时，为了避免一些体验问题。我们可以将Flutter模块打包成release。

如果使用依赖 Android Archive方式集成，可以直接使用flutter_release包。如果直接依赖模块的源码，可以在直接修改flutter/packages/flutter_tools/gradle/flutter.gradle的源码：

   /**
     * Returns a Flutter build mode suitable for the specified Android buildType.
     *
     * The BuildType DSL type is not public, and is therefore omitted from the signature.
     *
     * @return "debug", "profile", or "release" (fall-back).
     */
    private static String buildModeFor(buildType) {
        if (buildType.name == "profile") {
            return "profile"
        } else if (buildType.debuggable) {
            return "debug"
        }
        return "release"
    }

将上面的"debug"改为"release"就好。iOS在flutter/packages/flutter_tools/bin/xcode_backend.dart中修改。

当然直接修改显得不是很优雅，所以可以写个打包脚本处理这一操作。例如用Dart实现如下：

// 读取文件内容
File file = File('xxx\flutter\packages\flutter_tools\gradle\flutter.gradle');
String content = file.readAsStringSync();
// 修改文件内容
String newContent = content.replaceAll('return "debug"', 'return "release"// weilu');
// 将修改后的内容写回文件
file.writeAsStringSync(newContent);

执行完后，还原即可。

其他

  • BUG in [v3.10.0] FlutterViewController memory leak when add an existing app, Multiple Flutter instances
  • [Android, SystemChrome, FlutterActivity] Status bar becomes semi translucent when using a pre-warmed Flutter engine

后面如果有遇到新的问题，也会同步记录到这里。

参考

  • multiple_flutters
  • 文档 - 展示闪屏页

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/814157.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【应用层】Http协议总结

【应用层】Http协议总结

文章目录 一、续->Http协议的学习 1.http请求中的get方法和post方法 2.http的状态码 3.http的报头 4.长链接 5.cookie（会话保持）总结 继续上一篇的内容： 上一篇的最后我们讲到了web根目录，知道…
阅读更多...
Git的.gitignore文件、标签管理以及给命令起别名

Git的.gitignore文件、标签管理以及给命令起别名

文章目录 1. 前言2. .gitignore文件3. 标签管理4. 给命令起别名 1. 前言 本文主要讲解Git中容易被忽略但比较重要一些知识:.gitignore文件、标签管理以及给命令起别名. 2. .gitignore文件 在新建仓库时,有一个添加.gitignore 模板: .gitignore 是一个用于指定 Git 忽略特定文…
阅读更多...
Mysql第四，五连弹

Mysql第四，五连弹

第四弹 一、💛 主键约束（Primary key): 通过这个约束来指定某一个列作为主键（1.非空，2.不能重复） ，主键：一条数据，身份标识（类似于内存地址） 😄&a…
阅读更多...
Python爬虫Scrapy(二)_入门案例

Python爬虫Scrapy(二)_入门案例

入门案例 学习目标 创建一个Scrapy项目定义提取的结构化数据(Item)编写爬取网站的Spider并提取出结构化数据(Item)编写Item Pipelines来存储提取到的Item(即结构化数据) 一、新建项目(scrapy startproject) 在开始爬取之前，必须创建一个新的Scrapy项目。进入自定…
阅读更多...
计算机毕设 深度学习人体跌倒检测 -yolo 机器视觉 opencv python

计算机毕设 深度学习人体跌倒检测 -yolo 机器视觉 opencv python

文章目录 0 前言1.前言2.实现效果3.相关技术原理3.1卷积神经网络3.1YOLOV5简介3.2 YOLOv5s 模型算法流程和原理4.数据集处理3.1 数据标注简介3.2 数据保存 5.模型训练 6 最后 0 前言 🔥 这两年开始毕业设计和毕业答辩的要求和难度不断提升，传统的毕设题…
阅读更多...
[Round#14 Illuminate with your bril]

[Round#14 Illuminate with your bril]

周末NSS的PWN专题，只作了3个，结束后跟NSS的师傅聊，对方确认了第4题的作法，重作成功。第5题看师傅的WP复现成功。 love 主函数给了个printf，这里可以得到所有地址，并且要求把v4,v5改相等 int __cdecl mai…
阅读更多...
Linux 版本的 Abyss Locker 勒索软件针对 VMware ESXi 服务器

Linux 版本的 Abyss Locker 勒索软件针对 VMware ESXi 服务器

Abyss Locker 是最新开发的 Linux 加密器，旨在针对 VMware 的 ESXi 虚拟机平台对企业进行攻击。 随着企业从单个服务器转向虚拟机以实现更好的资源管理、性能和灾难恢复，勒索软件团伙创建了专注于针对该平台的加密器。 随着 VMware ESXi 成为最流行的虚…
阅读更多...
UE5 摄像机与NPC重叠阻挡导致视角闪现的解决方法

UE5 摄像机与NPC重叠阻挡导致视角闪现的解决方法

文章目录 前言问题背景问题剖析摄像机碰撞分析解决方法总结前言 本文基于虚幻5.2.1版本，对摄像机与NPC重叠阻挡导致视角闪现提供一个解决方案，并深入讲解摄像机碰撞原理，提升大家的思维与解决问题的能力。 问题背景 当我们被NPC攻击或者NPC介于摄像机与玩家之间导致摄像机…
阅读更多...
小研究 - JVM GC 对 IMS HSS 延迟分析（二）

小研究 - JVM GC 对 IMS HSS 延迟分析（二）

用户归属服务器（IMS HSS）是下一代通信网（NGN）核心网络 IP 多媒体子系统（IMS）中的主要用户数据库。IMS HSS 中存储用户的配置文件，可执行用户的身份验证和授权，并提供对呼叫控制服务器…
阅读更多...
微服务入门---Docker

微服务入门---Docker

微服务入门---Docker 1.初识Docker1.1.什么是Docker1.1.1.应用部署的环境问题1.1.2.Docker解决依赖兼容问题1.1.3.Docker解决操作系统环境差异1.1.4.小结 1.2.Docker和虚拟机的区别1.3.Docker架构1.3.1.镜像和容器1.3.2.DockerHub1.3.3.Docker架构1.3.4.小结 1.4.安装Docker 2.…
阅读更多...
Flutter环境搭建踩坑集锦

Flutter环境搭建踩坑集锦

Flutter 背景准备工作先检查一下自己的电脑，看一下是不是满足配置要求下载安装配置环境下载安装JDK下载安装Android studio下载Flutterflutter doctor故障Android license status unknownNetwork resources 故障 后记 背景 发现一个不错的框架Flutter，听…
阅读更多...
web题型

web题型

0X01 命令执行 漏洞原理 没有对用户输入的内容进行一定过滤直接传给shell_exec、system一类函数执行 看一个具体例子 cmd1|cmd2:无论cmd1是否执行成功，cmd2将被执行 cmd1;cmd2:无论cmd1是否执行成功，cmd2将被执行 cmd1&cmd2:无论cmd1是否执行成…
阅读更多...
【C++继承】

【C++继承】

目录 一、继承的概念及定义1.1继承的概念1.2继承的定义1.2.1定义格式1.2.2继承方式与访问限定符的组合 二、基类和派生类对象赋值转换三、继承中的作用域四、派生类的默认成员函数五、继承与友元六、继承与静态成员七、复杂的菱形继承及菱形虚拟继承八、虚拟继承的原理 一、继承…
阅读更多...
(AcWing)满足条件的01序列

(AcWing)满足条件的01序列

给定 n 个 0 和 n 个 1，它们将按照某种顺序排成长度为 2n 的序列，求它们能排列成的所有序列中，能够满足任意前缀序列中 0 的个数都不少于 1 的个数的序列有多少个。 输出的答案对 10^97 取模。 输入格式 共一行，包含整数 n。 …
阅读更多...
Kotlin基础（十）：函数进阶

Kotlin基础（十）：函数进阶

前言 本文主要讲解kotlin函数，之前系列文章中提到过函数，本文是kotlin函数的进阶内容。 Kotlin文章列表 Kotlin文章列表: 点击此处跳转查看 目录 1.1 函数基本用法 Kotlin 是一种现代的静态类型编程语言，它在函数的定义和使用上有一些特点…
阅读更多...
软考A计划-系统集成项目管理工程师-项目干系人管理-上

软考A计划-系统集成项目管理工程师-项目干系人管理-上

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例点击跳转>软考全系列点击跳转>蓝桥系列 👉关于作者 专注于Android/Unity和各种游…
阅读更多...
简单易用的批量重命名工具，C++语言编写

简单易用的批量重命名工具，C++语言编写

它具备出色的文件重命名功能，能够让用户轻松对多个文件进行批量重命名操作。不论是添加前缀、后缀，还是替换文件名称中的特定字符，都能轻松完成。此外，该软件体积小巧、操作简单便捷，使用起来的效果出奇好。 MiniRenamer特色功能： 正则命名：支持正则命名规则，并可自定义…
阅读更多...
【机器学习】Classification using Logistic Regression

【机器学习】Classification using Logistic Regression

Classification using Logistic Regression 1. 分类问题2. 线性回归方法3. 逻辑函数（sigmod）4.逻辑回归5. 决策边界5.1 数据集5.2 数据绘图5.3 逻辑回归与决策边界的刷新5.4 绘制决策边界 导入所需的库 import numpy as np %matplotlib widget import m…
阅读更多...
【Linux】进程的认识

【Linux】进程的认识

查看进程指令proc/ps/top 注意哦, 我们经常使用的指令, 像ls, touch…这些指令在启动之后本质上也是进程 proc 是内存文件系统, 存放着当前系统的实时进程信息. 每一个进程在系统中, 都会存在一个唯一的标识符(pid -> process id), 就如同学生在学校里有一个专门的学号一样…
阅读更多...
Mac笔记本安装maven

Mac笔记本安装maven

Mac笔记本安装maven 一、通过brew安装maven 如果你的mac笔记本安装了homebrew可以使用如下命令安装 brew install maven安装完成后可以使用命令brew list maven来查看maven的安装位置 $ brew list maven /usr/local/Cellar/maven/3.6.3_1/bin/mvn /usr/local/Cellar/mave…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023