Une valeur qui arrive plus tard

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

Jusqu’à présent, tout se passait en même temps dans vos applications : vous appuyez sur un bouton, l’écran change. Les vraies applications attendent souvent. Elles attendent qu’un serveur réponde, qu’un fichier se charge ou qu’un minuteur arrive à expiration.

Dart appelle Future une valeur qui n’est pas encore disponible. La plus simple est Future.delayed : elle attend pendant une Duration, puis exécute la fonction que vous lui fournissez.

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

Votre application ne se fige pas pendant l’attente. L’écran continue de s’afficher et les boutons restent fonctionnels. Une fois les 2 secondes écoulées, Dart exécute la fonction et setState redessine l’écran avec le nouveau message.

Défi

Facile

En appuyant sur Boil water, le message Tea is ready s’affiche immédiatement. L’eau met du temps à bouillir. Fais changer le message 3 seconds après avoir appuyé, avec Future.delayed.

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