Flutter环境搭建全攻略之-Macos环境搭建

一,准备工作

  1. 升级Macos系统为最新系统
  2. 安装最新的Xcode
  3. 电脑上面需要安装brew 下载地址:https//brew.sh/
  4. 安装chrome浏览器(开发we用)

二,下载Flutter、配置Flutter环境变量、配置Flutter镜像

下载Flutter SDK

在中国网络环境下使用 Flutter | Flutter 中文文档 - Flutter 中文开发者网站 - Flutter如何中国使用、访问和了解 Flutter。https://docs.flutter.cn/community/china/#download-flutter-archives-based-on-a-mirror-site

Make iOS apps | FlutterConfigure your system to develop Flutter mobile apps on macOS and iOS.https://docs.flutter.dev/get-started/install/macos/mobile-ios#install-the-flutter-sdk

中文版下载需要息通过URL镜像下载

英文版,根据自己的电脑芯片选择下载对应的版全,点击按扭直接下载.

控制台输入 uname -a 查看电脑芯片

输出为 arm64则下载 arm64版本的sdk

下载完成后,解压 并 配置环境变量

-- 把下载的压缩包解压到一个合适的位置,比如:

/Users/a77/Documents/flutter_sdk/flutter

-- 下面再去配置环境变量

把Flutter安装目录的bin目录配置到环境变量,然后把Flutter国内镜像也配置到环境变量里面

vim ~/bash_profile 或 vim ~/.zshrc

如果不知道自己该打开哪个配置,在终端运行 echo $SHELL

如果显示 /bin/zsh → 主要配置 .zshrc

如果显示 /bin/bash → 主要配置 .bash_profile

然后在终端输入 vim ~/.zshrc ,之后会打开环境变量编辑界面,在键盘处输入i,进入编辑模式,把刚刚下载的flutterSDK配置进来

如果中国地区还需要配置镜像站点

export PUB_HOSTED_URL=https://pub.flutter-io.cn

export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

这两行也要配到环境变量中

然后再按 ESC → 输入 :wq(保存交退出) → 按 Enter 退出

如果退出失败可以

方法1:强制退出

按住 Ctrl + C,然后直接输入::qa!

方法2:如果还是不行

直接按 Cmd + W 关闭这个终端标签页,vim 会自动退出

方法3:新开终端强制结束

按 Cmd + T 新开一个终端标签

输入:pkill vim

回到原来的标签,应该已经退出了

完成上面步骤后运行 sourc ~/.zshrc 让配置生效

然后输入 flutter doctor 检查flutter SDK是否配置成功,如果没有提示 flutter不是内置命令就说明配置成功了,

第一次运行 flutter doctor 的时候会提示错误信息,这些错误信息可以暂时忽略。

如果没有 Xcode.app

方法一:App Store 安装(推荐)

  1. 打开 App Store
  2. 搜索 "Xcode"
  3. 点击安装(大约 10-15GB,需要一些时间)

方法二:开发者网站下载

访问:Xcode - Apple Developerhttps://developer.apple.com/xcode/

安装,安装成功后,Xcode的报错就只剩一个提示需要安装CocoaPods了

下面在终端输入brew install cocoapods 开始安装 cocoapods

如果没有安装brew 需要去brew的官网Homebrew --- The Missing Package Manager for macOS (or Linux)The Missing Package Manager for macOS (or Linux).https://brew.sh/查看安装方法

安装完成后再执行 pod setup 让 CocoaPods生效

再输入 flutter doctor 检查安装情况,CocoaPods未安装的提示就没有了,现在提示模拟器还有点问题。

修复 Xcode 模拟器问题

查看当前设置的开发者目录

xcode-select -p

根据输出构建正确的应用路径

/Applications/Xcode16.3.app/Contents/Developer 可以知道:

Xcode 应用位置:/Applications/Xcode16.3.app

打开 Xcode

在终端输入:open /Applications/Xcode16.3.app 这样就打开 xcode了

点击 "Create New Project..." 创建一个测试项目来触发完整初始化,进行模拟器装


各平台说明:
Multiplatform - 跨平台应用(一个项目支持多个平台)
iOS - iPhone 和 iPad 应用开发

  • 最常用的移动应用平台
  • Flutter 主要目标平台之一

macOS - Mac 电脑应用开发

  • 桌面应用开发
  • 通常已预装,因为你在 Mac 上

watchOS - Apple Watch 应用开发

  • 智能手表应用
  • 需要专门的 Watch 开发知识

tvOS - Apple TV 应用开发

  • 电视应用和游戏
  • 相对小众的平台

visionOS - Apple Vision Pro(VR/AR头显)应用开发

  • 最新的平台,2024年发布
  • 需要特殊的空间计算开发技能

DriverKit- 系统驱动程序开发

  • 硬件驱动开发
  • 高级系统级编程

Other - 其他特殊项目类型

为什么有些需要"Get":
需要下载的情况:

平台的 SDK 和模拟器运行时没有安装
通常是较新版本或不常用的平台

不需要下载的情况:

已经安装了该平台的开发工具
macOS 通常预装在 Mac 上

对于 Flutter 开发:

