Flutter: rutas con nombre

Una aplicación tiene que mostrar múltiples pantallas dependiendo de las necesidades del usuario. Un usuario necesita ir y venir de las múltiples pantallas a la pantalla de inicio. En Flutter, esto se hace con la ayuda de Navigator.

Nota: En Flutter, las pantallas y las páginas se denominan rutas. 

En este artículo, exploraremos el proceso de navegación a través de dos rutas nombradas. Para hacerlo, siga los siguientes pasos:

1. Crea dos rutas.
2. Navegue a la segunda ruta usando el método Navigator.push().
3. Regrese a la primera ruta usando el método Navigator.pop(). 

Vamos a explorarlos en detalle.

Creación de dos rutas:

Aquí crearemos dos rutas, la primera ruta tendrá un solo botón que, al presionarlo, conduce a la segunda ruta y, de manera similar, la segunda ruta tendrá un solo botón que llevará al usuario de regreso a la primera ruta. Para hacerlo, siga el siguiente código:

class firstRoute extends StatelessWidget {
  const firstRoute({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GFG First Route'),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Launch screen'),
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
        ), // Elevated
 
        // RaisedButton is deprecated now
        // child: RaisedButton(
        //   child: const Text('Launch screen'),
        //   onPressed: () {
        //     Navigator.pushNamed(context, '/second');
        //   },
        // ),
      ),
    );
  }
}
 
// ignore: camel_case_types
class secondRoute extends StatelessWidget {
  const secondRoute({Key? key}) : super(key: key);
 
  @override
  // ignore: dead_code
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("GFG Second Route"),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('Go back!'),
        ), // ElevatedButton
      ),
 
      // RaisedButton is deprecated now
      // child: RaisedButton(
      //   onPressed: () {
      //     Navigator.pop(context);
      //   },
      //   child: const Text('Go back!'),
      // ),
    );
  }
}

Navegando con Navigator.push(). a la segunda ruta:

Para cambiar a una nueva ruta, use el método Navigator.push() . El método push() agrega una ruta a la pila de rutas administradas por Navigator. En el método build() del primer widget de ruta, actualice la devolución de llamada onPressed() para conducir a la segunda ruta como se muestra a continuación:

// onPressed action
onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondRoute()),
  );
}

Regrese a la primera ruta usando Navigator.pop():

Para implementar un regreso a la ruta original, actualice la devolución de llamada onPressed() en la segunda ruta como se muestra a continuación:

// onPressed action in second route
onPressed: () {
  Navigator.pop(context);
}

Código fuente completo:

import 'package:flutter/material.dart';
 
void main() {
  runApp(MaterialApp(
    title: 'Named Routes',
    initialRoute: '/',
    routes: {
      '/': (context) => const firstRoute(),
      '/second': (context) => const secondRoute(),
    },
  ));
}
 
// ignore: camel_case_types
class firstRoute extends StatelessWidget {
  const firstRoute({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GFG First Route'),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Launch screen'),
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
        ), // Elevated
 
        // RaisedButton is deprecated now
        // child: RaisedButton(
        //   child: const Text('Launch screen'),
        //   onPressed: () {
        //     Navigator.pushNamed(context, '/second');
        //   },
        // ),
      ),
    );
  }
}
 
// ignore: camel_case_types
class secondRoute extends StatelessWidget {
  const secondRoute({Key? key}) : super(key: key);
 
  @override
  // ignore: dead_code
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("GFG Second Route"),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('Go back!'),
        ), // ElevatedButton
      ),
 
      // RaisedButton is deprecated now
      // child: RaisedButton(
      //   onPressed: () {
      //     Navigator.pop(context);
      //   },
      //   child: const Text('Go back!'),
      // ),
    );
  }
}

Producción: