もっと
FlutterでHomeWidgetとBack4Appを使用してホーム画面ウィジェットを作成する方法

30min
はじめに
ホーム画面のウィジェットを使用すると、ユーザーはアプリを開かずにデバイスのホーム画面からリアルタイム情報にアクセスできます。Flutterを使用すると、これらのウィジェットを作成するにはプラットフォーム固有のコードが必要です。しかし、home_widgetパッケージは、Dartコードを使用してFlutterアプリとホーム画面のウィジェット間でデータ交換を可能にすることで、このギャップを埋めます。
このチュートリアルでは、home_widgetパッケージを使用してFlutterでホーム画面ウィジェットを作成し、Parse Serverによって提供されるバックエンドサービスであるBack4Appと統合する方法を学びます。このチュートリアルの終わりには、Back4Appからのデータをホーム画面ウィジェットに表示するFlutterアプリが完成します。
前提条件
このチュートリアルを完了するには、次のものが必要です:
Flutter SDK があなたのマシンにインストールされていること。 公式のFlutterインストールガイド をあなたのオペレーティングシステムに従って確認してください。
FlutterとDartの基本的な知識。Flutterが初めての場合は、 Flutterドキュメント を確認して基本を理解してください。
IDEまたはテキストエディタ、例えばVisual Studio CodeやAndroid Studioなど。
 Back4Appアカウント。 Back4App に無料アカウントを登録してください。
Flutter用のParse Server SDK をあなたのプロジェクトに追加してください。 Back4App Flutter SDKガイド を参照して設定方法を学ぶことができます。
プラットフォーム固有の設定 をAndroidおよびiOSのホーム画面ウィジェット用に行います。
ステップ1 – Flutterプロジェクトの設定
1.1. 新しいFlutterプロジェクトを作成する
ターミナルを開いて、次のコマンドを実行します:
Bash
flutter create home_widget_app
flutter create home_widget_app
﻿
プロジェクトディレクトリに移動します:
Bash
cd home_widget_app
cd home_widget_app
﻿
1.2. 依存関係を追加する
「pubspec.yaml」を開いて、次の依存関係を追加します:
YAML
dependencies:
  flutter:
    sdk: flutter
  home_widget: ^0.2.4
  parse_server_sdk_flutter: ^4.0.1
dependencies:
  flutter:
    sdk: flutter
  home_widget: ^0.2.4
  parse_server_sdk_flutter: ^4.0.1
﻿
「flutter pub get」を実行して、パッケージをインストールします。
ステップ2 – Back4Appの設定
2.1. 新しいBack4Appアプリケーションを作成する
「Back4Appダッシュボード」にログインします。
「新しいアプリを作成」をクリックします。
アプリケーションの名前を入力します。例: 「HomeWidgetApp」と入力し、「作成」をクリックします。
2.2. データモデルを設定する
アプリケーションダッシュボードで、"Database"セクションに移動します。
をクリックします"Create a class".
モーダルで:
を選択します"Custom".
クラス名として"Message"を入力します。
をクリックします"Create class".
2.3. クラスにカラムを追加する
"Message"クラスで、"+"をクリックして新しいカラムを追加します。
次のカラムを追加します:
title: タイプ String
content: タイプ String
"Message"クラスにサンプルデータを追加します。例えば:
2.4. アプリケーションクレデンシャルを取得する
に移動しますApp Settings > Security & Keys.
あなたのApplication IDとClient Keyをメモしてください。
ステップ 3 – Flutter アプリでの Parse の初期化
「lib/main.dart」を開いて、次のように修正します:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:home_widget/home_widget.dart';
import 'dart:async';
import 'home_page.dart'; // You'll create this file next

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APPLICATION_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    debug: true,
  );

  runApp(MyApp());
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:home_widget/home_widget.dart';
import 'dart:async';
import 'home_page.dart'; // You'll create this file next

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APPLICATION_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    debug: true,
  );

  runApp(MyApp());
}
﻿
「'YOUR_APPLICATION_ID'」と「'YOUR_CLIENT_KEY'」を実際の Back4App の資格情報に置き換えます。
ステップ 4 – Back4App からのデータ取得
新しいファイルを作成する lib/home_page.dart:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:home_widget/home_widget.dart';
import 'dart:async';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class Message {
  final String title;
  final String content;

  Message(this.title, this.content);
}

class _HomePageState extends State<HomePage> {
  Message? message;

  @override
  void initState() {
    super.initState();
    fetchMessage();
  }

