Flutter 添加 iOS widget 小组件

环境
macOS 15.1
Xcode16.1
Flutter 3.27.4

前言

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

添加小组件 WidgetExtension

1. 打开Xcode New -> Target
   
2. 选择 iOS -> 搜索 widget
   
3. 配置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 的设置。

4. widgetExtension 添加完成
   

解决报错

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

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