Conceptos y clases centrales del ruteo en Flutter

Ruta: una ruta es una especie de abstracción de una "pantalla" o "página" de una aplicación, en este caso una aplicación de Flutter puedes ver una similitud entre una URL de un navegador y una página a la cual queremos acceder. Navegador: Crea un widget (una página que generalmente es un Stateless o un StateFul): además de esto, mantiene un historial basado en la pila de widgets ya que cada vez que vamos navegando; es decir, abriendo nuevas páginas o pantallas, se van apilando las mismas en una pila. Un navegador puede empujar y desplegar rutas para ayudar al usuario a moverse de una pantalla a otra. MaterialPageRoute: una ruta modal que reemplaza toda la pantalla con una transición adaptable a la plataforma; esto nosotros lo podemos personalizar para hacer transiciones o animaciones personalizadas para pasar entre una página a otra empleando el componente de navegación que te comentaba anteriormente; por lo tanto es el mecanismo más potente y con esto también el más complicado para hacer las transiciones entre pantallas.

Adaptar la transición entre pantallas según la plataforma

Recordemos que podemos crear distintas aplicaciones para distintas plataformas con un solo proyecto; cada plataforma tiene sus particularidades, sobre todo Android e iOS que tienes tanto estilos diferentes, pasando por transiciones de pantallas distintas.

La transición que ve al pasar de una pantalla a otras pantallas:

• Para Android, la transición de entrada de la página desliza la página hacia arriba y se desvanece. La transición de salida es la misma pero a la inversa.
• Para iOS, la página se desliza desde la derecha y sale al revés. La página también se desplaza hacia la izquierda en paralaje cuando entra otra página para cubrirla.

Todos estos son aspectos personalizables y que podemos adaptar mediante los Material Route que te explicaba anteriormente.

Esta transición ocurre solo debido a MaterialPageRoute. También puede modificar esta transición. Para modificar esta transición, debe jugar con MaterialPageRoute o PageRouteBuilder.

Las aplicaciones móviles suelen mostrar elementos de pantalla completa llamados "pantallas" o "páginas". En Flutter, estos elementos se denominan rutas y son administrados por un widget Navigator. El navegador administra una pila de objetos de ruta y proporciona métodos para administrar la pila, como Navigator.push y Navigator.pop.

Ejemplo 1: enrutamiento simple

En este ejemplo, puede ver que:

Se usa el método Navigator.push para enrutar a la nueva pantalla  Se usa el método Navigator.pop para regresar.

Navigator mantiene el historial de rutas basado en la pila y lo que esté en la parte superior de la pila que es nuestra página actual en nuestra aplicación.

Navigator.push toma dos argumentos (BuildContext, Route <T>). En lugar de Ruta, estamos usando MaterialPageRoute que reemplaza toda la pantalla con una transición adaptativa a la plataforma.

En nuestro main.dart, tenemos que configurar todas las rutas que nosotros vayamos a emplear para realizar la navegación; son las páginas que generalmente corresponden a archivos separados; de tal manera que una estructura común es tener un archivo por página:

import 'package:flutter/material.dart';

Vamos a crear una archivo nuevo, que corresponde a una página dentro de la carpeta llamada lib; el archivo va a ser pages/home.dart:

import 'package:flutter/material.dart';
import 'package:pruebas/pages/second.dart';
 
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: new Center(
        child: ElevatedButton(
          onPressed: () {
            Route route = MaterialPageRoute(builder: (context) => SecondPage());
            Navigator.push(context, route);
          },
          child: Text('Home'),
        ),
      ),
    );
  }
}

Y otra más, llamada pages/second.dart:

import 'package:flutter/material.dart';
 
class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Home'),
      ),
      body: new Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

Ejemplo 2: Enrutamiento con nombre

En este ejemplo, puede ver que estoy usando el método Navigator.pushNamed para enrutar a la nueva pantalla y Navigator.pop para regresar. Navigator mantiene un historial de rutas basado en pilas.

Navigator.pushNamed toma dos argumentos obligatorios (BuildContext, String, {Object}) y un argumento opcional. En lugar de String, estamos pasando el String que habíamos predefinido en rutas. Si tiene alguna idea sobre expressjs, le resultará muy familiar. Como le dije anteriormente, MaterialPageRoute es responsable de la transición de página y aquí, en este código completo, no he usado este MaterialPageRoute, entonces puede ser un poco difícil para usted cambiar la transición de página.

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Home'),
      ),
      body: new Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

1 Esta fue la ruta básica y ahora quiero contarles algo sobre los ejemplos anteriores. Si en su ruta "/" está presente, entonces no es obligatorio definir la ruta inicial. Hará "/" como su ruta inicial y si desea que su ruta inicial sea diferente de "/", entonces puede definir.

MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Material App',
      routes: {'/': (_) => HomePage(), 'second': (_) => SecondPage()},
    )

2 Esta fue la ruta básica y ahora quiero contarles algo sobre los ejemplos anteriores. Si en su ruta "/" está presente, entonces no es obligatorio definir la ruta inicial. Hará "/" como su ruta inicial y si desea que su ruta inicial sea diferente de "/", entonces puede definir.

MaterialApp( home: SecondHome(), routes: <String, WidgetBuilder>{   '/home': (context) => HomePage(),   '/second': (context) => SecondPage(), }, ),

3. Si desea que cuando alguna ruta no coincida, debería mostrar la pantalla de error de "enlace 404" no encontrado, entonces puede usar:

MaterialApp(
 routes: <String, WidgetBuilder>{
...
 },
 onUnknownRoute: (RouteSettings setting) {
   String unknownRoute = setting.name ;
   return new MaterialPageRoute(
               builder: (context) => NotFoundPage()
   );
 }
),

Ejemplo 3: onGenerateRoute

Aquí puede ver que estoy usando MaterialPageRoute y ahora puede modificar fácilmente la animación de transición. En este caso, no es necesario que las rutas onGenerateRoute creará las rutas por usted. Técnicamente, las rutas están presentes allí, pero usted no las inicializa. onGenerateRoute: crea una ruta para la configuración de ruta dada:

return MaterialApp(
      home: HomePage(),
      onGenerateRoute: (RouteSettings settings) {
        switch (settings.name) {
          case '/':
            return MaterialPageRoute(builder: (context) => HomePage());
            break;
          case '/second':
            return MaterialPageRoute(builder: (context) => SecondPage());
            break;
        }
      },
    );

Material fuente