Flutter Navegación - Historial de revisiones

Angelfg: /* Paso de datos entre pantallas */

2026-05-19T08:23:01Z

Paso de datos entre pantallas

Angelfg: /* Paso de datos entre pantallas */

2026-05-19T08:21:22Z

Paso de datos entre pantallas

Angelfg: /* Paso de datos entre pantallas */

2026-05-19T08:05:22Z

Paso de datos entre pantallas

Angelfg en 18:13 10 nov 2025

2025-11-10T18:13:55Z

Angelfg: /* Navegación declarativa */

2025-11-10T18:01:32Z

Navegación declarativa

Angelfg: /* Navegación declarativa */

2025-11-10T17:56:23Z

Navegación declarativa

Angelfg: /* Navegando entre pantallas */

2025-11-10T17:55:26Z

Navegando entre pantallas

Angelfg: /* Navegando entre pantallas */

2024-11-14T16:22:19Z

Navegando entre pantallas

Angelfg en 19:37 10 nov 2021

2021-11-10T19:37:31Z

Angelfg: /* Paso de datos entre páginas */

2021-11-10T19:33:14Z

Paso de datos entre páginas

Mostrar los cambios

← Revisión anterior		Revisión del 08:23 19 may 2026
Línea 863:		Línea 863:


−	* '''NOTA:''' Se queremos visualizar o dato ~~obtido na~~ pantalla ~~teríamos~~ que convertir o Stateless a un Stateful ~~e facer~~ setState(){} modificando o valor ~~dunha~~ variable có dato ~~obtido e~~ que ~~dita~~ variable ~~sexa~~ visualizada ~~cun~~ widget.	+	* '''NOTA:''' Si queremos visualizar el dato obtenido en la pantalla tendríamos que convertir el Stateless a un Stateful y hacer setState((){}) modificando el valor de una variable con el dato obtenido y que dicha variable sea visualizada con un widget.

@@ Línea 866: / Línea 866: @@
-'''Archivo principal_navegacion_page.dart''':
+:'''Archivo principal_navegacion_page.dart''':
-:<syntaxhighlight lang="java" enclose="div" highlight="54,57,61,70-73">
+::<syntaxhighlight lang="java" enclose="div" highlight="15,65-69,78-82">
 import 'package:flutter/material.dart';
 import 'package:holamundo/src/pages/stateful/navegando/pagina1_page.dart';

@@ Línea 856: / Línea 856: @@
      final datosDevuelta = await Navigator.of(context).pushNamed('noexiste');  // Es una tarea asíncrona.
      print(datosDevuelta);
+   }

← Revisión anterior		Revisión del 18:13 10 nov 2025
Línea 1:		Línea 1:
−	==~~Intruducción~~==	+	==Introducción==

	* Más información en:		* Más información en:

@@ Línea 595: / Línea 595: @@
 * '''<u>Nota:</u>''' No lo tenéis que aprender para el examen.
-* Más información en https://medium.com/flutter/learning-flutters-new-navigation-and-routing-system-7c9068155ade
+* Más información en:
@@ Línea 601: / Línea 603: @@
 : Este modo de navegación es mejor soportado por la plataforma de tipo Web.
 <br />

@@ Línea 592: / Línea 592: @@
 <br />
 ===Navegación declarativa===
 * Más información en https://medium.com/flutter/learning-flutters-new-navigation-and-routing-system-7c9068155ade

@@ Línea 301: / Línea 301: @@
 <br />
