【Flutter技术】如何识别一个应用是原生框架开发还是Flutter开发?

前言

根据Google官方的统计,截至2023年5月,已有超过100万个 应用程序使用Flutter发布到数亿台设备上。国内许多知名公司也广泛的使用了Flutter技术,例如,腾讯、字节、阿里等等。Flutter也成为了最受欢迎的跨平台技术之一。

当前,我们手机上以及各大应用市场有大量的应用采用了Flutter跨平台技术框架,例如,微信、微博、闲鱼等等。由于Flutter框架出色的性能表现,可能不被大家所感知,接下来,跟大家分享几个鉴别一个APP是否使用了Flutter开发的方法。

1 - 双指滚动

一个比较方便、且非常快速的方法就是打开一个可滚动的页面(可以用闲鱼的商品详情页面测试),用双指或者三指滑动,如果滚动的速度加快,是用单指滚动的两倍或者三倍,那么这个页面基本可以确定是用Flutter开发的。大家可以打开手机上应用尝试一下,例如闲鱼商品的详情页面。

这方法的原理是源于Flutter的一个祖传BUG ---> #11884 Scrolling with two fingers scrolls twice as fast,在Android和iOS平台都是如此的变现,因此可以用来检查应用是否使用了Flutter开发。

当笔者看到这个BUG之后,惊掉了下巴(2017年的ISSUE,2023年才被修复!),于是尝试修复了这个BUG ---> #136708 Introduce multi-touch drag strategies for DragGestureRecognizer,该Patch引入了一个新的属性MultitouchDragStrategy,可以自定义多指滚动的行为,同时将系统默认行为修改为Android的表现,并计划很快补充iOS的行为。

该Patch当前已经合入master分支,在release到stable分支之前,通过双指滚动来鉴定是否使用Flutter开发依然是最便捷的方法 :)

2 - 显示布局边界 + dumpsys activity

该方法适用于Android手机,打开手机的"开发者模式",在设置页面搜索"边界",找到"显示布局边界"并打开:

对于原生开发的Android应用,可以查看到所有元素的边界,例如闲鱼首页采用原生开发:

当进入分类页面之后,除了手机SystemUI可以看见元素的边界,页面内容的元素系统是识别不到边界的:

此时,我们通过adb shell命令dumpsys activity activities,可以看到TOP的Activity是MainActivity:

以上识别的原理为:Flutter projects的默认入口为MainActivity,它又继承于FlutterActivity,而它的内部实现为SurfaceView,Flutter通过canvas自绘所有控件,正因为如此,Android是无法识别FlutterView里的元素边界的。

3 - 日志

一般来说,集成了Flutter框架的应用,在log里会有相关Flutter日志的输出,例如,我们在操作 微信 的时候,logcat里会有flutter日志的输出:

4 - 安装包文件

我们也可以通过安装包里是否集成了Flutter相关lib来推断是否使用了Flutter框架

以Android手机为例:

shell 复制代码
1,提取apk,方法如下:
# 首先确保已经将ADB工具添加到系统路径中
$ adb devices # 查看设备列表,确认设备正常连接
 
# 然后使用以下命令获取APK的位置信息
$ adb shell pm path com.example.appname
package:/data/app/com.example.appname-1234567890abcdefg/base.apk
 
# 最后使用以下命令复制APK到计算机上指定目录
$ adb pull /data/app/com.example.appname-1234567890abcdefg/base.apk ~/Desktop/my_app.apk

提取了apk文件之后,可以通过7-zip提取解压,然后搜索'flutter'相关文件,如果使用了Flutter框架,会有flutter相关lib文件(闲鱼APK):

4 - FlutterShark

可以在Android手机上安装FlutterShark应用,在赋予它QUERY_ALL_PACKAGES权限后,他可以展示手机中所有使用了Flutter框架的应用:

同时,FlutterShark还支持显示某个应用所依赖的三方package:

总结

以上跟大家分享了几种识别Flutter应用的方法,如果你还知道有其它的方法,请在评论区留言吧 : )

作者长期活跃在Flutter开源社区,欢迎大家一起参与开源社区的共建,如果您也有意愿参与Flutter社区的贡献,可以与作者联系。-->GITHUB

您也许还对这些Flutter技术分享感兴趣:

  1. 社区说|从Flutter Key 深入剖析UI架构设计原理
  2. 社区说|Flutter 长列表 Lazy Loading 机制解析
  3. 【Flutter技术】Scrollbar实现原理解析
  4. 【Flutter技术】ScrollMetricsNotification的诞生记
  5. 【Flutter技术】ListView即将迎来重要更新,这些场景的性能将大大提升
相关推荐
修炼的dance5 分钟前
白底图存JPG,sharp开mozjpeg背景杂点少近三成
前端
三少爷的鞋7 分钟前
Kotlin 协程,重点就在「协」这个字上
android·kotlin
anOnion13 分钟前
构建无障碍组件之Grid Pattern
前端·html·交互设计
好的佩奇33 分钟前
Dart 之模式
android·flutter·dart
乔旭伟35 分钟前
Vben3 中后台表格封装实战:useVbenVxeGrid 的全局收敛与七个坑
前端·anti-design-vue·1024程序员节
鶴哥只手遮天1 小时前
jQuery 4.0 源码架构与工程实践-第 10 章 尺寸、几何与显隐
前端·javascript·jquery
Mia_墨黎1 小时前
2026 Windows 11 终端美化完全指南
前端·后端
用户1880687493521 小时前
戴着 Rokid 接成语:用 AIUI 做一局有提示、有复盘的“接着说”
前端
Sakura_j_h_1 小时前
Three.js 单文件离线机械臂工作台:爆炸图、透明外壳与剖面
前端·机械臂·webgl·three.js·1024程序员节·esbuild
淡淡的香烟2 小时前
Flutter实现多语言切换
android·flutter·1024程序员节