开始在 macOS 上构建 Flutter iOS 应用
系统要求
#在安装和运行 Flutter 前,你的 macOS 环境必须满足以下要求:
硬件要求
#你的 macOS Flutter 开发环境必须满足以下最低硬件要求。
4 | 8 | |
8 | 16 | |
WXGA (1366 x 768) | FHD (1920 x 1080) | |
44.0 | 70.0 |
软件要求
#要为 iOS 编写和编译 Flutter 代码,请安装以下软件包。
操作系统
#Flutter 支持在 macOS 11 (Big Sur) 或更高版本上开发。本指南假定你的 Mac 默认运行 zsh
shell。
如果需要验证 shell 的配置,请点击展开此部分
macOS 与大多数「类 UNIX」操作系统一样,
macOS 可以支持多种 shell,如 bash
、zsh
和 sh
。从 2019 年 10 月发布的 macOS Catalina (macOS 10.15) 开始,
Zsh 或 zsh
成为了 macOS 的默认 shell。
检查并将 zsh
设置为默认
#
-
请运行 目录服务命令行程序 来验证
zsh
是否被设置为 macOS 的默认 shell。dscl . -read ~/ UserShell
该命令应该会打印以下内容。
UserShell: /bin/zsh
如果确认为默认,你可以跳过剩余的步骤。
-
如果需要安装
zsh
,请按照 Wiki 中的步骤进行操作。 -
如果需要将默认的 shell 更改为
zsh
,请运行chsh
命令。chsh -s `which zsh`
如果需要了解更多关于 macOS 和 zsh
的信息,请查阅 macOS 文档中的 在 Mac 上使用 zsh 作为默认 shell。
如果你的 Mac 是 Apple silicon 处理器,那么有些 Flutter 组件就需要通过 Rosetta 2 来转换适配(详情)。要在 Apple silicon 处理器上运行所有 Flutter 组件,请运行以下指令来安装 Rosetta 2。
sudo softwareupdate --install-rosetta --agree-to-license
开发工具
#下载并安装以下软件包。
- Xcode 15 调试和编译原生 Swift 或 ObjectiveC 代码。 Xcode 的安装包括 Git 2.27 或更高版本来管理源代码。
- CocoaPods 1.16 将 Flutter 插件应用于原生应用。
上述软件的开发商为这些产品提供支持。如果需要排除安装的问题,请查阅该产品的文档。
当你在当前版本运行 flutter doctor
的时候,它可能会列出这些软件包的其他不同版本。如果出现这种情况,请安装它推荐的版本。
文本编辑器或集成开发环境 (IDE)
#你可以使用任意文本编辑器或集成开发环境 (IDE),并结合 Flutter 的命令行工具,来使用 Flutter 构建应用程序。
使用带有 Flutter 扩展或插件的 IDE 会提供代码自动补全、语法高亮、widget 编写辅助、调试以及其他功能。
以下是热门的扩展插件:
-
Visual Studio Code 1.77 或更高版本使用 Flutter extension for VS Code。
-
Android Studio 2023.3.1 (Jellyfish) 或更高版本使用 Flutter plugin for IntelliJ。
-
IntelliJ IDEA 2023.3 或更高版本使用 Flutter plugin for IntelliJ 和 Android plugin for IntelliJ。
安装 Flutter SDK
#你可以使用 VS Code Flutter 扩展或自行下载安装 Flutter 压缩包,来安装 Flutter SDK。
使用 VS Code 安装 Flutter
#在使用以下流程来安装 Flutter 前,请确保你已经安装 Visual Studio Code 1.77 或更高版本,以及 Flutter extension for VS Code。
根据 VS Code 的提示,安装 Flutter
#-
启动 VS Code。
-
打开 命令面板 (Command Palette),按下快捷键 Command + Shift + P。
-
在 命令面板 (Command Palette) 中输入
flutter
。 -
选择 Flutter: New Project。
-
VS Code 会提示你在计算机上找到 Flutter SDK。
-
如果你已经安装 Flutter SDK,请单击 Locate SDK。
-
如果你没有安装 Flutter SDK, 请单击 Download SDK。
如果你没有按照 开发工具的必要条件 安装 Git ,单击该按钮后会导航至 Flutter 安装页面。
-
-
当提示 Which Flutter template? 的时候,请忽略它。可以按下 Esc。你可以在检查完开发配置后创建初始测试项目。
下载 Flutter SDK
#-
当对话框 Select Folder for Flutter SDK 显示时,选择你想要安装 Flutter 的位置。
VS Code 会打开你默认的位置。你可以选择其他位置。
请考虑
~/development/
这样的位置 -
单击 Clone Flutter。
在下载 Flutter 时,VS Code 会弹出该通知:
Downloading the Flutter SDK. This may take a few minutes.
下载需要一些时间。如果你怀疑下载被挂起,请单击 Cancel 取消下载后,再重新尝试安装。
-
Flutter 一旦完成下载, 输出 (Output) 面板就会显示。
Checking Dart SDK version... Downloading Dart SDK from the Flutter engine ... Expanding downloaded archive...
成功后,VS Code 会弹出该通知:
Initializing the Flutter SDK. This may take a few minutes.
初始化时,输出 (Output) 面板会显示下面的内容:
Building flutter tool... Running pub upgrade... Resolving dependencies... Got dependencies. Downloading Material fonts... Downloading Gradle Wrapper... Downloading package sky_engine... Downloading flutter_patched_sdk tools... Downloading flutter_patched_sdk_product tools... Downloading windows-x64 tools... Downloading windows-x64/font-subset tools...
该进程还会运行
flutter doctor -v
。此时,请忽略该输出。因为 Flutter Doctor 可能会显示与本次快速启动无关的错误。Flutter 安装成功后,VS Code 会弹出该通知:
Do you want to add the Flutter SDK to PATH so it's accessible in external terminals?
-
VS Code 可能会显示一则 Google Analytics 的通知。
如果你同意,请单击 OK。
-
在所有 Terminal 窗口中启用
flutter
:-
关闭,然后重新打开所有 Terminal 窗口。
-
重新启动 VS Code。
-
下载并安装 Flutter
#从归档列表中下载 Flutter SDK 压缩包,将压缩包移动到你想要的位置,然后解压 SDK,以此来安装 Flutter。
-
下载以下 Flutter SDK 最新 stable 版本的压缩包。
Intel 处理器 Apple Silicon 处理器 (loading...) (loading...) 关于其他发布渠道和旧版本,请查阅 Flutter SDK 归档列表。
Flutter SDK 应该会下载至 macOS 默认下载目录:
~/Downloads/
。 -
创建一个文件夹,用于安装 Flutter。
可以考虑在
~/development/
中创建一个目录。 -
将 Flutter SDK 压缩文件 (zip) 解压到你想要存储的目录中。可以使用以下指令进行解压。
unzip ~/Downloads/flutter_sdk_v1.0.0.zip \ -d ~/development/
完成后,Flutter SDK 应该会位于
~/development/flutter
目录中。
将 Flutter 添加至 PATH
#
要在 Terminal 中运行 Flutter 命令,请将 Flutter 添加到 PATH
环境变量中。本指南假定你的 Mac 运行的是最新的默认 shell,zsh
。
Zsh 使用 .zshenv
文件来处理 环境变量。
-
启动你喜欢的文本编辑器。
-
如果
~/.zshenv
文件存在,请在文本编辑器中打开 Zsh 环境变量文件~/.zshenv
。如果不存在,请创建~/.zshenv
。 -
复制以下内容并粘贴到
~/.zshenv
文件内的末尾。bashexport PATH=$HOME/development/flutter/bin:$PATH
-
保存
~/.zshenv
文件。 -
请重新启动所有打开的终端会话窗口,来应用此更改。
如果你使用其他 shell,请查阅 设置 PATH 的教程。
配置 iOS 开发
#安装并配置 Xcode
#要为 iOS 开发 Flutter 应用,请安装 Xcode,以便编译为原生字节码。
-
打开 App Store 并登录。
-
搜索
Xcode
。 -
点击 获取 (Install)。
Xcode 安装程序占用 6 GB 以上的存储空间。下载可能需要一些时间。
-
请运行以下命令,来配置命令行工具使用已安装的 Xcode 版本。
sudo sh -c 'xcode-select -s /Applications/Xcode.app/Contents/Developer && xcodebuild -runFirstLaunch'
使用以上路径可以获取最新版本的 Xcode。如果你需要使用其他版本,请自行指定该路径。
-
签署 Xcode 许可证协议。
sudo xcodebuild -license
请尽量使用最新版本的 Xcode。
配置目标 iOS 设备
#通过使用 Xcode,你可以在 iOS 真机设备或模拟器上运行 Flutter 应用。
配置 iOS 模拟器
#请按照以下步骤操作,来准备在 iOS 模拟器上运行和测试 Flutter 应用。
-
请运行以下命令,来安装 iOS 模拟器。
xcodebuild -downloadPlatform iOS
-
请运行以下命令,来启动模拟器:
open -a Simulator
-
使用 64 位模拟器设备(涵盖 iPhone 5s 或更高版本)。
-
从 Xcode 中选择模拟器设备类型。
-
打开 Window > Devices and Simulators。
你还可以使用快捷键:Cmd + Shift + 2
-
打开 Devices and Simulators 对话框后,单击 Simulators。
-
从左侧列表中选择一个 Simulator,或按 + 创建一个新的模拟器。
-
-
从 Simulator 应用中,打开 File > Open Simulator > 选择目标 iOS 设备。
-
在模拟器中检查设备版本,打开 Settings 应用 > General > About。
-
-
模拟的高分辨率 iOS 设备可能会溢出你的屏幕。如果在你的 Mac 上出现这种情况,请在 Simulator 应用中更改显示尺寸。
显示尺寸 菜单项 快捷键 小尺寸(与真机相同的物理尺寸) Window > Physical Size Cmd + 1 适中 Window > Point Accurate Cmd + 2 HD 高分辨率(与真机相同的像素尺寸) Window > Pixel Accurate Cmd + 3 适应屏幕 Window > Fit Screen Cmd + 4
配置目标 iOS 设备
#你需要执行以下操作,将 Flutter 应用程序部署到 iPhone 或 iPad 真机上:
-
创建一个 Apple Developer 账户。
-
在 Xcode 中配置真机设备部署。
-
创建开发配置文件 (Provisioning Profile),并自行签名证书 (Signing Certificate)。
-
如果你的应用程序使用 Flutter 插件,请安装第三方 CocoaPods 依赖管理器。
创建 Apple ID 和 Apple Developer 账户
#你可以暂时跳过这一步。实际上,你在准备向 App Store 发布应用之前,并不需要 Apple Developer 账户。
如果你只需要 测试 部署应用程序,请完成第 1 步后继续下一节。
-
如果你没有 Apple ID,请创建一个。
-
如果你未注册 Apple Developer program,请立即注册。
了解有关会员类型的更多信息,请查阅 选择会员资格。
将 iOS 真机连接到 Mac
#配置你的 iOS 真机连接到 Xcode。
-
将 iOS 设备连接到 Mac 的 USB 端口。
-
首次将 iOS 设备连接到 Mac 时,你的 iOS 设备会显示 信任这台电脑吗? 的对话框。
-
点击 信任。
-
出现提示时,解锁你的 iOS 设备。
在 iOS 16 或更高版本上启用开发者模式
#从 iOS 16 开始,Apple 要求你启用 开发者模式,以防止恶意软件。在部署到 iOS 16 或更高版本的设备之前,请启用开发者模式。
-
点击 设置 > 隐私与安全性 > 开发者模式。
-
将 开发者模式 切换为 打开。
-
点击 重新启动。
-
重新启动 iOS 设备后,解锁 iOS 设备。
-
当出现 打开开发者模式吗? 对话框时,点击 打开。
对话框会提示开发者模式会降低 iOS 设备的安全性。
-
解锁你的 iOS 设备。
启用开发者代码签名证书 (signing certificates)
#在部署到 iOS 真机前,你需要在 Mac 与 iOS 设备之间建立信任。这需要将签名的开发者证书加载到 iOS 设备上。在 Xcode 中签名应用程序,你需要创建一个开发者配置文件 (Provisioning Profile)。
请按照 Xcode 签名流程配置你的项目。
-
启动 Xcode。
-
使用 Apple ID 登录 Xcode。
-
打开 Xcode > Settings...
-
点击 Accounts。
-
点击 +。
-
选择 Apple ID 并点击 Continue。
-
出现提示时,请输入你的 Apple ID 和 Password。
-
关闭 Settings 对话框。
开发和测试支持任意 Apple ID。
-
-
打开 File > Open...
你还可以使用快捷键:Cmd + O
-
导航至 Flutter 项目目录。
-
打开项目中默认的 Xcode workspace:
ios/Runner.xcworkspace
。 -
在运行按钮右侧的设备下拉菜单中选择你要部署的 iOS 真机。
它应该出现在 iOS devices 标题下方。
-
在左侧导航面板的 Targets 下,选择 Runner。
-
在 Runner 设置窗内,点击 Signing & Capabilities。
-
选择顶部的 All。
-
选择 Automatically manage signing。
-
从 Team 下拉菜单中选择一个团队。
团队是在 Apple Developer Account 页面的 App Store Connect 创建的。如果你尚未创建团队,可以选择 个人团队 (personal team)。
Team 下拉菜单中会显示名为 你的名称 (Personal Team) 的选项。
选择团队后,Xcode 会执行以下工作。
-
创建并下载开发证书
-
将设备注册到你的账户
-
根据需要创建并下载配置文件 (Provisioning Profile)
-
如果在 Xcode 中自动签名失败,请检查项目的 General > Identity > Bundle Identifier 值是否唯一。
启用 Mac 和 iOS 设备之间的信任
#首次连接 iOS 真机时,为你的 Mac 和 iOS 设备上的开发证书启用信任。
当 设备连接到 Mac 时,你应该启用 iOS 对 Mac 的信任。
为 iOS 设备启用开发者证书
#在不同版本的 iOS 中,启用证书的方式也不尽相同。
-
打开 iOS 设备上的 设置。
-
点击 通用 > 设备管理。
-
点击你的证书切换为 启用。
-
打开 iOS 设备上的 设置。
-
点击 通用 > VPN 与设备管理。
-
点击你的证书切换为 启用。
-
打开 iOS 设备上的 设置。
-
点击 通用 > VPN 与设备管理。
-
在 开发者应用 标题下,你需要找到你的证书。
-
点击你的证书。
-
点击 信任 "<certificate>"。
-
显示对话框时,点击 信任。
如果出现 codesign 想要访问密钥... 的提示对话框:
-
输入你的 macOS 密码。
-
点击 始终允许。
在 iOS 设备上设置无线调试(可选)
#请按照以下步骤来使用 Wi-Fi 连接调试设备。
-
将 iOS 设备连接到与 macOS 设备相同的网络。
-
为 iOS 设备设置密码。
-
打开 Xcode。
-
选择 Window > Devices and Simulators。
你还可以使用快捷键:Shift + Cmd + 2
-
选择你的 iOS 设备。
-
选择 Connect via Network。
-
一旦设备名称旁边出现网络图标,请将 iOS 设备从 Mac 拔下。
如果在使用 flutter run
时没有看到设备列表,请延长超时时间。超时默认为 10 秒。要延长超时时间,请将值改为大于 10 的整数。
flutter run --device-timeout 60
安装 CocoaPods
#如果你的应用程序依赖于带有原生 iOS 代码的 Flutter 插件,请安装 CocoaPods。该程序会捆绑 Flutter 和 iOS 代码之间的各种依赖关系。
请运行以下步骤,安装并设置 CocoaPods:
-
按照 CocoaPods 安装指南 安装
cocoapods
。sudo gem install cocoapods
-
启动你喜欢的文本编辑器。
-
在文本编辑器中打开 Zsh 环境变量文件
~/.zshenv
。 -
复制以下内容并粘贴到
~/.zshenv
文件内的末尾。bashexport PATH=$HOME/.gem/bin:$PATH
-
保存
~/.zshenv
文件。 -
请重新启动所有打开的终端会话窗口,来应用此更改。
检查你的开发配置
#运行 Flutter doctor
#flutter doctor
指令将检查 macOS 完整的
Flutter 开发环境的所有组件。
-
Open 你的 Terminal.
打开你的 Terminal。
-
要检查所有组件的安装情况,请运行以下指令。
flutter doctor
由于你选择为 iOS 进行开发,因此不需要 所有 组件。如果你遵循本指南,指令结果应该类似于:
Running flutter doctor...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.24.3, on macOS 14.4.0 23E214 darwin-arm64, locale en)
[!] Android toolchain - develop for Android devices
[!] Chrome - develop for the web
[✓] Xcode - develop for iOS and macOS (Xcode 15)
[!] Android Studio (not installed)
[✓] VS Code (version 1.93)
[✓] Connected device (1 available)
[✓] Network resources
! Doctor found issues in 3 categories.
解决 Flutter doctor 的问题
#当 flutter doctor
指令返回错误时,可能是 Flutter、VS Code、Xcode、连接的设备或者网络资源出错。
如果 flutter doctor
指令返回这些组件中的任何一个错误,请使用 verbose 标志再次运行。
flutter doctor -v
查看输出结果,了解可能需要安装的其他软件或者需要执行的其他任务。
如果你更改了 Flutter SDK 或其他相关组件的配置,请 再次运行 flutter doctor
来检查安装。
开始使用 Flutter 开发 iOS on macOS 应用
#恭喜你。 在安装完成所有必要条件和 Flutter SDK 后,你就可以开始开发适用于 iOS on macOS 的 Flutter 应用了。
如果你要继续学习之旅,请参考以下指南:
管理 Flutter SDK
#想要了解管理 Flutter SDK 安装的更多信息,请查阅以下内容。
除非另有说明,本文档之所提及适用于 Flutter 的最新稳定版本,本页面最后更新时间: 2024-11-02。 查看文档源码 或者 为本页面内容提出建议。