  Future<void> fetchMessage() async {
    final QueryBuilder<ParseObject> query =
        QueryBuilder<ParseObject>(ParseObject('Message'));

    final ParseResponse apiResponse = await query.query();

    if (apiResponse.success && apiResponse.results != null) {
      final data = apiResponse.results!.first;
      final title = data.get<String>('title') ?? '';
      final content = data.get<String>('content') ?? '';
      setState(() {
        message = Message(title, content);
      });
      updateHomeWidget(title, content);
    } else {
      print('Error fetching data: ${apiResponse.error?.message}');
    }
  }

  Future<void> updateHomeWidget(String title, String content) async {
    await HomeWidget.saveWidgetData<String>('title', title);
    await HomeWidget.saveWidgetData<String>('content', content);
    await HomeWidget.updateWidget(
        name: 'HomeWidgetProvider', // Name of your HomeWidgetProvider
        iOSName: 'HomeWidget');     // Used in iOS
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Widget App'),
      ),
      body: Center(
        child: message == null
            ? CircularProgressIndicator()
            : Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    message!.title,
                    style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                  ),
                  SizedBox(height: 10),
                  Text(
                    message!.content,
                    style: TextStyle(fontSize: 18),
                  ),
                  SizedBox(height: 20),
                  ElevatedButton(
                    onPressed: fetchMessage,
                    child: Text('Refresh Message'),
                  ),
                ],
              ),
      ),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:home_widget/home_widget.dart';
import 'dart:async';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class Message {
  final String title;
  final String content;

  Message(this.title, this.content);
}

class _HomePageState extends State<HomePage> {
  Message? message;

  @override
  void initState() {
    super.initState();
    fetchMessage();
  }

  Future<void> fetchMessage() async {
    final QueryBuilder<ParseObject> query =
        QueryBuilder<ParseObject>(ParseObject('Message'));

    final ParseResponse apiResponse = await query.query();

    if (apiResponse.success && apiResponse.results != null) {
      final data = apiResponse.results!.first;
      final title = data.get<String>('title') ?? '';
      final content = data.get<String>('content') ?? '';
      setState(() {
        message = Message(title, content);
      });
      updateHomeWidget(title, content);
    } else {
      print('Error fetching data: ${apiResponse.error?.message}');
    }
  }

  Future<void> updateHomeWidget(String title, String content) async {
    await HomeWidget.saveWidgetData<String>('title', title);
    await HomeWidget.saveWidgetData<String>('content', content);
    await HomeWidget.updateWidget(
        name: 'HomeWidgetProvider', // Name of your HomeWidgetProvider
        iOSName: 'HomeWidget');     // Used in iOS
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Widget App'),
      ),
      body: Center(
        child: message == null
            ? CircularProgressIndicator()
            : Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    message!.title,
                    style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                  ),
                  SizedBox(height: 10),
                  Text(
                    message!.content,
                    style: TextStyle(fontSize: 18),
                  ),
                  SizedBox(height: 20),
                  ElevatedButton(
                    onPressed: fetchMessage,
                    child: Text('Refresh Message'),
                  ),
                ],
              ),
      ),
    );
  }
}
﻿
説明
メッセージクラス: メッセージデータを保持するシンプルなモデルクラスです。
fetchMessage(): Back4Appの Message クラスからデータを取得し、message 変数を更新します。
updateHomeWidget(): 取得したデータをホーム画面ウィジェットに保存し、HomeWidget.saveWidgetData を使用して更新をトリガーします。HomeWidget.updateWidget を使用します。
build(): メッセージデータとメッセージを更新するボタンを表示します。
ステップ5 – ホーム画面ウィジェットの設定
5.1. Androidのセットアップ
5.1.1. ウィジェットレイアウトの作成
新しいXMLレイアウトファイルを作成します android/app/src/main/res/layout/ という名前で home_widget.xml:
XML
<!-- android/app/src/main/res/layout/home_widget.xml -->
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <TextView
        android:id="@+id/widget_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Title"
        android:textSize="18sp"
        android:layout_gravity="center_horizontal|top"
        android:paddingTop="16dp"/>

    <TextView
        android:id="@+id/widget_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Content"
        android:textSize="14sp"
        android:layout_gravity="center"
        android:paddingTop="8dp"/>

</FrameLayout>
<!-- android/app/src/main/res/layout/home_widget.xml -->
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <TextView
        android:id="@+id/widget_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Title"
        android:textSize="18sp"
        android:layout_gravity="center_horizontal|top"
        android:paddingTop="16dp"/>

    <TextView
        android:id="@+id/widget_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Content"
        android:textSize="14sp"
        android:layout_gravity="center"
        android:paddingTop="8dp"/>

</FrameLayout>
﻿
5.1.2. ウィジェットプロバイダーの作成
新しいJavaクラスを作成します android/app/src/main/java/your/package/name/ という名前の HomeWidgetProvider.java:
Java
// android/app/src/main/java/your/package/name/HomeWidgetProvider.java
package your.package.name;

