Un indicateur pendant le chargement

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

Deux secondes, c’est long quand on fixe un écran immobile. Un cercle qui tourne indique à la personne que l’application est en train de travailler. Dans Flutter, il s’agit de CircularProgressIndicator.

const CircularProgressIndicator()

Il n’a besoin de rien pour fonctionner : place-le à l’écran et il tourne. Il faut l’afficher uniquement pendant le chargement des données. Un bool dans ton état permet de le faire :

bool loading = false;

// avant le await : loading = true
// après le await : loading = false

loading ? const CircularProgressIndicator() : Text(message)

Définis loading sur true dans un setState avant de faire un await, puis remets-le sur false dans le setState qui affiche la réponse.

Défi

Facile

Remplace le texte Loading... par un indicateur de chargement :

ajoute bool loading = false; à l’état
définis-le sur true avant le fetch, puis remets-le sur false lorsque le message arrive
tant que loading est à true, affiche un CircularProgressIndicator à la place du message

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> {
  String message = 'No message yet';

  Future<void> loadMessage() async {
    setState(() {
      message = 'Loading...';
    });
    final text = await fetch('/message');
    setState(() {
      message = text;
    });
  }

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