Más
Construyendo una aplicación Flutter con OverlayPortal e integración de Back4app

15min
Introducción
En este tutorial, aprenderemos cómo usar OverlayPortal en Flutter para crear superposiciones dinámicas para widgets como tooltips o menús. Además, integraremos Back4app para almacenar y gestionar datos de usuario, como preferencias o acciones realizadas al interactuar con la superposición.
Al final de este tutorial, podrás:
Implementar OverlayPortal en una aplicación Flutter.
Mostrar superposiciones interactivas como menús flotantes o tooltips.
Integrar Back4app como el backend para almacenar datos relacionados con la superposición (por ejemplo, preferencias de usuario o acciones).
Requisitos previos
Entorno de Flutter: Asegúrate de tener Flutter instalado. Sigue la guía de instalación.
Cuenta de Back4app: Regístrate en Back4app para usar como tu backend.
Conocimientos básicos de widgets de Flutter: Familiaridad con widgets comunes de Flutter como botones, contenedores y superposiciones.
Paso 1: Configuración de Back4app
1.1 Crear un Proyecto en Back4app
Inicia sesión en tu cuenta de Back4app y crea un nuevo proyecto llamado OverlayDemoApp.
Crea una Clase Parse llamada OverlayActions con los siguientes campos:
nombre de usuario (String): El nombre del usuario.
tipoDeAcción (String): La acción realizada en la superposición (por ejemplo, "Abierto", "Cerrado", "Clicado").
marca de tiempo (DateTime): El momento en que ocurrió la acción.
1.2 Obtén tus Credenciales de Back4app
Desde el panel de control de Back4app, navega a la configuración de tu proyecto y recupera tu ID de Aplicación y Clave de Cliente. Estas credenciales se utilizarán para inicializar Back4app en tu aplicación Flutter.
Paso 2: Configurar el Proyecto de Flutter
2.1 Crear un nuevo proyecto de Flutter
Abre tu terminal y crea un nuevo proyecto de Flutter:
Bash
flutter create overlay_portal_app
cd overlay_portal_app
flutter create overlay_portal_app
cd overlay_portal_app
﻿
2.2 Agregar dependencias
Abre el pubspec.yaml archivo y agrega las dependencias requeridas para Parse SDK y 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
﻿
Ejecuta flutter pub get para instalar las dependencias.
2.3 Inicializar Parse SDK
En lib/main.dart, inicializa el Parse SDK con tus credenciales de 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(),
    );
  }
}
﻿
Reemplaza YOUR_BACK4APP_APP_ID y YOUR_BACK4APP_CLIENT_KEY con tus credenciales de Back4app.
Paso 3: Implementando el OverlayPortal en Flutter
3.1 Crear el Widget OverlayScreen
En lib/overlay_screen.dart, crea el widget principal donde implementaremos el 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'),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
﻿
En esta implementación:
OverlayPortal se activa y desactiva con el pulsar de un botón.
La interacción del usuario (abrir, cerrar o hacer clic) se registra en Back4app utilizando el método _logAction.
La superposición contiene un mensaje y un botón que desencadena una acción.
3.2 Crear la interfaz de usuario
La interfaz de usuario contiene un botón que alterna la visibilidad de la superposición. La superposición en sí está posicionada usando el Positioned widget. Cuando la superposición es visible, aparece en la pantalla un cuadro flotante con un mensaje y un botón.
Paso 4: Ejecutar la aplicación
Abre la terminal y ejecuta la aplicación usando:
Haz clic en el Mostrar superposición botón para alternar la superposición. Cuando la superposición es visible, haz clic en el botón dentro de la superposición. Todas las interacciones (abrir, cerrar y hacer clic) se registrarán en Back4app.
Paso 5: Ver acciones registradas en Back4app
Para verificar que las acciones del usuario están siendo registradas:
Ve a tu panel de control de Back4app.
Navega a la OverlayActions clase.
Deberías ver registros de las acciones (abiertas, cerradas, clicadas) registradas con marcas de tiempo.
Paso 6: Personalizando el Overlay
Puedes personalizar aún más el overlay al:
Cambiar la posición del overlay con el Positioned widget.
Agregar widgets más complejos, como formularios o menús, dentro del overlay.
Estilizar el overlay con diferentes colores, bordes y sombras.
Conclusión
En este tutorial, aprendiste cómo implementar OverlayPortal en una aplicación Flutter para crear overlays interactivos que se pueden activar y desactivar. Además, integramos Back4app para registrar las interacciones del usuario con el overlay, proporcionando un backend robusto para almacenar datos y mejorar la funcionalidad de la aplicación.
Esta configuración se puede utilizar para construir aplicaciones ricas en características donde las interacciones del usuario con overlays (por ejemplo, tooltips, menús, popups) se almacenan en el backend, ofreciendo información sobre el comportamiento del usuario o facilitando la carga de contenido dinámico basado en datos en tiempo real.
Para más información:
﻿Documentación de Flutter Overlay Portal﻿
﻿Documentación de Back4app﻿
﻿
Actualizado 23 Jan 2025
¿Esta página le fue útil?
Construyendo un juego sostenible utilizando Flutter y Back4app
Cómo construir un juego de carrera infinita avanzado utilizando Flutter, el kit de herramientas para juegos casuales y Back4app