import android.appwidget.AppWidgetManager;
import android.appwidget.AppWidgetProvider;
import android.content.Context;

public class HomeWidgetProvider extends AppWidgetProvider {
    @Override
    public void onUpdate(Context context, AppWidgetManager appWidgetManager, int[] appWidgetIds) {
        // The HomeWidget package handles the update
    }
}
// android/app/src/main/java/your/package/name/HomeWidgetProvider.java
package your.package.name;

import android.appwidget.AppWidgetManager;
import android.appwidget.AppWidgetProvider;
import android.content.Context;

public class HomeWidgetProvider extends AppWidgetProvider {
    @Override
    public void onUpdate(Context context, AppWidgetManager appWidgetManager, int[] appWidgetIds) {
        // The HomeWidget package handles the update
    }
}
﻿
を置き換えます your.package.name 実際のパッケージ名に。
5.1.3. Android Manifestの更新
ウィジェットプロバイダーを追加します AndroidManifest.xml:
XML
<!-- Add inside the <application> tag -->
<receiver android:name=".HomeWidgetProvider">
    <intent-filter>
        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
    </intent-filter>

    <meta-data android:name="android.appwidget.provider"
        android:resource="@xml/home_widget_info"/>
</receiver>
<!-- Add inside the <application> tag -->
<receiver android:name=".HomeWidgetProvider">
    <intent-filter>
        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
    </intent-filter>

    <meta-data android:name="android.appwidget.provider"
        android:resource="@xml/home_widget_info"/>
</receiver>
﻿
5.1.4. ウィジェット情報XMLの作成
新しいXMLファイルを作成します android/app/src/main/res/xml/ という名前の home_widget_info.xml:
XML
<!-- android/app/src/main/res/xml/home_widget_info.xml -->
<?xml version="1.0" encoding="utf-8"?>
<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
    android:initialLayout="@layout/home_widget"
    android:minWidth="180dp"
    android:minHeight="110dp"
    android:updatePeriodMillis="0"
    android:resizeMode="horizontal|vertical"
    android:widgetCategory="home_screen">
</appwidget-provider>
<!-- android/app/src/main/res/xml/home_widget_info.xml -->
<?xml version="1.0" encoding="utf-8"?>
<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
    android:initialLayout="@layout/home_widget"
    android:minWidth="180dp"
    android:minHeight="110dp"
    android:updatePeriodMillis="0"
    android:resizeMode="horizontal|vertical"
    android:widgetCategory="home_screen">
</appwidget-provider>
﻿
5.2. iOSの設定
5.2.1. ウィジェット拡張を作成する
FlutterプロジェクトをXcodeで開くには、ios/Runner.xcworkspaceを開きます。
クリックします ファイル > 新規 > ターゲット.
「ウィジェット拡張」を選択し、「次へ」をクリックします。
「HomeWidget」を製品名として入力し、「構成インテントを含める」のチェックを外します。
「完了」をクリックし、「スキームをアクティブにする」を選択します。
5.2.2. ウィジェットコードを更新する
「HomeWidget」拡張で、「HomeWidget.swift」を開いて修正します:
Swift
import WidgetKit
import SwiftUI

struct Provider: TimelineProvider {
    func placeholder(in context: Context) -> SimpleEntry {
        SimpleEntry(date: Date(), title: "Title", content: "Content")
    }

    func getSnapshot(in context: Context, completion: @escaping (SimpleEntry) -> ()) {
        let entry = SimpleEntry(date: Date(), title: "Title", content: "Content")
        completion(entry)
    }

    func getTimeline(in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
        var entries: [SimpleEntry] = []

        let sharedDefaults = UserDefaults(suiteName: "YOUR_GROUP_ID")
        let title = sharedDefaults?.string(forKey: "title") ?? "Title"
        let content = sharedDefaults?.string(forKey: "content") ?? "Content"

        let entryDate = Date()
        let entry = SimpleEntry(date: entryDate, title: title, content: content)
        entries.append(entry)

        let timeline = Timeline(entries: entries, policy: .never)
        completion(timeline)
    }
}

struct SimpleEntry: TimelineEntry {
    let date: Date
    let title: String
    let content: String
}

struct HomeWidgetEntryView : View {
    var entry: Provider.Entry

    var body: some View {
        VStack {
            Text(entry.title)
                .font(.headline)
            Text(entry.content)
                .font(.body)
        }
    }
}

@main
struct HomeWidget: Widget {
    let kind: String = "HomeWidget"

    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            HomeWidgetEntryView(entry: entry)
        }
        .configurationDisplayName("Home Widget")
        .description("This is a home screen widget.")
    }
}
import WidgetKit
import SwiftUI

