Flutter学习 - 第一部分 - 简介

今天我开始学习 Flutter，课程是 Udacity 的“使用 Flutter 构建原生移动应用”。课程使用的是 Android Studio，但我用 Visual Studio Code 跟着学，目前为止一切顺利（虽然有些功能用不了，比如很棒的Widget Inspector）。需要说明的是：到目前为止，我还没有写过任何移动应用（无论是原生应用还是其他类型的），我对 Android 和 iOS 开发一窍不通。在这个开发领域，我完全是个新手。

简单说明一下：我几天前就已经安装好 Flutter 了。我需要安装 Flutter SDK、Android SDK、Android Studio，构建 Android 模拟器镜像，安装 Xcode 以及各种 Flutter 插件。可想而知，这花了我好长时间 :-D

本文将介绍第一课的第 1 集到第 9 集（总共有 2 课）：

随机注释

移动开发速度可能比以往任何时候都快，但与 Web 开发，甚至是前端 Web 开发相比，仍然很慢。

最慢的是启动时间，考虑到手机通过 USB 连接，热重载需要重新渲染部分应用画面，速度已经足够快了。初始化过程非常慢：

从我输入文字到应用在手机上启动，花了超过 4 分钟flutter run。希望你只需要操作一次，之后就可以使用热重载了。这是创建时生成的标准 Flutter 应用：一个用于递增计数器的按钮。

幸运的是，第二次安装时，由于依赖关系已经解决，只用了45 秒就出现在了物理设备上。还不错。我的设备是 Nexus 5X，系统是 Android Oreo（API 27）。

我还用安卓自带的模拟器（Nexus 5X，API 28）测试了一下，启动速度慢得令人发笑。模拟器启动后，Flutter 才能检测到它，但应用第一次出现需要 78 秒。最后，我又用 iPhone 模拟器（iPhone XS Max）做了同样的测试，应用第一次运行需要 80 秒，第二次只需要 25 秒。非常“科学”的结论：安卓模拟器启动慢，iOS 模拟器好得多，移动端构建速度慢，我说完了吗？我真不知道你们这些移动开发者每天是怎么熬过来的。总之，给各位新手朋友们提个醒：如果可以的话，尽量用真机而不是模拟器。

Visual Studio Code 有一个扩展程序，它基本上嵌入了 Flutter 的所有工具，但请注意，这个扩展程序只是在 Flutter 自身的 CLI 工具之上增加了一个用户界面。它们的功能非常强大。因此，您可以继续使用您最喜欢的编辑器进行开发。

你还可以从 VS Code（以及命令行）启动测试，这非常方便。测试代码如下所示：

我跑完了全程，他们都通过了。我已经继续上下一阶段的课程了。

设置

我目前同时打开了 Visual Studio Code 来输入代码，以及 Android Studio 来运行应用。这有点效率低下，但我还没准备好完全接受 Android Studio。用了五分钟之后，我断定它总体来说是个很棒的 IDE，但文本编辑器实在太烂了。好在它们之间可以很好地同步，因为它们都能检测到项目文件夹中的文件更改。

好的、坏的，还有我不知道的。

优点：

• Flutter 使用响应式框架和“差异比较”来决定重绘哪些内容。热重载功能非常实用，而且速度足够快，可以实现快速反馈循环。这有没有让你想起什么？比如 Vue 或 React 加上 webpack 的热重载功能？
• 内置工具非常棒。他们显然明白，在2018年，任何不合格的产品都不能发布。人们的注意力持续时间只有五秒钟，这可不是件容易的事。
• Dart 采用了 Go 的单一代码格式，我认为这很棒。我们阅读代码的时间远多于编写代码的时间，而熟悉的代码风格能节省时间。你的编程水平并非取决于空格、制表符和缩进，而是取决于你如何设计和编写代码。我们甚至能用人工智能来识别表情包里的猫，我不明白为什么我们还在争论代码风格，让机器来做吧。
• Dart看起来不错，但（我知道我不该这么说）我现在既没兴趣也没动力去读它的手册。我目前的目标是学习如何构建第一个跨平台原生移动应用，避免陷入技术陷阱或犯错。Dart目前不会成为障碍，但我毕竟才刚刚开始，说不定明天我的想法就变了。
• Flutter 的Widget 检查器（VS Code 中不可用）简直太棒了！你可以启用 Widget 选择模式，点击手机上的 Widget，就能在 Widget 树中看到它的位置；反之亦然：点击 Widget 树，就能看到手机应用中选中的 Widget（！！）。你还可以跳转到声明 Widget 的代码部分，检查应用的性能，查看正在使用的 Widget 的源代码等等。这让我想起了 Vue 的 Chrome/Firefox 开发者工具。
• 只有一套代码库。我只花了短短几分钟就在 iOS 上测试了同一个应用。虽然这个应用实际上什么功能都没有，但这仍然是一个巨大的卖点。我接触过几家公司，他们都为本质上相同的应用配备了独立的移动开发团队（或者至少是独立的代码库）。这对我来说太奇怪了。说实话，这也是我至今对移动开发不感兴趣的原因之一。Flutter（以及 React Native）的优势在于能够大幅节省时间和金钱（尽管我也看到过一些公司放弃 React Native 的文章）。Flutter 的未来会如何，只有时间才能给出答案 :D
• flutter upgrade在项目中运行它会升级软件包，在项目外运行它会更新 Flutter 本身。

“我不知道”是好是坏：

• Flutter 使用独立于宿主操作系统的 2D 引擎来渲染组件，这意味着（或者至少我认为是这样）它们始终会落后于原生组件（在 Android 上可能情况稍好一些，因为它们来自同一家公司，但我估计每次 Android 或 iOS 有新功能时，他们都必须从头开始实现组件）。我相信如果 Flutter 成为主流，社区会提供帮助。
• 一切皆为组件，而组件是声明式的。我在这里提到这一点，是因为我理论上很喜欢它，但我从未开发过移动应用，所以我不确定在与设计师等团队成员合作时，它究竟有多大优势。标准的 Android 或 iOS UI 开发是如何进行的？是否提供工具给设计师，让他们构建各种屏幕，然后开发者再为其添加行为？还是像 Web 开发那样，由开发者将原型转化为实际代码？如果是后者，那么 Flutter 的“声明式组件”理念就非常出色；否则，它可能会给团队带来麻烦。
• Flutter 虽然同时支持 Android 和 iOS，但似乎明显更偏爱 Android 和 Material Design，不过我可能错了（我还在学习 Google 制作的课程，所以这一点也需要考虑）。

缺点：

• 部分功能无法正常使用（Widget 检查器中的几个按钮无法点击）。我使用的是最新版本的 Flutter（测试版）及其自带的最新 Dart（测试版）。
• Github 上有很多未解决的问题（但这并不能科学地衡量质量）。
• 真的好难再用回分号了 :-D

好了，今天就到此为止吧。我花了几个小时（看视频、暂停、实验、测试速度，同时还要做笔记），我已经有了…… 有用我的手机上安装了一个没用的应用。