Más
Entendiendo la coincidencia de patrones en Flutter utilizando el backend de Back4app

10min
Introducción
La coincidencia de patrones es una característica poderosa introducida en Dart 3 que permite a los desarrolladores identificar y extraer fácilmente estructuras de datos específicas dentro de sus aplicaciones. Si tienes experiencia con lenguajes como Kotlin, Swift o JavaScript, es posible que ya estés familiarizado con la coincidencia de patrones. Sin embargo, si eres nuevo en este concepto en Dart, este tutorial te ayudará a sentirte cómodo con él. Exploraremos la coincidencia de patrones y cómo usarla en una aplicación Flutter con un ejemplo práctico que integra Back4app como backend para gestionar y almacenar datos.
Requisitos previos
Antes de comenzar, asegúrate de tener lo siguiente:
Una cuenta de Back4app. Regístrate para obtener una cuenta gratuita en Back4app.com.
Un entorno de desarrollo de Flutter configurado en tu máquina local. Sigue la guía de instalación de Flutter si aún no lo has configurado.
Conocimientos básicos de Dart, widgets de Flutter y uso de Back4app para servicios backend.
Paso 1 – Configurando tu backend de Back4app
Crea un proyecto de Back4app: Inicia sesión en tu cuenta de Back4app y crea un nuevo proyecto.
Crea clases de Parse: Para este tutorial, crea una clase de Parse llamada UserData para almacenar información del usuario:
nombre de usuario (String): El nombre de usuario del usuario.
edad (Número): La edad del usuario.
preferencias (JSON): Un objeto JSON que almacena las preferencias del usuario.
Obtén tus credenciales de Back4app: Navega a la configuración de tu proyecto para recuperar tu ID de aplicación y clave de cliente, que necesitarás para conectar tu aplicación Flutter a Back4app.
Paso 2 – Configuración del Proyecto Flutter
Crear un Nuevo Proyecto Flutter: Abre tu terminal o símbolo del sistema y ejecuta:
Bash
flutter create pattern_matching_example
flutter create pattern_matching_example
﻿
Agregar Dependencias: Abre pubspec.yaml y agrega las siguientes dependencias:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
﻿
Ejecuta flutter pub get para instalar estas dependencias.
Inicializa Parse en tu aplicación: En lib/main.dart, inicializa el SDK de Parse:
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(
      home: PatternMatchingScreen(),
    );
  }
}
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(
      home: PatternMatchingScreen(),
    );
  }
}
﻿
Reemplaza 'YOUR_BACK4APP_APP_ID' y 'YOUR_BACK4APP_CLIENT_KEY' con tus credenciales reales de Back4app.
Paso 3 – Implementación de Coincidencia de Patrones
Crear el Widget PatternMatchingScreen: En lib/main.dart, crea un nuevo widget que demuestre la coincidencia de patrones al recuperar y procesar datos de usuario:
Dart
class PatternMatchingScreen extends StatefulWidget {
  @override
  _PatternMatchingScreenState createState() => _PatternMatchingScreenState();
}

class _PatternMatchingScreenState extends State<PatternMatchingScreen> {
  String _message = 'Fetching data...';

  @override
  void initState() {
    super.initState();
    _fetchAndMatchData();
  }

  Future<void> _fetchAndMatchData() async {
    final query = QueryBuilder<ParseObject>(ParseObject('UserData'));
    final response = await query.query();

    if (response.success && response.results != null) {
      for (var result in response.results!) {
        // Using pattern matching to destructure and validate data
        if (result is ParseObject) {
          final userData = {
            'username': result.get<String>('username'),
            'age': result.get<int>('age'),
            'preferences': result.get<Map<String, dynamic>>('preferences')
          };

          switch (userData) {
            case {
              'username': String name,
              'age': int age when age >= 18,
              'preferences': {'theme': String theme}
            }:
              setState(() {
                _message = 'Welcome, $name! You are $age years old and prefer the $theme theme.';
              });
              break;

            default:
              setState(() {
                _message = 'Data does not match the required pattern.';
              });
              break;
          }
        }
      }
    } else {
      setState(() {
        _message = 'Failed to retrieve data.';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Pattern Matching Example')),
      body: Center(child: Text(_message)),
    );
  }
}
class PatternMatchingScreen extends StatefulWidget {
  @override
  _PatternMatchingScreenState createState() => _PatternMatchingScreenState();
}

class _PatternMatchingScreenState extends State<PatternMatchingScreen> {
  String _message = 'Fetching data...';

  @override
  void initState() {
    super.initState();
    _fetchAndMatchData();
  }

  Future<void> _fetchAndMatchData() async {
    final query = QueryBuilder<ParseObject>(ParseObject('UserData'));
    final response = await query.query();

    if (response.success && response.results != null) {
      for (var result in response.results!) {
        // Using pattern matching to destructure and validate data
        if (result is ParseObject) {
          final userData = {
            'username': result.get<String>('username'),
            'age': result.get<int>('age'),
            'preferences': result.get<Map<String, dynamic>>('preferences')
          };

          switch (userData) {
            case {
              'username': String name,
              'age': int age when age >= 18,
              'preferences': {'theme': String theme}
            }:
              setState(() {
                _message = 'Welcome, $name! You are $age years old and prefer the $theme theme.';
              });
              break;

            default:
              setState(() {
                _message = 'Data does not match the required pattern.';
              });
              break;
          }
        }
      }
    } else {
      setState(() {
        _message = 'Failed to retrieve data.';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Pattern Matching Example')),
      body: Center(child: Text(_message)),
    );
  }
}
﻿
Este código obtiene datos de usuario de Back4app, aplica coincidencias de patrones para validar y desestructurar los datos, y luego muestra un mensaje personalizado basado en los datos coincidentes.
Paso 4 – Ejecutando la Aplicación
Ejecuta tu aplicación usando flutter run. Deberías ver un mensaje en la pantalla basado en los datos recuperados y coincidentes utilizando coincidencias de patrones.
Verifica los datos en Back4app iniciando sesión en tu panel de Back4app y revisando la UserData clase. Puedes ajustar los datos para ver cómo diferentes patrones coinciden y cómo responde la aplicación.
Conclusión
En este tutorial, exploramos el concepto de coincidencias de patrones en Dart y cómo se puede aplicar dentro de una aplicación Flutter. Al integrar Back4app como el backend, demostramos un ejemplo práctico de obtención y procesamiento de datos utilizando coincidencias de patrones. Este enfoque te permite validar y desestructurar datos de manera eficiente, haciendo que tus aplicaciones Flutter sean más robustas y mantenibles.
Para más información sobre patrones de Dart, visita la documentación de Dart, y para consejos sobre integración de backend, consulta la documentación de Back4app. ¡Feliz codificación!
Actualizado 23 Jan 2025
¿Esta página le fue útil?
Recopilación de Comentarios de Usuarios en Flutter Usando el Componente de Comentarios y Almacenando Datos en Back4app
Cómo usar Uint8List en Flutter y persistirlo en el backend utilizando Back4app