Flutter Navegación
Sumario
Intruducción
- Más información en:
- El objetivo de esta sección es aprender una forma de 'navegar' entre las diferentes pantallas que haya en una aplicación móbil, bien a través de opciones de menú, bien a través de un Widget al que controlemos un evento que provoque la carga de una nueva pantalla.
- La forma en como 'navega' entre pantallas es empleando el concepto de pila. Cada nueva pantalla que se visualiza se pone 'encima' de la anterior mediante una operación de PUSH empleando un objeto Navigator.
- Cuando cerramos una pantalla, se realiza la operación contraria y se hace una operación POP sobre la pila, quitando la pantalla actual y visualizando la pantalla anterior.
- Veremos que se pueden hacer otro tipo de operaciones, como REPLACE, que reemplzaría la pantalla actual con otra nueva manteniendo la pila como estuviera en ese momento.
- Por eso es muy importante no abrir nuevas pantallas cuando queramos regresar a una pantalla anterior ya que estaríamos añadiendo nuevas pantallas a la pila, manteniendo las anteriores.
- Para ello voy a crear un nuevo StatelessWidget MiMaterialAppNavegar el cual va a visualizar una lista de opciones que cargarán diferentes pantallas.
- También modificaré el AppBar para que aparezcan opciones de menú y que también se navege entre páginas al pulsar una de ellas así como el uso de Button Navigation.
- Para ello haré uso del snippet fscaffoldabbn el cual genera todo el código necesario.
- También voy a crear dos páginas a las cuales vamos a navegar desde las diferentes opciones.
- La estructura de páginas será la siguiente:
- /lib/main.dart => Página que ejecuta el main y carga MiMaterialAppConNavegacion
- /lib/src/pages/app_con_navegación.dart => Clase MiMaterialAppConNavegacion, que visualiza un ManterialApp y carga PrincipalNavegacionPage
- /lib/src/pages/stateful/navegando/principal_navegación_page.dart => Clase PrincipalNavegacionPage que visualiza una lista para navegar, un Appbar con dos opciones de menú para navegar y dos Navigation Button en la parte inferior para navegar.
- /lib/src/pages/stateful/navegando/pagina1_page.dart => Clase Pagina1NavegacionPage. Página con un contenido
- /lib/src/pages/stateful/navegando/pagina2_page.dart => Clase Pagina2NavegacionPage. Página con un contenido.
Archivo main.dart:
import 'package:flutter/material.dart'; import 'package:holamundo/src/app.dart'; import 'src/app_con_navegacion.dart'; void main() => runApp(MiMaterialAppConNavegacion());
Archivo app_con_navegacion.dart:
import 'package:flutter/material.dart'; import 'package:holamundo/src/pages/stateful/navegando/principal_navegacion_page.dart'; class MiMaterialAppConNavegacion extends StatelessWidget { const MiMaterialAppConNavegacion({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home: PrincipalNavegacionPage(), debugShowCheckedModeBanner: false, ); } }
Archivo PrincipalNavegacionPage.dart:
import 'package:flutter/material.dart'; import 'package:holamundo/src/pages/stateful/navegando/pagina1_page.dart'; import 'package:holamundo/src/pages/stateful/navegando/pagina2_page.dart'; class PrincipalNavegacionPage extends StatefulWidget { const PrincipalNavegacionPage({Key? key}) : super(key: key); @override _PrincipalNavegacionPageState createState() => _PrincipalNavegacionPageState(); } class _PrincipalNavegacionPageState extends State<PrincipalNavegacionPage> { int _index = 0; // TODO: make sure this is outside build(), otherwise every setState will change the value back to 0 @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('App con navegación'), actions: [ IconButton(icon: Icon(Icons.av_timer),onPressed: (){},), IconButton(icon: Icon(Icons.add),onPressed: (){},), ], ), body: _pantallasCargar(), bottomNavigationBar: BottomNavigationBar( onTap: (tappedItemIndex) => setState(() { _index = tappedItemIndex; }), currentIndex: _index, items: [ BottomNavigationBarItem( icon: Icon(Icons.av_timer), label: 'navBarItem1Text'), BottomNavigationBarItem( icon: Icon(Icons.add), label: 'navBarItem2Text') ], ), ); } Widget _pantallasCargar(){ return ListView( children: [ ListTile(title: Text('Pantalla 1'), trailing: Icon(Icons.av_timer), onTap: (){},), ListTile(title: Text('Pantalla 2'), trailing: Icon(Icons.add), onTap: (){},), ], ); } }
Archivo pagina1_page.dart:
import 'package:flutter/material.dart'; class Pagina1NavegacionPage extends StatelessWidget { const Pagina1NavegacionPage({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Página 1'), ), body: null ); } }
Archivo pagina2_page.dart:
import 'package:flutter/material.dart'; class Pagina2NavegacionPage extends StatelessWidget { const Pagina2NavegacionPage({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Página 2'), ), body: null ); } }
- Más información en:
Archivo principal_navegacion_page.dart:
import 'package:flutter/material.dart'; import 'package:holamundo/src/pages/stateful/navegando/pagina1_page.dart'; import 'package:holamundo/src/pages/stateful/navegando/pagina2_page.dart'; class PrincipalNavegacionPage extends StatefulWidget { const PrincipalNavegacionPage({Key? key}) : super(key: key); @override _PrincipalNavegacionPageState createState() => _PrincipalNavegacionPageState(); } class _PrincipalNavegacionPageState extends State<PrincipalNavegacionPage> { int _index = 0; // TODO: make sure this is outside build(), otherwise every setState will change the value back to 0 @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('App con navegación'), actions: [ IconButton(icon: Icon(Icons.av_timer),onPressed: (){},), IconButton(icon: Icon(Icons.add),onPressed: (){},), ], ), body: _pantallasCargar(), bottomNavigationBar: BottomNavigationBar( onTap: (tappedItemIndex) => setState(() { _index = tappedItemIndex; }), currentIndex: _index, items: [ BottomNavigationBarItem( icon: Icon(Icons.av_timer), label: 'navBarItem1Text'), BottomNavigationBarItem( icon: Icon(Icons.add), label: 'navBarItem2Text') ], ), ); } Widget _pantallasCargar(){ return ListView( children: [ ListTile(title: Text('Pantalla 1'), trailing: Icon(Icons.av_timer), onTap: (){ final ruta = MaterialPageRoute( builder: (context) => Pagina1NavegacionPage(),); Navigator.of(context).push(ruta); },), ListTile(title: Text('Pantalla 2'), trailing: Icon(Icons.add), onTap: (){},), ], ); } }
Archivo pagina1_page.dart:
import 'package:flutter/material.dart'; class Pagina1NavegacionPage extends StatelessWidget { const Pagina1NavegacionPage({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( floatingActionButton: FloatingActionButton( onPressed: () { Navigator.of(context).pop(); }, child: Icon(Icons.arrow_back), ), appBar: AppBar( title: Text('Página 1'), ), body: null ); } }
- Más información en: https://api.flutter.dev/flutter/widgets/Navigator/pushNamed.html
Archivo routes.dart:
import 'package:flutter/material.dart'; import 'package:holamundo/src/pages/stateful/navegando/pagina1_page.dart'; import 'package:holamundo/src/pages/stateful/navegando/pagina2_page.dart'; import 'package:holamundo/src/pages/stateful/navegando/principal_navegacion_page.dart'; Map<String,WidgetBuilder>obtenerRutas(){ return <String,WidgetBuilder>{ 'home' : (BuildContext context) => PrincipalNavegacionPage(), 'pagina1' : (BuildContext context) => Pagina1NavegacionPage(), 'pagina2' : (BuildContext context) => Pagina2NavegacionPage(), }; }
Archivo app_con_navegacion.dart:
import 'package:flutter/material.dart'; import 'package:holamundo/src/pages/stateful/navegando/default_page.dart'; import 'package:holamundo/src/pages/stateful/navegando/principal_navegacion_page.dart'; import 'package:holamundo/src/routes/routes.dart'; class MiMaterialAppConNavegacion extends StatelessWidget { const MiMaterialAppConNavegacion({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home: null, debugShowCheckedModeBanner: false, initialRoute: 'home', routes: obtenerRutas(), onGenerateRoute: (RouteSettings routesettings){ print(routesettings.name); return MaterialPageRoute( builder: (BuildContext context) => DefaultNavegacionPage()); }, ); } }
Archivo principal_navegacion_page.dart:
import 'package:flutter/material.dart'; import 'package:holamundo/src/pages/stateful/navegando/pagina1_page.dart'; import 'package:holamundo/src/pages/stateful/navegando/pagina2_page.dart'; class PrincipalNavegacionPage extends StatefulWidget { const PrincipalNavegacionPage({Key? key}) : super(key: key); @override _PrincipalNavegacionPageState createState() => _PrincipalNavegacionPageState(); } class _PrincipalNavegacionPageState extends State<PrincipalNavegacionPage> { int _index = 0; // TODO: make sure this is outside build(), otherwise every setState will change the value back to 0 @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('App con navegación'), actions: [ IconButton(icon: Icon(Icons.av_timer),onPressed: (){},), IconButton(icon: Icon(Icons.add),onPressed: (){},), ], ), body: _pantallasCargar(), bottomNavigationBar: BottomNavigationBar( onTap: (tappedItemIndex) => setState(() { _index = tappedItemIndex; }), currentIndex: _index, items: [ BottomNavigationBarItem( icon: Icon(Icons.av_timer), label: 'navBarItem1Text'), BottomNavigationBarItem( icon: Icon(Icons.add), label: 'navBarItem2Text') ], ), ); } Widget _pantallasCargar(){ return ListView( children: [ ListTile(title: Text('Pantalla 1'), trailing: Icon(Icons.av_timer), onTap: () => Navigator.of(context).pushNamed('pagina1') ,), ListTile(title: Text('Pantalla 2'), trailing: Icon(Icons.add), onTap: () => Navigator.of(context).pushNamed('pagina2') ,), ListTile(title: Text('Pantalla por defecto'), trailing: Icon(Icons.backpack), onTap: () => Navigator.of(context).pushNamed('noexiste') ,), ], ); } }
Archivo default_page.dart:
import 'package:flutter/material.dart'; class DefaultNavegacionPage extends StatelessWidget { const DefaultNavegacionPage({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Página por defecto'), ), body: null ); } }
- Nota: Indicar que Navigator tiene más métodos que push y pop para manejar el cambio de pantallas. Por ejemplo, podemos hacer uso del método pushReplacementNamed (o su equivalente sin emplear los nombres de rutas) para sustituír la pantalla actual por otra.
- Aplicado a nuestro ejemplo:
Archivo pagina1_page.dart:
import 'package:flutter/material.dart'; class Pagina1NavegacionPage extends StatelessWidget { const Pagina1NavegacionPage({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( floatingActionButton: FloatingActionButton( onPressed: () { Navigator.of(context).pop(); }, child: Icon(Icons.arrow_back), ), appBar: AppBar( title: Text('Página 1'), ), body: Center( child: TextButton( child: Text('PULSAME PARA REEMPLAZAR ESTA PAGINA POR LA PAGINA 2', style: TextStyle(backgroundColor: Colors.green,fontSize: 20,color: Colors.white),), onPressed: (){ Navigator.of(context).pushReplacementNamed('pagina2'); }, ), ) ); } }
- Al pulsar sobre el botón, la página1 es sustituída por la página2 y si volvemos atrás pulsando el botón Back, aparecerá la pantalla inicial.
Paso de datos entre páginas
https://flutter.dev/docs/cookbook#navigation
Archivo main.dart:
Enlace a la página principal de la UD5
Enlace a la página principal del curso
-- Ángel D. Fernández González -- (2021).