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

はじめに ホーム画面のウィジェットを使用すると、ユーザーはアプリを開かずにデバイスのホーム画面からリアルタイム情報にアクセスできます。flutterを使用すると、これらのウィジェットを作成するにはプラットフォーム固有のコードが必要です。しかし、 home widget https //pub dev/packages/home widget パッケージは、dartコードを使用してflutterアプリとホーム画面のウィジェット間でデータ交換を可能にすることで、このギャップを埋めます。 このチュートリアルでは、 home widget パッケージを使用してflutterでホーム画面ウィジェットを作成し、parse serverによって提供されるバックエンドサービスであるback4appと統合する方法を学びます。このチュートリアルの終わりには、back4appからのデータをホーム画面ウィジェットに表示するflutterアプリが完成します。 前提条件 このチュートリアルを完了するには、次のものが必要です flutter sdk があなたのマシンにインストールされていること。 公式のflutterインストールガイド https //flutter dev/docs/get started/install をあなたのオペレーティングシステムに従って確認してください。 flutterとdartの基本的な知識 。flutterが初めての場合は、 flutterドキュメント https //flutter dev/docs を確認して基本を理解してください。 ideまたはテキストエディタ 、例えばvisual studio codeやandroid studioなど。 back4appアカウント 。 back4app https //www back4app com/ に無料アカウントを登録してください。 flutter用のparse server sdk をあなたのプロジェクトに追加してください。 back4app flutter sdkガイド https //www back4app com/docs/flutter/parse flutter sdk を参照して設定方法を学ぶことができます。 プラットフォーム固有の設定 をandroidおよびiosのホーム画面ウィジェット用に行います。 ステップ1 – flutterプロジェクトの設定 1 1 新しいflutterプロジェクトを作成する ターミナルを開いて、次のコマンドを実行します flutter create home widget app プロジェクトディレクトリに移動します cd home widget app 1 2 依存関係を追加する 「 pubspec yaml 」を開いて、次の依存関係を追加します 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ダッシュボード https //dashboard back4app com/ 」にログインします。 「 新しいアプリを作成 」をクリックします。 アプリケーションの名前を入力します。例 「 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 」を開いて、次のように修正します 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 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 \<! 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 // 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 \<! 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 \<! 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 」を開いて修正します 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 、ウィジェット名を更新します 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 アプリを実行する ターミナルで、次のコマンドを実行します flutter run 6 2 ウィジェットをホーム画面に追加する android ホーム画面を長押しして、 "ウィジェット" を選択します。 ウィジェットリストからアプリを見つけます。 ウィジェットをホーム画面にドラッグ＆ドロップします。 ios ホーム画面を長押しして、 ジグルモード に入ります。 左上隅の "+" ボタンをタップします。 名前でウィジェットを検索します。 ウィジェットをホーム画面に追加します。 6 3 テストデータの更新 アプリの "メッセージを更新" ボタンをタップして、back4appから新しいデータを取得します。 ホーム画面のウィジェットは新しいデータで更新されるはずです。 結論 このチュートリアルでは、 home widget パッケージを使用してflutterでホーム画面ウィジェットを作成し、back4appと統合して動的データを表示する方法を学びました。これにより、ユーザーに最新の情報をホーム画面で提供し、エンゲージメントとユーザー体験を向上させることができます。 次のステップ 動的データ back4appのライブクエリを使用してリアルタイムデータの更新を実装します。 インタラクティビティ ウィジェットにクリックアクションを追加して、アプリ内の特定のページを開きます。 カスタマイズ ウィジェットをアプリのテーマやデザインに合わせてスタイルします。 追加リソース back4app ドキュメント https //www back4app com/docs pub devの home widget パッケージ https //pub dev/packages/home widget flutterガイドのparse sdk https //docs parseplatform org/flutter/guide/ flutter公式ドキュメント https //flutter dev/docs コーディングを楽しんでください！