20251128 Flutterアプリでホーム画面Widgetを導入する方法

Flutterアプリで ホーム画面Widgetを 導入する方法 2025.11.28 Mobile Act OSAKA 17 itok@そらかぜ

itok@そらかぜ • いとうけい（itok） • の中の人 • モバイルアプリエンジニア 兼 CEO • 副業でフリーランス的 • https://itok.jp/, https://sorakaze.co.jp/, @itokjp

• http://itok.jp/

所在地：京都市中京区 社員1人=自分

🎉🎉創立10年🎉🎉

実績 自社 受託 公私合わせて200件以上のアプリ開発に携わる

iOS / Android / macOS / Windows / サーバ 一人でやってます（デザイン以外）

そらコーデ

関西圏のJR車内で広告でてます

Flutterアプリで ホーム画面Widgetを 導入する方法

Flutterで ホーム画面Widget？

はじめに • FlutterでiOS / Android向けのアプリを開発 • 新機能としてホーム画面にWidgetを配置する案 • ホーム画面Widgetといえばネイティブ実装 • Flutterでのロジックを再利用できたら助かる・・・

🤔

結論からいうと そんな都合のよい話は

無い 😢 ＊シンプルに解決するという意味では

ですが

こんなライブラリを 見つけたので紹介

home̲widget

おことわり • iOSメインでお話します • 用語 • Widget = FlutterにおけるUIの構成要素 • ウィジェット = ホーム画面に配置されるWidget （ホーム画面Widget）

home̲widget • https://pub.dev/packages/home̲widget • アプリ - ウィジェット間のデータ送信 • アプリからの明示的なウィジェット更新

home̲widget • ロジックはアプリ本体 • 共有の領域を介して、アプリからウィジェットへ値 を渡す • iOS: App Groupに書き出す HomeWidget.setAppGroupId('group.mobileact17'); HomeWidget.saveWidgetData('someValue', newValue); HomeWidget.updateWidget(...);

home̲widget • ウィジェットは共有されたデータを表示するだけ • もちろんウィジェット側はネイティブ実装 let defaults = UserDefaults( suiteName: "group.mobileact17") let value = defaults?.object(forKey: "someValue")

iOS 17 interactive widget

interactive widget • AppIntentを使うことで、ウィジェット上のボタン から操作が可能に Button( intent: MyIntent(...) ) { Text("Button") }

home̲widget
•

interactive widget対応済み

@pragma("vm:entry-point")
FutureOr<void> someCallback(Uri? data) async {
// do something with data
}
HomeWidget.registerInteractivityCallback(someCallback);

AppIntent
•

AppIntentを定義することで、ユーザ操作でアプリ
側のロジックを駆動することは可能

public struct MyIntent: AppIntent {
...

}

public func perform() async throws -> some IntentResult {
await HomeWidgetBackgroundWorker.run(
url: URL(string: "myintent://"),
appGroup: "group.mobileact17"
)
return .result()
}

ウィジェット（iOSネイティブ）
Button(
intent: MyIntent(...)
) {}
public struct MyIntent: AppIntent {
public func perform() async throws -> some IntentResult {
...
}
}

アプリ（Flutter）
@pragma("vm:entry-point")
FutureOr<void> someCallback(Uri? data) async {
...
}

home̲widget 公式ドキュメント • • https://docs.page/abausg/home̲widget interactive widget対応について（公式ブログ） • https://medium.com/@ABausG/interactivehomescreen-widgets-with- utter-usinghome-widget-83cb0706a417 fl •

• https://medium.com/@ABausG/interactive-