搭建Mac Flutter开发环境

基于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 扩展安装

  1. 安装 Visual Studio Code

      如果你还没有安装 Visual Studio Code (VS Code),你需要先从 VS Code 官网 下载并安装。

  1. 安装 Flutter 扩展

    1. 打开 VS Code。

    2. 转到扩展视图,可以通过点击侧边栏的扩展图标或按下 Ctrl+Shift+X(在 macOS 上是 Cmd+Shift+X)。

    3. 搜索 “Flutter”。

    4. 找到 Flutter 扩展(通常由 Dart Code 提供)并点击安装。

  1. 安装 Flutter SDK

      安装 Flutter 扩展后,它会引导你安装 Flutter SDK。按照扩展中的指示完成安装。

      如果没有提示,可以通过按 Command + Shift + P 打开命令面板,输入flutter,从下拉列表中选择 Flutter: New Project 命令,如果您还没有安装 Flutter SDK,可以选择 Download SDK

Flutter SDK下载可能有网络问题,需要自行解决或者手动到Flutter镜像站点下载 Flutter SDK 压缩包

  1. 配置环境变量

打开终端。使用文本编辑器打开 .zshrc 文件,例如使用 nano

nano ~/.zshrc

在文件的末尾添加上述 export 命令:

export PATH="$PWD/flutter/bin:$PATH"
  1. 请确保替换 $PWD/flutter/bin 为 Flutter SDK 的实际路径。如果 Flutter SDK 不在当前目录下,你需要提供正确的绝对路径。

  2. 保存并关闭 .zshrc 文件。

  3. 为了让更改生效,你需要运行以下命令来重新加载 .zshrc 文件:

source ~/.zshrc

或者,你可以使用 echo 命令直接将 export 行添加到 .zshrc 文件中,这样做会自动保留文件中的其他内容:

echo 'export PATH="$PWD/flutter/bin:$PATH"' ~/.zshrc

记得替换 $PWD/flutter/bin 为 Flutter SDK 的实际路径。

手动下载并安装 Flutter SDK

  1. 下载 Flutter SDK

    1. 访问 Flutter 官网 并导航到下载页面。

    2. 根据你的操作系统选择相应的安装包并下载。

  1. 解压 Flutter SDK

    1. 将下载的压缩包解压到一个合适的目录。

  1. 配置环境变量

    1. 将 Flutter 的 bin 目录添加到你的环境变量 PATH 中。这样可以在终端或命令提示符中直接使用 Flutter 命令。参考上面👆

  1. 检查环境

    1. 在终端或命令提示符中运行 flutter doctor 来验证安装并检查是否需要进行额外的配置。

  1. 安装 Dart 插件(如果你使用 VS Code):

    1. 即使不通过 VS Code 安装 Flutter,如果你选择使用 VS Code 作为你的开发环境,你也应该安装 Dart 插件,它为 Flutter 开发提供了额外的支持和功能。

  1. 开始一个新的 Flutter 项目

    1. 使用命令 flutter create project_name 创建一个新的 Flutter 项目。

  1. 运行你的 Flutter 应用

    1. 进入项目目录,使用命令 flutter run 运行你的 Flutter 应用。

选择哪种安装方式取决于你的个人喜好和开发环境需求。使用 VS Code Flutter 扩展安装可以提供更集成的体验,而手动安装则给了你更多的控制权和灵活性。无论哪种方式,确保按照 Flutter 官方文档的指导进行操作,以避免潜在的问题。

4、第一个Flutter App

  1. 打开命令面板

    1. 在 VS Code 中,通过菜单 View > Command Palette 或按下 Ctrl + Shift + P(在 macOS 上是 Cmd + Shift + P)打开命令面板。

  2. 搜索 Flutter 命令

    1. 在命令面板中输入 flutter 来过滤与 Flutter 相关的命令。

  3. 创建新项目

    1. 从下拉列表中选择 Flutter: New Project 命令。

  4. 选择项目类型

    1. 当提示选择 Flutter 项目类型时,选择 Application

  5. 设置项目位置

    1. 创建或选择一个父目录,这将是新项目文件夹的存放位置。

  6. 命名项目

    1. 当提示输入项目名称时,输入 test 或你选择的任何名称。

  7. 完成项目创建

    1. 按下 Enter 键,VS Code 将开始创建 Flutter 项目。这可能需要一些时间。

选择设备并启动应用

  1. 打开命令面板

    1. 通过菜单 View > Command Palette 或按下 Ctrl + Shift + P(在 macOS 上是 Cmd + Shift + P)打开命令面板。

选择设备并启动应用

  1. 搜索 Flutter 命令

    1. 在命令面板中输入 flutter 来过滤与 Flutter 相关的命令。

  2. 选择设备

    1. 选择 Flutter: Select Device 命令。这将列出当前可用的设备,包括模拟器和连接的物理设备。

  3. 启用设备

    1. 如果没有运行的设备,系统会提示您启用一个设备。您可以选择启动一个模拟器或连接一个物理设备。

  4. 选择目标设备

    1. 从提示中选择一个目标设备。这将作为 Flutter 应用的运行目标。

启动应用

  1. 开始调试

    1. 选择设备后,您可以通过多种方式启动应用:

      • 通过菜单 Run > Start Debugging,或者

      • 按下 F5 键(取决于您的键盘设置,可能需要同时按下 Ctrl)。

  2. 等待应用启动

    1. 应用将开始构建并启动在选定的设备上。

监控调试控制台

  1. 查看调试控制台

    1. 应用启动过程中的输出和日志可以在 VS Code 的调试控制台(Debug Console)视图中查看。

  2. 调试应用

    1. 如果您设置了断点,应用将在断点处暂停,允许您检查变量、调用堆栈等。

  • 29
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值