Communityコーディング&開発github.com

flutter/flutter-adding-home-screen-widgets

FlutterアプリにAndroidおよびiOS向けのホーム画面ウィジェットを追加します。アプリの情報をひと目で確認できるようにしたり、ホーム画面からクイックアクションを提供したい場合に使用します。

flutter-adding-home-screen-widgets とは?

このスキルは、Flutterアプリにホーム画面ウィジェット(AndroidとiOSの両方)を追加するためのものです。ホーム画面にアプリの重要な情報を表示したり、ユーザーがアプリを開かずに特定のアクションを実行できるようにします。主に「home_widget」パッケージを使用して実装します。このパッケージは、Flutterエンジンを起動せずにウィジェットとしてUIをレンダリングできるため、軽量で効率的です。対応プラットフォームはAndroidとiOSで、それぞれのプラットフォーム固有の設定(AndroidのAppWidgetProviderInfoやiOSのWidget Extensionなど)を適切に構成する必要があります。開発者はこのスキルを使って、天気予報、カレンダーイベント、タスクリストなどの更新頻度の高い情報をウィジェットとして提供でき、ユーザーエクスペリエンスを向上させることができます。

対応~Claude Code~Codex CLI~Cursor
Part ofMobile
npx skills add https://github.com/flutter/skills/tree/main/skills/flutter-adding-home-screen-widgets

Installed? Explore more コーディング&開発 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

flutter-adding-home-screen-widgets は何をしますか?

FlutterアプリにAndroidおよびiOS向けのホーム画面ウィジェットを追加します。アプリの情報をひと目で確認できるようにしたり、ホーム画面からクイックアクションを提供したい場合に使用します。

概要

ホーム画面ウィジェットは、アプリの機能や情報をホーム画面に直接表示する小さなビューです。このスキルでは、home_widget パッケージを使用して、Flutterアプリにウィジェットを追加します。

対応プラットフォーム

  • Android (App Widgets)
  • iOS (Widget Extension, iOS 14+)

使用方法

  1. パッケージの追加
dependencies:
  home_widget: ^0.9.0
  1. Androidの設定

android/app/src/main/res/xml/home_widget_provider_info.xml を作成し、以下を記述します:

<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
    android:minWidth="250dp"
    android:minHeight="40dp"
    android:updatePeriodMillis="1800000"
    android:initialLayout="@layout/home_widget_layout"
    android:resizeMode="horizontal|vertical"
    android:widgetCategory="home_screen" />
  1. iOSの設定

XcodeでWidget Extensionを追加し、Info.plist に適切なエントリーを設定します。

  1. ウィジェットのビルド
import 'package:home_widget/home_widget.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              // ウィジェットのデータを更新
              await HomeWidget.saveWidgetData('title', 'Hello from Flutter!');
              await HomeWidget.updateWidget(
                iOSName: 'MyWidget',
                androidName: 'MyWidgetProvider',
              );
            },
            child: Text('ウィジェットを更新'),
          ),
        ),
      ),
    );
  }
}
  1. ウィジェットのUI

home_widget はFlutterウィジェットとしてUIをレンダリングしないため、代わりにネイティブのUI定義を使用します。AndroidではXMLレイアウト、iOSではSwiftUIを使用します。

注意点

  • ウィジェットはアプリとは別のプロセスで動作するため、データの受け渡しには注意が必要です。
  • iOSの場合、Widget Extensionは独立したターゲットとして追加する必要があります。
  • 更新頻度はプラットフォームの制限に従います(特にiOSでは頻繁な更新は推奨されません)。

参考リンク

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

flutter/flutter-accessibility

Configure your Flutter app to support assistive technologies like Screen Readers

flutter/flutter-accessibility-audit

Triggers an accessibility scan through the widget_inspector and automatically adds Semantics widgets or missing labels to the source code.

flutter/flutter-add-integration-test

Configures Flutter Driver for app interaction and converts MCP actions into permanent integration tests. Use when adding integration testing to a project, exploring UI components via MCP, or automating user flows with the integration_test package.

flutter/flutter-add-widget-preview

Adds interactive widget previews to the project using the previews.dart system. Use when creating new UI components or updating existing screens to ensure consistent design and interactive testing.

flutter/flutter-add-widget-test

Implement a component-level test using `WidgetTester` to verify UI rendering and user interactions (tapping, scrolling, entering text). Use when validating that a specific widget displays correct data and responds to events as expected.

flutter/flutter-animating-apps

Implements animated effects, transitions, and motion in a Flutter app. Use when adding visual feedback, shared element transitions, or physics-based animations.

flutter/flutter-animation

Add animated effects to your Flutter app

flutter/flutter-apply-architecture-best-practices

Architects a Flutter application using the recommended layered approach (UI, Logic, Data). Use when structuring a new project or refactoring for scalability.

flutter/flutter-app-size

Measure and reduce the size of the Flutter app bundle, APK, or IPA

flutter/flutter-architecting-apps

Architects a Flutter application using the recommended layered approach (UI, Logic, Data). Use when structuring a new project or refactoring for scalability.

flutter/flutter-architecture

Use the Flutter team's recommended app architecture

flutter/flutter-building-forms

Builds Flutter forms with validation and user input handling. Use when creating login screens, data entry forms, or any multi-field user input.

flutter/flutter-building-layouts

Builds Flutter layouts using the constraint system and layout widgets. Use when creating or refining the UI structure of a Flutter application.

flutter/flutter-building-plugins

Builds Flutter plugins that provide native interop for other apps to use. Use when creating reusable packages that bridge Flutter with platform-specific functionality.

flutter/flutter-build-responsive-layout

Use `LayoutBuilder`, `MediaQuery`, or `Expanded/Flexible` to create a layout that adapts to different screen sizes. Use when you need the UI to look good on both mobile and tablet/desktop form factors.

flutter/flutter-caching

Cache data in a Flutter app

flutter/flutter-caching-data

Implements caching strategies for Flutter apps to improve performance and offline support. Use when retaining app data locally to reduce network requests or speed up startup.

flutter/flutter-concurrency

Execute long-running tasks in a background thread in Flutter

flutter/flutter-databases

Work with databases in a Flutter app

flutter/flutter-embedding-native-views

Embeds native Android, iOS, or macOS views into a Flutter app. Use when integrating complex native components like maps or web views.

関連スキル