Cómo optimizar operaciones asíncronas en Flutter con Future.wait y Back4app

7min
Introducción
La programación asíncrona es esencial en el desarrollo moderno de aplicaciones, especialmente al tratar con tareas como obtener datos de múltiples fuentes o realizar múltiples solicitudes de red. Sin embargo, manejar múltiples llamadas asíncronas de manera eficiente puede ser un desafío. En Flutter, el Future.wait método proporciona una forma poderosa de gestionar múltiples Futures, permitiendo que tu aplicación espere varias operaciones asíncronas de manera concurrente y eficiente.
En este tutorial, aprenderás cómo usar Future.wait en Flutter para optimizar el rendimiento de tu aplicación al tratar con múltiples tareas asíncronas. Integraremos esta técnica con Back4app, donde puedes realizar búsquedas de datos concurrentes desde tu backend, almacenar los resultados y reducir significativamente el tiempo de espera para tus usuarios.
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 programación asíncrona en Flutter y cómo usar Back4app como servicio backend. Si eres nuevo en Back4app, consulta la guía de Introducción a Back4app.
Paso 1 – Configuración de 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: En tu proyecto de Back4app, crea dos nuevas Clases de Parse llamadas Task y Project.
La Task clase debe tener campos: name (String) y completed (Boolean).
La Project clase debe tener campos: title (String) y description (String).
Agrega Datos de Ejemplo: Poblamos estas clases con datos de ejemplo que recuperaremos concurrentemente usando Future.wait en nuestra aplicación Flutter.
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 de tu Proyecto Flutter
Crea un Nuevo Proyecto Flutter: Abre tu terminal o símbolo del sistema y ejecuta:
Agrega Dependencias: Abre pubspec.yaml y agrega las siguientes dependencias:
Inicializa Parse en tu Aplicación: En lib/main.dart, importa el SDK de Parse e inicialízalo en la main función:
Text
Text
 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());
 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());
﻿
Reemplace 'YOUR_BACK4APP_APP_ID' y 'YOUR_BACK4APP_CLIENT_KEY' con sus credenciales reales de Back4app.
Paso 3 – Recuperando Datos Concurrentemente con Future.wait
Cree el Widget TaskProjectScreen: En lib/main.dart, agregue un nuevo widget que recuperará datos de ambas clases Task y Project de manera concurrente:
Dart
class TaskProjectScreen extends StatefulWidget {
  @override
  _TaskProjectScreenState createState() => _TaskProjectScreenState();
}

class _TaskProjectScreenState extends State<TaskProjectScreen> {
  List<ParseObject>? tasks;
  List<ParseObject>? projects;
  String? errorMessage;

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

  Future<void> fetchData() async {
    try {
      // Fetch tasks and projects concurrently
      final futures = [
        _getTasks(),
        _getProjects(),
      ];

      final results = await Future.wait(futures);

      setState(() {
        tasks = results[0] as List<ParseObject>;
        projects = results[1] as List<ParseObject>;
      });
    } catch (e) {
      setState(() {
        errorMessage = e.toString();
      });
    }
  }

  Future<List<ParseObject>> _getTasks() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Task'));
    final response = await query.query();

    if (response.success && response.results != null) {
      return response.results as List<ParseObject>;
    } else {
      throw Exception('Failed to load tasks');
    }
  }

  Future<List<ParseObject>> _getProjects() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Project'));
    final response = await query.query();

    if (response.success && response.results != null) {
      return response.results as List<ParseObject>;
    } else {
      throw Exception('Failed to load projects');
    }
  }

  @override
  Widget build(BuildContext context) {
    if (errorMessage != null) {
      return Center(child: Text('Error: $errorMessage'));
    }

    if (tasks == null || projects == null) {
      return Center(child: CircularProgressIndicator());
    }

    return ListView(
      children: [
        ListTile(title: Text('Tasks')),
        ...tasks!.map((task) => ListTile(
              title: Text(task.get<String>('name') ?? 'No name'),
              subtitle: Text('Completed: ${task.get<bool>('completed') ? 'Yes' : 'No'}'),
            )),
        ListTile(title: Text('Projects')),
        ...projects!.map((project) => ListTile(
              title: Text(project.get<String>('title') ?? 'No title'),
              subtitle: Text(project.get<String>('description') ?? 'No description'),
            )),
      ],
    );
  }
}
class TaskProjectScreen extends StatefulWidget {
  @override
  _TaskProjectScreenState createState() => _TaskProjectScreenState();
}

class _TaskProjectScreenState extends State<TaskProjectScreen> {
  List<ParseObject>? tasks;
  List<ParseObject>? projects;
  String? errorMessage;

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

  Future<void> fetchData() async {
    try {
      // Fetch tasks and projects concurrently
      final futures = [
        _getTasks(),
        _getProjects(),
      ];

      final results = await Future.wait(futures);

      setState(() {
        tasks = results[0] as List<ParseObject>;
        projects = results[1] as List<ParseObject>;
      });
    } catch (e) {
      setState(() {
        errorMessage = e.toString();
      });
    }
  }

  Future<List<ParseObject>> _getTasks() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Task'));
    final response = await query.query();

    if (response.success && response.results != null) {
      return response.results as List<ParseObject>;
    } else {
      throw Exception('Failed to load tasks');
    }
  }

  Future<List<ParseObject>> _getProjects() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Project'));
    final response = await query.query();

    if (response.success && response.results != null) {
      return response.results as List<ParseObject>;
    } else {
      throw Exception('Failed to load projects');
    }
  }

  @override
  Widget build(BuildContext context) {
    if (errorMessage != null) {
      return Center(child: Text('Error: $errorMessage'));
    }

    if (tasks == null || projects == null) {
      return Center(child: CircularProgressIndicator());
    }

    return ListView(
      children: [
        ListTile(title: Text('Tasks')),
        ...tasks!.map((task) => ListTile(
              title: Text(task.get<String>('name') ?? 'No name'),
              subtitle: Text('Completed: ${task.get<bool>('completed') ? 'Yes' : 'No'}'),
            )),
        ListTile(title: Text('Projects')),
        ...projects!.map((project) => ListTile(
              title: Text(project.get<String>('title') ?? 'No title'),
              subtitle: Text(project.get<String>('description') ?? 'No description'),
            )),
      ],
    );
  }
}
﻿
Este widget recupera tareas y proyectos de manera concurrente utilizando Future.wait, reduciendo el tiempo total de espera al manejar ambas solicitudes simultáneamente.
Paso 4 – Probar y Ejecutar Tu Aplicación
Ejecuta tu aplicación usando flutter run.
Deberías ver una lista de tareas y proyectos mostrados en la pantalla. Ambos conjuntos de datos se obtienen de manera concurrente, haciendo que el proceso de recuperación de datos sea más rápido y eficiente.
Conclusión
En este tutorial, aprendiste cómo usar Future.wait para optimizar operaciones asíncronas en tu aplicación Flutter. Al obtener datos de múltiples fuentes de manera concurrente e integrarte con Back4app, hiciste que tu aplicación fuera más receptiva y redujiste el tiempo de espera general para tus usuarios.
Usar Future.wait en combinación con un backend robusto como Back4app te permite gestionar eficientemente múltiples tareas asíncronas y mejorar el rendimiento de tus aplicaciones Flutter. Para más detalles sobre cómo usar Back4app con Flutter, consulta la documentación de Back4app para Flutter. ¡Feliz codificación!
Actualizado 23 Jan 2025
¿Esta página le fue útil?
Cómo usar Completers de Flutter con un backend en Back4app
Desarrollo de Aplicaciones Javascript en Tiempo Real