-* '''NOTA:'''
+* '''NOTA:''' Lo que está a continuación no le tenéis que aprender para el examen. Simplemente indico que emplear el BottomNavigationBar para cargar página diferentes no es una buena opción y normalmente se emplean para cambiar el contenido de la misma pantalla. El ejemplo anterior quizá sería más correcto hacerlo en los actions de la Appbar.
-:* El BottomNavigationBar está pensado para cambiar el contenido de la página (Scaffold) y no realizar navegaciones entre pantallas. Esto es así ya que por defecto, uno de los botones debe estar 'seleccionado' por defecto y si dicha selección lleva consigo cargar un nuevo Scaffold sin el BottomNavigationBar podría dar lugar a confusiones. Y tener varios BottomNavigationBar instanciados en cada uno de los Scaffold llevaría consigo otra serie de problemas (no tendríamos que cargar la nueva página sobre la anterior, sino reemplazarla).
+: Explico a continuación como hacerlo usando BottomNavigationBar.
 :* Es mejor emplear el [https://api.flutter.dev/flutter/widgets/IndexedStack-class.html IndexedStack] el cual permite visualizar diferentes contenidos dentro de la misma página.

← Revisión anterior		Revisión del 16:22 14 nov 2024
Línea 301:		Línea 301:

	<br />		<br />
		+	* '''NOTA:'''
		+	:* El BottomNavigationBar está pensado para cambiar el contenido de la página (Scaffold) y no realizar navegaciones entre pantallas. Esto es así ya que por defecto, uno de los botones debe estar 'seleccionado' por defecto y si dicha selección lleva consigo cargar un nuevo Scaffold sin el BottomNavigationBar podría dar lugar a confusiones. Y tener varios BottomNavigationBar instanciados en cada uno de los Scaffold llevaría consigo otra serie de problemas (no tendríamos que cargar la nueva página sobre la anterior, sino reemplazarla).
		+
		+	:* Es mejor emplear el [https://api.flutter.dev/flutter/widgets/IndexedStack-class.html IndexedStack] el cual permite visualizar diferentes contenidos dentro de la misma página.
		+	:: Un código de ejemplo:
		+	:::<syntaxhighlight lang="java" enclose="div" highlight="">
		+	import 'package:flutter/material.dart';
		+
		+	class MainPage extends StatefulWidget {
		+	@override
		+	_MainPageState createState() => _MainPageState();
		+	}
		+
		+	class _MainPageState extends State<MainPage> {
		+	int _selectedIndex = 0;
		+
		+	void _onItemTapped(int index) {
		+	setState(() {
		+	_selectedIndex = index;
		+	});
		+	}
		+
		+	static final List<Widget> _pages = <Widget>[
		+	HomeScreen(),
		+	SearchScreen(),
		+	ProfileScreen(),
		+	];
		+
		+	@override
		+	Widget build(BuildContext context) {
		+	return Scaffold(
		+	appBar: AppBar(
		+	title: const Text('BottomNavigationBar with IndexedStack'),
		+	),
		+	body: IndexedStack(
		+	index: _selectedIndex,
		+	children: _pages,
		+	),
		+	bottomNavigationBar: BottomNavigationBar(
		+	items: const <BottomNavigationBarItem>[
		+	BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
		+	BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
		+	BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
		+	],
		+	currentIndex: _selectedIndex,
		+	onTap: _onItemTapped,
		+	),
		+	);
		+	}
		+	}
		+
		+	// Estas serían las pantallas individuales
		+	class HomeScreen extends StatelessWidget {
		+	@override
		+	Widget build(BuildContext context) {
		+	return Center(child: Text('Home Screen'));
		+	}
		+	}
		+
		+	class SearchScreen extends StatelessWidget {
		+	@override
		+	Widget build(BuildContext context) {
		+	return Center(child: Text('Search Screen'));
		+	}
		+	}
		+
		+	class ProfileScreen extends StatelessWidget {
		+	@override
		+	Widget build(BuildContext context) {
		+	return Center(child: Text('Profile Screen'));
		+	}
		+	}
		+	</syntaxhighlight>
		+
		+
		+
		+
		+	<br />
		+
	==Navegación usando rutas==		==Navegación usando rutas==

@@ Línea 22: / Línea 22: @@
 * 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 [https://material.io/components/bottom-navigation/android#using-bottom-navigation Button Navigation].
+: También modificaré el AppBar para que aparezcan opciones de menú y que también se navege entre pantallas al pulsar una de ellas así como el uso de [https://material.io/components/bottom-navigation/android#using-bottom-navigation 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.
+: También voy a crear dos pantallas a las cuales vamos a navegar desde las diferentes opciones.
@@ Línea 35: / Línea 35: @@
 :* /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/pagina1_page.dart => Clase Pagina1NavegacionPage. Pantalla con un contenido
-:* /lib/src/pages/stateful/navegando/pagina2_page.dart => Clase Pagina2NavegacionPage. Página con un contenido.
+:* /lib/src/pages/stateful/navegando/pagina2_page.dart => Clase Pagina2NavegacionPage. Pantalla con un contenido.
@@ Línea 185: / Línea 185: @@
 <br />
-==Navegando entre páginas==
+==Navegando entre pantallas==
 * Más información en:
@@ Línea 462: / Línea 462: @@
      return Scaffold(
          appBar: AppBar(
-           title: Text('Página por defecto'),
+           title: Text('Pantalla por defecto'),
          ),
          body: null
@@ Línea 491: / Línea 491: @@
        ),
          appBar: AppBar(
-           title: Text('Página 1'),
+           title: Text('Pantalla 1'),
          ),
          body: Center(
            child: TextButton(
-             child: Text('PULSAME PARA REEMPLAZAR ESTA PAGINA POR LA PAGINA 2',
+             child: Text('PULSAME PARA REEMPLAZAR ESTA PANTALLA POR LA PANTALLA 2',
                          style: TextStyle(backgroundColor: Colors.green,fontSize: 20,color: Colors.white),),
              onPressed: (){
@@ Línea 522: / Línea 522: @@
 <br />
-==Paso de datos entre páginas==
+==Paso de datos entre pantallas==
-* Con lo aprendido en la sección anterior es muy sencillo pasar datos de una página a otra.
+* Con lo aprendido en la sección anterior es muy sencillo pasar datos de una pantalla a otra.
 : Después del nombre de la ruta, sólo hay que indicar el objeto (dato) que queremos pasar. Puede ser cualquier cosa, desde un String hasta una lista de objetos.
 :<syntaxhighlight lang="java" enclose="div" highlight="">
-  Navigator.of(context).pushNamed('pagina1',arguments: 'DATO DESDE PRINCIPAL A PAGINA 1')
+  Navigator.of(context).pushNamed('pagina1',arguments: 'DATO DESDE PRINCIPAL A PANTALLA 1')
 </syntaxhighlight>
@@ Línea 550: / Línea 550: @@
-* Ahora, desde la página que llamó a la anterior que se ha cerrado, debemos de recuperar la información enviada de vuelta.
+* Ahora, desde la pantalla que llamó a la anterior que se ha cerrado, debemos de recuperar la información enviada de vuelta.
 : Para ello sólo tenemos que igual la variable a la llamada al método pushNamed.
 : Como la operación es asíncrona, deberemos de realizar el proceso dentro de un método modificado con 'async' y que espere (await) el resultado de la llamada (recordar que ya vimos [https://wiki.cifprodolfoucha.es/index.php?title=Flutter_DART_Programaci%C3%B3n_as%C3%ADncrona#Async.2FAwait en esta wiki] como emplear el await/async).
@@ Línea 564: / Línea 564: @@
-* Aplicado este a nuestro ejemplo, vamos a pasar un dato (String) desde la página principal a la página1 y a la página2. En dichas páginas vamos a visualizar el texto enviado.
+* Aplicado este a nuestro ejemplo, vamos a pasar un dato (String) desde la pantalla principal a la página1 y a la página2. En dichas pantallas vamos a visualizar el texto enviado.
 : Además, desde la página1, como va a poder reemplazarse por la página2, también vamos a enviar una cadena en ese caso.
 : Por otra parte, vamos a hacer que la página por defecto envíe de vuelta a la principal un dato (String) en función de un IconButton pulsado.
@@ Línea 595: / Línea 595: @@
                Text(args),
                TextButton(
-                 child: Text('PULSAME PARA REEMPLAZAR ESTA PAGINA POR LA PAGINA 2',
+                 child: Text('PULSAME PARA REEMPLAZAR ESTA PANTALLA POR LA PAGINA 2',
                              style: TextStyle(backgroundColor: Colors.green,fontSize: 20,color: Colors.white),),
                  onPressed: (){