Saltar al contenido

Lección 6 de 16 · Lectura y práctica

Configuración de go_router

Lección práctica para aplicar Configuración de go_router dentro de Desarrollo de Apps Móviles con Flutter - Nivel Intermedio, con criterios de decisión, ejemplo guiado, ejercicio y checklist de salida.

Del concepto a la práctica

Taller de esta lección

Una configuración de rutas es más mantenible cuando cada patrón declara qué datos recibe y qué pantalla representa. La ruta /tasks/:id debe convertir el segmento en un identificador y dejar que la capa de datos decida si existe; no debe fabricar una tarea para evitar un error.

Ejemplo resuelto

Con tareas a1 y b2, la ruta /tasks/a1 entrega a1 al detalle. La ruta /tasks/x9 conserva el parámetro x9, pero el repositorio devuelve ausencia y la aplicación muestra una pantalla de no encontrada. Un redirect de autenticación solo debe depender de un estado de sesión explícito.

Con go_router declarado en las dependencias, este ejemplo aislado usa los títulos Leer y Pagar:

dart
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

final tasks = <String, String>{'a1': 'Leer', 'b2': 'Pagar'};
final router = GoRouter(routes: [
  GoRoute(path: '/', builder: (_, __) =>
    const Scaffold(body: Text('Lista'))),
  GoRoute(path: '/tasks/:id', builder: (_, state) {
    final title = tasks[state.pathParameters['id']];
    return Scaffold(body: Text(title ?? 'No encontrada'));
  }),
]);
void main() => runApp(MaterialApp.router(routerConfig: router));

El ejemplo demuestra parámetros y ausencia de datos; todavía no representa persistencia ni autorización. La pila concreta depende de cómo organices las rutas y de si usas go o push; no deduzcas esa pila únicamente de la forma de la URL.

Pruébalo

  1. Declara una ruta raíz y una ruta dinámica.

  2. Extrae el parámetro id sin convertirlo a un índice.

  3. Consulta un repositorio con a1 y b2.

  4. Define la salida para x9.

Error frecuente: interpolar un título en la URL. Corrígelo usando un id estable y codificando datos solo si forman parte del contrato de ruta.

Comprueba tu resultado

Verifica tres entradas: /tasks/a1 muestra el título asociado, /tasks/b2 muestra el segundo, y /tasks/x9 muestra no encontrada. El título nunca debe cambiar el destino ni romper el patrón.

Diagrama de decisión con ramas Sí y No y un bucle que procesa cada elemento de una lista.
CursaloMapa de práctica
Cómo avanza un programa

Una condición decide qué camino ejecuta el programa. Un bucle repite una operación mientras queden elementos, y termina cuando la lista se agota. Separar ambas ideas ayuda a seguir el flujo y comprobar casos límite.

Ver la infografía en tamaño completo ↗
Fuentes para profundizar

Sigue con Desarrollo de Apps Móviles con Flutter - Nivel Intermedio

Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.

Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.

01 / ELEGIR UNA RUTA

El próximo paso

Aprende IA mientras construyes algo que sí necesitas.

Empieza por el curso inicial o explora el catálogo para encontrar una práctica alineada con tu trabajo.