Erstellen einer Flutter-App mit OverlayPortal und Back4app-Integration

15min
Einführung
In diesem Tutorial werden wir lernen, wie man OverlayPortal in Flutter verwendet, um dynamische Overlays für Widgets wie Tooltips oder Menüs zu erstellen. Darüber hinaus integrieren wir Back4app zur Speicherung und Verwaltung von Benutzerdaten, wie z.B. Präferenzen oder Aktionen, die beim Interagieren mit dem Overlay durchgeführt werden.
Am Ende dieses Tutorials werden Sie in der Lage sein:
Implementieren Sie OverlayPortal in einer Flutter-App.
Interaktive Overlays wie schwebende Menüs oder Tooltips anzeigen.
Integrieren Sie Back4app als Backend zur Speicherung von overlaybezogenen Daten (z.B. Benutzereinstellungen oder Aktionen).
Voraussetzungen
Flutter-Umgebung: Stellen Sie sicher, dass Sie Flutter installiert haben. Folgen Sie der Installationsanleitung.
Back4app-Konto: Melden Sie sich bei Back4app an, um es als Ihr Backend zu verwenden.
Grundkenntnisse von Flutter-Widgets: Vertrautheit mit gängigen Flutter-Widgets wie Schaltflächen, Containern und Overlays.
Schritt 1: Back4app einrichten
1.1 Erstellen Sie ein Back4app-Projekt
Melden Sie sich bei Ihrem Back4app-Konto an und erstellen Sie ein neues Projekt mit dem Namen OverlayDemoApp.
Erstellen Sie eine Parse-Klasse mit dem Namen OverlayActions mit den folgenden Feldern:
Benutzername (String): Der Name des Benutzers.
Aktionstyp (String): Die Aktion, die auf dem Overlay durchgeführt wurde (z. B. "Geöffnet", "Geschlossen", "Geklickt").
Zeitstempel (DateTime): Der Zeitpunkt, an dem die Aktion stattfand.
1.2 Holen Sie sich Ihre Back4app-Anmeldeinformationen
Navigieren Sie im Back4app-Dashboard zu den Einstellungen Ihres Projekts und rufen Sie Ihre Anwendungs-ID und Client-Schlüssel. Diese Anmeldeinformationen werden verwendet, um Back4app in Ihrer Flutter-App zu initialisieren.
Schritt 2: Flutter-Projekt einrichten
2.1 Erstellen Sie ein neues Flutter-Projekt
Öffnen Sie Ihr Terminal und erstellen Sie ein neues Flutter-Projekt:
Bash
flutter create overlay_portal_app
cd overlay_portal_app
flutter create overlay_portal_app
cd overlay_portal_app
﻿
2.2 Abhängigkeiten hinzufügen
Öffnen Sie die pubspec.yaml-Datei und fügen Sie die erforderlichen Abhängigkeiten für Parse SDK und 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
﻿
Führen Sie flutter pub get aus, um die Abhängigkeiten zu installieren.
2.3 Parse SDK initialisieren
In lib/main.dart, initialisieren Sie das Parse SDK mit Ihren Back4app-Anmeldeinformationen:
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(),
    );
  }
}
﻿
Ersetzen Sie YOUR_BACK4APP_APP_ID und YOUR_BACK4APP_CLIENT_KEY durch Ihre Back4app-Anmeldeinformationen.
Schritt 3: Implementierung des OverlayPortals in Flutter
3.1 Erstellen Sie das OverlayScreen-Widget
In lib/overlay_screen.dart, erstellen Sie das Haupt-Widget, in dem wir das 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'),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
﻿
In dieser Implementierung:
OverlayPortal wird mit einem Knopfdruck ein- und ausgeschaltet.
Die Interaktion des Benutzers (Öffnen, Schließen oder Klicken) wird an Back4app unter Verwendung der _logAction Methode protokolliert.
Das Overlay enthält eine Nachricht und einen Button, der eine Aktion auslöst.
3.2 Erstellen der Benutzeroberfläche
Die Benutzeroberfläche enthält eine Schaltfläche, die die Sichtbarkeit des Overlays umschaltet. Das Overlay selbst wird mit dem Positioniert Widget positioniert. Wenn das Overlay sichtbar ist, erscheint ein schwebendes Feld mit einer Nachricht und einer Schaltfläche auf dem Bildschirm.
Schritt 4: Die App ausführen
Öffnen Sie das Terminal und führen Sie die App mit folgendem Befehl aus:
Klicken Sie auf die Overlay anzeigen Schaltfläche, um das Overlay umzuschalten. Wenn das Overlay sichtbar ist, klicken Sie auf die Schaltfläche im Overlay. Alle Interaktionen (öffnen, schließen und klicken) werden in Back4app protokolliert.
Schritt 5: Protokollierte Aktionen in Back4app anzeigen
Um zu überprüfen, ob die Aktionen des Benutzers protokolliert werden:
Gehe zu deinem Back4app-Dashboard.
Navigiere zur OverlayActions Klasse.
Du solltest Aufzeichnungen der Aktionen (geöffnet, geschlossen, geklickt) mit Zeitstempeln sehen.
Schritt 6: Anpassen des Overlays
Du kannst das Overlay weiter anpassen, indem du:
Die Position des Overlays mit dem Positioned Widget änderst.
Komplexere Widgets, wie Formulare oder Menüs, innerhalb des Overlays hinzufügst.
Das Overlay mit verschiedenen Farben, Rahmen und Schatten stylst.
Fazit
In diesem Tutorial hast du gelernt, wie man OverlayPortal in einer Flutter-App implementiert, um interaktive Overlays zu erstellen, die ein- und ausgeschaltet werden können. Darüber hinaus haben wir Back4app integriert, um Benutzerinteraktionen mit dem Overlay zu protokollieren, was eine robuste Backend-Lösung zur Speicherung von Daten und zur Verbesserung der Funktionalität der App bietet.
Dieses Setup kann verwendet werden, um funktionsreiche Anwendungen zu erstellen, in denen Benutzerinteraktionen mit Overlays (z. B. Tooltips, Menüs, Popups) im Backend gespeichert werden, um Einblicke in das Benutzerverhalten zu bieten oder das dynamische Laden von Inhalten basierend auf Echtzeitdaten zu erleichtern.
Für weitere Informationen:
﻿Flutter Overlay Portal Dokumentation﻿
﻿Back4app Dokumentation﻿
﻿
Aktualisiert 23 Jan 2025
Hat Ihnen diese Seite geholfen?
Ein nachhaltiges Spiel mit Flutter und Back4app entwickeln
ALS NÄCHSTES
Wie man ein fortgeschrittenes endloses Laufspiel mit Flutter, dem Casual Games Toolkit und Back4app erstellt