Un indicatore durante il caricamento

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

Due secondi sono un tempo lungo da fissare uno schermo che non si muove. Un cerchio rotante comunica alla persona che l'app sta lavorando. In Flutter si chiama CircularProgressIndicator.

const CircularProgressIndicator()

Non ha bisogno di nulla per funzionare: mettilo sullo schermo e gira. Il suo compito è mostrarlo solo mentre i dati stanno arrivando. Una bool nel tuo stato fa al caso tuo:

bool loading = false;

// prima di await: loading = true
// dopo await: loading = false

loading ? const CircularProgressIndicator() : Text(message)

Imposta loading su true in un setState prima di await, e riportalo su false nel setState che mostra la risposta.

Sfida

Facile

Sostituisci il testo Loading... con un indicatore di caricamento:

aggiungi bool loading = false; allo stato
impostalo su true prima di fetch e riportalo a false quando arriva il messaggio
mentre loading è true, mostra un CircularProgressIndicator al posto del messaggio

Provalo tu

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