Attendre avec async et await

Fait partie de la section Données et réseau du Journey Flutter de Coddy. Leçon 2 sur 27.

L’application de thé devrait d’abord afficher Boiling..., puis Tea is ready. Avec une fonction de rappel à l’intérieur de Future.delayed, l’ordre est difficile à lire. Dart propose une façon plus claire de faire : await.

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

await met cette fonction en pause jusqu’à ce que la future soit terminée, puis passe à la ligne suivante. Le code se lit de haut en bas, dans l’ordre où les choses se produisent.

Deux règles s’appliquent. Une fonction qui utilise await est marquée async. Une fonction async renvoie une Future : Future<void> lorsqu’elle ne renvoie rien. Seule cette fonction est mise en pause. Le reste de l’application continue de s’exécuter.

Défi

Facile

Réécris boil avec async et await :

juste après avoir appuyé, le message est Boiling...
3 secondes plus tard, il est Tea is ready

Essayez vous-même

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')),
          ],
        ),
      ),
    );
  }
}