Mac 电脑搭建 Flutter iOS 环境及项目运行全攻略

目录
Mac 电脑搭建 Flutter iOS 环境及项目运行全攻略
一、搭建前的准备工作
（一）升级 Mac 系统
（二）安装 Xcode
（三）安装 Homebrew
（四）安装 Chrome 欣赏器（可选）
二、下载和配置 Flutter SDK
（一）确定下载版本
（二）下载 Flutter SDK
（三）解压和配置
（四）配置环境变量
（五）查抄 Flutter 环境
三、安装 CocoaPods
四、创建和运行 Flutter iOS 项目
（一）创建项目
（二）修改项目权限
（三）在 Xcode 中运行项目
（四）在 VS Code 中开辟项目
（五）热加载和热重启
（六）在不同平台运行项目

---

在移动应用开辟领域，Flutter 凭借其精彩的跨平台特性，成为众多开辟者的首选框架。对于使用 Mac 电脑的开辟者而言，搭建 Flutter iOS 开辟环境并让应用在 iOS 设备和 Mac 桌面软件上运行，是开启高效开辟之旅的关键一步。本文将详细介绍整个搭建和运行过程，让你轻松上手。
一、搭建前的准备工作

（一）升级 Mac 系统


确保你的 Mac 系统是最新版本，这能包管系统的稳固性和兼容性。打开 “系统偏好设置”，点击 “软件更新”，按照提示举行升级操作。
（二）安装 Xcode


Xcode 是苹果开辟的集成开辟环境，是搭建 Flutter iOS 环境的必备工具。打开 App Store，在搜索框中输入 “Xcode”，点击 “获取” 举行安装。如果之前已安装，可在 App Store 中查看是否有更新并举行升级。
（三）安装 Homebrew


Homebrew 是 Mac 系统下的包管理器，方便安装各种软件和工具。打开欣赏器，访问Homebrew 官网，官网提供了安装下令，选择得当你系统的下令（一样平常为官方保举的默认下令），复制后打开终端，粘贴下令并回车。过程中可能需要输入电脑密码，输入后等待安装完成。

1. /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

复制代码

（四）安装 Chrome 欣赏器（可选）


若你计划开辟 Web 应用，Chrome 欣赏器是不错的选择。同样在 App Store 中搜索 “Chrome” 举行安装。
二、下载和配置 Flutter SDK

（一）确定下载版本


不同芯片架构的 Mac 电脑需要下载对应的 Flutter SDK 版本。打开终端，输入以下下令查看芯片架构：

1. uname -m

复制代码

如果返回 “x86_64”，则下载 x64 版本的 Flutter SDK；如果返回 “arm64”，则下载 arm64 版本。
（二）下载 Flutter SDK


访问Flutter 官网，找到对应版本的 SDK 下载链接，点击下载。
（三）解压和配置


下载完成后，文件会自动解压。将解压后的文件夹移动到你希望存放的目录，例如 “~/Documents/flutter_sdk” 。
（四）配置环境变量


在 Mac 系统中，需要编辑配置文件来设置 Flutter SDK 的环境变量。在新版本的 Mac OS 中，需要编辑 “~/.bash_profile” 和 “~/.zshrc” 这两个文件。

• 编辑 “~/.bash_profile” 文件：在终端中输入以下下令：
  

1. vim ~/.bash_profile

复制代码

进入编辑模式后（按下 “i” 键），添加以下内容（注意将 “/Users/yourusername/Documents/flutter_sdk/bin” 更换为你现实的 Flutter SDK 路径）：

1. export PATH="$PATH:/Users/yourusername/Documents/flutter_sdk/bin"
2. export PUB_HOSTED_URL=https://pub.flutter-io.cn
3. export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

复制代码

添加完成后，按下 “Esc” 键，输入 “:wq” 并回车生存退出。
2. 编辑 “~/.zshrc” 文件：同样在终端中输入：

1. vim ~/.zshrc

复制代码

