Timeout y retry en Flutter: ejercicio resuelto

Timeout y retry en Flutter: ejercicio resuelto

Implementa timeout y reintentos con backoff para peticiones HTTP en Flutter.

Enunciado

Implementa una llamada HTTP con timeout, retry progresivo y feedback de error.

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: timeout, retry, backoff, UX de error.

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 timeout, retry, backoff, UX de error 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.