skills.rest
Wishtohear
WishtohearCOMMUNITY
Explore all skills by this author →
GitHub

flutter-adding-home-screen-widgets

Implements home screen widgets for Flutter apps on Android and iOS.

1|Updated Apr 30, 2026
Search Tags:#ios#mobile development#android#swiftui#flutter#appwidgetprovider#home screen widget
One-click install
npx skills add https://github.com/Wishtohear/bucket-water-oms --skill flutter-adding-home-screen-widgets-wishtohear
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: flutter-adding-home-screen-widgets
Source: https://github.com/Wishtohear/bucket-water-oms/tree/main/bucket-water-oms-admin-mobile/skills/flutter-adding-home-screen-widgets
Command: npx skills add https://github.com/Wishtohear/bucket-water-oms --skill flutter-adding-home-screen-widgets-wishtohear

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires home_widget.

What problem does it solve? Flutter apps cannot natively render home screen widgets, so developers must bridge Dart code with platform-specific SwiftUI and Kotlin implementations, which involves complex App Group configuration and shared storage synchronization. ## Core Features & Use Cases - Cross-Platform Data Bridge: Uses the home_widget package to write key-value data from Dart into shared UserDefaults (iOS) and SharedPreferences (Android) containers. - Native Widget Workflows: Provides step-by-step checklists for building SwiftUI TimelineProviders on iOS and AppWidgetProvider with RemoteViews on Android. - Advanced Rendering: Supports rendering complex Flutter widgets as images for native display and registering custom Flutter fonts on iOS. - Use Case: A delivery app wants to show drivers their next task on the device home screen; use this Skill to push order data from Flutter and render it in a native widget. ## Quick Start Add a home screen widget to my Flutter app that displays the latest order status on both Android and iOS.

Frequently Asked Questions about flutter-adding-home-screen-widgets

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a home screen widget to a Flutter app?▼

Use the home_widget package to save data from Dart via HomeWidget.saveWidgetData, then trigger updates with HomeWidget.updateWidget. Implement the native UI separately with SwiftUI on iOS and XML/Kotlin with AppWidgetProvider on Android.

How does Flutter communicate with native home screen widgets?▼

Flutter writes key-value pairs to shared local storage using the home_widget package: UserDefaults on iOS and SharedPreferences on Android. The native widget reads these values when the OS triggers a timeline or widget update.

Can Flutter widgets be rendered directly on the iOS home screen?▼

No, home screen widgets require native UI built with SwiftUI on iOS. However, you can render a Flutter widget to an image using HomeWidget.renderFlutterWidget and display that image inside the native SwiftUI view.

Why is my iOS home screen widget not receiving Flutter data?▼

The most common cause is a mismatched App Group ID. Ensure the App Groups capability is enabled on both the Runner target and Widget Extension target in Xcode, and that HomeWidget.setAppGroupId in Dart uses the identical identifier.

Can I use custom Flutter fonts in iOS home screen widgets?▼

Yes, on iOS you can register Flutter asset fonts by locating the flutter_assets bundle path and calling CTFontManagerRegisterFontsForURL, then applying the font in SwiftUI with Font.custom. This approach is iOS-only.

Related Skills

Explore More Software Engineering Skills→
wildbitcawildbitca
1

flutter-dependency-install

Add or update Flutter dependencies to latest compatible versions via pub.dev.

Official
Intermediate
mazicimertmazicimert

widget-generator

Generate WidgetKit widget code with timeline providers and App Intent configuration.

Community
Advanced
Prisma-Labs-DevPrisma-Labs-Dev
299

widgetkit

Document Apple's WidgetKit framework APIs and timeline provider implementations.

Official
Intermediate
claudcherejiclaudchereji

mobile-app-developer

Develop native and cross-platform mobile applications for iOS and Android.

Community
Advanced