为何选择 Flutter
uniapp
提到跨端技术，我首先想到的就是 uniapp，上手难度低，只要会 vue，通过一套代码就可以生成手机端网页、安卓应用、iOS 应用以及各种平台的小程序。工作中，我也用 uniapp 写了几个项目，但是体验终究和原生应用还是有所差距的。
React Native
RN 是由 Facebook 出品的，基于 js 和 React 的非常优秀的跨平台移动应用开发框架，对于前端开发人员而言学习成本不算太高。现在已经相当成熟，并且有着活跃的社区，包括我之前工作过的公司，也是在用 RN 进行 App 的开发。虽说在 RN 中，是使用 React 组件通过 js 来调用原生视图，有着不错的渲染性能。但其本质上还是通过 JavaScript VM 调用原生接口，相对而言通信比较低效。
Flutter
于是最近决定开始学习由谷歌出品的、原生平台编译的跨端解决方案 —— Flutter。当我们使用 Flutter 编写 App时， 使用的是 Dart 语言，再经过 Flutter 框架的翻译，将对应的结果交给同样由谷歌开发并维护的 Skia 绘图引擎，然后直接通过 CPU/GPU 处理，最终绘制生成我们看到的画面。这个过程，和开发原生应用是差不多的。我们以安卓为例，在安卓开发中，使用 Kotlin 或 Java 来编写代码，经由 Android 框架翻译，同样是将结果交给 Skia，再由 Skia 把数据交给 CPU/GPU 处理生成画面。图示如下：
不难看出，使用 Flutter 开发 App 的过程基本上与原生开发时一样的。而像 React Native 这种框架，则不能直接给 Skia 提供数据，而是需要借助于 Android 框架，这就存在较大的性能消耗：
其实 Chrome 浏览器的绘图能力，包括 canvas 或 svg 等，底层靠的也都是 Skia 图形引擎。
环境配置
下面介绍在 Windows 系统的电脑上如何配置开发 Flutter 所需的环境。
1. 下载 Flutter SDK
SDK 就是 Software Development Kit 的缩写。可以去官方站点下载：
最好是下载 stable 版，也就是稳定版。下载后解压将 flutter 目录放在你想放的位置就好了，比如我是放在 C:\src\flutter。
2. 配置环境变量
在开始菜单的搜索功能输入“env”，然后选择“编辑系统环境变量”或者右击计算机图标 -> 属性 -> 高级系统配置 -> 高级 -> 环境变量，打开环境变量窗口，在系统变量中找到 Path，添加 flutter 目录下 bin 目录，比如“C:\src\flutter\bin”。
配置完后可以在命令行窗口输入 flutter --version 查看 flutter 版本，我下载的是 3.0.1：
也能直接看到 Dart 的版本，或是输入 dart --version 查看，我的是 2.17.1。
然后可以输入 flutter doctor 查看还有哪些相关的依赖需要配置的，比如是否安装了 Android Studio 等：
3. 配置 Android 环境
因为在 Windows 系统下不太方便安装 Xcode，所以我们忽略掉对 iOS 开发环境的配置，而直接开始配置 Android 开发环境。 首先需要下载安装 Android Studio —— 基于 IntelliJ IDEA 的、谷歌官方的安卓应用集成开发环境（IDE）。 安装完后打开 Android Studio 会来到如下图所示的 Android Studio Setup Wizard 窗口：
点击 Next 按提示安装一些开发 Android Flutter 应用时所需要组件（components）。
安装完后会来到如下所示的欢迎窗口：
点击 More Actions 的 Virtual Device Manager 前往虚拟设备管理窗口：
点击 Create device 进入到了选择硬件设备窗口，我直接选择了默认选中的 Pixel2：
然后点击 Next，进入如下窗口进行下载，我下载的是默认选中的 R 版本，对应的是 Android 11：
下载完成后就可以点击上图中的 Next，然后可以给新建的这个虚拟设备起个名字：
可能遇到的问题及解决
- 我在家里的电脑（win7）安装时，遇到了上图右边所示的红色提示：VT-x is disabled in BIOS。
解决办法是重启电脑进入 BIOS（我是华硕的主板，是按 F8 进入的），点击界面下方的 “Advanced Mode（F7）”，然后在 Advanced 菜单下，找到“Intel Virtualization Technology”，改为 “Enabled”，然后保存修改，退出即可：
- 我在公司电脑（win10）进行到这一步时也遇到了问题，提示是：
解决办法是卸载掉 Intel@ Hardware Accelerated Execution Manager：
然后去 github 下载 haxm-windows_v7_5_1.zip，解压后点击 intelhaxm-android.exe 安装。 之后再次打开 Android Studio，重新创建一个虚拟设备，你会发现提示变成了 HAXM is not installed.
直接点击下面的 Install Haxm 根据提示安装即可。 之后，就可以在 Device Manager 里看到我们新建的设备，点击三角图标可以启动模拟器：
4. 同意 Android 协议
在终端输入 flutter doctor --android-licenses，然后阅读并同意协议即可。
可能遇到的问题及解决
当我执行完命令后遇到了如下图所示的问题：
解决办法是打开 Android Studio 后点击 Tools 菜单的 SDK Manager 选项：
在打开的设置窗口按下图所示勾选安装 Android SDK Command-line Tools：
之后就可以正常操作了。
5. 安装 Flutter 和 Dart 插件
在 Android Studio 中，通过 File -> Settings -> Plugins 来到插件偏好设置窗口，安装 Flutter 插件，安装过程会要求安装 Dart 插件，点击同意，就安装好了 Flutter 和 Dart 插件：
创建应用
现在，我们就可以创建第 1 个 Flutter 应用了。打开命令行工具，来到想创建项目的目录下，执行 flutter create my_flutter_app，即可创建名为 my_flutter_app 的项目，注意项目名称不要使用大写字母：
然后我们通过 Android Studio 打开 my_flutter_app，选择之前创建的虚拟设备，然后点击右边的运行三角按钮：
等待一段时间的编译后，就能看到一个简单的计数器项目已经运行在虚拟设备上了：
至此，我们已经成功地配置好了 Flutter 的开发环境~
