Un valore che arriva più tardi

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

Finora, nelle tue app tutto accadeva in una volta: tocchi un pulsante, lo schermo cambia. Le app reali spesso aspettano. Aspettano che un server risponda, che un file venga caricato, che un timer scada.

Dart chiama Future un valore che ancora non è disponibile. Il più semplice è Future.delayed: attende per una Duration, poi esegue la funzione che gli fornisci.

Future.delayed(const Duration(seconds: 2), () {
  setState(() {
    message = 'Done';
  });
});

La tua app non si blocca mentre aspetta. Lo schermo continua a essere disegnato e i pulsanti continuano a funzionare. Quando sono trascorsi i 2 secondi, Dart esegue la funzione e setState ridisegna lo schermo con il nuovo messaggio.

Sfida

Facile

Toccando Fai bollire l'acqua viene mostrato subito Tea is ready. L'acqua richiede tempo. Fai cambiare il messaggio 3 secondi dopo il tocco, con Future.delayed.

Provalo tu

import 'package:flutter/material.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: TeaScreen(),
    );
  }
}

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

  @override
  State<TeaScreen> createState() => _TeaScreenState();
}

class _TeaScreenState extends State<TeaScreen> {
  String message = 'The water is cold';

  void boil() {
    setState(() {
      message = 'Tea is ready';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(message, style: const TextStyle(fontSize: 28)),
            const SizedBox(height: 24),
            ElevatedButton(onPressed: boil, child: const Text('Boil water')),
          ],
        ),
      ),
    );
  }
}