在macOS上安装Flutter和环境配置

操作系统

Flutter 支持在 macOS 11 (Big Sur) 或更高版本上开发。本指南假定你的 Mac 默认运行 zsh shell。

如果你的 Mac 是 Apple silicon 处理器,那么有些 Flutter 组件就需要通过 Rosetta 2 来转换适配(详情)。要在 Apple silicon 处理器上运行所有 Flutter 组件,请运行以下指令来安装 Rosetta 2。

bash 复制代码
sudo softwareupdate --install-rosetta --agree-to-license

开发工具

下载并安装以下软件包。
Xcode 16+ 调试和编译原生 Swift 或 ObjectiveC 代码。 Xcode 的安装包括 Git 2.27 或更高版本来管理源代码。
CocoaPods 1.16+ 将 Flutter 插件应用于原生应用。

编辑器

使用官方推荐的 Visual Studio Code 1.77+ 并搭配 Flutter extension for VS Code。这样搭配可以简化 Flutter SDK 的安装。

使用VS Code 安装 Flutte

1.启动 VS Code。

2.打开 命令面板 (Command Palette),按下快捷键 Command + Shift + P。

3.在 命令面板 (Command Palette) 中输入 flutter,然后选择 Flutter: New Project。

4.VS Code 会提示你在计算机上找到 Flutter SDK。

复制代码
如果你已经安装 Flutter SDK,请单击 Locate SDK。

如果你没有安装 Flutter SDK, 请单击 Download SDK。

如果你没有按照 开发工具的必要条件 安装 Git ,单击该按钮后会导航至 Flutter 安装页面。

5.在上述的提示中选择"Download SDK",当对话框 Select Folder for Flutter SDK 显示时,选择你想要安装 Flutter 的位置。VS Code 会打开你默认的位置,你可以选择其他位置。

6.Flutter 安装成功后,VS Code 可能会弹出该通知提醒你配置环境变量,根据操作执行就行:"Do you want to add the Flutter SDK to PATH so it's accessible in external terminals?"

7.如果Flutter 安装成功后没有弹出步骤6的提示(例如我),可手动配置环境变量。打开访达,菜单栏选择前往>前往文件夹 输入~(!注意是英文的)然后回车,找到.zshrc文件打开添加一下子配置:

bash 复制代码
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH="/你存放FlutterSDK的位置/flutter/bin:$PATH"

保存并关闭。

8.打开Terminal,运行source ~/.zshrc; 然后关闭所有 Terminal 窗口,重新启动 VS Code。

9.运行flutter doctor检查是否安装完成。

* 安装cocoapods

使用以下命令安装cocoapods,如果已安装可以跳过这步。

bash 复制代码
推荐使用homebrew安装:
1. brew install cocoapods
2. brew cleanup cocoapods
3. brew link cocoapods
or
sudo gem install cocoapods
or
sudo gem install -n /usr/local/bin cocoapods

接下来就可以编写第一个Flutter应用了

相关推荐
拿不拿铁191 小时前
Vite 5.x 开发模式启动流程分析
前端
fruge1 小时前
设计稿还原技巧:解决间距、阴影、字体适配的细节问题
前端·css
BBB努力学习程序设计1 小时前
了解响应式Web设计:viewport网页可视区域
前端·html
zhangyao9403301 小时前
uni-app scroll-view特定情况下运用
前端·javascript·uni-app
码农张1 小时前
从原理到实践,吃透 Lit 响应式系统的核心逻辑
前端
jump6801 小时前
object和map 和 WeakMap 的区别
前端
打小就很皮...1 小时前
基于 Dify 实现 AI 流式对话:组件设计思路(React)
前端·react.js·dify·流式对话
这个昵称也不能用吗?2 小时前
【安卓 - 小组件 - app进程与桌面进程】
前端
gcygeeker2 小时前
解决 Mac 迁移数据后用户目录无权限问题
macos
kuilaurence2 小时前
CSS `border-image` 给文字加可拉伸边框
前端·css