[移动开发]Flutter 在 windows 上的开发环境设置

1. flutter.dev 网站 -> Docs -> Get started

此页面的链接：
Important: If you’re in China, first read Using Flutter in China.
如果是用的帆樯的话，估计不用看。

对应的网页对如何在 windows 上搭建 flutter 开发环境也有十分详细的说明：
https://docs.flutter.dev/get-started/install/windows

2. Get the Flutter SDK，

将(当前最新版）flutter_windows_3.0.3-stable.zip 下载到本机上，解压缩到路径举例： C:\Users\yanchun\Documents\development\sdks
flutter 最终放置的路径可以是：C:\Users\yanchun\Documents\development\sdks\flutter
包很大，解压缩的时间很长，自己的电脑用时估计5分钟？

3. 设置环境变量

复制 flutter/bin 的完整路径，例如：C:\Users\yanchun\Documents\development\sdks\flutter\bin
windows 搜索栏输入 env, Path 编辑 -> 新建 上面的路径：

4. 测试 flutter 安装

4.1 运行 flutter --version 命令

设置上述环境变量后cmd 测试，flutter --version 命令 ok：

C:\Users\yanchun>flutter --version
Flutter 3.0.3 ? channel stable ? https://github.com/flutter/flutter.git
Framework ? revision 676cefaaff (6 days ago) ? 2022-06-22 11:34:49 -0700
Engine ? revision ffe7b86a1e
Tools ? Dart 2.17.5 ? DevTools 2.12.2 

4.2 运行 flutter doctor

输入命令 flutter doctor 测试系统是否已经可以开发 flutter app，测试fail，显示未安装 Android 等一系列工具：

C:\Users\yanchun>flutter doctor
Running "flutter pub get" in flutter_tools...                      12.3s
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.0.3, on Microsoft Windows [版本 10.0.22000.739], locale zh-CN)
[X] Android toolchain - develop for Android devices
    X Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

[√] Chrome - develop for the web
[X] Visual Studio - develop for Windows
    X Visual Studio not installed; this is necessary for Windows development.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its default components
[!] Android Studio (not installed)
[√] VS Code (version 1.68.1)
[√] Connected device (3 available)
HTTP Host availability check is taking a long time...[!] HTTP Host Availability
    X HTTP host "https://maven.google.com/" is not reachable. Reason: An error occurred while checking the HTTP host:
      信号灯超时时间已到

    X HTTP host "https://cloud.google.com/" is not reachable. Reason: An error occurred while checking the HTTP host:
      信号灯超时时间已到


! Doctor found issues in 4 categories.

5. 安装第3步命令 flutter doctor 的 fail 项

Windows 系统不能 build iOS app，这种限制来自Apple，非 Flutter。只有 Mac 系统才能 build iOS app，但 Windows 可以 build Android app。
下载 Android Studio 安装包，接近 1G：

然后安装，尽可能全部选默认设置，(Android virtual device 一定要勾选，它是电脑上的 Android 手机)。

5.1 安装 Android SDK 命令行工具

后面的设置：More Actions -> SDK Manager -> SDK tools -> Android SDK Command-line Tools (latest) ，选择 ok 安装这一项。

5.2 选择虚拟设备及其 OS

More Actions -> Virtual Device Manager
创建设备，然后选择一个虚拟 Android 手机，我选的 Pixel 5，

OS 随便挑了一个，Android 11.0:

选择蓝色的 download，开始下载:

安装后，选next -> Finish

然后启动虚拟 Android 手机，如图所示：

（除了虚拟设备之外，也可以连接一台真实手机到系统，然后在这个真实的手机上跑 Flutter App）

6. 重新测试 flutter doctor

C:\Users\yanchun>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.0.3, on Microsoft Windows [版本 10.0.22000.739], locale zh-CN)
[!] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[√] Chrome - develop for the web
[X] Visual Studio - develop for Windows
    X Visual Studio not installed; this is necessary for Windows development.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its default components
[√] Android Studio (version 2021.2)
[√] VS Code (version 1.68.1)
[√] Connected device (4 available)
HTTP Host availability check is taking a long time...[!] HTTP Host Availability
    X HTTP host "https://maven.google.com/" is not reachable. Reason: An error occurred while checking the HTTP host:
      信号灯超时时间已到

    X HTTP host "https://cloud.google.com/" is not reachable. Reason: An error occurred while checking the HTTP host:
      信号灯超时时间已到


! Doctor found issues in 3 categories.

根据提示，运行命令

flutter doctor --android-licenses

前后大概要输入 8 次 y 同意若干license，
然后第3次运行命令 flutter doctor：

C:\Users\yanchun>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.0.3, on Microsoft Windows [版本 10.0.22000.739], locale zh-CN)
[√] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[√] Chrome - develop for the web
[X] Visual Studio - develop for Windows
    X Visual Studio not installed; this is necessary for Windows development.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its default components
[√] Android Studio (version 2021.2)
[√] VS Code (version 1.68.1)
[√] Connected device (4 available)
HTTP Host availability check is taking a long time...[!] HTTP Host Availability
    X HTTP host "https://maven.google.com/" is not reachable. Reason: An error occurred while checking the HTTP host:
      信号灯超时时间已到

    X HTTP host "https://cloud.google.com/" is not reachable. Reason: An error occurred while checking the HTTP host:
      信号灯超时时间已到


! Doctor found issues in 2 categories.

Visual Studio 错误被忽略，因为不开发 windows phone app。
Http 错误原因不知，也许要设置 proxy，毕竟是在访问谷哥的网站。

7. 在虚拟Android Phone，即模拟器上跑 demo Flutter App

7.1 新建文件夹，例如：

