Come ottimizzare le operazioni asincrone in Flutter con Future.wait e Back4App?

7min
Introduzione
La programmazione asincrona è essenziale nello sviluppo di app moderne, specialmente quando si tratta di compiti come il recupero di dati da più fonti o l'esecuzione di più richieste di rete. Tuttavia, gestire più chiamate asincrone in modo efficiente può essere una sfida. In Flutter, il Future.wait metodo fornisce un modo potente per gestire più Futures, consentendo alla tua app di attendere diverse operazioni asincrone in modo concorrente ed efficiente.
In questo tutorial, imparerai come utilizzare Future.wait in Flutter per ottimizzare le prestazioni della tua app quando gestisci più compiti asincroni. Integreremo questa tecnica con Back4app, dove puoi eseguire recuperi di dati concorrenti dal tuo backend, memorizzare i risultati e ridurre significativamente il tempo di attesa per i tuoi utenti.
Requisiti
Per completare questo tutorial, avrai bisogno di:
Un account Back4app. Registrati per un account gratuito su Back4app.com.
Ambiente di sviluppo Flutter configurato sul tuo computer locale. Segui la guida all'installazione di Flutter se non l'hai ancora configurato.
Conoscenze di base sulla programmazione asincrona in Flutter e su come utilizzare Back4app come servizio backend. Se sei nuovo su Back4app, dai un'occhiata alla guida per iniziare con Back4app.
Passo 1 – Configurazione del tuo backend Back4app
Crea un progetto Back4app: Accedi al tuo account Back4app e crea un nuovo progetto.
Crea classi Parse: Nel tuo progetto Back4app, crea due nuove classi Parse chiamate Task e Project.
La classe Task dovrebbe avere i campi: name (String) e completed (Boolean).
La classe Project dovrebbe avere i campi: title (String) e description (String).
Aggiungi dati di esempio: Popola queste classi con dati di esempio che recupereremo contemporaneamente utilizzando Future.wait nella nostra app Flutter.
Ottieni le tue credenziali Back4app: Naviga nelle impostazioni del tuo progetto per recuperare il tuo Application ID e Client Key, che ti serviranno per connettere la tua app Flutter a Back4app.
Passo 2 – Configurazione del tuo progetto Flutter
Crea un nuovo progetto Flutter: Apri il tuo terminale o prompt dei comandi e esegui:
Aggiungi dipendenze: Apri pubspec.yaml e aggiungi le seguenti dipendenze:
Inizializza Parse nella tua app: In lib/main.dart, importa il SDK di Parse e inizializzalo nella funzione main:
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());
﻿
Sostituisci 'YOUR_BACK4APP_APP_ID' e 'YOUR_BACK4APP_CLIENT_KEY' con le tue credenziali effettive di Back4app.
Passo 3 – Recupero dei Dati Concurrentemente con Future.wait
Crea il Widget TaskProjectScreen: In lib/main.dart, aggiungi un nuovo widget che recupererà i dati sia dalla classe Task che dalla classe Project contemporaneamente:
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'),
            )),
      ],
    );
  }
}
﻿
Questo widget recupera task e progetti contemporaneamente utilizzando Future.wait, riducendo il tempo totale di attesa gestendo entrambe le richieste simultaneamente.
Passo 4 – Testare e Eseguire la Tua App
Esegui la tua app usando flutter run.
Dovresti vedere un elenco di attività e progetti visualizzati sullo schermo. Entrambi i set di dati vengono recuperati contemporaneamente, rendendo il processo di recupero dei dati più veloce ed efficiente.
Conclusione
In questo tutorial, hai imparato come utilizzare Future.wait per ottimizzare le operazioni asincrone nella tua app Flutter. Recuperando dati da più fonti contemporaneamente e integrandoti con Back4app, hai reso la tua app più reattiva e ridotto il tempo di attesa complessivo per i tuoi utenti.
Utilizzare Future.wait in combinazione con un backend robusto come Back4app ti consente di gestire in modo efficiente più attività asincrone e migliorare le prestazioni delle tue applicazioni Flutter. Per ulteriori dettagli su come utilizzare Back4app con Flutter, dai un'occhiata alla documentazione di Back4app per Flutter. Buon coding!
Aggiornato 23 Jan 2025
Questa pagina ti è stata di aiuto?
Come utilizzare i Completers di Flutter con un backend di Back4App
AVANTI IL PROSSIMO
Developing real-time Javascript applications