基于Mac M1 Pro搭建Flutter开发环境,其他平台请参考官方教程
1、Get started
电脑配置:建议8核16G,70G以上磁盘空间
系统要求:Flutter 支持 macOS 10.15 (Catalina) 或更高版本,zsh是的默认 shell。
如果是Apple M系列的芯片,需要安装 Rosetta 2,如果是Intel芯片,则忽略下面这段。
对于在搭载 Apple 芯片的 Mac 上开发和运行 Flutter 应用,某些 Flutter 组件或依赖可能需要通过 Rosetta 2 进行转换。Rosetta 2 是 Apple 提供的一个软件,它使 Mac 能够运行那些原本只为 Intel 处理器编写的应用程序。如果你在使用 M1 或其他 Apple 芯片的 Mac 时遇到了 Flutter 组件不兼容的问题,安装并启用 Rosetta 2 可以解决这一问题。
要启用 Rosetta 2,用户可以在 Mac 上打开终端(Terminal)应用程序,并输入以下命令:
sudo softwareupdate --install-rosetta --agree-to-license
安装完成后,Rosetta 2 将在后台运行,无需进行任何额外配置。这样,你就可以在 Apple 芯片的 Mac 上无缝地使用 Flutter 开发工具和其他组件了。
2、安装开发工具
- 1、安装Xcode
从 App Store 安装 Xcode最新版本,Xcode 用于调试和编译本机 Swift 或 ObjectiveC 代码,安装包括 Git 2.27 或更高版本来管理源代码。
安装好Xcode还需要设置 Xcode 的开发目录和签署许可协议,执行下面命令,
sudo sh -c 'xcode-select -s /Applications/Xcode.app/Contents/Developer && xcodebuild -runFirstLaunch'
签署许可协议
sudo xcodebuild -license
- 2、安装CocoaPods
如果你的 Flutter 应用不需要任何 iOS 原生依赖,那么你就不需要安装 CocoaPods。但是,如果你计划使用 iOS 平台的特定功能或集成第三方原生库,那么安装 CocoaPods 是必要的。
如果没有安装 Ruby,或者版本过旧,你可以使用 Homebrew 安装:
brew install ruby
使用以下命令在终端中安装 CocoaPods:
sudo gem install cocoapods
安装完成后,你可以通过运行pod --version命令来检查 CocoaPods 是否安装成功
- 3、安装iOS模拟器
打开终端:使用以下命令下载并安装 iOS 模拟器:
xcodebuild -downloadPlatform iOS
这个命令会触发 Xcode 从 App Store 或其他源下载 iOS 模拟器所需的组件,如果它们尚未安装。
运行模拟器启动命令: 使用以下命令启动 iOS 模拟器:
open -a Simulator
这个命令通过
open
命令启动名为 "Simulator" 的应用程序,这是 Xcode 提供的 iOS 模拟器的正式名称。
- 4、IDE集成开发环境
您可以使用任何文本编辑器或集成开发环境 (IDE) 结合 Flutter 的命令行工具来构建 Flutter 应用程序。比较受欢迎的IDE:Visual Studio Code、Android Studio、IntelliJ IDEA
Flutter 团队建议安装 Visual Studio Code 1.77 或更高版本以及 VS Code 的 Flutter 扩展。这种组合简化了 Flutter SDK 的安装。
3、安装Flutter SDK
安装 Flutter SDK 是开始使用 Flutter 开发应用的第一步。以下是两种常见的安装方法:
使用 VS Code Flutter 扩展安装
安装 Visual Studio Code: 如果你还没有安装 Visual Studio Code (VS Code),你需要先从 VS Code 官网 下载并安装。
安装 Flutter 扩展:1. 打开 VS Code。2. 转到扩展视图,可以通过点击侧边栏的扩展图标或按下
Ctrl+Shift+X
(在 macOS 上是Cmd+Shift+X
)。3. 搜索 “Flutter”。4. 找到 Flutter 扩展(通常由 Dart Code 提供)并点击安装。
- **安装 Flutter **SDK: 安装 Flutter 扩展后,它会引导你安装 Flutter SDK。按照扩展中的指示完成安装。 如果没有提示,可以通过按
Command + Shift + P
打开命令面板,输入flutter,从下拉列表中选择Flutter: New Project
命令,如果您还没有安装 Flutter SDK,可以选择Download SDK
Flutter SDK下载可能有网络问题,需要自行解决或者手动到Flutter镜像站点下载 Flutter SDK 压缩包
- 配置****环境变量:
打开终端。使用文本编辑器打开
.zshrc
文件,例如使用
nano
:
nano ~/.zshrc
在文件的末尾添加上述
export
命令:
export PATH="$PWD/flutter/bin:$PATH"
- 请确保替换
$PWD/flutter/bin
为 Flutter SDK 的实际路径。如果 Flutter SDK 不在当前目录下,你需要提供正确的绝对路径。 - 保存并关闭
.zshrc
文件。 - 为了让更改生效,你需要运行以下命令来重新加载
.zshrc
文件:
source ~/.zshrc
或者,你可以使用
echo
命令直接将 export 行添加到
.zshrc
文件中,这样做会自动保留文件中的其他内容:
echo 'export PATH="$PWD/flutter/bin:$PATH"' ~/.zshrc
记得替换
$PWD/flutter/bin
为 Flutter SDK 的实际路径。
手动下载并安装 Flutter SDK
**下载 Flutter **SDK:1. 访问 Flutter 官网 并导航到下载页面。2. 根据你的操作系统选择相应的安装包并下载。
**解压 Flutter **SDK:1. 将下载的压缩包解压到一个合适的目录。
配置****环境变量:1. 将 Flutter 的 bin 目录添加到你的环境变量
PATH
中。这样可以在终端或命令提示符中直接使用 Flutter 命令。参考上面👆检查环境:1. 在终端或命令提示符中运行
flutter doctor
来验证安装并检查是否需要进行额外的配置。安装 Dart 插件(如果你使用 VS Code):1. 即使不通过 VS Code 安装 Flutter,如果你选择使用 VS Code 作为你的开发环境,你也应该安装 Dart 插件,它为 Flutter 开发提供了额外的支持和功能。
开始一个新的 Flutter 项目:1. 使用命令
flutter create project_name
创建一个新的 Flutter 项目。运行你的 Flutter 应用:1. 进入项目目录,使用命令
flutter run
运行你的 Flutter 应用。
选择哪种安装方式取决于你的个人喜好和开发环境需求。使用 VS Code Flutter 扩展安装可以提供更集成的体验,而手动安装则给了你更多的控制权和灵活性。无论哪种方式,确保按照 Flutter 官方文档的指导进行操作,以避免潜在的问题。
4、第一个Flutter App
- 打开命令面板:1. 在 VS Code 中,通过菜单
View > Command Palette
或按下Ctrl + Shift + P
(在 macOS 上是Cmd + Shift + P
)打开命令面板。 - 搜索 Flutter 命令:1. 在命令面板中输入
flutter
来过滤与 Flutter 相关的命令。 - 创建新项目:1. 从下拉列表中选择
Flutter: New Project
命令。 - 选择项目类型:1. 当提示选择 Flutter 项目类型时,选择
Application
。 - 设置项目位置:1. 创建或选择一个父目录,这将是新项目文件夹的存放位置。
- 命名项目:1. 当提示输入项目名称时,输入
test
或你选择的任何名称。 - 完成项目创建:1. 按下
Enter
键,VS Code 将开始创建 Flutter 项目。这可能需要一些时间。
选择设备并启动应用
- 打开命令面板:1. 通过菜单
View > Command Palette
或按下Ctrl + Shift + P
(在 macOS 上是Cmd + Shift + P
)打开命令面板。
选择设备并启动应用
- 搜索 Flutter 命令:1. 在命令面板中输入
flutter
来过滤与 Flutter 相关的命令。 - 选择设备:1. 选择
Flutter: Select Device
命令。这将列出当前可用的设备,包括模拟器和连接的物理设备。 - 启用设备:1. 如果没有运行的设备,系统会提示您启用一个设备。您可以选择启动一个模拟器或连接一个物理设备。
- 选择目标设备:1. 从提示中选择一个目标设备。这将作为 Flutter 应用的运行目标。
启动应用
- 开始调试:1. 选择设备后,您可以通过多种方式启动应用:- 通过菜单
Run > Start Debugging
,或者- 按下F5
键(取决于您的键盘设置,可能需要同时按下Ctrl
)。 - 等待应用启动:1. 应用将开始构建并启动在选定的设备上。
监控调试控制台
- 查看调试控制台:1. 应用启动过程中的输出和日志可以在 VS Code 的调试控制台(Debug Console)视图中查看。
- 调试应用:1. 如果您设置了断点,应用将在断点处暂停,允许您检查变量、调用堆栈等。
版权归原作者 程序员小詹 所有, 如有侵权,请联系我们删除。