flutter-adding-home-screen-widgets

SKILL.md

Add home screen widgets to Flutter apps for Android and iOS with native UI and shared data synchronization.

Flutter communicates with native widgets via shared local storage (UserDefaults on iOS, SharedPreferences on Android) using the home_widget package; data flows from Flutter writes to native widget reads on OS trigger.

iOS implementation uses Xcode, SwiftUI, and Widget Extension targets with App Groups capability; Android uses Android Studio with AppWidgetProvider, XML layouts, and RemoteViews.

Supports rendering complex Flutter widgets as images for display in native widgets, and custom font registration on iOS.

Includes step-by-step checklists for Flutter integration, iOS SwiftUI setup, and Android Kotlin setup with code examples for data updates and widget providers.

Implementing Flutter Home Screen Widgets

Contents

Architecture & Data Flow

Flutter Integration Workflow

iOS Implementation Workflow

Android Implementation Workflow

Advanced Techniques

Examples

Architecture & Data Flow

Home Screen Widgets require native UI implementation (SwiftUI for iOS, XML/Kotlin for Android). The Flutter app communicates with these native widgets via shared local storage (UserDefaults on iOS, SharedPreferences on Android) using the home_widget package.

Data Write: Flutter app writes key-value pairs or renders images to a shared container.

Trigger: Flutter app signals the native OS to update the widget.

Data Read: Native widget wakes up, reads the key-value pairs or images from the shared container, and updates its UI.

Flutter Integration Workflow

Use this checklist to implement the Dart side of the Home Screen Widget integration.