Agent skill

Flutter Adding Home Screen Widgets

by btwld in btwld/superdeck

Adds home screen widgets to a Flutter app for Android and iOS.

BSD-3-ClauseAuto-check passedMobile

Install Flutter Adding Home Screen Widgets

skills CLI
$ npx skills add btwld/superdeck --skill flutter-adding-home-screen-widgets -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install btwld/superdeck flutter-adding-home-screen-widgets --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/btwld/superdeck.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/flutter-adding-home-screen-widgets .claude/skills/flutter-adding-home-screen-widgets && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
flutter-adding-home-screen-widgets
GitHub stars
129
Token cost
~2.2k tokens
SKILL.md length
559 words
Files
1
Skills in repo
23
Repo updated
First seen
Licence
BSD-3-Clause

At a glance

Adds home screen widgets to a Flutter app for Android and iOS.

  • Works in 4 steps: Wrap the target Flutter widget with a… → Call HomeWidget.renderFlutterWidget(),… → iOS: Read the file path from… → …
  • Providing glanceable app information
  • SKILL.md covers Contents, Architecture & Data Flow, Flutter Integration Workflow and iOS Implementation Workflow, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Flutter Adding Home Screen Widgets is an agent skill from btwld/superdeck. Adds home screen widgets to a Flutter app for Android and iOS. Use when providing glanceable app information or quick actions on the device home screen.

Its SKILL.md is about 2.2k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Mobile, covering Cross-platform mobile apps and iOS development. It works with Flutter, iOS, Android and SwiftUI. The repository describes itself as: Presentation slides for Flutter with Flutter. The licence is BSD-3-Clause.

When your agent uses it

  • Providing glanceable app information
  • Quick actions on the device home screen

Example prompts

  • “/flutter-adding-home-screen-widgets”

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. Wrap the target Flutter widget with a GlobalKey.
  2. Call HomeWidget.renderFlutterWidget(), passing the widget, a filename, and the key.
  3. iOS: Read the file path from UserDefaults and render using UIImage(contentsOfFile:) inside a SwiftUI Image.
  4. Android: Read the file path from SharedPreferences, decode using BitmapFactory.decodeFile(), and render using setImageViewBitmap().

What it can do on your machine

Read from SKILL.md and the folder at commit 815a746. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are swift, dart and kotlin).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Flutter Adding Home Screen Widgets loads about 2.2k tokens when it runs. Until then it costs about 47 tokens; SKILL.md has 559 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~47
When it runs · the whole SKILL.md, loaded when a task matches
~2.2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from btwld/superdeck at commit 815a746, republished under its BSD-3-Clause licence (© btwld). 559 words, ~2,156 tokens.

