Un indicador mientras carga

Parte de la sección Datos y red del Journey de Flutter de Coddy. Lección 5 de 27.

Dos segundos es mucho tiempo para mirar una pantalla que no se mueve. Un círculo giratorio le indica a la persona que la aplicación está trabajando. En Flutter es CircularProgressIndicator.

const CircularProgressIndicator()

No necesita nada para funcionar: ponlo en la pantalla y girará. Su función es mostrarse solo mientras los datos están en camino. Un bool en tu estado se encarga de eso:

bool loading = false;

// antes de await: loading = true
// después de await: loading = false

loading ? const CircularProgressIndicator() : Text(message)

Establece loading en true dentro de un setState antes de usar await, y vuelve a establecerlo en false dentro del setState que muestra la respuesta.

Desafío

Fácil

Reemplaza el texto Loading... por un indicador de carga:

añade bool loading = false; al estado
asígnale true antes de fetch y vuelve a asignarle false cuando llegue el mensaje
mientras loading sea true, muestra un CircularProgressIndicator en lugar del mensaje

Pruébalo tú mismo

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

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Todas las lecciones de Datos y red

Practica por tu cuenta: Compilador de Flutter online