OverlayPortalとBack4app統合を使用してFlutterアプリを構築する

はじめに このチュートリアルでは、flutterで overlayportal を使用して、ツールチップやメニューのようなウィジェットの動的オーバーレイを作成する方法を学びます。さらに、ユーザーデータ（好みやオーバーレイとのインタラクション時に行ったアクションなど）を保存および管理するために back4app を統合します。 このチュートリアルの終わりまでに、あなたは以下のことができるようになります flutterアプリで overlayportal を実装する。 浮遊メニューやツールチップのようなインタラクティブなオーバーレイを表示する。 オーバーレイ関連データ（例：ユーザーの好みやアクション）を保存するバックエンドとして back4app を統合する。 前提条件 flutter環境 flutterがインストールされていることを確認してください。 インストールガイド https //flutter dev/docs/get started/install に従ってください。 back4appアカウント バックエンドとして使用するために、 back4app https //www back4app com/ にサインアップしてください。 flutterウィジェットの基本知識 ボタン、コンテナ、オーバーレイなどの一般的なflutterウィジェットに慣れていること。 ステップ 1 back4appの設定 1 1 back4appプロジェクトの作成 あなたの back4appアカウント https //www back4app com/ にサインインし、 overlaydemoapp という新しいプロジェクトを作成します。 次のフィールドを持つ parse class を overlayactions と呼んで作成します username (string) ユーザーの名前。 actiontype (string) オーバーレイに対して行われたアクション（例 "opened", "closed", "clicked"）。 timestamp (datetime) アクションが発生した時間。 1 2 back4appの認証情報を取得する back4appのダッシュボードから、プロジェクトの設定に移動し、あなたの application id と client key を取得します。これらの認証情報は、flutterアプリでback4appを初期化するために使用されます。 ステップ 2 flutterプロジェクトの設定 2 1 新しいflutterプロジェクトを作成する ターミナルを開いて、新しいflutterプロジェクトを作成します flutter create overlay portal app cd overlay portal app 2 2 依存関係を追加する pubspec yaml ファイルを開き、 parse sdk と overlayportal の必要な依存関係を追加します dependencies flutter sdk flutter parse server sdk flutter ^latest version overlay portal ^0 1 0 provider ^5 0 0 依存関係をインストールするには、 flutter pub get を実行します。 2 3 parse sdkを初期化する lib/main dart , parse sdk をback4appの資格情報で初期化します import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your back4app app id'; const keyclientkey = 'your back4app client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true, ); runapp(myapp()); } class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( title 'overlay portal demo', theme themedata(primaryswatch colors blue), home overlayscreen(), ); } } your back4app app id と your back4app client key をback4appの資格情報に置き換えます。 ステップ 3 flutter で overlayportal を実装する 3 1 overlayscreen ウィジェットを作成する に lib/overlay screen dart , 実装するメインウィジェットを作成します overlayportal import 'package\ flutter/material dart'; import 'package\ overlay portal/overlay portal dart'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; class overlayscreen extends statefulwidget { @override overlayscreenstate createstate() => overlayscreenstate(); } class overlayscreenstate extends state\<overlayscreen> { final overlayportalcontroller controller = overlayportalcontroller(); bool isoverlayvisible = false; future\<void> logaction(string actiontype) async { // log action to back4app final actionobject = parseobject('overlayactions') set('username', 'player1') // example user set('actiontype', actiontype) set('timestamp', datetime now()); await actionobject save(); } void toggleoverlay() { setstate(() { isoverlayvisible = ! isoverlayvisible; if ( isoverlayvisible) { logaction('opened'); } else { logaction('closed'); } }); controller toggle(); } @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('overlay portal example'), ), body center( child column( mainaxisalignment mainaxisalignment center, children \[ elevatedbutton( onpressed toggleoverlay, child text( isoverlayvisible ? 'hide overlay' 'show overlay'), ), overlayportal( controller controller, overlaychildbuilder (context) => positioned( top 150, left 50, child material( elevation 5 0, borderradius borderradius circular(8), child container( padding edgeinsets all(16 0), color colors blueaccent, child column( mainaxissize mainaxissize min, children \[ text( 'this is an overlay!', style textstyle(color colors white), ), sizedbox(height 10), elevatedbutton( onpressed () { logaction('clicked'); scaffoldmessenger of(context) showsnackbar(snackbar( content text('overlay button clicked!'), )); }, child text('click me'), ), ], ), ), ), ), ), ], ), ), ); } } この実装では オーバーレイポータル はボタンを押すことでオンとオフが切り替えられます。 ユーザーの操作（開く、閉じる、またはクリックする）は back4app に logaction メソッドを使用して記録されます。 オーバーレイにはメッセージとアクションをトリガーするボタンが含まれています。 3 2 uiを作成する uiにはオーバーレイの表示/非表示を切り替えるボタンが含まれています。オーバーレイ自体は positioned ウィジェットを使用して配置されています。オーバーレイが表示されているとき、メッセージとボタンを含む浮動ボックスが画面に表示されます。 ステップ4 アプリを実行する ターミナルを開き、次のコマンドでアプリを実行します 「 オーバーレイを表示 」ボタンをクリックしてオーバーレイを切り替えます。オーバーレイが表示されているときは、オーバーレイ内のボタンをクリックします。すべてのインタラクション（オープン、クローズ、クリック）はback4appに記録されます。 ステップ5 back4appで記録されたアクションを表示する ユーザーのアクションがログに記録されていることを確認するには back4appダッシュボードに移動します。 「 overlayactions 」クラスに移動します。 アクション（オープン、クローズ、クリック）の記録がタイムスタンプと共に表示されるはずです。 ステップ6 オーバーレイのカスタマイズ オーバーレイをさらにカスタマイズするには 「 positioned 」ウィジェットを使ってオーバーレイの位置を変更します。 オーバーレイ内にフォームやメニューなどのより複雑なウィジェットを追加します。 異なる色、境界線、影でオーバーレイをスタイリングします。 結論 このチュートリアルでは、インタラクティブなオーバーレイを作成するために、flutterアプリで overlayportal を実装する方法を学びました。さらに、ユーザーのインタラクションをログに記録するために back4app を統合し、データを保存しアプリの機能を強化するための堅牢なバックエンドを提供しました。 このセットアップは、オーバーレイ（例：ツールチップ、メニュー、ポップアップ）に対するユーザーのインタラクションがバックエンドに保存され、ユーザーの行動に関する洞察を提供したり、リアルタイムデータに基づいて動的コンテンツの読み込みを促進する機能豊富なアプリケーションを構築するために使用できます。 詳細情報 flutter overlay portal ドキュメント https //pub dev/packages/overlay portal back4app ドキュメント https //www back4app com/docs