Las rutas con nombre pueden usarse para navegar entre páginas de una app de Flutter para dispositivos móviles, pero también funcionan para las URL de las aplicaciones web de Flutter. En este artículo, se explica cómo agregar rutas con nombre a tu app y cómo puedes personalizarlas para que coincidan con los patrones de las rutas.
Cómo definir rutas con nombres
Puedes agregar rutas con nombre definiéndolas dentro de la clase MaterialApp. La propiedad MaterialApp.routes contiene un mapa que enumera cada ruta nombrada y su widget de visualización asociado. La propiedad MaterialApp.initialRoute determina qué ruta se muestra al iniciar la aplicación. Por lo tanto, se debe definir la ruta inicial dentro de la propiedad de las rutas. Por ejemplo:
https://medium.com/media/a8846895dc2456388075246244a5c6f1/href
Para mantener tu código organizado, puedes colocar rutas con nombre dentro de variables estáticas, como en los propios widgets:
https://medium.com/media/e92174fe9949d9bda38f5f45b95d77d1/href
Luego, refactoriza MaterialApp.routes usando las rutas con nombre ahora definidas como variables estáticas:
https://medium.com/media/f22ba3d60150d6710eb89fa2b230ac42/href
Cómo navegar entre páginas
Para navegar de una página a otra, solo tienes que pasar la ruta con nombre al navegador:
https://medium.com/media/4e94968ef14fd6062ac5dfe715356027/href
Mira un ejemplo interactivo completo de esto en DartPad. Si compilas y ejecutas tú mismo la aplicación para la Web, también puedes ingresar /#/overview dentro del navegador. Esa acción pasa la ruta con nombre overview a Navigator, y te lleva al widget OverviewPage, como se puede observar en el siguiente GIF:
Cómo enrutar lógica para URL dinámicas
Es posible que debas abordar escenarios más complejos que los descritos aquí, como tener patrones de coincidencia dentro de las rutas para permitir URL dinámicas. Para ampliar este ejemplo, supón que tienes muchos artículos diferentes en la página overview. Para cada artículo, quieres poder navegar directamente a través de URL:
/#/article/a-very-interesting-article
/#/article/newsworthy-news
Definir rutas con nombre para todos los artículos que se encuentran dentro de la MaterialApp no es una buena idea. Para esos casos tan dinámicos, es mejor una opción más personalizada. Cuando se publicó esta entrada, el canal estable de Flutter era la versión 1.12, y no hay una manera sencilla de hacerlo, aunque hay planes para admitir un enrutamiento más avanzado con la nueva versión de Navigator.
Por ahora, se puede utilizar un paquete externo, como Fluro, que proporciona un enrutamiento más avanzado. Ofrece patrones comodín de coincidencia en las rutas, así como análisis de las strings de consulta en las URL. Probablemente haya muchos otros paquetes disponibles, así que deja un comentario con el nombre de tu favorito.
Si estás dispuesto a aceptar el reto, también puedes obtener rutas dinámicas utilizando la propiedad MaterialApp.onGenerateRoute. Usa esto a fin de escribir la lógica de enrutamiento para cuando una ruta con nombre no esté dentro de las rutas MaterialApp.routes.
Para cada ruta, define un Path con un patrón RegEx. Si la ruta con nombre coincide con el patrón, muestra el widget asociado. Luego, define la clase Path para admitir eso:
https://medium.com/media/a51a21266161783fb1cc7ab28faaaa33/href
Para la página overview y la ruta principal, es bastante simple y se ve similar a lo que tenías antes. El siguiente ejemplo crea un patrón RegEx que coincide con un slug (letras minúsculas con guión) que se utiliza para encontrar el artículo correspondiente:
https://medium.com/media/a512016a4e3f5a561987aa01ccb7033b/href
Todo lo que queda es crear una función onGenerateRoute para MaterialApp. Si la ruta con nombre actual (settings.name) está definida en la lista de rutas, muestra el widget asociado. Asegúrate de pasar cualquier coincidencia con nombre en RegEx (en este ejemplo es el slug). Si no se encuentran coincidencias, simplemente muestra un valor nulo. Se llama a WidgetsApp.onUnknownRoute para procesar esos casos:
https://medium.com/media/89c3c4fe231d7a9e85d456752eaf3bb9/href
Asegúrate de definir la función onGenerateRoute dentro de la clase MaterialApp. ¡Implementaste URL dinámicas con Flutter usando rutas con nombre! Puedes ver un ejemplo interactivo completo en DartPad.
Conclusión
Tanto si eliges escribir tu propia lógica personalizada para rutas, como si simplemente utilizas la compatibilidad que existe en MaterialApp, podrás admitir URL de forma predeterminada con una app de Flutter en la Web cuando uses rutas con nombre. Implementar rutas con nombre también puede garantizar que se disocie la lógica de presentación de la de enrutamiento, lo que genera una menor duplicación de código.
Cuéntanos en los comentarios qué solución utilizas en tu app, ya sea escribiendo tu propia lógica personalizada o usando un paquete externo.
¡Diviértete programando!
Source: Google Dev