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

发布于：2025-09-04 ⋅ 阅读:(21) ⋅ 点赞:(0)

一，准备工作

  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

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

      网站公告

      今日签到

      点亮在社区的每一天
      去签到

      热门文章

      最新发布