Introducción a la navegación en Flutter

Uno de los aspectos más fundamentales de una aplicación móvil es que el usuario pueda moverse entre distintas páginas. Por suerte para nosotros, Flutter hace que crear rutas y moverse entre pantallas sea increíblemente fácil, especialmente en comparación con muchas soluciones front-end.

Configuración del archivo del proyecto

Para nuestro ejemplo, solo tendremos 4 pantallas, nuestro main.dartarchivo y dividiremos la barra de navegación en su propio archivo.

* screens    * account_screen.dart  * balance_screen.dart  * transfer_screen.dart  * welcome_screen.dart* main.dart* navbar.dart

Nombrar rutas

Si bien en la mayoría de los casos querrás dividir cada ruta en su propio archivo, los incluiremos aquí main.dartpor ahora.

En nuestro MaterialApppodemos configurar el routesmapa, que es una lista de pares clave/valor. Cada elemento de este mapa vincula un valor de cadena a una función de devolución de llamada que devuelve la página que queremos que se muestre. El objetivo de esto es acelerar el desarrollo al permitirnos utilizar algo como 'welcome_screen'cuando necesitamos una nueva página, en lugar de la página completa (context) = WelcomeScreen().

Para configurar nuestra página de inicio, podemos usar la MaterialApppropiedad homeo la initialRoutepropiedad . Efectivamente, hacen lo mismo, pero hometoman la clase en sí, como WelcomeScreen(), y initialRoutetoman la clave de nuestro routesmapa. No puedes usar ambas, ya que eso confunde al compilador.

principal.dart

import 'package:flutter/material.dart';import './screens/welcome_screen.dart';import './screens/account_screen.dart';import './screens/balance_screen.dart';import './screens/transfer_screen.dart';void main() = runApp(MyApp());class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      title: 'Navigation Demo',      home: MyHomePage(),    );  }}class MyHomePage extends StatefulWidget {  @override  _MyHomePageState createState() = _MyHomePageState();}class _MyHomePageState extends StateMyHomePage {  @override  Widget build(BuildContext context) {    return MaterialApp(       home: WelcomeScreen(),        routes: {        'welcome_screen': (context) = WelcomeScreen(),        'account_screen': (context) = AccountScreen(),        'balance_screen': (context) = BalanceScreen(),        'transfer_screen': (context) = TransferScreen()    });  }}

Eso funciona bien, pero es posible que termines escribiendo cada una de estas rutas con frecuencia y que el uso de cadenas dificulte la depuración cuando cometas el más mínimo error tipográfico. En cambio, nuestro código sería un poco menos frágil si almacenamos cada clave en una variable de identificación estática en cada clase y solo accedemos a esa identificación. Esto también nos brindará el beneficio de IntelliSense de VSCode y nos ayudará a descubrir por qué una página puede no estar disponible.

Todas las pantallas de nuestro ejemplo son iguales, excepto el identificador y el widget de texto. También estamos configurando la barra de navegación inferior para un widget que crearemos más adelante.

pantalla_de_bienvenida.dart

import 'package:flutter/material.dart';import '../navbar.dart';class WelcomeScreen extends StatelessWidget {  static const String id = 'welcome_screen';  @override  Widget build(BuildContext context) {    return Scaffold(      body: Center(        bottomNavigationBar: Navbar(),        child: Text('Welcome'),      ),    );  }}

Ahora podemos reemplazar nuestra cadena con el ID de cada pantalla. Observe que estamos accediendo a ella sin llamar a la clase en sí.

principal.dart

class _MyHomePageState extends StateMyHomePage {  @override  Widget build(BuildContext context) {    return MaterialApp(initialRoute: WelcomeScreen.id, routes: {      WelcomeScreen.id: (context) = WelcomeScreen(),      AccountScreen.id: (context) = AccountScreen(),      BalanceScreen.id: (context) = BalanceScreen(),      TransferScreen.id: (context) = TransferScreen()    });  }}

Empujar y hacer estallar

A diferencia del desarrollo web front-end, el enrutamiento móvil se basa en "apilar" pantallas una sobre otra. Cuando navegamos desde la pantalla de bienvenida a la pantalla de la cuenta, en realidad no estamos cambiando páginas, sino agregando nuestra pantalla de cuenta a nuestra pila, cubriendo así la página anterior. Para volver a la pantalla de bienvenida, solo tendríamos que destruir o popquitar la capa superior, revelando la página ya renderizada debajo de ella.

Hay varios métodos diferentes para Navigatorhacer esto, que puedes explorar en detalle aquí. Los dos principales que necesitamos son pushNamedagregar a nuestra pila y popeliminar la última capa. popSolo necesitamos nuestra compilación contexty pushlos métodos necesitan la contextclave de la página que configuramos en nuestras rutas.

Cualquier método agregado con Namedes para cuando hemos configurado nuestras rutas en el MaterialApp, de lo contrario, podría pasar la devolución de llamada en sí en lugar de nuestras claves.

barra de navegación.dart

import 'package:flutter/material.dart';import './screens/account_screen.dart';import './screens/balance_screen.dart';import './screens/transfer_screen.dart';class Navbar extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Container(      color: Colors.red,      child: Row(        mainAxisAlignment: MainAxisAlignment.spaceAround,        children: Widget[          FlatButton(              onPressed: () = Navigator.pop(context),              child: Icon(Icons.arrow_left, color: Colors.white, size: 40)),          FlatButton(              onPressed: () = Navigator.pushNamed(context, BalanceScreen.id),              child: Icon(Icons.account_balance, color: Colors.white)),          FlatButton(              onPressed: () = Navigator.pushNamed(context, TransferScreen.id),              child: Icon(Icons.sync, color: Colors.white)),          FlatButton(              onPressed: () = Navigator.pushNamed(context, AccountScreen.id),              child: Icon(Icons.account_circle, color: Colors.white)),        ],      ),    );  }}

Conclusión

Una vez más, cuando se trata de enrutamiento y navegación, Flutter realmente se destaca en eficiencia y facilidad de uso. Esperamos que este breve tutorial haya sido útil para comprender esta nueva tecnología.