Aplicaciones de varias páginas en Flutter

Las aplicaciones son ampliamente utilizadas por humanos en este mundo tecnológico. El número de aplicaciones en la tienda de aplicaciones aumenta día a día. Debido a esta competencia, los desarrolladores de aplicaciones han comenzado a agregar una serie de funciones a sus aplicaciones. Para reducir esta complejidad, el contenido de la aplicación se divide principalmente en varias páginas para que el usuario pueda navegar entre estas páginas con facilidad.

Flutter es un SDK de aplicaciones móviles de código abierto que se utiliza para desarrollar aplicaciones móviles multiplataforma. Flutter se está volviendo popular en estos años debido a sus impresionantes funciones, como la recarga en caliente, las interfaces de usuario atractivas, etc. En Flutter, todo es un widget.

Rutas y Navegadores: En Flutter, las páginas/pantallas se llaman Rutas . El proceso de navegar de una ruta a otra lo realiza un widget llamado Navigator . El navegador mantiene todas sus rutas secundarias en forma de pilas . Tiene muchos métodos como push() y pop() que funcionan bajo la disciplina de pila. Pero, para aplicaciones de varias páginas, vamos a utilizar un método único llamado pushNamed(). Este método sigue principalmente conceptos orientados a objetos .

El método Navigator.pushNamed() se usa para llamar a una ruta, cuya clase ha sido creada y definida de antemano. Es como llamar a una clase cuando es necesario en OOP. Ahora, pasemos a crear nuestra aplicación de varias páginas.

Solicitud de varias páginas:

Creación de una ruta: las rutas se crean principalmente en forma de clases. Cada ruta tiene una clase única con contenidos e interfaz de usuario únicos. Aquí, vamos a crear tres rutas, a saber, HomeRoute(), SecondRoute() y ThirdRoute(). Cada ruta tendrá una barra de aplicación que contiene un título único y un botón en relieve para navegar entre las rutas. Se puede crear una ruta de la siguiente manera:

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,
      ), // AppBar
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              child: const Text('Click Me!'),
              onPressed: () {
                Navigator.pushNamed(context, '/second');
              },
            ), // ElevatedButton
            ElevatedButton(
              child: const Text('Tap Me!'),
              onPressed: () {
                Navigator.pushNamed(context, '/third');
              },
            ), // ElevatedButton
          ], // <Widget>[]
        ), // Column
      ), // Center
    ); // Scaffold
  }
}

Definición de Rutas: Antes de navegar entre rutas, es muy importante definirlas en el widget de MaterialApp. Esto nos ayuda a acceder y llamarlos lo más fácilmente posible. Dado que estamos inicializando la primera ruta, no es necesario que mencionemos la ruta de origen. Las rutas se pueden definir de la siguiente manera:

// function to trigger build when the app is run
void main() {
  runApp(MaterialApp(
    initialRoute: '/',
    routes: {
      '/': (context) => const HomeRoute(),
      '/second': (context) => const SecondRoute(),
      '/third': (context) => const ThirdRoute(),
    },
  )); //MaterialApp
}

Del código se entiende que cada ruta ha sido nombrada de manera única. Entonces, cuando el widget del navegador encuentra alguno de estos nombres en la clase de ruta, navega a la ruta respectiva. La ruta inicial en este código especifica la ruta de inicio de la aplicación y está simbolizada por el símbolo ‘/’. Es obligatorio inicializar la página de inicio en este widget. 

Navegación a una página: el método Navigator.pushNamed() entra en juego en este segmento. Este método llama al nombre de una ruta particular en una clase de ruta. Inicializando así el proceso de navegación. La navegación se puede realizar de la siguiente manera:

onPressed: () {
  Navigator.pushNamed(context, '/second');
}

Navegación hacia atrás: Pero, cuando se trata de visitar la ruta visitada más recientemente, se puede usar el método Navigator.pop(). Nos ayuda a navegar de regreso a la última ruta. En este caso, la disciplina de la pila es la siguiente. El método pop se utiliza de la siguiente manera:

onPressed: () {
  Navigator.pop(context);
}

Entonces, ahora veamos cómo se combinaron todos estos códigos para crear esta aplicación de varias páginas.

Ejemplo:

import 'package:flutter/material.dart';
 
// function to trigger build when the app is run
void main() {
  runApp(MaterialApp(
    initialRoute: '/',
    routes: {
      '/': (context) => const HomeRoute(),
      '/second': (context) => const SecondRoute(),
      '/third': (context) => const ThirdRoute(),
    },
  )); //MaterialApp
}
 
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,
      ), // AppBar
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              child: const Text('Click Me!'),
              onPressed: () {
                Navigator.pushNamed(context, '/second');
              },
            ), // ElevatedButton
            ElevatedButton(
              child: const Text('Tap Me!'),
              onPressed: () {
                Navigator.pushNamed(context, '/third');
              },
            ), // ElevatedButton
          ], // <Widget>[]
        ), // Column
      ), // Center
    ); // Scaffold
  }
}
 
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,
      ), // AppBar
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('Back!'),
        ), // ElevatedButton
      ), // Center
    ); // Scaffold
  }
}
 
class ThirdRoute extends StatelessWidget {
  const ThirdRoute({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Tap Me Page"),
        backgroundColor: Colors.green,
      ), // AppBar
    ); // Scaffold
  }
}

 
Producción: