在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应用了

相关推荐
emojiwoo7 分钟前
【前端基础知识系列六】React 项目基本框架及常见文件夹作用总结(图文版)
前端·react.js·前端框架
张人玉1 小时前
XML 序列化与操作详解笔记
xml·前端·笔记
杨荧1 小时前
基于Python的宠物服务管理系统 Python+Django+Vue.js
大数据·前端·vue.js·爬虫·python·信息可视化
YeeWang2 小时前
🎉 Eficy 让你的 Cherry Studio 直接生成可预览的 React 页面
前端·javascript
gnip2 小时前
Jenkins部署前端项目实战方案
前端·javascript·架构
Orange3015112 小时前
《深入源码理解webpack构建流程》
前端·javascript·webpack·typescript·node.js·es6
lovepenny2 小时前
Failed to resolve entry for package "js-demo-tools". The package may have ......
前端·npm
超凌2 小时前
threejs 创建了10w条THREE.Line,销毁数据,等待了10秒
前端
车厘小团子3 小时前
🎨 前端多主题最佳实践:用 Less Map + generate-css 打造自动化主题系统
前端·架构·less
江上清风山间明月3 小时前
Flutter AlwaysScrollableScrollPhysics详解
flutter·滚动·scrollable·scrollphysics