Navegar con rutas nombradas

En la receta Navegar a una nueva pantalla y regresar, aprendiste cómo navegar a una nueva pantalla creando una nueva ruta y agregándola (pushing) al Navigator.

Sin embargo, si necesitas navegar a la misma pantalla en muchas partes de tu aplicación, este enfoque puede provocar duplicación de código. La solución es definir una ruta nominada y utilizarla para la navegación.

Para trabajar con rutas nominadas, usa la función Navigator.pushNamed(). Este ejemplo replica la funcionalidad de la receta original, demostrando cómo usar rutas nominadas mediante los siguientes pasos:

1. Crear dos pantallas.
2. Definir las rutas.
3. Navegar a la segunda pantalla usando Navigator.pushNamed().
4. Regresar a la primera pantalla usando Navigator.pop().

Primero, crea dos pantallas con las que trabajar. La primera pantalla contiene un botón que navega a la segunda pantalla. La segunda pantalla contiene un botón que regresa a la primera.

import 'package:flutter/material.dart';
​
class FirstScreen extends StatelessWidget {
  const FirstScreen({super.key});
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('First Screen')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Navigate to the second screen when tapped.
          },
          child: const Text('Launch screen'),
        ),
      ),
    );
  }
}
​
class SecondScreen extends StatelessWidget {
  const SecondScreen({super.key});
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Second Screen')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Navigate back to first screen when tapped.
          },
          child: const Text('Go back!'),
        ),
      ),
    );
  }
}

A continuación, define las rutas proporcionando propiedades adicionales al constructor de MaterialApp: la propiedad initialRoute y las routes mismas.

La propiedad initialRoute define con qué ruta debe comenzar la aplicación. La propiedad routes define las rutas nominadas disponibles y los Widgets que se deben construir al navegar a esas rutas.

MaterialApp(
  title: 'Named Routes Demo',
  // Start the app with the "/" named route. In this case, the app starts
  // on the FirstScreen widget.
  initialRoute: '/',
  routes: {
    // When navigating to the "/" route, build the FirstScreen widget.
    '/': (context) => const FirstScreen(),
    // When navigating to the "/second" route, build the SecondScreen widget.
    '/second': (context) => const SecondScreen(),
  },
)

Con los Widgets y las rutas listos, activa la navegación utilizando el método Navigator.pushNamed(). Esto le indica a Flutter que construya el Widget definido en la tabla de rutas routes y lance la pantalla.

En el método build() del Widget FirstScreen, actualiza la función callback onPressed():

// Within the `FirstScreen` widget
onPressed: () {
  // Navigate to the second screen using a named route.
  Navigator.pushNamed(context, '/second');
}

Para navegar de regreso a la primera pantalla, usa la función Navigator.pop().

// Within the SecondScreen widget
onPressed: () {
  // Navigate back to the first screen by popping the current route
  // off the stack.
  Navigator.pop(context);
}