【2025最新】Flutter开发环境配置全攻略Windows/Mac【Flutter必备】

【2025最新】Flutter开发环境配置全攻略Windows/Mac【Flutter必备】

一、配置Flutter开发环境(mac/windows)

● 下载Flutter SDK

● 配置环境变量

● 诊断flutter环境

1.1 SDK下载方式1:

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

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

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

1.2 SDK下载方式二:

官网下载,国内下载网站:

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

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

1.3 SDK下载方式三(推荐):

直接从我百度网盘中资料下载即可:

通过网盘分享的文件:Flutter安装
链接: https://pan.baidu.***/s/10mq83VaPQDNrDMITeT2ovA 提取码: 1234 
--来自百度网盘超级会员v1的分享

下载完成后解压文件

下述配置环境变量我以方式三下载的文件为例:

二、配置环境变量-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.***"
​
export FLUTTER_STORAGE_BASE_URL = "https://storage.flutter-io.***"
​
export 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_URLFLUTTER_STORAGE_BASE_URL

PUB_HOSTED_URL
https://pub.flutter-io.***
FLUTTER_STORAGE_BASE_URL
https://storage.flutter-io.***

配置完成后,一直点击确定:

四、检查环境-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 文件

运行成功如图所示

转载请说明出处内容投诉
CSS教程网 » 【2025最新】Flutter开发环境配置全攻略Windows/Mac【Flutter必备】

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买