Sistema de Rutas en Flutter (Navegación)

Tengo un vídeo en YouTube donde explico esto a bastante detalle, si perefieres ver el vídeo también puedes hacerlo. Hay personas que les es mucho más fácil aprender conceptos implementando en tiempo real el código.

Los sistemas de rutas en Flutter son muy variados, hay (hasta donde yo sé) 3 formas de implementar rutas y movernos entre pantallas. Es posible que hay más maneras, pero las más usadas son 3, la más vieja y clásica, el sistema de rutas por nombre, y la navegación 2.0, querida y odiada por igual en las comunidades de programadores.

En este articulo explicaremos el sistema de rutas por nombre, me parece la más sencilla y eficiente de todas. Pero debo mencionar que es un gusto personal, otros programadores prefieren la navegación 2.0 así que si quieres que hable sobre esa forma de navegación me lo pueden dejar en los comentarios y con gusto lo haré.

Sistema de Rutas por Nombre

El sistema de rutas por nombre esta basado en un objeto o map con estructura clave:valor que tiene un texto o string que hace referencia un widget o página. Este objeto puede tener cantos elementos como sean necesario y debe configurarse en el Material App, es decir al iniciar la aplicación antes de cargar cualquier pantalla.

El elemento Material App también tiene una propiedad que se llama initialRoute que le dice a la aplicación al es la ruta inicial que se debe cargar al comenzar el proyecto. Dicha initialRoute debe ser una de las claves que se encuentra en el objeto de rutas. El código de el main quedaría algo así:

import 'package:flutter/material.dart';
import 'package:sistema_rutas/pages/index.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  MyApp({super.key});

  // rutas disponibles en la app.
  // cada widget es una página diferente.
  final _routes = {
    '/': (context) => const LoginPage(),
    '/home': (context) => const HomePage(),
    '/otra': (context) => const OtraPage(),
    '/servicios': (context) => const ServiciosPage(),
  };

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      initialRoute: '/',
      // aquí se asigna el objeto a la propiedad de routes
      routes: _routes,
      onGenerateRoute: (settings) {
        // esta opción se ejecuta cuando se llama una ruta que no existe
        return MaterialPageRoute(
          builder: (context) => const Page404(),
        );
      },
    );
  }
}

El objeto _routes contiene referencia a todas las pantallas a las que la aplicación puede navegar. Por ejemplo «/» hace referencia a la pantalla de Login. Estoy widgets deben estar creados en otros archivos y contener su propio Scaffold( ). Si tienes alguna duda puedes revisar el repositorio adjunto.

Si te fijas en la línea 22, el initialRoute dice que la ruta inicial es la de Login. Significa que la aplicación al iniciar, la primera pantalla que cargará será la de Login. una vez en Login podremos navegar a cualquier otra pantalla.

Navegando a otra pantalla

Para navegar otra pantalla lo podemos hacer usando el objeto Navigator que ya viene en el paquete de Material así que no hace falta importarlo de ningún lado. Este objeto tiene un método llamado push( ), para usar el sistema de rutas por nombre se debe usar el método pushNamed( ).

El código de la pantalla de Login quedaría algo así:

import 'package:flutter/material.dart';

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

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Login Page'),
      ),
      body: Center(
        child: ElevatedButton(
            onPressed: () {
              // Navegamos a Home
              Navigator.pushNamed(context, "/home");
              
              // si usas pushReplacementNamed la ruta nueva reemplaza la ruta actual.
              // Navigator.pushReplacementNamed(context, '/home');
            },
            child: const Text('Entrar')),
      ),
    );
  }
}

En el ejemplo creamos un botón que al precionarlo nos lleva a la pagina Home. Si te fijas, además del contexto se envío un string que tiene que coincidir con el texto que tiene como clave el objeto _routes en el main.dart.

Con el mismo principio puede navegarse a cualquier ruta que esté definida en el objeto _routes. Podemos navegar a la ruta que queramos, haciendo como un sistema de cartas que pone cada pantalla llamada, encima de la pantalla que la llamó.

Si no queremos que la nueva pantalla se ponga arriba, sino que queremos que sea la única pantalla disponible, debemos usar pushReplacementNamed( ) lo que destruirá la pantalla que invocó la nueva pantalla.

Repositorio en Github: https://github.com/JoseGaldamez/flutter_route_system

Si tienes alguna duda puedes dejarlo en los comentarios y con gusto te estaré contestando. Espero que este artículo te haya gustado y te haya servido. Hasta la próxima.