制作 macOS 桌面应用

您所在的位置：网站首页 › ios开发flutter环境 › 制作 macOS 桌面应用

制作 macOS 桌面应用

2024-07-16 18:20| 来源: 网络整理| 查看: 265

description bug_report 开始在 macOS 上构建 Flutter 原生桌面应用目录 keyboard_arrow_down keyboard_arrow_up 系统要求硬件要求软件要求安装 Flutter SDK 使用 VS Code 安装 Flutter 下载并安装 Flutter 配置 iOS 开发安装并配置 Xcode 安装 CocoaPods 检查你的开发配置运行 Flutter doctor 解决 Flutter doctor 的问题开始使用 Flutter 开发 macOS desktop 应用管理 Flutter SDK more_horiz error 重点提醒

请按顺序完成本指南。跳过步骤可能会导致错误。

系统要求 #

在安装和运行 Flutter 前，你的 macOS 环境必须满足以下要求：

硬件要求 #

你的 macOS Flutter 开发环境必须满足以下最低硬件要求。

要求最低推荐 CPU 核心数 4 8 内存 (GB) 8 16 显示器分辨率（像素） WXGA (1366 x 768) FHD (1920 x 1080) 可用磁盘空间 (GB) 36.0 56.0 软件要求 #

要为 desktop 编写和编译 Flutter 代码，请安装以下软件包。

lightbulb 小提示

你无需单独安装 Dart，因为 Flutter SDK 包含了完整的 Dart SDK。

操作系统 #

Flutter 支持 macOS 10.15 (Catalina) 或更高版本。本指南假定你的 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.15 将 Flutter 插件应用于原生应用。

上述软件的开发商为这些产品提供支持。如果需要排除安装的问题，请查阅该产品的文档。

当你在当前版本运行 flutter doctor 的时候，它可能会列出这些软件包的其他不同版本。如果出现这种情况，请安装它推荐的版本。

文本编辑器或集成开发环境 (IDE) #

你可以使用任意文本编辑器或集成开发环境 (IDE)，并结合 Flutter 的命令行工具，来使用 Flutter 构建应用程序。

使用带有 Flutter 扩展或插件的 IDE 会提供代码自动补全、语法高亮、widget 编写辅助、调试以及其他功能。

以下是热门的扩展插件：

Visual Studio Code 1.77 或更高版本使用 Flutter extension for VS Code。

Android Studio 2023.2.1 (Iguana) 或更高版本使用 Flutter plugin for IntelliJ。

IntelliJ IDEA 2023.2 或更高版本使用 Flutter plugin for IntelliJ 和 Android plugin for IntelliJ。

bolt 推荐

Flutter 团队推荐安装 Visual Studio Code 1.77 或更高版本并搭配 Flutter extension for VS Code。这样搭配可以简化 Flutter SDK 的安装。

安装 Flutter SDK #

你可以使用 VS Code Flutter 扩展或自行下载安装 Flutter 压缩包，来安装 Flutter SDK。

使用 VS Code 安装自行下载安装 Use VS Code to install Flutter # 使用 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。

Download then install Flutter # 下载并安装 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 #

要为 desktop 开发 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。

安装 CocoaPods #

如果你的应用程序依赖于带有原生 desktop 代码的 Flutter 插件，请安装 CocoaPods。该程序会捆绑 Flutter 和 desktop 代码之间的各种依赖关系。

请运行以下步骤，安装并设置 CocoaPods：

按照 CocoaPods 安装指南安装 cocoapods。

sudo gem install cocoapods

启动你喜欢的文本编辑器。

在文本编辑器中打开 Zsh 环境变量文件 ~/.zshenv。

复制以下内容并粘贴到 ~/.zshenv 文件内的末尾。

bashexport PATH=$HOME/.gem/bin:$PATH

保存 ~/.zshenv 文件。

请重新启动所有打开的终端会话窗口，来应用此更改。

检查你的开发配置 #

help 帮助

运行 Flutter doctor #

flutter doctor 指令将检查 macOS 完整的 Flutter 开发环境的所有组件。

Open 你的 Terminal.

打开你的 Terminal。

要检查所有组件的安装情况，请运行以下指令。

flutter doctor

由于你选择为 desktop 进行开发，因此不需要所有组件。如果你遵循本指南，指令结果应该类似于：

Running flutter doctor... Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 3.22.1, 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.89) [✓] 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 开发 macOS desktop 应用 #

恭喜你！现在，你已经安装了所有必要条件和 Flutter SDK，你可以开始为 macOS desktop 开发 Flutter 应用了。

管理 Flutter SDK #

想要了解管理 Flutter SDK 安装的更多信息，请查阅以下内容。

升级 Flutter

添加 Android 编译工具

添加 Web 调试工具

添加 iOS 模拟器或真机设备

卸载 Flutter

【本文地址】

公司简介

联系我们