Plus
Construire une application Flutter avec OverlayPortal et intégration de Back4app

15min
Introduction
Dans ce tutoriel, nous allons apprendre à utiliser OverlayPortal dans Flutter pour créer des superpositions dynamiques pour des widgets comme des info-bulles ou des menus. De plus, nous allons intégrer Back4app pour stocker et gérer les données utilisateur, telles que les préférences ou les actions effectuées lors de l'interaction avec la superposition.
À la fin de ce tutoriel, vous serez en mesure de:
Implémenter OverlayPortal dans une application Flutter.
Afficher des superpositions interactives comme des menus flottants ou des info-bulles.
Intégrer Back4app comme backend pour stocker les données liées à la superposition (par exemple, les préférences utilisateur ou les actions).
Prérequis
Environnement Flutter: Assurez-vous d'avoir Flutter installé. Suivez le guide d'installation.
Compte Back4app: Inscrivez-vous sur Back4app pour l'utiliser comme votre backend.
Connaissances de base des widgets Flutter: Familiarité avec les widgets Flutter courants comme les boutons, les conteneurs et les superpositions.
Étape 1 : Configuration de Back4app
1.1 Créer un projet Back4app
Connectez-vous à votre compte Back4app et créez un nouveau projet nommé OverlayDemoApp.
Créez une classe Parse appelée OverlayActions avec les champs suivants :
nom d'utilisateur (String) : Le nom de l'utilisateur.
type d'action (String) : L'action effectuée sur l'overlay (par exemple, "Ouvert", "Fermé", "Cliqué").
horodatage (DateTime) : Le moment où l'action a eu lieu.
1.2 Obtenez vos identifiants Back4app
Depuis le tableau de bord Back4app, accédez aux paramètres de votre projet et récupérez votre ID d'application et votre clé client. Ces identifiants seront utilisés pour initialiser Back4app dans votre application Flutter.
Étape 2 : Configurer le projet Flutter
2.1 Créer un nouveau projet Flutter
Ouvrez votre terminal et créez un nouveau projet Flutter :
Bash
flutter create overlay_portal_app
cd overlay_portal_app
flutter create overlay_portal_app
cd overlay_portal_app
﻿
2.2 Ajouter des dépendances
Ouvrez le pubspec.yaml fichier et ajoutez les dépendances requises pour Parse SDK et 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
﻿
Exécutez flutter pub get pour installer les dépendances.
2.3 Initialiser Parse SDK
Dans lib/main.dart, initialisez le Parse SDK avec vos identifiants 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(),
    );
  }
}
﻿
Remplacez VOTRE_BACK4APP_APP_ID et VOTRE_BACK4APP_CLIENT_KEY par vos identifiants Back4app.
Étape 3 : Mise en œuvre de l'OverlayPortal dans Flutter
3.1 Créer le Widget OverlayScreen
Dans lib/overlay_screen.dart, créez le widget principal où nous allons mettre en œuvre l'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'),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
﻿
Dans cette implémentation :
OverlayPortal est activé et désactivé par une pression sur un bouton.
L'interaction de l'utilisateur (ouverture, fermeture ou clic) est enregistrée dans Back4app en utilisant la méthode _logAction.
Le superposition contient un message et un bouton qui déclenche une action.
3.2 Créer l'interface utilisateur
L'interface utilisateur contient un bouton qui bascule la visibilité de la superposition. La superposition elle-même est positionnée à l'aide du Positionné widget. Lorsque la superposition est visible, une boîte flottante avec un message et un bouton apparaît à l'écran.
Étape 4 : Exécution de l'application
Ouvrez le terminal et exécutez l'application en utilisant :
Cliquez sur le Afficher la superposition bouton pour basculer la superposition. Lorsque la superposition est visible, cliquez sur le bouton à l'intérieur de la superposition. Toutes les interactions (ouvrir, fermer et cliquer) seront enregistrées sur Back4app.
Étape 5 : Voir les actions enregistrées sur Back4app
Pour vérifier que les actions de l'utilisateur sont enregistrées :
Allez sur votre tableau de bord Back4app.
Naviguez vers la OverlayActions classe.
Vous devriez voir des enregistrements des actions (ouvertes, fermées, cliquées) enregistrées avec des horodatages.
Étape 6 : Personnaliser l'Overlay
Vous pouvez personnaliser davantage l'overlay en :
Changeant la position de l'overlay avec le Positioned widget.
Ajoutant des widgets plus complexes, tels que des formulaires ou des menus, dans l'overlay.
Stylisant l'overlay avec différentes couleurs, bordures et ombres.
Conclusion
Dans ce tutoriel, vous avez appris à implémenter OverlayPortal dans une application Flutter pour créer des overlays interactifs qui peuvent être activés et désactivés. De plus, nous avons intégré Back4app pour enregistrer les interactions des utilisateurs avec l'overlay, fournissant un backend robuste pour stocker des données et améliorer la fonctionnalité de l'application.
Cette configuration peut être utilisée pour construire des applications riches en fonctionnalités où les interactions des utilisateurs avec les overlays (par exemple, infobulles, menus, popups) sont stockées dans le backend, offrant des aperçus sur le comportement des utilisateurs ou facilitant le chargement dynamique de contenu basé sur des données en temps réel.
Pour plus d'informations :
﻿Documentation de Flutter Overlay Portal﻿
﻿Documentation de Back4app﻿
﻿
Mis à jour 23 Jan 2025
Cette page vous a-t-elle aidée?
Construire un jeu durable en utilisant Flutter et Back4app
Comment construire un jeu de course sans fin avancé en utilisant Flutter, le Casual Games Toolkit et Back4app