I’ve been reading another Flutter-praising article that mentioned an application supposedly written in this framework. According to the author of the article, the application was indistinguishable from a native iOS app using Apple-provided controls from UIKit. I found it hard to believe because every Flutter app I’ve used had serious UI/UX issues compared to most native apps. So I decided to give it a try.
我一直在阅读另一篇赞扬Flutter的文章,其中提到了应该在此框架中编写的应用程序。 根据文章的作者,该应用程序与使用Apple提供的UIKit控件与本机iOS应用程序没有区别。 我很难相信,因为与大多数本机应用程序相比,我使用的每个Flutter应用程序都存在严重的UI / UX问题。 因此,我决定尝试一下。
The application actually felt like a true native app (mostly) but it turned out, this wasn’t the merit of the Flutter, because the app might not use Flutter at all.
该应用程序实际上感觉像是一个真正的本地应用程序,但事实证明,这并不是Flutter的优点, 因为该应用程序可能根本不使用Flutter 。
该应用程序 (The app)
The application in question is Realtor.com. You can guess it’s used for searching apartments. But most importantly, it’s the first application you see when you open the Flutter showcase page, so it has to be written in Flutter, right? I don’t know about it’s Android version, and I don’t want to, so let’s just take a look at the iOS one.
有问题的应用程序是Realtor.com 。 您可以猜测它用于搜索公寓。 但最重要的是,这是打开Flutter展示页面时看到的第一个应用程序,因此必须用Flutter编写,对吗? 我不知道它是Android版本,也不想要,所以让我们看一下iOS版本。
检验方法 (Inspection methods)
My primary iPhone is jailbroken, so I have 2 reliable ways to check how any iOS app is written and which frameworks it uses: view hierarchy inspection and bundle inspection.
我的主要iPhone已越狱,所以我有2种可靠的方法来检查任何iOS应用程序的编写方式以及使用的框架: 查看层次结构检查和捆绑检查 。
视图层次 (View hierarchy)
The primary characteristic of any Flutter application is that they don’t use native OS controls unless you bridge them by yourself; because Flutter draws everything on its own and just mimics native controls of the OS. For example, in the image below you can see the view hierarchy of 2 apps.
Flutter应用程序的主要特征是除非您自己桥接它们,否则它们不会使用本机OS控件。 因为Flutter自己绘制所有内容,并且仅模仿操作系统的本机控件。 例如,在下面的图像中,您可以看到2个应用程序的视图层次。
![Image for post](https://miro.medium.com/max/9999/1*zxLfy8RUHquImRxbl6d2TQ.png)
The left one is native: it uses a lot of default iOS controls (the ones with “UI” prefix) and some of the custom ones. But the most important thing here is that you can see the entire hierarchy.
左边的是本机的:它使用许多默认的iOS控件(带有“ UI”前缀的控件)和一些自定义控件。 但是这里最重要的是,您可以看到整个层次结构。
On the other hand, the Flutter app’s hierarchy is almost flat. There are a few native controls that are required for any iOS applications, and also there’s a bridged web view. The whole application’s UI is contained inside FlutterViewController, and you can’t see what’s inside of it at all, because it’s just a canvas.
另一方面,Flutter应用程序的层次结构几乎是平坦的。 任何iOS应用程序都需要一些本机控件,并且还有一个桥接的Web视图。 整个应用程序的UI包含在FlutterViewController中,您根本看不到其中的内容,因为它只是一个画布。
束 (Bundle)
Application bundle is just a folder with an executable file and a bunch of stuff that application needs, like code signature, resources, description file, and most importantly — it’s dependencies. The easy way to check if the application uses Flutter is just to check if it has Flutter as a dependency — that’s it.
应用程序捆绑包只是一个文件夹,其中包含可执行文件和应用程序需要的一堆东西,例如代码签名,资源,描述文件,最重要的是-它是依赖项。 检查应用程序是否使用Flutter的简单方法就是检查它是否具有Flutter作为依赖项。
让我们检查 (Let’s check)
Let’s start our inspection with the view hierarchy. The Realtor has 5 tabs, and as you can see below, the hierarchy of every tab looks exactly like a native app’s hierarchy. Moreover, none of the tabs have FlutterViewController inside them at all.
让我们从视图层次结构开始检查。 房地产经纪人有5个选项卡,如下所示,每个选项卡的层次结构看起来与本机应用程序的层次结构完全一样。 此外, 所有选项卡中都没有FlutterViewController 。
![Image for post](https://miro.medium.com/max/9999/1*H2daDBvaSp0AKMwfoN4lXQ.png)
I went over the tabs and checked some of the screens inside, and haven’t found any screen that was made using Flutter or at least had an instance of FlutterViewController.
我检查了选项卡并检查了其中的一些屏幕,但没有找到使用Flutter制作的任何屏幕,或者至少没有FlutterViewController的实例。
So, no Flutter at all? I had the same question and decided to check if Realtor has Flutter at least as a dependency.
因此,根本没有Flutter吗? 我有同样的问题,并决定检查房地产经纪人是否至少将Flutter作为依赖项。
![Image for post](https://miro.medium.com/max/9999/1*MogolUpoTOFn9hMPeX-y2Q.png)
Turns out, it has. But it also has a few native dependencies, like SnapKit, which is used to simplify layout code in native iOS applications. But more importantly, it has a lot of .storyboardc and .nib files, which are compiled versions of Xcode Interface Builder files (.storyboard, .xib). And you can probably guess that you can’t use Interface Builder to create Flutter screens.
事实证明,它有。 但是它也有一些本地依赖项,例如SnapKit,用于简化本地iOS应用程序中的布局代码。 但更重要的是,它具有许多 .storyboardc和.nib文件,它们是Xcode Interface Builder文件(.storyboard,.xib)的编译版本。 您可能会猜测您无法使用Interface Builder创建Flutter屏幕。
结论 (Conclusion)
So, the Realtor app has Flutter dependency, but none of the main application’s screens use it. What could that mean? I see a few options:
因此,Realtor应用程序具有Flutter依赖性,但主应用程序的屏幕均未使用它。 那是什么意思? 我看到一些选择:
- The application uses Flutter, but only for a few screens that might be not that important. 该应用程序使用Flutter,但仅用于可能不太重要的几个屏幕。
- The application actually doesn’t use Flutter at all. 该应用程序实际上根本不使用Flutter。
- The application used Flutter a lot in the past but decided to abandon it. 该应用程序过去经常使用Flutter,但决定放弃它。
- Only the Android version uses Flutter (why would you do that?) 只有Android版本使用Flutter(为什么要这么做?)
In all of the cases, a question arises: is it fair to put this application in the first position of the promotional showcase, or any position at all? Because in all of the cases above, a statement “the Realtor app is written in Flutter” isn’t an absolute truth. In some cases, it’s not a truth at all.
在所有情况下,都会出现一个问题:将此应用程序放在促销展示柜的第一位置还是任何位置都公平吗? 因为在上述所有情况下,“房地产经纪人应用程序都是用Flutter编写的”声明并不是绝对的事实。 在某些情况下,这根本不是事实。
How about some honest marketing, Google?
Google进行诚实的行销怎么样?
UPDATE: Turns out Realtor actually uses Flutter, but all of the Flutter screens are under A/B tests, which goes back to my first conclusion. It might give a lot of people an impression that the whole app actually is written in Flutter, and that could lead to a false conclusions or expectations about the experience it provides to the end user. I believe that this isn’t the correct way to promote cross-platform framework.
更新:事实证明Realtor实际上使用Flutter,但是所有Flutter屏幕都经过A / B测试,这可以回到我的第一个结论。 这可能会给很多人以为整个应用程序实际上是用Flutter编写的印象,这可能导致对它提供给最终用户的体验的错误结论或期望。 我认为这不是推广跨平台框架的正确方法。