Flutter 在 windows 上的开发环境设置-Toy模板网

这篇具有很好参考价值的文章主要介绍了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 编辑 -> 新建上面的路径：
Flutter 在 windows 上的开发环境设置

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：

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

5.1 安装 Android SDK 命令行工具

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

Flutter 在 windows 上的开发环境设置

5.2 选择虚拟设备及其 OS

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

Flutter 在 windows 上的开发环境设置

OS 随便挑了一个，Android 11.0:
Flutter 在 windows 上的开发环境设置
选择蓝色的 download，开始下载:

安装后，选next -> Finish
Flutter 在 windows 上的开发环境设置
然后启动虚拟 Android 手机，如图所示：

Flutter 在 windows 上的开发环境设置
（除了虚拟设备之外，也可以连接一台真实手机到系统，然后在这个真实的手机上跑 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 创建 Flutter 工程

新建文件夹，例如：
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 创建的项目

Flutter 在 windows 上的开发环境设置

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 ：

Flutter 在 windows 上的开发环境设置

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。

在 VS code terminal 中按 Ctrl + C 终止程序
打开 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 的方式因此更为方便。
Flutter 在 windows 上的开发环境设置文章来源地址https://www.toymoban.com/news/detail-486261.html