Arquitectura de Aplicaciones

1

Pasos para aprender Flutter Avanzado

2

¿Qué es una Arquitectura de software?

3

Tipos de Arquitecturas para Flutter

4

Arquitectura BLoC en Flutter

5

BLoC + Clean Architecture en Flutter

6

Estructurando nuestro proyecto utilizando la Arquitectura BLoC

7

Haciendo BLoC Singleton en Flutter

8

Aplicando Providers al Proyecto

Firebase y Flutter

9

Integrando Firebase Authentication, Cloud Firestore y Firebase Storage al proyecto

10

Integrando Firebase a Flutter para Android

11

Integrando Firebase a Flutter para iOS

12

Creación de Pantalla de Login con Flutter

13

Creando botones reutilizables en Flutter

14

Autenticación de Firebase con Google

15

Implementando Firebase Authentication en BLoC Pattern

16

Streams en Flutter

17

Manejando una sesión con Firebase Authentication y Flutter

18

Implementando Google SignOut en BLoC

19

Implementando Google SignOut en View

20

Monitoreando y validando la conexión al Sign con Google

21

Mostrando los datos de usuario de Google en la interfaz en Flutter

Cloud Firestore de Firebase en Flutter

22

¿Qué es Cloud Firestore de Firebase?

23

Analizando un modelo de datos no relacional

24

Creando un Modelo de datos en Cloud Firestore

25

Enviando datos a Cloud Firestore

26

Creando un Widget gradiente personalizado

27

Manejo de Desbordamiendo de Texto de Widget Text

28

Botón de Back en un Appbar en Flutter

29

Navegación entre pantallas en Flutter

30

Widget Text Appbar personalizado en Flutter

31

Widget TextField personalizado en Flutter

32

Creando una Safe Area para una interfaz que tiene un AppBar

33

Widget TextField con iconos en Flutter

34

Retocando el CardView

35

Mostrando imágenes en un CardView

36

Creando un botón de Submit en Flutter

37

Envío de datos de un fórmulario en Flutter

38

Subiendo datos a Firestore de Firebase

39

Formularios en Flutter

Acceso al Hardware con Flutter

40

Acceso a la cámara en Flutter

41

Librerías de acceso a Hardware en Flutter

Firebase Storage en Flutter

42

Qué es y cómo funciona Firebase Storage en Flutter

43

Subiendo una imagen a Firebase Storage desde Flutter

Querys avanzados en Cloud Firestore de Firebase en Flutter

44

Manejo de imágenes en Cloud Firestore

45

Cloud Firestore insertando referencias y arrays en la base de datos

46

Descargar imágenes de Firebase Storage y mostrarlas en Flutter

47

Procesando datos con BLoC Pattern

48

Trayendo datos de Cloud Firestore

49

Persistiendo datos de un usuario logueado

50

Aplicando Filtros en Cloud Firestore

51

Construyendo los Places en la pantalla de Home

52

Mostrando los Places en la pantalla de Home

53

Actualizando datos en tiempo real

54

Manejando la lógica de likes, como botón toggle.

55

Insertando y obteniendo referencias en datos de Firestore.

56

Usando el caché para cargar imágenes más rápido

57

StreamController, sink, add y StreamBuilder

Conclusiones

58

Conclusiones

Curso Avanzado de Flutter

Curso Avanzado de Flutter

Anahí Salgado Díaz de la Vega

Anahí Salgado Díaz de la Vega

Navegación entre pantallas en Flutter

29/58

Lectura

Navegar de una pantalla a otra

Comenzaremos viendo el ejemplo más simple.

Recuerda que pensar en manejar la navegación en flutter significa que estamos en un stack, por lo tanto si quiero pasar de una pantalla a otra deberé añadir un elemento al stack, esto lo hago con la opción push de la siguiente manera.

Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondRoute()),
);

Ahora imagina que queremos regresar, esto significará sacar la pantalla de la pila en este caso no es necesario llamar directamente al archivo sino únicamente usar la función pop de la clase Navigator.

Navigator.pop(context);

Navegar de una pantalla a otra con parámetros

Podemos enviar de una pantalla a otra desde un dato sencillo hasta un objeto entero, simplemente usando el método constructor de la clase a dónde queremos llevar el dato. Podemos hacerlo de la siguiente forma:

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => DetailScreen(place: places[index]),
  ),
);

Navegar de una pantalla a otra volver y obtener un resultado

Esta acción no es tan utilizada pero te dejo el dato sobre cómo funciona y la explicación de un caso de uso para que tengas más contexto de en qué casos se puede usar:

Imagina una pantalla que tiene dos botones ambos activan dos menús, el requerimiento es que la al clickear cualquiera de los botones abra el menú y luego regrese a la pantalla anterior con el resultado de lo seleccionado en el menú.

Este tipo de actividad se conoce como obtener el resultado de la pantalla y lo podemos lograr de la siguiente forma:

1. Ir a la pantalla de opciones

onPressed: () {
    _navigateAndDisplaySelection(context);
},


2. En la pantalla de opciones tener asignado el accionable de esta forma

Navigator.pop(context, "Opción Seleccionada");

Esto hará que automáticamente al ir de regreso a la pantalla inicial llegué directamente a este método, para obtener el resultado:

_navigateAndDisplaySelection(BuildContext context) async {
    final result = await Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => SelectionScreen()),
    );
}

Navegación con rutas

Cuando estamos navegando recurrentemente a la misma pantalla desde otras, puede provocar la duplicación del código. En esos casos es más recomendable utilizar la navegación por rutas.

Para lograr esto lo primero que debemos hacer es desde el Widget MaterialApp() declarar las rutas de la siguiente forma:

MaterialApp(
    initialRoute: '/',
    routes: {
        '/': (context) => FirstScreen(),
        '/second': (context) => SecondScreen(),
        '/third': (context) => ThirdScreen(),
    },
);

Una vez declaradas ya podemos navegar de esta forma:

Navigator.pushNamed(context, '/second');

Y regresar a la pantalla anterior usando la misma sentencia pop

Navigator.pop(context);

Aportes 11

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Si quieren aprender mas de como hacer navejaciones animadas Diego GDE de Flutter nos muestra como https://youtu.be/RVBJPXjgm9E

Esta navegacion solo se usa para las screens que llevan datos? y como se diferencia de la navegacion que estabamos teniendo de ir de home a profile. y the el sign in a home.

Gracias por la documentación. Se me hace más entendible la navegación por rutas.

Buen contenido! Muchas gracias por este gran curso! 😄

Interesante, sera igual de bueno o mejor que Navigation de Android?

Excelente Info!

Epsilon!

Muy buena explicación!

Excelente info! me gusto la navegación con rutas.

Muy clara la explicación !

Muy buena la explicación, he tenido que leerlas varias veces para poder comprender, pero muy buena.