Flutter开发环境配置（win10）

迈不过友情╰ 2022-11-10 14:59 339阅读 0赞

在 Windows 操作系统上安装和配置 Flutter 开发环境

### 目录 ###

*   *   *   *   *   *  系统配置要求
                     *  获取 Flutter SDK
                     *  path 环境变量
                     *  运行 flutter doctor
                     *  安装 Android Studio
                     *  配置 Android 设备
                     *  配置 Android 模拟器
                     *  Web 平台设置
                     *  安装 VS Code
                     *  安装 Flutter 和 Dart 插件
                     *  通过 Flutter Doctor 命令验证是否安装成功
                     *  安装 Emacs 编辑器

###### 系统配置要求 ######

*  操作系统：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.点击下方的安装包，获取 stable 发行通道的 Flutter SDK 最新版本：  
[flutter\_windows\_2.0.2-stable.zip][flutter_windows_2.0.2-stable.zip]  
要查看其他发行通道和以往的版本，请参阅 [SDK 版本列表][SDK] 页面。  
2.将压缩包解压，然后把其中的 `flutter` 目录整个放在你想放置 Flutter SDK 的路径中（例如 `C:\src\flutter`）。  
请注意  
请勿将 Flutter 安装在需要高权限的文件夹内，例如 `C:\Program Files\`  
如果你不想安装指定版本的安装包。可以忽略步骤 1 和 2。从 GitHub 上的 [Flutter repo][] 获取源代码，并根据需要，切换到指定的分支或标签。例如：

C:\src>git clone https://github.com/flutter/flutter.git -b stable

现在你可以在控制台当中使用 Flutter 的命令了

###### path 环境变量 ######

系统变量中新建：

PUB_HOSTED_URL ： https://pub.flutter-io.cn

新建：

FLUTTER_STORAGE_BASE_URL： https://storage.flutter-io.cn

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3NjE0Ng_size_16_color_FFFFFF_t_70]  
PATH变量中增加:到`flutter/bin`路径  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3NjE0Ng_size_16_color_FFFFFF_t_70 1]

###### 运行 flutter doctor ######

在CMD中执行`flutter doctor`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3NjE0Ng_size_16_color_FFFFFF_t_70 2]

以上显示内容可以看到显示`Android Studio未安装`；`找不到Android SDK`;`找不到chrome`；

###### 安装 Android Studio ######

1.下载并安装 [Android Studio][]，[Android Studio国内镜像][Android Studio 1]  
2.运行 Android Studio，并进入 ‘Android Studio Setup Wizard’，这会安装最新的 Android SDK， Android SDK Platform-Tools 以及 Android SDK Build-Tools，这些都是在开发 Android Flutter 应用时所需要的

###### 配置 Android 设备 ######

在 Android 设备上运行或测试 Flutter 应用之前，你需要一个运行 Android 4.1（API 版本 16）或者更高的设备  
1.在设备上打开 Developer options 和 USB debugging 选项，你可以在 [Android documentation][] 上查看更详细的方法介绍。  
2.如果是在 Windows 平台上使用，需要安装 [Google USB Driver][]  
3.通过 USB 接口连接手机和电脑，如果在设备上弹出需要授权弹窗，允许授权以便让电脑能够访问你的开发设备。  
4.在命令行中，使用 `flutter devices` 命令来确保 Flutter 能够识别出你所连接的 Android 设备。  
默认情况下，Flutter 会使用当前版本 `adb` 工具所依赖的 Android SDK 版本，如果你想让 Flutter 使用别的 Android SDK，你可以通过设置 `ANDROID_HOME` 环境变量来达到这个目的

###### 配置 Android 模拟器 ######

根据以下步骤来将 Flutter 应用运行或测试于你的 Android 模拟器上：  
1.激活机器上的 [VM acceleration][] 选项。  
2.打开 Android Studio，点击 AVD Manager 按钮，选择 Create Virtual Device…

*  在一些旧的 Android Studio 版本里，需要通过 Android Studio > Tools > Android > AVD Manager，然后选择 Create Virtual Device 选项。（只有在 Android 项目中才会显示 Android 子选项。）
 *  如果你以及还没打开某个项目，你可以选择 Configure > AVD Manager 然后选择 Create Virtual Device 选项  
    3.选择相应的设备并选择 Next 选项。  
    4.选择一个或多个你想要模拟的 Android 版本的系统镜像，然后选择 Next 选项。推荐选择 x86 或者 x86\_64 镜像。  
    5.在 Emulated Performance 下选择 Hardware - GLES 2.0 选项来开启 [硬件加速][VM acceleration]。  
    6.确保 AVD 选项配置正确，并选择 Finish 选项。  
    想要查看上述步骤的更多详细信息，请查看 [Managing AVDs][] 页面。  
    7.在 Android Virtual Device Manager 中，点击工具栏中的 Run 选项，模拟器会启动并为你所选择的系统版本和设备显示出相应的界面。

###### Web 平台设置 ######

Flutter 现已在 `stable` 渠道支持构建 Web 应用。使用 Flutter 2 构建的应用会自动支持 Web 渠道，如果你需要为现有的应用加入 Web 支持，请阅读文档 [使用 Flutter 构建 Web 应用][Flutter _ Web]

###### 安装 VS Code ######

VS Code 是一个可以运行和调试 Flutter 的轻量级编辑器。

*  [VS Code][]，最新稳定版本

###### 安装 Flutter 和 Dart 插件 ######

1.打开 VS Code  
2.打开 查看 > 命令面板…  
3.输入 “install”，然后选择 扩展: 安装扩展。  
4.在扩展搜索输入框中输入 “flutter”，然后在列表中选择 Flutter 并单击 安装。此过程中会自动安装必需的 Dart 插件  
5.点击 重新加载 以重新启动 VS Code

###### 通过 Flutter Doctor 命令验证是否安装成功 ######

1.打开 查看 > 命令面板…  
2.输入 “doctor”，选择 Flutter: Run Flutter Doctor  
3.打开 输出 (OUTPUT) 面板查看是否有错误，确保在不同的输出选项 (Output Options) 的下拉列表中选择了 Flutter

###### 安装 Emacs 编辑器 ######

Emacs 是一个轻量级的编辑器，支持 Flutter 和 Dart  
最新版本的 [Emacs 编辑器][Emacs]  
安装 lsp-dart 包  
关于如何安装和使用 lsp-dart 包，可以查看 [lsp-dart 文档][lsp-dart]

[Windows PowerShell 5.0]: https://docs.microsoft.com/en-us/powershell/scripting/install/installing-windows-powershell
[Git for Windows 2.x]: https://git-scm.com/download/win
[flutter_windows_2.0.2-stable.zip]: https://storage.flutter-io.cn/flutter_infra/releases/stable/windows/flutter_windows_2.0.2-stable.zip
[SDK]: https://flutter.cn/docs/development/tools/sdk/releases
[Flutter repo]: https://github.com/flutter/flutter
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3NjE0Ng_size_16_color_FFFFFF_t_70]: /images/20221022/d356f684ef6d44ff9cb9fc225d50ed9a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3NjE0Ng_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210319092539767.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3NjE0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3NjE0Ng_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210319093534197.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3NjE0Ng==,size_16,color_FFFFFF,t_70
[Android Studio]: https://developer.android.google.cn/studio
[Android Studio 1]: https://developer.android.google.cn/studio/
[Android documentation]: https://developer.android.google.cn/studio/debug/dev-options
[Google USB Driver]: https://developer.android.google.cn/studio/run/win-usb
[VM acceleration]: https://developer.android.google.cn/studio/run/emulator-acceleration
[Managing AVDs]: https://developer.android.google.cn/studio/run/managing-avds
[Flutter _ Web]: https://flutter.cn/docs/get-started/web
[VS Code]: https://code.visualstudio.com/
[Emacs]: https://www.gnu.org/software/emacs/download.html
[lsp-dart]: https://emacs-lsp.github.io/lsp-dart/