Flutter开发要点(1) - Windows 开发环境搭建

Flutter 是 Google 基于 Dart 开发的开源免费跨平台 UI 开发框架，目前已经支持iOS、Android、Web、Windows、macOS、Linux、鸿蒙等几乎所有平台，其在跨端 UI 一致性、渲染性能、动画流畅度等方面表现尤为突出，是目前实现移动端跨平台开发的不二之选。

本文将简单记录一下 Windows 环境中，搭建 Flutter 开发环境的关键步骤。

1. SDK 安装

1.1 下载 SDK

想要开发 Flutter 项目，首先需要安装 Flutter SDK，可到官网下载最新的稳定版本。

按理说还需要下载 Dart SDK，但由于每个版本的 Flutter SDK 都已经内置了和该版本官方配对、经过兼容性验证的 Dart SDK，所以，不需要再单独下载 Dart SDK 了。

1.2 安装 SDK

直接将上一步下载好的 zip 文件解压到指定的目录即可，目录路径不要有中文，例如，我的安装目录是D:\Program Files\flutter。

2. 配置环境变量

环境变量位置： 右键开始菜单 > 系统 > 高级系统设置 > 环境变量 > 系统变量。

将 D:\Program Files\flutter\bin 和 D:\Program Files\flutter\bin\cache\dart-sdk\bin 配置到 Path 环境变量；
环境变量中新增配置项 PUB_HOSTED_URL，值为 https://pub.flutter-io.cn 以便于通过国内镜像下载项目第三方依赖包；
环境变量中新增配置项 FLUTTER_STORAGE_BASE_URL，值为https://storage.flutter-io.cn，以便于通过国内镜像升级 Flutter 主体。

3. 检查与诊断

3.1 检查版本号

执行 flutter --version 命令，出现版本号，说明安装成功了，这里同时也会显示对应的 Dart 版本号；

3.2 诊断环境

执行 flutter doctor -v 命令，-v 代表详细模式，Flutter 一项全为绿灯就代表 Flutter SDK 安装成功了。

其它项如Android toolchain、Chrome、Visual Studio等，则分别代表 Android、Web 以及 Windows 桌面应用的开发环境，只有需要进行相应平台的开发才需要修复为绿灯，修复方案在诊断结果中也都有详细说明，参照说明，便可逐个解决。

例如，其中：

Android toolchain: 可以通过安装 Android Studio解决；
Visual Studio：可以通过安装 Visual Studio Community解决，不过安装时要勾选 使用 C++ 的桌面开发；

在 Mac 环境中，还会有一项 Xcode，对应的是 iOS 的开发环境，需到 App Store 下载并安装。由于大部分情况，Flutter 都是用于开发移动端应用，所以通常只需要解决 Android toolchain 和 Xcode 的问题就可以了。

4. 项目测试

4.1 创建DEMO项目

安装并配置完 Flutter SDK 后，就可以通过如下命令创建 Flutter 项目了：

flutter create --org com.company --platforms=android,ios,web my_app

其中，

org：用于指定包名，正式项目必加，my_app为项目名，该实例中的最终包名为com.company.my_app；
platforms :包含 android,ios,web,windows,macos,linux，这里指定了 android,ios,web 三个平台，所以生成了对应的三个目录。
。

4.2 运行DEMO

正式启动程序之前可以通过执行 flutter devices 命令检查一下当前支持哪些运行设备。

由于我们还没有联接真机，也没有创建虚拟机，所有这里只有 windows 和 web(chrome,edge)，如果没有成功安装 Visual Studio，windows 也不会有。接下来可以通过如下命令选择运行的设备：

flutter run -d 设备ID

这里为了简单起见，我们执行flutter run -d chrome 命令，运行在 Chrome 浏览器上。

这里也可以直接执行 flutter run，不指定设备 Flutter 会 自动选最优设备，多设备则询问。基本优先级：Android 真机 > Android 模拟器 > iOS 真机 > iOS 模拟器 > Web > 桌面程序。

5. 安装 IDE

官方推荐的 IDE 有 Android Studio 和 VS Code 两个，前者使用起来比较简单，几乎涵盖了开发过程中所涉及到的所有功能，但缺点是比较笨重，电脑配置不高的话可能会比较慢。而后者比较轻量级，运行流畅，但所有功能都需要依赖插件，相应的配置起来会麻烦一些。

在实际开发中，两个 IDE 常会配合使用，前者主要用于项目创建、包管理、模拟器管理、性能分析、打包发布等工作，而后者主要用于日常编码调试工作，二者相互协作，开发起来才更加省心省力。

具体安装过程这里不做详细介绍，通过上面提供的官方链接直接下载安装即可，这里仅列出一些注意要点。

5.1 Android Studio

先安装 Android Studio，可以更方便的把环境、SDK、模拟器等问题一次性搞定。

5.1.1 安装 Android Studio

首次安装时，可能会因网络原因导致部分下载失败的情况，不用担心，可在安装结束后到 SDK Manager 中手动安装失败的部分，如下图所示：

这里可以多下载几个常用版本的 Android SDK（至少要装上计划用于测试的真机版本）：

并且需确保必要的 SDK Tools 也都装上了；

5.1.2 安装插件

要想开发 Flutter 项目，还得安装 Dart 和 Flutter 两个插件。

安装完成后就多了一项New Flutter Project，可以新建 Flutter 项目了。

这里需要选择 Flutter，并配置 Flutter SDK 的位置。

5.1.3 配置 Android SDK

到这里 Android Studio 和 Android SDK 算是安装成功了，但执行 flutter doctor 命令可能依然会出现如下错误：

其实答案已经在结果中了，只需要通过 flutter config --android-sdk 命令更新一下 Android SDK 的路径就可以了。

再诊断一次，错误提示变了，说明上面的问题解决了。

这里是两个新的问题，第一个 cmdline-tools 的问题，需要到 Android Studio 的 SDK Tools 中安装。

第二个问题更简单，根据提示执行一下 flutter doctor --android-licenses 命令就可以了，过程中的询问全部选 y。

最后再诊断一下。

全部绿灯，这下舒服了！

5.1.4 真机测试

Android SDK 安装配置成功后，就可以真机测试了，但真机测试首先需要手机启用 开发者模式，并允许 USB调试，两步缺一不可。这里不同的手机操作方式可能不同，具体步骤可问 AI，启用后用数据线连上手机，再次输入 flutter devices 命令验证。

如果多了一个真机设备，就说明 开发者模式 启用成功了，接下来执行 flutter run -d 65c79e8e 就可以真机运行了，其中 -d 65c79e8e 是我的设备ID，不带也可以，默认就是优先选择真机。

不过，执行上述命令，初次编译时很有可能会出现如下错误：

这是由于打包安卓APP需要依赖 Gradle，初次打包需要下载相关依赖，但官方链接国内访问不了。解决办法是把项目文件 android/gradle/wrapper/gradle-wrapper.properties 中的 services.gradle.org/distributions 改为 mirrors.aliyun.com/macports/distfiles/gradle，使用国内镜像。