最近想学 Flutter,但是配环境的时候踩了一路坑。

# 下载 Flutter

可以在官网或者国内镜像 (opens new window)下载,也可以走包管理器。Windows 如果安装了 Chocolatey 可以直接 choco install flutter。不需要再单独安装 Dart。

安装完以后可以按照上面的链接,配置一下镜像。

# 运行 flutter doctor

flutter doctor 是个好东西,会给出需要安装的东西的列表。这里是我安装完的结果。

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.10.3, on Microsoft Windows [Version 10.0.22000.593], locale zh-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
[✓] Chrome - develop for the web
[✓] Visual Studio - develop for Windows (Visual Studio Community 2022 17.1.3)
[!] Android Studio (not installed)
[✓] IntelliJ IDEA Ultimate Edition (version 2021.3)
[✓] VS Code, 64-bit edition (version 1.66.0)
[✓] Proxy Configuration
[✓] Connected device (3 available)
[✓] HTTP Host Availability

! Doctor found issues in 1 category.

# 安装 IDEA Ultimate 或 Android Studio

IDEA Ultimate 是 Android Studio 的超集(注意 IDEA Comuunity 不是),如果有正版并且装了 IDEA 就不用再装一个 Android Studio。

IDEA Ultimate 需要安装 Flutter 和 Dart 的插件,Android 插件是自带的,不用安装。

# 在 IDEA Ultimate 或 Android Studio 中安装 Android SDK

需要从新建项目里面找到 Android,这里就会提示安装 Android SDK。一路选过去就好,这里没什么需要注意的。

需要注意的是,需要在设置 - Android SDK 里面安装 Android SDK Command-line Tools,不然 flutter doctor 会提示 Android Toolchain not found

安装 Android SDK Command-line Tools

# 安装 Visual Studio Community

如果准备开发 Windows 的话,需要用到 MSVC 的工具链,所以下一个 Visual Studio Community,选择 使用 C++ 的桌面开发,右边的可选功能保持默认就够了。

安装 Visual Studio Community - C++

# 设置 NO_PROXY

如果有设置 HTTP_PROXYHTTPS_PROXY,记得同时设置 NO_PROXYlocalhost,127.0.0.1, ::1,不然可能本地开发的时候完全连不上其他设备/浏览器/模拟器。如果你也遇到了下面这个 Issue,记得检查有没有设置 NO_PROXY

WebSocketException: Connection to 'http://127.0.0.1:xxxxx/=xxxxxx/#' was not upgraded to websocket · Issue #96942 · flutter/flutter (opens new window)

# 重启!

2022 年了,大部分软件安装以后说是要重启,其实不需要重启。但是 Flutter 似乎是个例外。

我按照官方教程配好环境以后,直接报错:[web] FormatException: Unexpected end of input (at character 1) · Issue #54525 · flutter/flutter (opens new window)

上 GitHub 溜达一圈,有人提到重启以后就没了,我也试着重启了一下,果然就好了 = =

# 设置镜像

Flutter 居然有半官方、半社区的开发者网站,以及还有镜像。没有梯子,或者想节约流量的同学可以配一个。在中国网络环境下使用 Flutter | Flutter 中文文档 | Flutter 中文开发者网站 (opens new window)