Download SKILL.mdSave it as .claude/skills/flutter-adding-home-screen-widgets/SKILL.md (or your agent's skills folder).
name
flutter-adding-home-screen-widgets
description
Adds home screen widgets to a Flutter app for Android and iOS. Use when providing glanceable app information or quick actions on the device home screen.
metadata.model
models/gemini-3.1-pro-preview
metadata.last_modified
Thu, 12 Mar 2026 22:23:50 GMT

Implementing Flutter Home Screen Widgets

Contents

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.

  • Step 1: Initialize the App Group. Call HomeWidget.setAppGroupId('<YOUR_APP_GROUP>') in initState() or app startup.
  • Step 2: Save Data. Use HomeWidget.saveWidgetData<T>('key', value) to write data to shared storage.
  • Step 3: Trigger Update. Call HomeWidget.updateWidget(iOSName: 'YourIOSWidget', androidName: 'YourAndroidWidget') to notify the OS.
  • Step 4: Validate. Run Flutter build -> review console for missing plugin registrations -> fix.

iOS Implementation Workflow

If targeting iOS, implement the widget using Xcode and SwiftUI.

  • Step 1: Create Target. Open ios/Runner.xcworkspace in Xcode. Add a new Widget Extension target. Disable "Include Live Activity" and "Include Configuration Intent" unless explicitly required.
  • Step 2: Configure App Groups. Add the App Groups capability to both the Runner target and the Widget Extension target. Ensure the App Group ID matches the one used in Dart.
  • Step 3: Define TimelineEntry. Create a struct conforming to TimelineEntry to hold the data passed from shared storage.
  • Step 4: Implement TimelineProvider.
    • In getSnapshot and getTimeline, instantiate UserDefaults(suiteName: "<YOUR_APP_GROUP>").
    • Extract values using userDefaults?.string(forKey: "your_key").
    • Return the populated TimelineEntry.
  • Step 5: Build UI. Implement the SwiftUI View to display the data from the TimelineEntry.
  • Step 6: Validate. Run Xcode build for the Widget Extension -> review provisioning/App Group errors -> fix.
Show full SKILL.md (249 more words)Show less

Android Implementation Workflow

If targeting Android, implement the widget using Android Studio and XML/Kotlin.

  • Step 1: Create App Widget. Open the android folder in Android Studio. Right-click the app directory -> New -> Widget -> App Widget.
  • Step 2: Define Layout. Edit res/layout/<widget_name>.xml to define the UI using standard Android XML layouts (e.g., RelativeLayout, TextView, ImageView).
  • Step 3: Implement AppWidgetProvider.
    • Open the generated Kotlin class extending AppWidgetProvider.
    • In the onUpdate method, retrieve shared data using HomeWidgetPlugin.getData(context).
    • Extract values using widgetData.getString("your_key", null).
    • Update the UI using RemoteViews and setTextViewText or setImageViewBitmap.
    • Call appWidgetManager.updateAppWidget(appWidgetId, views).
  • Step 4: Validate. Run Android build -> review Manifest registration errors -> fix.

Advanced Techniques

Rendering Flutter Widgets as Images

If the UI is too complex to recreate natively (e.g., custom charts), render the Flutter widget to an image and display the image in the native widget.

  1. Wrap the target Flutter widget with a GlobalKey.
  2. Call HomeWidget.renderFlutterWidget(), passing the widget, a filename, and the key.
  3. iOS: Read the file path from UserDefaults and render using UIImage(contentsOfFile:) inside a SwiftUI Image.
  4. Android: Read the file path from SharedPreferences, decode using BitmapFactory.decodeFile(), and render using setImageViewBitmap().
Using Custom Flutter Fonts (iOS Only)

If utilizing custom fonts defined in Flutter on iOS Home Screen Widgets:

  1. Extract the Flutter asset bundle path in Swift.
  2. Register the font using CTFontManagerRegisterFontsForURL.
  3. Apply the font in SwiftUI using Font.custom().

Examples

Example: Flutter Data Update
dart
import 'package:home_widget/home_widget.dart';

const String appGroupId = 'group.com.example.app';
const String iOSWidgetName = 'NewsWidgets';
const String androidWidgetName = 'NewsWidget';

Future<void> updateWidgetData(String title, String description) async {
  await HomeWidget.setAppGroupId(appGroupId);
  await HomeWidget.saveWidgetData<String>('headline_title', title);
  await HomeWidget.saveWidgetData<String>('headline_description', description);
  await HomeWidget.updateWidget(
    iOSName: iOSWidgetName,
    androidName: androidWidgetName,
  );
}
Example: iOS SwiftUI Provider & View
swift
import WidgetKit
import SwiftUI

struct NewsArticleEntry: TimelineEntry {
    let date: Date
    let title: String
    let description: String
}

struct Provider: TimelineProvider {
    func placeholder(in context: Context) -> NewsArticleEntry {
        NewsArticleEntry(date: Date(), title: "Loading...", description: "Loading...")
    }

    func getSnapshot(in context: Context, completion: @escaping (NewsArticleEntry) -> ()) {
        let userDefaults = UserDefaults(suiteName: "group.com.example.app")
        let title = userDefaults?.string(forKey: "headline_title") ?? "No Title"
        let description = userDefaults?.string(forKey: "headline_description") ?? "No Description"
        
        let entry = NewsArticleEntry(date: Date(), title: title, description: description)
        completion(entry)
    }

    func getTimeline(in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
        getSnapshot(in: context) { (entry) in
            let timeline = Timeline(entries: [entry], policy: .atEnd)
            completion(timeline)
        }
    }
}

struct NewsWidgetsEntryView : View {
    var entry: Provider.Entry

    var body: some View {
        VStack(alignment: .leading) {
            Text(entry.title).font(.headline)
            Text(entry.description).font(.subheadline)
        }
    }
}
Example: Android Kotlin Provider
kotlin
package com.example.app.widgets

import android.appwidget.AppWidgetManager
import android.appwidget.AppWidgetProvider
import android.content.Context
import android.widget.RemoteViews
import es.antonborri.home_widget.HomeWidgetPlugin
import com.example.app.R

class NewsWidget : AppWidgetProvider() {
    override fun onUpdate(
        context: Context,
        appWidgetManager: AppWidgetManager,
        appWidgetIds: IntArray,
    ) {
        for (appWidgetId in appWidgetIds) {
            val widgetData = HomeWidgetPlugin.getData(context)
            val views = RemoteViews(context.packageName, R.layout.news_widget).apply {
                val title = widgetData.getString("headline_title", "No Title")
                setTextViewText(R.id.headline_title, title)

                val description = widgetData.getString("headline_description", "No Description")
                setTextViewText(R.id.headline_description, description)
            }
            appWidgetManager.updateAppWidget(appWidgetId, views)
        }
    }
}
<details>
<summary>Example: iOS Custom Font Registration Helper</summary>
swift
// Add this to your SwiftUI View struct
var bundle: URL {
    let bundle = Bundle.main
    if bundle.bundleURL.pathExtension == "appex" {
        var url = bundle.bundleURL.deletingLastPathComponent().deletingLastPathComponent()
        url.append(component: "Frameworks/App.framework/flutter_assets")
        return url
    }
    return bundle.bundleURL
}

init(entry: Provider.Entry) {
    self.entry = entry
    CTFontManagerRegisterFontsForURL(
        bundle.appending(path: "/fonts/YourCustomFont.ttf") as CFURL, 
        CTFontManagerScope.process, 
        nil
    )
}
</details>

© btwld, BSD-3-Clause. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .agents/skills/flutter-adding-home-screen-widgets of btwld/superdeck.

Open the folder on GitHubat commit 815a746

Compare with similar skills

Flutter Adding Home Screen Widgets next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Flutter Adding Home Screen Widgets compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Flutter Adding Home Screen Widgets this skillbtwld/superdeck129—~2.2kAutomated safety check: PassBSD-3-Clause
SimdeckNativeScript/SimDeck152—~3.6kAutomated safety check: PassMIT
Streamadrianhajdin/react-native-lingua150—~1.9kAutomated safety check: PassNone
Developing Mobile Appstelagod/code-abyss244—~258Automated safety check: PassMIT
Senior Mobileborghei/Claude-Skills874—~1.9kAutomated safety check: PassMIT
Expo UIarcboxlabs/linkcode155—~1.2kAutomated safety check: PassMIT

Similar skills

  • Simdeck

    NativeScript/SimDeck

    A skill your agent uses for simulator lifecycle, app install/launch, live viewing, UI inspection, touch/keyboard automation, screenshots, recordings, logs, pasteboard, hardware controls, and…

    152 GitHub stars~3.6k tokensUpdated 26 days ago
    MobileAuto-check passed
  • Stream

    adrianhajdin/react-native-lingua

    Stream router for Chat, Video, Feeds, and Moderation. An agent skill from adrianhajdin/react-native-lingua.

    150 GitHub stars~1.9k tokensUpdated 4 mo ago
    MobileAuto-check passed
  • Developing Mobile Apps

    telagod/code-abyss

    Mobile development knowledge reference covering iOS (SwiftUI), Android (Jetpack Compose), React Native, and Flutter.

    244 GitHub stars~258 tokensUpdated 2 mo ago
    MobileAuto-check passed
  • Senior Mobile

    borghei/Claude-Skills

    A skill your agent uses when the user asks to "build a mobile app", "scaffold React Native project", "create SwiftUI views", "set up Jetpack Compose", "optimize mobile performance", "configure Expo…

    874 GitHub stars~1.9k tokensUpdated yesterday
    MobileAuto-check passed
  • Expo UI

    arcboxlabs/linkcode

    Framework (OSS). An agent skill from arcboxlabs/linkcode.

    155 GitHub stars~1.2k tokensUpdated 9 days ago
    MobileAuto-check passed
  • Flutter App

    ccplugins/awesome-claude-code-plugins

    Bootstrap a new Flutter mobile app with clean architecture, Riverpod, FVM-pinned SDK, current packages, and no deprecated APIs.

    967 GitHub stars~1.1k tokensUpdated 1 mo ago
    MobileAuto-check: notes

More from btwld/superdeck

All 23 skills in this repo
  • Create, review, or edit SuperDeck Markdown presentations and Flutter presentation apps.

    129 GitHub stars~649 tokensUpdated 10 days ago
    Auto-check passed
  • Flutter Animating Apps

    btwld/superdeck

    Implements animated effects, transitions, and motion in a Flutter app.

    129 GitHub stars~1.9k tokensUpdated 10 days ago
    Auto-check passed
  • Architects a Flutter application using the recommended layered approach (UI, Logic, Data).

    129 GitHub stars~1.8k tokensUpdated 10 days ago
    Auto-check passed
  • Flutter Building Forms

    btwld/superdeck

    Builds Flutter forms with validation and user input handling.

    129 GitHub stars~1.4k tokensUpdated 10 days ago
    Auto-check passed
  • Builds Flutter layouts using the constraint system and layout widgets.

    129 GitHub stars~1.5k tokensUpdated 10 days ago
    Auto-check passed
  • Builds Flutter plugins that provide native interop for other apps to use.

    129 GitHub stars~2.2k tokensUpdated 10 days ago
    Auto-check passed

Categories

Questions about Flutter Adding Home Screen Widgets

What does Flutter Adding Home Screen Widgets do?

Adds home screen widgets to a Flutter app for Android and iOS. Flutter Adding Home Screen Widgets is an agent skill from btwld/superdeck. Adds home screen widgets to a Flutter app for Android and iOS.

When should I use Flutter Adding Home Screen Widgets?

Flutter Adding Home Screen Widgets fits situations like: providing glanceable app information; quick actions on the device home screen.

How do I install Flutter Adding Home Screen Widgets in Claude Code?

Run `npx skills add btwld/superdeck --skill flutter-adding-home-screen-widgets -a claude-code`. Or copy the skill folder (.agents/skills/flutter-adding-home-screen-widgets in btwld/superdeck) into .claude/skills/flutter-adding-home-screen-widgets in your project. Claude Code loads it when a task matches its description.

How do I install Flutter Adding Home Screen Widgets in Codex?

Run `npx skills add btwld/superdeck --skill flutter-adding-home-screen-widgets -a codex`. Or copy the skill folder (.agents/skills/flutter-adding-home-screen-widgets in btwld/superdeck) into .agents/skills/flutter-adding-home-screen-widgets in your project. Codex loads it when a task matches its description.

Can I use Flutter Adding Home Screen Widgets in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add btwld/superdeck --skill flutter-adding-home-screen-widgets -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/flutter-adding-home-screen-widgets, .gemini/skills/flutter-adding-home-screen-widgets, .github/skills/flutter-adding-home-screen-widgets and .opencode/skills/flutter-adding-home-screen-widgets in your project.

What does Flutter Adding Home Screen Widgets need to run?

SKILL.md names no scripts, command-line tools or credentials: Flutter Adding Home Screen Widgets is instructions for the agent only.

Does Flutter Adding Home Screen Widgets access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Flutter Adding Home Screen Widgets safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Flutter Adding Home Screen Widgets use?

Flutter Adding Home Screen Widgets is published under the BSD-3-Clause licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Flutter Adding Home Screen Widgets use?

About 2.2k tokens (SKILL.md is roughly 8.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Flutter Adding Home Screen Widgets?

Skills that share tags, products or a category with Flutter Adding Home Screen Widgets: Simdeck (NativeScript/SimDeck, 152 stars), Stream (adrianhajdin/react-native-lingua, 150 stars), Developing Mobile Apps (telagod/code-abyss, 244 stars) and Senior Mobile (borghei/Claude-Skills, 874 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Flutter Adding Home Screen Widgets?

btwld (a GitHub organization) maintains it in btwld/superdeck, which has 129 GitHub stars. The repository holds 23 skills in this directory. The repository was last updated on September 28, 2026.

Source: btwld/superdeck on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.