Flutter 添加 iOS widget 小组件

环境

macOS 15.1

Xcode16.1

Flutter 3.27.4

前言

本篇文章主要记录，在Flutter 项目中如何正确地添加iOS 小组件，iOS 小组件相关的知识在另一篇文章有记录。
iOS 14 widget

添加小组件 WidgetExtension

打开Xcode New -> Target
选择 iOS -> 搜索 widget
配置widget信息

Include Live Activity：

Live Activity 是 iOS 16 引入的一项功能，允许应用在锁屏和动态岛（Dynamic Island）上显示实时更新的信息。通过选择这个选项，你可以在你的 Widget Extension 中包含 Live Activity 支持，从而在锁屏和动态岛上显示实时更新的内容。

Include Control：

Control 选项通常用于添加一些控制功能到你的 Widget 中，例如播放/暂停按钮、切换开关等。通过选择这个选项，你可以在你的 Widget Extension 中包含一些交互控件，允许用户直接在 Widget 中进行操作。

Include Configuration App Intent：

Configuration App Intent 选项允许你在 Widget 中包含一些配置选项，用户可以通过这些选项来配置 Widget 的显示内容或行为。通过选择这个选项，你可以在你的 Widget Extension 中包含一些配置意图，允许用户自定义 Widget 的设置。

widgetExtension 添加完成

解决报错

报错信息：Cycle inside Runner; building could produce unreliable results. Cycle

bash 复制代码

Cycle inside Runner; building could produce unreliable results. Cycle details: → Target 'Runner' has copy command from '/Users/liyanhong/Library/Developer/Xcode/DerivedData/Runner-daekxgevfkqjvtfotuuepflquess/Build/Products/Debug-iphonesimulator/TikuWidgetExtension.appex' to '/Users/liyanhong/Library/Developer/Xcode/DerivedData/Runner-daekxgevfkqjvtfotuuepflquess/Build/Products/Debug-iphonesimulator/Runner.app/PlugIns/TikuWidgetExtension.appex' ○ That command depends on command in Target 'Runner': script phase "[CP] Copy Pods Resources" ○ That command depends on command in Target 'Runner': script phase "[CP] Embed Pods Frameworks" ○ That command depends on command in Target 'Runner': script phase "Thin Binary" ○ Target 'Runner' has process command with output '/Users/liyanhong/Library/Developer/Xcode/DerivedData/Runner-daekxgevfkqjvtfotuuepflquess/Build/Products/Debug-iphonesimulator/Runner.app/Info.plist' ○ Target 'Runner' has copy command from '/Users/liyanhong/Library/Developer/Xcode/DerivedData/Runner-daekxgevfkqjvtfotuuepflquess/Build/Products/Debug-iphonesimulator/TikuWidgetExtension.appex' to '/Users/liyanhong/Library/Developer/Xcode/DerivedData/Runner-daekxgevfkqjvtfotuuepflquess/Build/Products/Debug-iphonesimulator/Runner.app/PlugIns/TikuWidgetExtension.appex'

原因

这个错误信息表明在构建过程中存在循环依赖，导致构建过程不可靠。具体来说，Runner 目标在构建过程中试图复制 TikuWidgetExtension.appex，但这个过程依赖于其他脚本和命令，最终形成了一个循环。

解决

调整构建顺序：在 Xcode 中，选择 Runner 目标，然后转到 Build Phases 标签，拖动调整命令的顺序如图。

总结

通过上面的步骤，我们就可以实现在Flutter 项目中添加 iOS widget 小组件啦！

感谢您的阅读和参与，HH思无邪愿与您一起在技术的道路上不断探索。如果您喜欢这篇文章，不妨留下您宝贵的赞！如果您对文章有任何疑问或建议，欢迎在评论区留言，我会第一时间处理，您的支持是我前行的动力，愿我们都能成为更好的自己！