添加与 “~/.bash_profile” 中相同的内容，生存退出。
3. 使配置收效：在终端中依次实行以下下令，让配置收效：

1. source ~/.bash_profile
2. source ~/.zshrc

复制代码

（五）查抄 Flutter 环境


在终端中输入以下下令查抄 Flutter 环境是否配置成功：

1. flutter doctor

复制代码

首次运行可能会提示一些错误信息，如安卓干系的错误，因为我们主要搭建 iOS 环境，这些可以先忽略。重点关注 Xcode 干系的提示，如果没有提示 “flutter 不是内置下令”，则说明 Flutter SDK 已配置成功。
三、安装 CocoaPods


CocoaPods 是 iOS 开辟中的依赖管理工具，在 Flutter iOS 开辟中也很重要。

• 安装 CocoaPods：在终端中输入以下下令安装 CocoaPods：
  

1. brew install cocoapods

复制代码

• 初始化 CocoaPods：安装完成后，实行以下下令举行初始化：
  

1. pod setup

复制代码

• 再次查抄 Flutter 环境：实行 “flutter doctor
  ” 下令，按照提示实行干系下令办理可能出现的问题，直到没有关于 CocoaPods 的提示。
  

四、创建和运行 Flutter iOS 项目

（一）创建项目


打开终端，使用 “cd” 下令进入你希望创建项目的目录，例如 “cd ~/Documents/flutter_demo” 。然后输入以下下令创建项目（注意添加 “sudo” 获取管理员权限）：

1. sudo flutter create your_project_name

复制代码

输入电脑密码后等待项目创建完成。
（二）修改项目权限


项目创建完成后，需要修改项目目录的权限。在终端中输入以下下令（将 “your_project_name” 更换为现实项目名称）：

1. chmod -R 777 your_project_name

复制代码

（三）在 Xcode 中运行项目

• 打开 Xcode，找到项目目录中的 “ios” 文件夹，点击 “Runner.xcworkspace” 文件打开项目。
  
• 在 Xcode 中选择一个模仿器版本，如 “iPhone 8” ，点击运行按钮。首次运行可能会较慢，因为需要安装模仿器操作系统，耐烦等待项目在模仿器中启动。
  

（四）在 VS Code 中开辟项目

• 安装 VS Code：如果未安装，可从VS Code 官网下载安装。
  
• 安装插件：打开 VS Code，点击左侧的扩展图标，搜索并安装 “Flutter” 和 “Dart” 插件。
  
• 导入项目：点击 “文件” - “打开文件夹”，选择刚才创建的 Flutter 项目目录。
  
• 运行项目：在 VS Code 中，点击左下角的绿色运行按钮，选择要运行的设备（如模仿器或 Mac 桌面应用）。如果想在模仿器运行，确保模仿器已启动；若要在欣赏器运行，可实行 “flutter run -d chrome” 下令 。运行过程中，项目会举行编译，编译时间取决于 Mac 电脑的配置。
  

（五）热加载和热重启


在开辟过程中，热加载和热重启能进步开辟效率。修改代码生存后，在终端中输入 “r” 举行热加载，可实时看到代码修改效果；输入 “R”（即 “shift + r”）举行热重启。输入 “o” 可调整运行模式（如切换安卓或 iOS 模式）。
（六）在不同平台运行项目

• 在 Mac 桌面运行：在终端中实行 “flutter run -d macos” 下令，项目会在 Mac 桌面天生一个应用窗口。
  
• 在 Web 欣赏器运行：实行 “flutter run -d chrome” 下令，项目会在 Chrome 欣赏器中运行。若默认表现效果不佳，可右键点击页面选择 “查抄”，在开辟者工具中切换设备模式查看效果。
  

通过以上详细步骤，你就可以在 Mac 电脑上成功搭建 Flutter iOS 开辟环境，并创建和运行项目。无论是开辟 iOS 应用、Mac 桌面软件还是 Web 应用，Flutter 都能为你提供高效、便捷的开辟体验。希望这篇文章能资助你顺利开启 Flutter 开辟之旅！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。