Conosci FutureBuilder

Fa parte della sezione Dati e rete del percorso Flutter di Coddy. Lezione 6 di 27.

La maggior parte delle schermate carica i dati nel momento in cui si aprono, senza premere alcun pulsante. Flutter ha un widget per mostrare un future: FutureBuilder. Gli passi il future e ricostruisce la schermata ogni volta che il future cambia stato.

FutureBuilder<String>(
  future: _message,
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Text(snapshot.data!);
    }
    return const CircularProgressIndicator();
  },
)

snapshot rappresenta lo stato attuale del future. Prima che arrivi il risultato, snapshot.hasData è false, quindi viene mostrato l'indicatore di caricamento. Quando arriva, il builder viene eseguito di nuovo e snapshot.data contiene la stringa.

snapshot.data ha il tipo String?: una stringa oppure null, perché inizialmente non ci sono dati. Il ! che lo segue significa «Ho verificato che non è null». Usalo solo dopo hasData: se è null, l'app va in errore.

Il codice iniziale crea già il future una volta, in initState, che viene eseguito quando si apre la schermata. late indica a Dart che la variabile riceve il suo valore lì, prima di essere usata. La prossima lezione spiega perché si trova lì.

Sfida

Medio

L'app carica il messaggio in initState ma non lo mostra mai. Sostituisci il segnaposto Text con un FutureBuilder<String> per _message:

un CircularProgressIndicator mentre si carica
il messaggio, dimensione 24, quando arriva

Provalo tu

import 'package:flutter/material.dart';

import 'api.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MessageScreen(),
    );
  }
}

class MessageScreen extends StatefulWidget {
  const MessageScreen({super.key});

  @override
  State<MessageScreen> createState() => _MessageScreenState();
}

class _MessageScreenState extends State<MessageScreen> {
  late Future<String> _message;

  @override
  void initState() {
    super.initState();
    _message = fetch('/message');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: const Text('The message goes here', style: TextStyle(fontSize: 24)),
      ),
    );
  }
}

Mettiti alla prova

Questa lezione include un breve quiz. Inizia la lezione per rispondere e tenere traccia dei tuoi progressi.

Tutte le lezioni di Dati e rete

Esercitati da solo: Compilatore Flutter online