Come utilizzare i Completers di Flutter con un backend di Back4App

11min
Introduzione
I Futures e Streams sono la strada da seguire in qualsiasi tipo di operazione asincrona. Tuttavia, a volte entrambi non sono sufficienti. Se desideri un controllo più avanzato su Futures, allora usa un Completer. È uno strumento attraverso il quale puoi completare un Future in modo programmatico. In un certo senso, questo fornisce un migliore controllo sulle operazioni asincrone. Questo tutorial ti aiuterà a lavorare con Flutter Completers in un'applicazione che interagisce con un backend su Back4app.

Alla fine di questo tutorial, avrai imparato come utilizzare i Completers in un'applicazione Flutter per gestire compiti asincroni e integrare questi compiti con un servizio backend fornito da Back4app. Stiamo per creare un'app molto semplice che recupera dati da un Back4app backend utilizzando un Completer per controllare il flusso dell'applicazione.
Prerequisiti
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 di Dart e programmazione asincrona in Flutter. Se hai bisogno di un ripasso, dai un'occhiata alla Guida alla programmazione asincrona di Flutter.
Passo 1 – Configurazione del tuo backend Back4app
Per prima cosa, configuriamo un semplice backend su Back4app con cui la nostra applicazione Flutter interagirà.
Accedi al tuo account Back4app e crea un nuovo progetto.
Configura una nuova classe Parse chiamata Task, che memorizzerà i compiti che la nostra app Flutter recupererà. Aggiungi le seguenti colonne alla classe Task :
nome (String): Il nome del compito.
stato (Boolean): Lo stato del compito (completato o meno).
Aggiungi alcuni compiti di esempio nel database Back4app per testare. Ad esempio:
Compito 1: nome = "Completa il tutorial Flutter", stato = true
Compito 2: nome = "Inizia un nuovo progetto", stato = false
Il tuo backend Back4app è ora pronto per essere accessibile dall'app Flutter.
Passo 2 – Creazione di un progetto Flutter
Successivamente, creeremo un nuovo progetto Flutter.
Apri il tuo terminale o prompt dei comandi.
Esegui il seguente comando per creare un nuovo progetto Flutter:
Bash
flutter create completer_demo
flutter create completer_demo
﻿
Naviga nella directory del progetto:
Bash
cd completer_demo
cd completer_demo
﻿
    2. Apri il progetto nel tuo editor di codice preferito (ad es., VS Code, Android Studio).
Passo 3 – Aggiungere il Parse SDK e Configurare l'App
Ora, aggiungiamo le dipendenze necessarie per interagire con Back4app.
Apri pubspec.yaml e aggiungi le seguenti dipendenze:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^3.0.0
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^3.0.0
﻿
     2. Esegui flutter pub get per installare le dipendenze.
     3. In lib/main.dart, importa il Parse SDK:
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. Inizializza Parse nella main funzione:
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());
}
﻿
Sostituisci 'YOUR_APP_ID' e 'YOUR_CLIENT_KEY' con le tue credenziali effettive di Back4app.
Passo 4 – Utilizzare i Completers per Recuperare Dati in Modo Asincrono
Ora, utilizziamo un Completer per recuperare dati dal backend di Back4app e controllare quando i dati sono disponibili per l'uso nell'interfaccia utente.
In lib/main.dart, crea una nuova classe che recupererà i compiti da Back4app utilizzando 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');
    }
  }
}
﻿
Questa classe inizializza un Completer, inizia a recuperare i dati e completa il Completer quando i dati sono disponibili.
    2. Nel widget MyApp, usa il TaskManager per recuperare e visualizzare i compiti:
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. Esegui la tua app Flutter:
Dovresti vedere un elenco di compiti recuperati dal tuo backend Back4app, con i loro nomi e stato di completamento.
Conclusione
In questo tutorial, hai imparato come utilizzare i Completers di Flutter per gestire operazioni asincrone e controllare il flusso di recupero dei dati nella tua applicazione. Integrandoti con Back4app, hai creato un backend semplice ma potente per la tua app Flutter, permettendoti di recuperare e visualizzare i dati in modo dinamico. Questo approccio può essere esteso per gestire scenari più complessi, come l'autenticazione degli utenti, la manipolazione dei dati e altro.
Per ulteriori informazioni su come utilizzare Flutter con Back4app, dai un'occhiata alla documentazione di Back4app Flutter. Buon coding!
Aggiornato 23 Jan 2025
Questa pagina ti è stata di aiuto?
Come integrare l'IA generativa nella tua app Flutter utilizzando Firebase Vertex AI
AVANTI IL PROSSIMO
Come ottimizzare le operazioni asincrone in Flutter con Future.wait e Back4App?