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

14min
はじめに
このチュートリアルでは、FlutterでOverlayPortalを使用して、ツールチップやメニューのようなウィジェットの動的オーバーレイを作成する方法を学びます。さらに、ユーザーデータ（好みやオーバーレイとのインタラクション時に行ったアクションなど）を保存および管理するためにBack4appを統合します。
このチュートリアルの終わりまでに、あなたは以下のことができるようになります:
FlutterアプリでOverlayPortalを実装する。
浮遊メニューやツールチップのようなインタラクティブなオーバーレイを表示する。
オーバーレイ関連データ（例：ユーザーの好みやアクション）を保存するバックエンドとしてBack4appを統合する。
前提条件
Flutter環境: Flutterがインストールされていることを確認してください。インストールガイドに従ってください。
Back4appアカウント: バックエンドとして使用するために、Back4appにサインアップしてください。
Flutterウィジェットの基本知識: ボタン、コンテナ、オーバーレイなどの一般的なFlutterウィジェットに慣れていること。
ステップ 1: Back4appの設定
1.1 Back4appプロジェクトの作成
あなたの Back4appアカウント にサインインし、 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プロジェクトを作成します:
Bash
flutter create overlay_portal_app
cd overlay_portal_app
flutter create overlay_portal_app
cd overlay_portal_app
﻿
2.2 依存関係を追加する
 pubspec.yaml ファイルを開き、Parse SDK とOverlayPortal の必要な依存関係を追加します:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^latest_version
  overlay_portal: ^0.1.0
  provider: ^5.0.0
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の資格情報で初期化します:
Dart
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(),
    );
  }
}
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:
Dart
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'),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
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 ドキュメント﻿
﻿Back4app ドキュメント﻿
﻿
更新日 24 Jan 2025
このページは役に立ちましたか？
FlutterとBack4appを使用した持続可能なゲームの構築
Flutter、カジュアルゲームツールキット、およびBack4appを使用して高度なエンドレスランナーゲームを構築する方法