Estados de carga, error y vacio en Flutter: ejercicio resuelto

Estados de carga, error y vacio en Flutter: ejercicio resuelto

Crea una pantalla robusta con estados de carga, vacio y error para listas remotas.

Enunciado

Renderiza una lista remota mostrando estados claros para cada situacion.

Solucion en Flutter

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: ExercisePage()));
}

class ExercisePage extends StatefulWidget {
  const ExercisePage({super.key});

  @override
  State<ExercisePage> createState() => _ExercisePageState();
}

class _ExercisePageState extends State<ExercisePage> {
  bool loading = false;
  String message = 'Estado inicial';

  Future<void> runExercise() async {
    setState(() {
      loading = true;
      message = 'Procesando...';
    });

    await Future<void>.delayed(const Duration(milliseconds: 700));

    if (!mounted) return;
    setState(() {
      loading = false;
      message = 'Ejercicio completado';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter ejercicio resuelto')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(message),
            const SizedBox(height: 12),
            ElevatedButton(
              onPressed: loading ? null : runExercise,
              child: Text(loading ? 'Cargando...' : 'Ejecutar'),
            ),
          ],
        ),
      ),
    );
  }
}

Resultado esperado

Pantalla funcional con flujo minimo reproducible para practicar: loading, empty state, error state.

Errores frecuentes

  • No separar estado de carga, exito y error.
  • Acoplar UI y datos en una sola clase.
  • No validar estados antes de navegar o renderizar.

Aplicacion practica

Este patron se usa en apps reales para mejorar robustez, mantenibilidad y experiencia de usuario.

Siguiente ejercicio recomendado

Práctica guiada y siguiente paso

FAQ

Que se practica en este ejercicio?

Se practica loading, empty state, error state con un caso util para proyectos reales.

Este ejercicio sirve para portfolio?

Si. Puedes adaptarlo y mostrar una implementacion clara con decisiones tecnicas.

Cual es el siguiente paso?

Integrarlo con una API real o persistencia local segun el objetivo de tu app.