Rutas y Navegador en Flutter

Flutter  es un SDK de aplicaciones móviles de código abierto creado por Google. Flutter usa el lenguaje Dart para crear aplicaciones móviles que siguen conceptos orientados a objetos. Flutter tiene un muy buen alcance entre los desarrolladores de aplicaciones móviles debido a sus sorprendentes funciones, como el desarrollo multiplataforma, la recarga en caliente, el reinicio en caliente, la interfaz de usuario llamativa, etc. En flutter, desde el texto hasta el relleno, todo es un widget. Todo en Flutter es un widget.

Ruta: Las apps son la nueva tendencia. La cantidad de aplicaciones disponibles en Play Store hoy en día es bastante. Las aplicaciones muestran su contenido en un contenedor de pantalla completa llamado páginas o pantallas. En flutter, las páginas o pantallas se llaman Rutas . En Android, estas páginas/pantallas se conocen como Actividad y en iOS, se denominan ViewController. Pero, en un aleteo, las rutas se denominan Widgets. En Flutter, una página/pantalla se llama ruta.

Creación de rutas: una ruta se puede escribir en forma de una «clase» en Dart utilizando conceptos orientados a objetos. Cada ruta se puede escribir como una clase separada y tiene su propio contenido e interfaz de usuario.

Ahora vamos a crear dos rutas, cada una con barras de aplicaciones y botones elevados únicos. El código es el siguiente:

class HomeRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Geeks for Geeks'),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Click Me!'),
          onPressed: () {
            /* Contains the code that helps us
             navigate to the second route. */
          },
        ),
      ),
    );
  }
}
 
class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Click Me Page"),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            /* Contains the code that helps us
             navigate to first route. */
          },
          child: Text('Home!'),
        ),
      ),
    );
  }
}

Navigator: Como su nombre indica, Navigator es un widget que nos ayuda a navegar entre las rutas. El navegador sigue el método de pila cuando se trata de las rutas. Según las acciones realizadas por el usuario, las rutas se apilan una sobre la otra y cuando se presiona hacia atrás, se va a la ruta visitada más recientemente. Navigator es un widget que sigue una disciplina de pila.

Definición de Inicio: Mientras navegamos, lo primero que debemos hacer es definir o inicializar la “página de inicio”. La página de inicio puede ser cualquier ruta según nuestras necesidades. La casa generalmente se colocará en la parte inferior de la pila del navegador. Ahora veamos cómo inicializar nuestro HomeRoute() como nuestra página de inicio:

void main() {
  runApp(MaterialApp(
    home: HomeRoute(),
  ));
}

Navegación a una Página: Ya que hemos definido nuestro Hogar, todo lo que queda es navegar desde el hogar a otra ruta de la aplicación. Para eso, el widget del navegador tiene un método llamado Navigator.push(). Este método empuja la ruta sobre la casa, mostrando así la segunda ruta. El código para insertar una ruta en la pila es el siguiente:

// Within the `HomeRoute` widget
 onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => const SecondRoute()),
              );
            }),

Navegación de regreso a casa: ahora hemos llegado a nuestro destino, pero ¿cómo regresamos a casa? Para eso, el navegador tiene un método llamado Navigator.pop(). Esto nos ayuda a eliminar la ruta actual de la pila para que volvamos a nuestra ruta de origen. Esto puede hacerse de la siguiente manera:

// Within the SecondRoute widget
onPressed: () {
  Navigator.pop(context);
}

Ejemplo: Entonces, así es como podemos navegar entre dos páginas en una aplicación. El código completo para la aplicación Flutter anterior es el siguiente:

import 'package:flutter/material.dart';
 
void main() {
  runApp(const MaterialApp(
    home: HomeRoute(),
  ));
}
 
class HomeRoute extends StatelessWidget {
  const HomeRoute({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Geeks for Geeks'),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: ElevatedButton(
            child: const Text('Click Me!'),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => const SecondRoute()),
              );
            }),
      ),
    );
  }
}
 
class SecondRoute extends StatelessWidget {
  const SecondRoute({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(""Click Me Page""),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('Home!'),
        ),
      ),
    );
  }
}

Producción: