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

Aplicando Providers al Proyecto

8/58
Recursos
Transcripción

Para instalar generic_bloc_provider debemos dirigirnos a nuestro archivo pubspec.yaml que se encuentra en la raíz de nuestro proyecto y en la parte de dependencies agregamos la línea generic_bloc_provider: ^1.0.9, recuerda dejar una correcta indentación en el documento para que no genere errores. Luego en nuestro Android Studio le damos click a “Packages get” para integrar la librería a nuestro proyecto.

Aquí puedes acceder al repositorio.

Aportes 21

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Encontré un paquete útil para usar multiples providers:

https://pub.dev/packages/provider

Some doc:
we’re going from:

Provider<Foo>.value(
   value: foo,
   child: Provider<Bar>.value(
     value: bar,
     child: Provider<Baz>.value(
       value: baz,
       child: someWidget,
     )
   )
 )

To:

MultiProvider(
  providers: [
    Provider<Foo>.value(value: foo),
    Provider<Bar>.value(value: bar),
    Provider<Baz>.value(value: baz),
  ],
  child: someWidget,
)

Es posible que al instalar la dependencia de generic bloc provider les aparezca un error relacionado con Null Safety si estan usando la versión 2+ de flutter y dart. Aqui algunos enlaces de documentacion de esta nueva caracteristica:
https://dart.dev/null-safety
https://flutter.dev/docs/null-safety
En fin, si llegan a tener ese problema lo unico que deben hacer es instalar la nueva versión de la dependencia que es este momento es:
generic_bloc_provider: ^2.0.0-nullsafety.1
https://pub.dev/packages/generic_bloc_provider/versions/2.0.0-nullsafety.1
Haciendo este cambio el problema debería desaparecer. Ojala a alguien le sirva.

No es necesario andar cortando y pegando el código, simplemente darle Alt + Enter al Widget que se quiere encapsular en otro widget. Y Click en ‘Wrap with widget’ 😃

los de VS que no les sale el crtl+n usen crtl+.

Para windows no me funciono el ctrl + n, pero con ctrl + i les motrara la pantalla directa para implementar.

Buenas, es recomendable tener una cascada de Bloc Providers?

child: BlocProvider(
   bloc: UserBloc(),
   child: BlocProvider(
        bloc: HomeBloc(),
        child: BlocProvider(
           bloc: CustomerBloc(),
           child: MaterialApp()

Añadir las dependencias

dependencies:
  generic_bloc_provider: ^1.0.9

modo de usu

import 'package:generic_bloc_provider/generic_bloc_provider.dart';

Ahora si comenzamos a aplicar las explicaciones de Ana 🤩🤩

El siguiente comando te ayuda a instalar cualquier dependencia que necesites de manera automatica en su ultima version. NO necesitas escribir nada en el pubspec.yml

flutter pub add generic_bloc_provider

Ctrl + i sirve para desplegar la ventana de Implement e insertar el metodo dispose()

Realmente el tema es algo complicado de entender, pues en algunas cosas voy repitiendo para poder comprender la explicación, sin embargo está bastante completo poder utilizar BloC junto a Singleton ❤️

tengo una duda, que pasa en el caso de que sean más vistas ?, se debería tener cada bloc en el main o hay alguna forma de ir agregando cada provider?

En proceso de entender el proceso de bloC

Yo tengo algo mal pero no se que es porque tengo todos los archivos en rojo y ya descargue e instale el Dart, el Flutter, actualice todo y no anda 😦

si tienen problemas prueben esto:

Explicación de la composición del proveder

  Widget build(BuildContext context) {
    return BlocProvider(
        child: MaterialApp(
          title: 'Platzi Trips',
          theme: ThemeData(),
          home: PlatziTripsCupertino(),
        ),
        bloc: UserBloc());
  }

Hola, estoy tomando el curso desde Windows 10 y me sale el siguiente error:
Working dir: C:\Users\Fede\Desktop\Curso-de-Flutter-Avanzado-en-Platzi-1.ArquitecturaBLoC
"C:\Program Files\Dart\dart-sdk\bin\pub.bat" get
Resolving dependencies…
Because platzi_trips_app depends on flutter_test any from sdk which doesn’t exist (the Flutter SDK is not available), version solving failed.

Flutter users should run flutter pub get instead of pub get.
Process finished with exit code 69

Sabrian que es lo que estoy haciendo mal?

Aun no entnede muy bien el concepto de bloC, espero que en la siguientes clase se afiance mas este concepto, he leido bastante pero sigo sin entender por completo, Gran Clase

:S :S o sea, si. Pero… ??? what? xD :S

No sé porque Android Studio siempre me da tantos problemas, creo que el hecho de que ella esté realizando todo en mac y luego haya que pasarlo a Windows causa bastantes conflictos, a mí por alguna razón no me permite darle Run al proyecto 😕