struct Provider: TimelineProvider {
    func placeholder(in context: Context) -> SimpleEntry {
        SimpleEntry(date: Date(), title: "Title", content: "Content")
    }

    func getSnapshot(in context: Context, completion: @escaping (SimpleEntry) -> ()) {
        let entry = SimpleEntry(date: Date(), title: "Title", content: "Content")
        completion(entry)
    }

    func getTimeline(in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
        var entries: [SimpleEntry] = []

        let sharedDefaults = UserDefaults(suiteName: "YOUR_GROUP_ID")
        let title = sharedDefaults?.string(forKey: "title") ?? "Title"
        let content = sharedDefaults?.string(forKey: "content") ?? "Content"

        let entryDate = Date()
        let entry = SimpleEntry(date: entryDate, title: title, content: content)
        entries.append(entry)

        let timeline = Timeline(entries: entries, policy: .never)
        completion(timeline)
    }
}

struct SimpleEntry: TimelineEntry {
    let date: Date
    let title: String
    let content: String
}

struct HomeWidgetEntryView : View {
    var entry: Provider.Entry

    var body: some View {
        VStack {
            Text(entry.title)
                .font(.headline)
            Text(entry.content)
                .font(.body)
        }
    }
}

@main
struct HomeWidget: Widget {
    let kind: String = "HomeWidget"

    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            HomeWidgetEntryView(entry: entry)
        }
        .configurationDisplayName("Home Widget")
        .description("This is a home screen widget.")
    }
}
﻿
「YOUR_GROUP_ID」をあなたのアプリグループ識別子（例：group.com.example.homeWidgetApp）に置き換えます。
5.2.3. アプリグループの設定
Xcodeでプロジェクトを選択し、「Signing & Capabilities」に移動します。
「App Groups」をメインアプリターゲットとウィジェット拡張の両方に追加します。
新しいアプリグループを作成します（例：group.com.example.homeWidgetApp）。
両方のターゲットが同じアプリグループを有効にしていることを確認します。
5.3. プラットフォーム固有の設定のためのFlutterコードの更新
あなたのupdateHomeWidget()メソッドの中でhome_page.dart、ウィジェット名を更新します:
Dart
await HomeWidget.updateWidget(
    name: 'HomeWidgetProvider', // For Android, the class name of your AppWidgetProvider
    iOSName: 'HomeWidget',      // For iOS, the name of your Widget Extension
);
await HomeWidget.updateWidget(
    name: 'HomeWidgetProvider', // For Android, the class name of your AppWidgetProvider
    iOSName: 'HomeWidget',      // For iOS, the name of your Widget Extension
);
﻿
ステップ6 – アプリの実行とウィジェットのテスト
6.1. アプリを実行する
ターミナルで、次のコマンドを実行します:
Bash
flutter run
flutter run
﻿
6.2. ウィジェットをホーム画面に追加する
Android
ホーム画面を長押しして、"ウィジェット"を選択します。
ウィジェットリストからアプリを見つけます。
ウィジェットをホーム画面にドラッグ＆ドロップします。
iOS
ホーム画面を長押しして、ジグルモードに入ります。
左上隅の"+"ボタンをタップします。
名前でウィジェットを検索します。
ウィジェットをホーム画面に追加します。
6.3. テストデータの更新
アプリの "メッセージを更新" ボタンをタップして、Back4Appから新しいデータを取得します。
ホーム画面のウィジェットは新しいデータで更新されるはずです。
結論
このチュートリアルでは、 home_widget パッケージを使用してFlutterでホーム画面ウィジェットを作成し、Back4Appと統合して動的データを表示する方法を学びました。これにより、ユーザーに最新の情報をホーム画面で提供し、エンゲージメントとユーザー体験を向上させることができます。
次のステップ
動的データ: Back4Appのライブクエリを使用してリアルタイムデータの更新を実装します。
インタラクティビティ: ウィジェットにクリックアクションを追加して、アプリ内の特定のページを開きます。
カスタマイズ: ウィジェットをアプリのテーマやデザインに合わせてスタイルします。
追加リソース
﻿Back4App ドキュメント﻿
﻿pub.devの home_widget パッケージ﻿
﻿FlutterガイドのParse SDK﻿
﻿Flutter公式ドキュメント﻿
コーディングを楽しんでください！
更新日 24 Jan 2025
このページは役に立ちましたか？
Back4AppのParseを使用したFlutterのサードパーティ認証に関する完全ガイド
FlutterにおけるコールバックショートカットとBack4Appを使用したキーボードショートカットの実装方法