Más
Cómo usar Completers de Flutter con un backend en Back4app

11min
Introducción
Los Futuros y Flujos son el camino a seguir en cualquier tipo de operación asíncrona. Sin embargo, a veces ambos no son suficientes. Si deseas un control más avanzado sobre los Futuros, entonces utiliza un Completer. Es una herramienta a través de la cual puedes completar un Futuro programáticamente. De alguna manera, esto proporciona un mejor control sobre las operaciones asíncronas. Este tutorial te ayudará a trabajar con Completers en una aplicación que interactúa con un backend en Back4app.

Al final de este tutorial, habrás aprendido cómo usar Completers en una aplicación Flutter para gestionar tareas asíncronas e integrar estas tareas con un servicio backend proporcionado por Back4app. Vamos a crear una aplicación muy simple que obtenga datos de un backend de Back4app utilizando un Completer para controlar el flujo de la aplicación.
Requisitos previos
Para completar este tutorial, necesitarás:
Una cuenta de Back4app. Regístrate para obtener una cuenta gratuita en Back4app.com.
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 y programación asíncrona en Flutter. Si necesitas un repaso, consulta la Guía de Programación Asíncrona de Flutter.
Paso 1 – Configurando tu Backend de Back4app
Primero, configuremos un backend simple en Back4app con el que interactuará nuestra aplicación Flutter.
Inicia sesión en tu cuenta de Back4app y crea un nuevo proyecto.
Configura una nueva Clase Parse llamada Task, que almacenará las tareas que nuestra aplicación Flutter recuperará. Agrega las siguientes columnas a la Task clase:
nombre (String): El nombre de la tarea.
estado (Boolean): El estado de la tarea (completada o no).
Agrega algunas tareas de ejemplo en la base de datos de Back4app para probar. Por ejemplo:
Tarea 1: nombre = "Completar tutorial de Flutter", estado = true
Tarea 2: nombre = "Iniciar nuevo proyecto", estado = false
Tu backend de Back4app ahora está listo para ser accedido por la aplicación Flutter.
Paso 2 – Creando un Proyecto Flutter
A continuación, crearemos un nuevo proyecto de Flutter.
Abre tu terminal o símbolo del sistema.
Ejecuta el siguiente comando para crear un nuevo proyecto de Flutter:
Bash
flutter create completer_demo
flutter create completer_demo
﻿
Navega al directorio del proyecto:
Bash
cd completer_demo
cd completer_demo
﻿
    2. Abre el proyecto en tu editor de código preferido (por ejemplo, VS Code, Android Studio).
Paso 3 – Agregar el SDK de Parse y Configurar la Aplicación
Ahora, agreguemos las dependencias necesarias para interactuar con Back4app.
Abre pubspec.yaml y agrega las siguientes dependencias:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^3.0.0
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^3.0.0
﻿
     2. Ejecuta flutter pub get para instalar las dependencias.
     3. En lib/main.dart, importa el SDK de Parse:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';
import 'dart:async';
﻿
    4. Inicializa Parse en la main función:
Dart
void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APP_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, autoSendSessionId: true);

  runApp(MyApp());
}
void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APP_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, autoSendSessionId: true);

  runApp(MyApp());
}
﻿
Reemplaza 'YOUR_APP_ID' y 'YOUR_CLIENT_KEY' con tus credenciales reales de Back4app.
Paso 4 – Usando Completers para Obtener Datos Asincrónicamente
Ahora, usemos un Completer para obtener datos del backend de Back4app y controlar cuándo los datos están disponibles para su uso en la interfaz de usuario.
En lib/main.dart, crea una nueva clase que obtendrá tareas de Back4app usando un Completer:
Dart
class TaskManager {
  final Completer<List<ParseObject>> _completer = Completer();

  Future<List<ParseObject>> get tasks => _completer.future;

  TaskManager() {
    _fetchTasks();
  }

  void _fetchTasks() async {
    QueryBuilder<ParseObject> query = QueryBuilder<ParseObject>(ParseObject('Task'));
    final ParseResponse response = await query.query();

    if (response.success && response.results != null) {
      _completer.complete(response.results);
    } else {
      _completer.completeError('Failed to load tasks');
    }
  }
}
class TaskManager {
  final Completer<List<ParseObject>> _completer = Completer();

  Future<List<ParseObject>> get tasks => _completer.future;

  TaskManager() {
    _fetchTasks();
  }

  void _fetchTasks() async {
    QueryBuilder<ParseObject> query = QueryBuilder<ParseObject>(ParseObject('Task'));
    final ParseResponse response = await query.query();

    if (response.success && response.results != null) {
      _completer.complete(response.results);
    } else {
      _completer.completeError('Failed to load tasks');
    }
  }
}
﻿
Esta clase inicializa un Completer, comienza a buscar datos y completa el Completer cuando los datos están disponibles.
    2. En el MyApp widget, usa el TaskManager para buscar y mostrar tareas:
Dart
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Completer Demo')),
        body: FutureBuilder<List<ParseObject>>(
          future: TaskManager().tasks,
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return Center(child: CircularProgressIndicator());
            } else if (snapshot.hasError) {
              return Center(child: Text('Error: ${snapshot.error}'));
            } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
              return Center(child: Text('No tasks found.'));
            } else {
              return ListView.builder(
                itemCount: snapshot.data!.length,
                itemBuilder: (context, index) {
                  final task = snapshot.data![index];
                  return ListTile(
                    title: Text(task.get<String>('name') ?? 'No name'),
                    subtitle: Text('Completed: ${task.get<bool>('status') ? 'Yes' : 'No'}'),
                  );
                },
              );
            }
          },
        ),
      ),
    );
  }
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Completer Demo')),
        body: FutureBuilder<List<ParseObject>>(
          future: TaskManager().tasks,
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return Center(child: CircularProgressIndicator());
            } else if (snapshot.hasError) {
              return Center(child: Text('Error: ${snapshot.error}'));
            } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
              return Center(child: Text('No tasks found.'));
            } else {
              return ListView.builder(
                itemCount: snapshot.data!.length,
                itemBuilder: (context, index) {
                  final task = snapshot.data![index];
                  return ListTile(
                    title: Text(task.get<String>('name') ?? 'No name'),
                    subtitle: Text('Completed: ${task.get<bool>('status') ? 'Yes' : 'No'}'),
                  );
                },
              );
            }
          },
        ),
      ),
    );
  }
}
﻿
    3. Ejecuta tu aplicación Flutter:
Deberías ver una lista de tareas obtenidas de tu backend de Back4app, con sus nombres y estado de finalización.
Conclusión
En este tutorial, aprendiste cómo usar Flutter Completers para gestionar operaciones asíncronas y controlar el flujo de obtención de datos en tu aplicación. Al integrarte con Back4app, creaste un backend simple pero poderoso para tu aplicación Flutter, permitiéndote obtener y mostrar datos dinámicamente. Este enfoque se puede extender para manejar escenarios más complejos, como la autenticación de usuarios, la manipulación de datos y más.
Para más información sobre cómo usar Flutter con Back4app, consulta la documentación de Back4app Flutter. ¡Feliz codificación!
Actualizado 23 Jan 2025
¿Esta página le fue útil?
Cómo integrar la IA generativa en tu aplicación Flutter usando Firebase Vertex AI
Cómo optimizar operaciones asíncronas en Flutter con Future.wait y Back4app