主要需要关注 iOS 标签页,点击它的 "Get" 按钮下载 iOS 模拟器即可。其他平台除非有特殊需求,否则暂时不必安装。

get下载安装(这个过程有点久)完成后,再在终端输入flutter doctor验证环境,就可以看到xcode环境已经安装好了

现在可以在Mac上面创建Flutter Ios项目了,在终端执行 flutter create myproject

执行完成后,可以看到生成了工程目录flutterdemo已经有初始代码了。

创建完成后,cd .. 回到上一层目录,然后输入 ls -la myproject验证目录的权限,说明我的帐户a77有了所有权限

权限正确后,就可以在xcode中打开项目了,找到工程中的ios/Runner.xcworkspace这个文件,双击就可以在xcode中打开了。

运行后可以选择一个模拟器的版本

选择模拟器后,点击运行,就可以预览项目了

现在运行起来了,再来看如何开发项目,开发项目我们在vscode中开发,首先需要安装vscode(此步骤自行安装)

安装好打开vscode并在vscode中打开项目

打开项目的根目录

如果要在vscode中开发还需要安装对应的插件,Awesome Flutter Snippets 和 Flutter Widget Snippets这两个可以同时安装两个扩展,它们各有侧重,不会冲突:

  • Awesome Flutter Snippets 用于项目结构
  • Flutter Widget Snippets 用于 UI 组件

Awesome Flutter Snippets:

  • 更注重项目结构和基础框架
  • 适合快速搭建应用骨架
  • 下载量更高,社区认可度高

Flutter Widget Snippets:

  • 更注重具体 Widget 的使用
  • 适合快速添加 UI 组件
  • 在 Widget 构建时更有用

还需要安装Dart语法支持

这样的话,就配置好了,我们先把之前打开的xcode关闭,然后在vscode终端执行 flutter run 命令,之后出现两个模拟器选择,我们选其中一个,比如选择 1

下面还有提示

可用的开发命令:

  • r - 热重载(最常用)
  • R - 热重启
  • h - 显示所有命令
  • d - 分离模式(后台运行)
  • c - 清屏
  • q - 退出应用

在vscode中如果桌面模拟器 如果有修改,输入 小写的 r 热重载不生效,就试试大写的R 热重启,macOS 平台的热重载确实存在一些限制。网页版开发小写的r热重载是生效的。亲测。

我们再试试编译成web的效果,执行flutter run 之后选择 2

下面是网页效果

上面我们只解决了在mac系统上开发ios平台的软件,下面再支持Android 开发 :还需要 Android Studio和 Android SDK 同样执行 flutter doctor 可以看到目前是不支持安卓开发的

现在安装 Android Studio

在终端执行 brew install --cask android-studio

执行完成后,可以看到 android studio安装成功了

最后再解决Android SDK 还未配置问题

1. 启动 Android Studio 进行初始化

打开Android Studio
1,命令行打开

open -a "Android Studio"

2,或者从 Applications 文件夹双击 Android Studio打开

选择:Standard(标准)

等待下载完成,选择**"Accept"** (接受协议)再点击 "Next" 继续

左边的下载项全部下载完后,可以点Next了

等待下载继续完成,根据网络速度,整个过程大约需要 10-15 分钟,

之后再点 Next 下一步


完成后的验证:flutter doctor

还在提示
缺少命令行工具 :cmdline-tools component
许可协议未接受 :需要接受 Android 许可

继续解决这两个问题

在上面打开的Android Studio界面中 点击中间的 "More Actions" 下拉菜单,然后选择 "SDK Manager"

切换到 SDK Tools 标签

点击顶部的 "SDK Tools" 标签(在 "SDK Platforms" 旁边)

在 SDK Tools 中找到并勾选:

  • Android SDK Command-line Tools (latest)
  • Android SDK Build-Tools(如果未安装)

点击 Apply 安装

弹窗提示要安装 Android SDK Command-line Tools (latest) v.19.0

点击蓝色的 "OK" 按钮开始下载和安装

安装完成后:

  1. 关闭 Android Studio
  2. 重新加载终端环境
    source ~/.zshrc

验证完整环境 flutter doctor

提示需要 接受 Android 许可协议

再执行 flutter doctor --android-licenses 接受 Android 许可协议

这会显示一系列许可协议,每个都需要输入 y 接受

最终验证 flutter doctor

就已经完成了环境的安装了。

相关推荐
农夫三拳_有点甜9 小时前
Flutter Expanded 组件总结
flutter
xingxing_F10 小时前
SoundSource for Mac 音频控制工具
macos·音视频
snows_l10 小时前
MacOS 通过Homebrew 安装nvm
前端·macos
西京刀客10 小时前
macos安装openjdk17
java·macos·java17
火柴就是我10 小时前
跟着官方demo 学flame 之 word 坐标系以及Camera的一些属性
flutter
@Dai10 小时前
MacOS微信双开,亲测有效
macos·微信
新镜11 小时前
【Flutter】drag_select_grid_view: ^0.6.2 使用
flutter
程序员老刘11 小时前
Google突然“变脸“,2026年要给全球开发者上“紧箍咒“?
android·flutter·客户端
库奇噜啦呼11 小时前
【iOS】懒加载
macos·objective-c·cocoa