Attendere con async e await

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

L’app per il tè dovrebbe mostrare prima Boiling... e poi Tea is ready. Con una callback all’interno di Future.delayed, è difficile leggere l’ordine. Dart offre un modo più chiaro: await.

Future<void> boil() async {
  setState(() {
    message = 'Boiling...';
  });
  await Future.delayed(const Duration(seconds: 3));
  setState(() {
    message = 'Tea is ready';
  });
}

await mette in pausa questa funzione finché il future non è terminato, poi prosegue con la riga successiva. Il codice si legge dall’alto verso il basso, nell’ordine in cui avvengono le cose.

Ci sono due regole da seguire. Una funzione che usa await è contrassegnata con async. Una funzione async restituisce un Future: Future<void> quando non restituisce nulla. Viene messa in pausa solo questa funzione. Il resto dell’app continua a funzionare.

Sfida

Facile

Riscrivi boil con async e await:

subito dopo aver toccato il pulsante, il messaggio è Boiling...
3 secondi dopo, è Tea is ready

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() {
    Future.delayed(const Duration(seconds: 3), () {
      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')),
          ],
        ),
      ),
    );
  }
}