Flutter环境配置

发表于 阅读次数：

想做个PC端工具，就来找一找简单易上手的跨平台GUI开发框架，其实最开始是直接准备看Electron，但查资料过程中，忽然发现Flutter今年发布的Flutter For Desktop已经进入稳定版本了，并且展示出来的效果，跨平台效果还不错，自然也就要再尝试尝试了。

本文操作环境为Windows 10，其中大部分内容均来源于官方网站和网络博客搜集。

目标

  1. 安装基本开发工具(Visual Studio Code)为主
  2. 配置好Windows桌面开发基础环境，有可以调试
  3. 配置好Android开发基础环境，并可以调试

内容

基本要求

引用自官方文档

  • 操作系统：Windows 7 SP1 或更高的版本（基于 x86-64 的 64 位操作系统）。
  • 磁盘空间：除安装 IDE 和一些工具之外还应有至少 1.64 GB 的空间。
  • 工具：要让 Flutter 在你的开发环境中正常使用，依赖于以下的工具：
    • Windows PowerShell 5.0 或者更高的版本（Windows 10 中已预装）
    • Git for Windows 2.x，并且勾选从 Windows 命令提示符使用 Git 选项。
    • 如果 Windows 版的 Git 已经安装过了，那么请确保能从命令提示符或者 PowerShell 中直接执行 git 命令。

获取Flutter SDK

  1. 根据意愿下载对应版本SDK包：Flutter SDK 版本列表
  2. 直接解压放到合适位置，比如笔者放在：C:\ProgramFiles\flutter
  3. 配置环境变量：在PATH环境变量中增加flutter中的bin，以笔者为例，将C:\ProgramFiles\flutter\bin追加到Path中。这里注意，Path中路径的先后顺序会影响执行时系统搜索的优先级，如果之前有配置过flutter，注意路径的顺序问题。
  4. 执行flutter doctor，查看当前缺失内容，下面示例，是笔者配置完成的提示，这里依次介绍对应内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
C:\Users\sinca>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.10.5, on Microsoft Windows [Version 10.0.19044.1645], 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.6)
[√] Android Studio (version 2021.1)
[√] VS Code (version 1.66.2)
[√] Proxy Configuration
[√] Connected device (3 available)
[√] HTTP Host Availability

• No issues found!

  • Flutter：flutter SDK是否配置合理，1-3步完成后即可

  • Android toolchain：Android编译链工具，当前google官方已不直接提供单独工具包，跟随Android Studio安装后管理下载配置

    这里在安装Android编译链之后会有一个同意协议的操作，执行flutter doctor --android-licenses按提示同意即可，下文会有说明

  • Visual Studio：用来提供Windows C++编译环境，用以开发调试Flutter For Destop(Windows)

  • Chrome：可选项，安装有Chrome后就会成功，用以调试Flutter For Web，如果用Edge也可以，只是这里会是叉叉。

  • Android Studio：官方推荐的Android For Android开发IDE，集成了其代码开发的所有工具，笔者准备使用vscode开发，所以这个不做重点，但同样需要安装Visual Studio之后，通过SDK管理器安装Android编译工具链，否则无法通过flutter对安卓真机进行USB调试。

  • VS Code：笔者采用的开发环境，与Android Studio二选一即可

  • Proxy Configuration：国内网络环境众所周知的原因，在访问google提供的内容时很可能网络不通，可以通过国内镜像的方式改善。但笔者怕麻烦，就直接配置了命令行代理，具体为，环境变量中增加两条自己预先各种渠道设置好的代理：

1
2
3
HTTP_PROXY=http://192.168.2.106:1081
HTTPS_PROXY=http://192.168.2.106:1081
NO_PROXY=localhost,127.0.0.1,192.168.*
  • Connected device：已经连接的客户端，笔者当前没有连接手机，故只有三个设备（Edge，Chrome，Windows）
  • HTTP Host Availability：测试网络连通性（吐槽下google的开发工具，没有网络很多都是废物）

配置Android开发环境

  1. 下载并安装Android Studio，这里根据提示进行安装即可，安装完成后，再次运行flutter doctor，即可以看到对应选项已打勾
  2. 配置Google USB Driver，已经安装了Android Studio（后面简称AS），就可以使用AS进行安装，依次点击 Tools > SDK Manager > SDK Tools标签页 > 选中”Google USB Driver“ > OK
  3. 手机端配置USB调试（这里以小米手机为例）
    1. 设置 > 我的设备 > 全部参数 > 多次点击”MIUI版本”，即可开启”开启开发这选项“
    2. 设置 > 更多参数 > 开发者选项，打开”USB 调试“和”USB 安装“选项
    3. 手机通过USB数据线（注意这里是数据线，不能只是充电线），弹出”允许 USB调试吗“，勾选”一律允许…”，并确定，之后选择”USB用于” “文件传输
    4. PC端执行flutter doctor或flutter devices，则会发现，刚添加的手机已经在设备列表中了
  4. 安装完上述工具后，需要同意Android SDK平台协议。执行以下命令，仔细阅读协议后’Y’同意即可
1
flutter doctor --android-licenses

Windows编译环境

下载安装Visual Studio（Visual Studio不同于Visual Studio Code），其中安装时勾选”使用 C++ 的桌面开发“

Visual Studio Code安装配置

  1. 安装Visual Studio Code（以下简称vscode）
  2. 安装Flutter和Dart插件
    1. 运行vscode，扩展搜索输入框中输入”flutter“，然后在列表中选择 Flutter 并单击 Install。此过程中会自动安装必需的 Dart 插件。
    2. 点击 ”重新加载“ 以重新启动 VS Code。
  3. 快捷键Ctrl+Shift+P，输入并选择”Flutter: Run Flutter Doctor“，观察输出结果是否正常

创建应用程序

  1. 在目标目录下执行flutter create winfun随后用vscode，或直接在vscode中Ctrl+Shift+P输入并选择”Flutter: New Project” > Application，之后根据提示创建出目标工程
  2. 编译并执行应用程序

    1. VS Code 的右下角状态栏中有当前设备，可点击快速切换，以下图为例，当前为Windows设备

    2. 运行 Run > Start Debugging 或按下 F5。

    3. 等待应用启动，启动进度会在 Debug Console 中展示。如果当前设备时Android设备，注意Android设备上的提醒，及时点击同意或确认。

    4. Flutter支持热修改，启动后，修改代码报错会自动将修改热更新到目标设备。