混合动力：Flutter 的优势和好处
已发表: 2022-03-11Flutter 是来自 Google 的混合移动应用程序开发平台，于 2018 年底发布 1.0。虽然它是混合开发框架列表中的新成员，但其背后的伟大理念使其迅速在开发人员中流行起来。
我在本文中的目标是探索这些想法并写下我使用 Flutter 的经验，以及为什么我觉得它是混合移动应用程序开发的未来。
尽管市场上有较旧的混合应用程序框架，但越来越多的知名公司选择 Flutter 用于他们的移动应用程序。 虽然 Flutter 展示页面列出了其中的很多内容，但这里有一些值得注意的应用程序将 Flutter 用于整个应用程序或用于重要功能：
- Google Ads 应用
- GrabFood 的 GrabMerchant 应用程序
- 阿里巴巴集团的闲鱼应用，下载量超过5000万
- 纽班克
- 易趣汽车应用程序
尽管 Flutter 框架功能相当强大，但它仍然相对较新。 为了平衡起见，我还将讨论一些您在使用 Flutter 之前应该注意的限制。
我希望读完这篇文章后，你对 Flutter 的优缺点有了一个很好的了解，并且有足够的信息来决定你是否应该在你的下一个移动应用项目中使用 Flutter。
Flutter 优势（从开发角度）
作为开发者，这是我最熟悉的观点，也可以分享最多的信息。
快速学习曲线
Flutter 给开发者带来的第一个惊喜就是它上手的速度有多快。 完成安装过程并设置工作开发环境只需不到 30 分钟。 从那里开始，您就可以创建您的第一个 Flutter 应用程序了。
流行的编辑器集成
Flutter 还具有出色的编辑器集成。 我个人使用 Android Studio，但有一些说明可用于设置 IntelliJ、VSCode 或 Emacs。
清洁发展过程
与我之前使用混合应用程序框架的经验相比，开发过程也感觉更干净。 例如，当我使用 WebViews 显示包含许多元素（大约 100 个左右）的列表时，我必须处理高 CPU 使用率，尤其是当用户滚动列表时。 我通过使用专门为此制作的 Ionic 框架元素解决了这些问题。 在 Flutter 中，有一种公认的显示列表的方式，即ListView ，它具有开箱即用的惊人性能。
实时重新加载
另一件让我惊喜的事情是实时重新加载功能。 作为一名全栈开发人员，我习惯于像 BrowserWatch 这样在浏览器中提供实时重载的框架。
原生开发没有这些（但我认为 Apple 的 SwiftUI 在 iOS 开发方面取得了一些进展）。 Android 和 iOS 开发人员通常需要编写代码，然后等待其编译并加载到设备或模拟器上，然后才能看到更改。
Flutter 提供（a la React Native）实时重新加载机制，一旦开发人员点击“保存”，应用程序代码就会重新加载到设备上。 这会立即提供反馈，从而加快开发速度。
表现
应用程序性能是 Flutter 慢慢成为赢家的另一个指标。
由于 Flutter 框架正在积极开发中，因此有很多地方可以进行性能优化。 这在 Flutter 1.17 中很明显，它在较新的 iOS 设备上将渲染性能提高了多达 50%，并将某些类型的工作负载的内存消耗降低了多达 70%。
跨平台一致性
在两个移动平台上真正一致的 UI 是 Flutter 的另一个显着特点。 因为 Flutter 使用自己的渲染引擎（稍后会详细介绍），所以 iOS 和 Android 上的 UI完全相同。 开发人员不再需要处理特定于平台的样式问题以使一切看起来与设计完全相同：该保证是框架的一部分。
语言、工具和扩展
我认为应该在这里提到的其他三个较小但仍然很重要的方面是：
- Dart 是 Flutter 应用程序的编程语言，上手非常简单。 但它也是一种相当强大的语言，最初是由 Google 打算取代 JavaScript。 如果开发人员对 JavaScript 或其他类 C 语言有任何经验，他们将在一两天内轻松上手 Dart。
- 默认工具链中包含一个强大的插件管理器 (pub)，并且可以通过 pub.dev 插件存储库获得一个庞大的插件库。
- 创建插件以利用本机平台功能非常容易，因此如果开发人员需要访问尚未存在插件的平台功能，编写一个代码并不太难。
Flutter 优势（从业务角度）
大多数企业认为 Flutter 的最大好处是只需为 iOS 和 Android 平台雇用一个团队。 然而，许多企业忽略的一个更重要的好处是更快的上市时间。 利用上一节中的开发优势，较小的开发团队可以使用 Flutter 更快地构建具有原生性能的漂亮应用程序，从而在两个平台上提供相同的用户体验。
Flutter 确实允许开发人员构建一些真正漂亮的用户界面。 看看谷歌和联想最近的一项挑战，即为联想智能时钟构建漂亮的钟面 UI。 获胜者是 Mickel Andersson 的Particle Clock ，它不仅优雅独特，还展示了 Flutter 中的高性能动画。
对于考虑使用 Flutter 但不确定它是否正确的企业，可以逐步利用 Flutter：现有的移动应用程序可以一次集成 Flutter 一个部分。 事实上，这就是大多数大公司开始使用 Flutter 的方式，通过在 Flutter 中构建他们现有应用程序的一小部分，然后在看到好处后慢慢替换其他部分。
使用 Flutter 之前要考虑的限制
公平地说，作为较新的 Flutter，并没有像React Native 等其他混合移动应用程序框架那样经过实战考验——毕竟，React Native 的最终用户范围涵盖了 Facebook、Instagram、Skype 和 Discord 的移动应用程序。
“我应该使用 Flutter 吗？”的默认答案是，目前，谨慎的是。 这是因为项目经理仍然需要考虑他们需要哪些高级功能（如果有的话），并在承诺使用之前确保这些功能在 Flutter 中可用。 特别值得一提的是，一个团队可能需要哪些库和插件来构建一个特定的应用程序。 作为移动应用程序框架中的新成员，Flutter 没有 React Native 所具有的广泛的库和插件范围。
例如，Flutter 中的相机支持还没有完成，缩放和闪光控制还不是官方相机插件的一部分。 对我来说，这并不是什么大问题，因为当我需要在我正在构建的应用程序中集成照片/视频功能时，我能够找到第三方插件。
您可能会错过的另一个主要插件是谷歌地图。 没有 Dart 原生的 Google Maps 插件，虽然有一个插件允许将 Google Maps 集成到 Flutter 代码中，但它使用了 Flutter 的功能（平台视图），这些功能仍处于开发人员预览状态。
还有一件事不会影响许多项目，但您应该注意的是，目前，Flutter 不支持任何 3D 功能。 该团队目前只专注于 2D。 但是大多数应用程序不使用任何 3D 功能，因此对于大多数开发人员来说，这不应该是一个大问题。
我的 Flutter 经验中的一些建议
在过去两年中发布了三个 Flutter 应用程序后，我学到了很多我希望在刚开始时就被告知的东西。 我将在此处列出它们，希望它们对您的 Flutter 开发之旅有所帮助。
Flutter非常容易上手。 我从 App Brewery 的精彩课程开始。 然而，在完成了最初的几个模块之后，我认为我已经学到了足够的东西并开始构建我推出的第一个应用程序。
由于我不耐烦，我跳过了该课程中的一些模块，这些模块被证明很重要，我不得不通过犯错来艰难地学习这些模块的课程。 具体来说，如果我学习了一些 Flutter 最佳实践，我在第一次使用 Flutter 进行应用程序开发时会做得更好：
- 如何模块化和结构化我的 Flutter 应用程序代码。
- 状态管理如何工作。
- 如何在我的 Flutter 应用程序的不同页面上对用户进行身份验证并跟踪身份验证状态。
- 如何使用 Firebase 消息包集成通知。
我最终学习了所有这些东西，但首先必须犯很多错误。 我重写了我构建的第一个应用程序的重要部分。 然而，在我的第二个 Flutter 应用程序中，我从错误中吸取了教训，最终做得更好、更快。
您可以通过搜索 Google 轻松找到许多资源，以了解我上面列出的概念。 您可以从查看 Flutter 网站上的 Learn More 页面上的链接开始。
我发现的另一件事是，由于 Flutter 的新功能，没有一种模式可以用于构建您的应用程序。 来自主要基于 Django 的开发生涯，我习惯于知道 MVC 是在我的 Django 应用程序中使用的模式。 iOS 在它所遵循的 MVVM 模式中也有明显的赢家。 Android 有一套关于如何最好地构建应用程序的指南。
Flutter 没有这样的架构模式可以“战胜”许多可能性。 起初，这让我很艰难。 最后，在开发了许多 Flutter 应用程序之后，我认为最好选择一种架构并坚持下去。
我个人将provider包用作依赖注入和变更管理框架。 我的 Flutter 应用也大致分为三行：
- 视图，它们是构建应用程序的小部件，包括屏幕。 我使用
Provider包中的Consumer小部件将服务和模型注入到我的视图中，这样我就可以根据可用数据构建 UI。Consumer小部件还会在状态更改时重建视图，这是我的应用程序对状态更改做出反应的方式。 - 模型，它们是我用来保存结构化数据的普通旧对象。
- 服务/控制器，大部分业务逻辑都在其中。 API接口也在这里编码，可以检索和发送数据到API。 这些 API 接口提供和接受模型来传递数据。
bloc 库也值得考虑作为provider包的替代方案。 它的架构略有不同，它使用事件流和状态流来连接视图和模型。
与使用provider库相比，这是一种管理状态的稍微复杂的方法，但如果您有一个复杂的应用程序，您正在对来自多个源的相同数据进行更改并且需要从多个位置响应这些更改，则它会有所回报。
如果您最终不使用 BLoC 或provider ，则必须想出一些方法来管理整个应用程序的状态，尤其是在涉及通知的情况下。
Flutter 与其他混合框架的比较
反应原生
React Native 是迄今为止最流行和最成功的混合移动应用程序框架，并且有充分的理由。 它采用了流行且制作精良的前端 Web 框架 React，并允许数百万前端开发人员也开始编写移动应用程序。 我相信，如果开发人员必须找到时间和动力来学习原生 iOS 和 Android 开发 SDK，那么我们今天拥有的许多出色的移动应用程序将永远不会被开发出来。
在这种背景下，我有信心说 Flutter 最终将成为领先的混合移动应用程序框架。 有几个原因。
React Native 组件用 JavaScript 代码描述并翻译成原生控件。 这意味着用户在应用程序的 iOS 和 Android 版本中获得不同的 UI 感觉。 如果开发人员正在尝试为他们的用户实现原生体验，这很好。
然而，这也意味着，如果开发人员想要在两个移动平台上拥有相同、一致的 UI，他们必须努力将原生组件的样式设置为看起来相同，或者完全使用不同的组件以在两个移动平台上提供相同的外观和感觉平台。
将此与 Flutter 进行对比，Flutter 框架在所有支持的平台上都提供了自己的小部件。 没有翻译发生，因为 Flutter 不依赖原生控件来绘制 UI。 相反，它使用自己的控件库。 Flutter 的小部件库确实提供了看起来像原生控件的小部件，但它们是完全可选的。
这种方法有其优点和缺点。 最大的优点是您现在在两个平台上都拥有完全相同的应用程序。 但你确实放弃了一些东西来实现这一目标。
由于 Flutter 使用自己的小部件而不是使用原生小部件，因此您不能像在 React Native 上做最少的工作一样使用提供自定义控件的大量现有库。 在 React Native 中，围绕任何现有的原生控件编写一个小包装器并让它工作非常简单。 这也是目前 Flutter 没有稳定的 Google Maps 实现的原因。
但是，嵌入本机控件的功能目前正在开发中，并且处于开发人员预览版中，这意味着您可以使用它，但可能不得不应对错误。 与 React Native 相比，一旦发布，它将关闭 Flutter 中这个相当大的功能漏洞。
当你想要创建一个全新的组件时，同样的 Flutter 特性——使用它自己的小部件库而不是原生的小部件库——也提供了巨大的好处。 在 React Native 中，您必须构建一个平台原生组件并通过绑定将其导入您的应用程序。
使用 Flutter，您可以直接在 Dart 代码中构建自定义组件。 您可以使用诸如CustomPainter之类的小部件完全控制 UI，这些小部件可让您绘制所需的任何内容，并且您拥有一个可用的小部件库，可让您实现自定义动画。 你永远不需要跳出 Dart 代码库来构建这些自定义小部件。
我认为这是 Flutter 最大的好处之一。 你可以从 Dart 代码中完全控制你的 UI，并且不再需要担心学习你正在开发的平台的原生 SDK。
阿帕奇科尔多瓦
Apache Cordova 与其说是一个框架，不如说是一个浏览器包装器。 使用 Cordova，您可以使用 Web 技术构建您的应用程序：HTML、CSS 和 JavaScript。 Cordova 为您提供了一种在移动平台上运行此 Web 应用程序的方法，并在 JavaScript 中公开本机平台 API，以便您的应用程序可以与平台交互。
为 Cordova 构建了许多不同的框架。 我过去使用过的著名的之一是 Ionic 框架。 它提供了一组外观和行为类似于原生平台组件的 UI 组件。 但是，这些组件是使用 HTML/CSS/JavaScript 实现的。
Cordova 和 Ionic 的开发体验非常好，如果您已经是 Web 开发人员，上手速度非常快。 因为您正在使用 Web 技术构建应用程序，所以您可以使用整个 Web 生态系统。 想想成千上万个基于 HTML/CSS/JavaScript 的小型组件和库，您可以使用其中的大部分（如果不是全部）。 这意味着您需要的大多数“小部件”已经在线提供给您。
不过，这也是一个缺点。 因为您使用 Web 技术来构建您的应用程序，所以需要非常小心地确保该应用程序的外观和感觉就像一个移动应用程序，而不仅仅是一个缩小到可以在移动设备上运行的网站。
虽然 Cordova 是开发 MVP 甚至是应用程序的前几个版本的好方法，但我在 Flutter 中构建的第一个应用程序是 Ionic 应用程序的移植。 我们得到的性能改进，尤其是在有大量内容需要滚动的视图中，从第一次交互中就很明显了。
赛马林
我对 Xamarian 没有任何经验，因此无法公平地比较两者。 但是，在我的研究过程中，我确实遇到了一篇很好的文章，可以进行公平的比较。
虽然这篇文章最终将 Flutter 和 Xamarian 打成平手，但我可以自信地说，如果我正在阅读它并且必须在这两个框架之间做出选择，我会选择 Flutter，因为它的亮点在于我更看重。
Flutter 技术概述
Flutter：混合应用框架的“游戏引擎”
在混合移动应用程序框架中，Flutter 具有独特的方法。 它不会将 UI 委托给本机平台，也不会使用 Web 视图。 相反，Flutter 使用自己的渲染引擎来绘制 UI。 这类似于游戏如何使用生成其 UI 的所有部分的游戏引擎，而不是使用本机控件。
Flutter 使用经过实战考验的高性能 Skia 图形引擎来绘制移动应用程序中的所有内容。 使用 Skia 提供了我能想到的两个主要好处，尽管我确信 Flutter 背后的 Google 工程师有更多的想法：
- 您的应用在所有平台上看起来都完全相同，而无需为每个平台进行定制。
- 您的应用程序将获得出色的性能，类似于本机应用程序，因为没有中间层必须将您的代码转换为本机平台代码来绘制小部件。
一切都是小部件
Flutter 文档将 Flutter 称为“React 风格的框架”。 这在通过将较小的小部件（React 术语中的组件）组合在一起来构建应用程序的方式中很明显。
然而，Flutter 将一切都是小部件的方法比我使用过的任何其他框架都更进一步。
一个简单的例子是填充。 对于大多数框架，填充是 UI 元素的属性。 在 Flutter 中， Padding是一个小部件，它可以将其他小部件包裹在自身内部，并在其子小部件周围添加填充。
更独特的是， InheritedWidget没有 UI，也不提供任何用户交互。 它唯一的工作是将信息添加到小部件树中，以便在树深处的某个点上，您可以提取该信息。
例如，您的应用程序的根 - MaterialApp小部件 - 可以使用InheritedWidget将身份验证服务注入到小部件树中。 现在，在其他页面的树的深处，例如您的用户个人资料页面，您可以使用一种方法来提取该身份验证服务并使用它。
这一切都是小部件方法确实需要一些时间来适应。 但是一旦您熟悉了它，它就会成为在您的应用程序中构建功能的强大方式。
Flutter、Dart 和挖掘源码
Flutter 与 Dart 密切相关。 虽然核心渲染引擎是用 C/C++ 构建的，但这只是 Flutter 的一小部分。
Flutter 的大部分代码库都是用 Dart 编写的，Flutter 团队选择它有很好的理由。 但对我来说最大的好处是我可以轻松查看框架的源代码——以及它提供的所有不同的小部件——并从中学习。
这是一个比许多开发人员意识到的更强大的优势。 我建议大多数开发人员尝试在他们的框架/库的代码中找到答案，因为这不仅可以帮助他们了解幕后发生的事情，而且还可以让他们接触到高质量、精心设计的代码，这是一种可靠的方式成长为开发人员。
原生平台互操作性
虽然 Flutter 提供了 UI 层，业务逻辑通过纯 Dart 包轻松处理，但要访问本地平台的功能，如地理定位和摄像头控制，使用 pub.dev 的第三方包是最简单的策略。
但是，如果您需要的某些功能无法通过现有包获得，那么自己编写一个并不太难。 我自己没有构建任何平台原生包，但出于好奇，我查看了很多人的源代码。
尽管我不是原生应用程序开发人员，但我能够大致了解这些插件的原生部分，并了解它们如何通过消息传递连接到 Dart 运行时。 对于有经验的原生平台开发人员来说，创建一个新的包来利用原生功能将非常容易。
你应该在下一个项目中使用 Flutter 吗？
希望本文为您提供了足够的信息来决定您是否可以在移动应用程序项目中使用 Flutter。 我试图对 Flutter 给出一个平衡的描述，列出优缺点。
虽然没有人可以为您做出决定，但我可以就如何解决在我的下一个移动应用程序中使用 Flutter 的问题给您一些临别建议。 如果 Flutter 的优势可以提供一个应用程序需要的所有能力，我会选择它。
这是因为，除了 Flutter 目前缺乏的几个领域之外，它的所有其他方面都是我在过去一年开发和推出五种不同的 Flutter 应用程序时所钦佩和依赖的：
- Flutter 易于上手
- 使用从头开始设计以专注于开发速度的框架可以获得的速度提升
- 随时可用的 Dart 库和第三方包的丰富生态系统
- Flutter 使用一切开发应用程序的不同但非常高效的方式是小部件方法
那些提供移动应用程序开发服务的人最好认真看看 Flutter，如果他们还没有的话。
最后，我将指出 Flutter 的最后一个优势：它拥有我使用过的任何库或框架的一些最佳文档。 我很少在谷歌上搜索 Flutter 问题，但 Flutter 自己网站上的页面没有回答这个问题。
作为 Google Cloud 合作伙伴，Toptal 的 Google 认证专家可根据公司最重要项目的需求提供给他们。