Di più
Crea un'app Flutter con integrazione OverlayPortal e Back4app

15min
Introduzione
In questo tutorial, impareremo come utilizzare OverlayPortal in Flutter per creare sovrapposizioni dinamiche per widget come tooltip o menu. Inoltre, integreremo Back4app per memorizzare e gestire i dati degli utenti, come preferenze o azioni intraprese durante l'interazione con la sovrapposizione.
Alla fine di questo tutorial, sarai in grado di:
Implementare OverlayPortal in un'app Flutter.
Visualizzare sovrapposizioni interattive come menu galleggianti o tooltip.
Integrare Back4app come backend per memorizzare i dati relativi alla sovrapposizione (ad es., preferenze utente o azioni).
Requisiti
Ambiente Flutter: Assicurati di avere Flutter installato. Segui la guida all'installazione.
Account Back4app: Registrati su Back4app da utilizzare come backend.
Conoscenza di base dei widget Flutter: Familiarità con i widget Flutter comuni come pulsanti, contenitori e sovrapposizioni.
Passo 1: Configurazione di Back4app
1.1 Crea un Progetto Back4app
Accedi al tuo account Back4app e crea un nuovo progetto chiamato OverlayDemoApp.
Crea una Classe Parse chiamata OverlayActions con i seguenti campi:
username (String): Il nome dell'utente.
actionType (String): L'azione eseguita sull'overlay (ad es., "Aperto", "Chiuso", "Cliccato").
timestamp (DateTime): Il momento in cui è avvenuta l'azione.
1.2 Ottieni le tue Credenziali Back4app
Dalla dashboard di Back4app, vai alle impostazioni del tuo progetto e recupera il tuo ID Applicazione e Chiave Client. Queste credenziali saranno utilizzate per inizializzare Back4app nella tua app Flutter.
Passo 2: Configura il Progetto Flutter
2.1 Crea un Nuovo Progetto Flutter
Apri il tuo terminale e crea un nuovo progetto Flutter:
Bash
flutter create overlay_portal_app
cd overlay_portal_app
flutter create overlay_portal_app
cd overlay_portal_app
﻿
2.2 Aggiungi Dipendenze
Apri il pubspec.yaml file e aggiungi le dipendenze richieste per Parse SDK e 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
﻿
Esegui flutter pub get per installare le dipendenze.
2.3 Inizializza Parse SDK
In lib/main.dart, inizializza il Parse SDK con le tue credenziali 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(),
    );
  }
}
﻿
Sostituisci YOUR_BACK4APP_APP_ID e YOUR_BACK4APP_CLIENT_KEY con le tue credenziali Back4app.
Passo 3: Implementazione dell'OverlayPortal in Flutter
3.1 Crea il Widget OverlayScreen
In lib/overlay_screen.dart, crea il widget principale dove implementeremo 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'),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
﻿
In questa implementazione:
OverlayPortal è attivato e disattivato con la pressione di un pulsante.
L'interazione dell'utente (apertura, chiusura o clic) è registrata su Back4app utilizzando il _logAction metodo.
Il sovrapposizione contiene un messaggio e un pulsante che attiva un'azione.
3.2 Creare l'interfaccia utente
L'interfaccia utente contiene un pulsante che attiva la visibilità dell'overlay. L'overlay stesso è posizionato utilizzando il Positioned widget. Quando l'overlay è visibile, appare sullo schermo una casella flottante con un messaggio e un pulsante.
Passo 4: Eseguire l'app
Apri il terminale ed esegui l'app utilizzando:
Clicca sul Mostra Overlay pulsante per attivare l'overlay. Quando l'overlay è visibile, clicca sul pulsante all'interno dell'overlay. Tutte le interazioni (apri, chiudi e clicca) saranno registrate su Back4app.
Passo 5: Visualizzare le azioni registrate su Back4app
Per verificare che le azioni dell'utente vengano registrate:
Vai al tuo dashboard di Back4app.
Naviga alla OverlayActions classe.
Dovresti vedere i registri delle azioni (aperto, chiuso, cliccato) registrati con timestamp.
Passo 6: Personalizzazione dell'Overlay
Puoi ulteriormente personalizzare l'overlay:
Cambiando la posizione dell'overlay con il Positioned widget.
Aggiungendo widget più complessi, come moduli o menu, all'interno dell'overlay.
Stilizzando l'overlay con colori, bordi e ombre diversi.
Conclusione
In questo tutorial, hai imparato come implementare OverlayPortal in un'app Flutter per creare overlay interattivi che possono essere attivati e disattivati. Inoltre, abbiamo integrato Back4app per registrare le interazioni degli utenti con l'overlay, fornendo un backend robusto per memorizzare i dati e migliorare la funzionalità dell'app.
Questa configurazione può essere utilizzata per costruire applicazioni ricche di funzionalità in cui le interazioni degli utenti con gli overlay (ad es., tooltip, menu, popup) vengono memorizzate nel backend, offrendo approfondimenti sul comportamento degli utenti o facilitando il caricamento di contenuti dinamici basati su dati in tempo reale.
Per ulteriori informazioni:
﻿Documentazione di Flutter Overlay Portal﻿
﻿Documentazione di Back4app﻿
﻿
Aggiornato 23 Jan 2025
Questa pagina ti è stata di aiuto?
Crea un gioco sostenibile utilizzando Flutter e Back4app
AVANTI IL PROSSIMO
Come costruire un gioco Endless Runner avanzato utilizzando Flutter, il Casual Games Toolkit e Back4app