C:\Users\yanchun\Documents\development\my-flutter-projects
my-flutter-projects 此文件夹一定要提前建好，然后 cd 进这个文件夹，然后运行命令：flutter create my_first_flutter_app

C:\Users\yanchun\Documents\development\my-flutter-projects>flutter create my_first_flutter_app
Creating project my_first_flutter_app...
Running "flutter pub get" in my_first_flutter_app...             2,684ms
Wrote 127 files.

All done!
In order to run your application, type:

  $ cd my_first_flutter_app
  $ flutter run

Your application code is in my_first_flutter_app\lib\main.dart.


C:\Users\yanchun\Documents\development\my-flutter-projects>

7.2 VS Code 安装 Flutter 插件

Android Studio 不会用于代码开发，只有后台会被用到。
VS Code 是 Flutter 开发工具，首先安装新的 extension：Flutter, 安装 Flutter 时，Dart 会自动被安装。

7.3 VS Code 打开上述 7.1 创建的项目

7.4 使此 App 作为 Android App 在 Android Emulator 中执行

在 VS Code terminal 中运行命令：flutter run

flutter run 将 flutter project 构建成为 Android app，然后再在 Android Emulator 上运行。

首次运行此命令需要很长很长的时间，要装各种 tool，至少等了30分钟，以下是输出：

PS C:\Users\yanchun\Documents\development\my-flutter-projects\my_first_flutter_app> flutter run
Using hardware rendering with device Android SDK built for x86. If you notice graphics artifacts, consider enabling software 
rendering with "--enable-software-rendering".
Launching lib\main.dart on Android SDK built for x86 in debug mode...
Checking the license for package Android SDK Tools in C:\Users\yanchun\AppData\Local\Android\sdk\licenses
License for package Android SDK Tools accepted.
Preparing "Install Android SDK Tools (revision: 26.1.1)".
"Install Android SDK Tools (revision: 26.1.1)" ready.
Installing Android SDK Tools in C:\Users\yanchun\AppData\Local\Android\sdk\tools
"Install Android SDK Tools (revision: 26.1.1)" complete.
"Install Android SDK Tools (revision: 26.1.1)" finished.
Checking the license for package Android SDK Build-Tools 30.0.3 in C:\Users\yanchun\AppData\Local\Android\sdk\licenses       
License for package Android SDK Build-Tools 30.0.3 accepted.
Preparing "Install Android SDK Build-Tools 30.0.3 (revision: 30.0.3)".
"Install Android SDK Build-Tools 30.0.3 (revision: 30.0.3)" ready.
Installing Android SDK Build-Tools 30.0.3 in C:\Users\yanchun\AppData\Local\Android\sdk\build-tools\30.0.3
"Install Android SDK Build-Tools 30.0.3 (revision: 30.0.3)" complete.
"Install Android SDK Build-Tools 30.0.3 (revision: 30.0.3)" finished.
Checking the license for package Android SDK Platform 31 in C:\Users\yanchun\AppData\Local\Android\sdk\licenses
License for package Android SDK Platform 31 accepted.
Preparing "Install Android SDK Platform 31 (revision: 1)".
"Install Android SDK Platform 31 (revision: 1)" ready.
Installing Android SDK Platform 31 in C:\Users\yanchun\AppData\Local\Android\sdk\platforms\android-31
"Install Android SDK Platform 31 (revision: 1)" complete.
"Install Android SDK Platform 31 (revision: 1)" finished.
Running Gradle task 'assembleDebug'...                           1735.4s
√  Built build\app\outputs\flutter-apk\app-debug.apk.
Installing build\app\outputs\flutter-apk\app.apk...              1,374ms
Syncing files to device Android SDK built for x86...               139ms

Flutter run key commands.
r Hot reload.
R Hot restart.
h List all available interactive commands.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).

 Running with sound null safety 

An Observatory debugger and profiler on Android SDK built for x86 is available at: http://127.0.0.1:50319/1V_iUuMi454=/      

The Flutter DevTools debugger and profiler on Android SDK built for x86 is available at:
http://127.0.0.1:9101?uri=http://127.0.0.1:50319/1V_iUuMi454=/

7.5 build 完成，会自动将 App 发送到 Android Emulator

虚拟手机界面变成下面这样，点击蓝色加号 button，数字就会加 1 ：

7.6 修改 source code，测试 App

此 App 对应的 source code 位于 lib/main.dart 文件，将 _counter++; 改成
_counter += 2;

  void _incrementCounter() {
    setState(() {
      // _counter++; test: changed to the following!!! 
      _counter += 2;
    });
  }

在 terminal 中根据菜单输出，按 r 键，执行 hot reload, 这样就不需要重新跑 flutter run 命令了，然后，可以发现，点击Android 模拟器上的蓝色按钮，数字会变成加 2, 源代码修改成功。

相应地，按 shift + r 键即大写的 r 将重启 App，屏幕上的数字将重置为 0

7.7 另一种调试运行 Flutter App 的方式

7.6 中的修改代码，然后按 r 或者 shift + r 键盘 的方式虽然 ok，但是麻烦。
由于在 VS code 中安装了 Flutter 插件，因此可以另一种方式运行 Flutter App。

1. 在 VS code terminal 中按 Ctrl + C 终止程序
2. 打开 VS code 菜单栏 Run -> Run Without Debugging, 此命令是在后台运行命令 flutter run. (跳出的窗口安装 dev Inspector 之类提示选 “Not Now”)

App 依旧开始在模拟器中执行，只是此时，VS Code IDE 多了一组按钮，与
之前的 hot reload 与 hot restart 等对应。 hot reload 按钮甚至不需要按，代码修改后自动就是 hot reload 模式。只要代码修改被侦测到，模拟器中的 App 将自动更新。
这种运行 Flutter App 的方式因此更为方便。