Découvrir FutureBuilder

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

La plupart des écrans chargent leurs données dès leur ouverture, sans bouton. Flutter propose un widget pour afficher un futur : FutureBuilder. Tu lui donnes le futur, et il reconstruit l’écran chaque fois que l’état du futur change.

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

snapshot représente ce à quoi ressemble le futur à cet instant. Avant l’arrivée de la réponse, snapshot.hasData vaut false, donc l’indicateur de chargement s’affiche. Quand la réponse arrive, le builder s’exécute à nouveau et snapshot.data contient la chaîne.

snapshot.data est de type String? : une chaîne ou null, car il n’y a pas encore de données au départ. Le ! qui suit signifie « J’ai vérifié, ce n’est pas null ». Utilise-le uniquement après hasData : si la valeur est null, l’application plante.

Le code de départ crée déjà le futur une fois, dans initState, qui s’exécute à l’ouverture de l’écran. late indique à Dart que la variable reçoit sa valeur à cet endroit, avant d’être utilisée. La leçon suivante explique pourquoi elle se trouve là.

Défi

Moyen

L’application charge le message dans initState, mais ne l’affiche jamais. Remplace le texte indicatif Text par un FutureBuilder<String> pour _message :

un CircularProgressIndicator pendant le chargement
le message, de taille 24, lorsqu’il arrive

Essayez vous-même

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