Flutter 开发环境配置指南 Windows/Mac

一、配置 Flutter 开发环境（mac/windows）

• 下载 Flutter SDK
• 配置环境变量
• 诊断 flutter 环境

1.1 SDK 下载方式一：

前提你的电脑中已经安装 Git 管理工具

git clone https://github.com/flutter/flutter.git

注意：务必将 flutter 包下载到英文目录下

1.2 SDK 下载方式二：

官网下载，国内下载网站：

归档列表 | Flutter 中文文档 - Flutter 中文开发者网站 - Flutter

选择自己电脑系统对应的版本下载即可：

注：下载完成后解压文件

二、配置环境变量-mac

1. 检查 mac 环境变量生效文件

echo $SHELL

如果显示/bin/zsh 说明.zshrc 是配置文件，如果是/bin/bash 说明.bash_profile 是配置文件

2. 找到根目录的隐藏文件.zshrc 或.bash_profile

3. 打开并配置如下环境变量

export PUB_HOSTED_URL="https://pub.flutter-io.cn"
export FLUTTER_STORAGE_BASE_URL="https://storage.flutter-io.cn"
export PATH="/your/path/flutter/bin:$PATH"

4. 执行命令让配置生效

source ~/.zshrc
# 或者 source ~/.bash_profile

三、配置环境变量-windows

1. 拷贝 windows 的 flutter 目录下的 bin 完整路径

F:\Chengxusheji\Flutter\flutter\bin

2. 右键点击此电脑，点击属性，再点击高级系统设置，最后点击环境变量；

3. 在 path 路径中添加之前拷贝的 bin 路径

4. 添加两个环境变量 PUB_HOSTED_URL 和 FLUTTER_STORAGE_BASE_URL

PUB_HOSTED_URL

https://pub.flutter-io.cn

FLUTTER_STORAGE_BASE_URL

https://storage.flutter-io.cn

配置完成后，一直点击确定：

四、检查环境-windows/mac

windows/mac 指令一样

1. 检查 flutter 版本

flutter --version

mac 显示如下：

windows 显示如下：

2. 诊断 flutter 环境

flutter doctor -v

mac 显示如下：

windows 显示如下：

五、创建 Flutter 项目

1. 使用命令创建 Flutter 工程 (web)

flutter create --platforms web <项目名称>

flutter create --platforms web flutter_base

2. 进入你将来要保存 Flutter 文件的文件夹内，输入 cmd，接着点击 Enter：

六、安装运行插件

在 VSCode 或其他软件插件市场搜索两个插件进行下载：

• Flutter
• Awesome Flutter Snippets

七、安装 Chrome 浏览器

推荐安装 Chrome 浏览器 - 软件包

其他浏览器也可以例如：

等；

八、打开项目

这里可以用 Trae 或 VSCode 打开：

九、运行 Flutter 项目

打开 lib/main.dart 文件

运行成功如图所示。 完成上述步骤后，即可开始 Flutter 开发。