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

Estructurando nuestro proyecto utilizando la Arquitectura BLoC

6/58
Recursos
Transcripción

En este curso vamos a tomar como base el proyecto que hicimos en el Curso de Flutter, pero nuestra querida profesora hizo un repositorio más optimizado de el proyecto que se hizo en ese curso el cuál lo puedes encontrar en este repositorio.

Le haremos Fork al repositorio para tenerlo en nuestra cuenta de GitHub y lo clonaremos en nuestra computadora para empezar a estructurar nuestro proyecto.

[Repositorio de esta clase](https://github.com/anncode1/Curso-de-Flutter-Avanzado-en-Platzi.git https://github.com/anncode1/Curso-de-Flutter-Avanzado-en-Platzi/tree/1.ArquitecturaBLoC).

Aportes 62

Preguntas 11

Ordenar por:

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

Al clonar el proyecto me presentaba error al ejecutarlo entonces agregar los archivos
al proyecto que hice del curso basico de Flutter de la siguiente manera:

  • Nos situamos en el directorio raiz donde está el proyecto plazi_trips_app que en mi caso es:
~/dev/flutter/travel/
  • Clonamos el proyecto extrayendo el ultimo commit de la rama por defecto que es master:
git clone https://github.com/anncode1/Curso-de-Flutter-Avanzado-en-Platzi.git platzi_trips_app_avanzado --depth 1
  • Copiamos los archivos de los directorios lib y assets y luego borramos el proyecto clonado:
rm -rf platzi_trips_app/lib

cp -ar platzi_trips_app_avanzado/lib platzi_trips_app/lib

rm -rf platzi_trips_app/assets

cp -ar platzi_trips_app_avanzado/assets platzi_trips_app/assets

rm -rf platzi_trips_app_avanzado
  • Estructuramos el proyecto:
cd platzi_trips_app

mkdir -p lib/Place/{bloc,model,repository,ui/{screens,widgets}}

mkdir -p lib/User/{bloc,model,repository,ui/{screens,widgets}}

mkdir -p lib/widgets
  • Verificamos la estructura de los directorios recien creados:
tree lib/{Place,User,widgets}

Salida:

lib/Place
├── bloc
├── model
├── repository
└── ui
    ├── screens
    └── widgets
lib/User
├── bloc
├── model
├── repository
└── ui
    ├── screens
    └── widgets
lib/widgets
  • Movemos los archivos correspondientes al directorio Place:
mv lib/place.dart lib/Place/model

mv lib/{header_appbar.dart,home_trips.dart,search_trips.dart} lib/Place/ui/screens

mv lib/{card_image.dart,card_image_list.dart,description_place.dart,review.dart,review_list.dart} lib/Place/ui/widgets
  • Movemos los archivos correspondientes al directorio User:
mv lib/{profile_header.dart,profile_trips.dart} lib/User/ui/screens

mv lib/{button_bar.dart,circle_button.dart,profile_background.dart,profile_place.dart,profile_place_info.dart,profile_places_list.dart,user_info.dart} lib/User/ui/widgets
  • Movemos los archivos correspondientes al directorio widgets:
mv lib/{button_purple.dart,floating_action_button_green.dart,gradient_back.dart} lib/widgets
  • Modificamos la información del archivo pubspec.yaml:
name: platzi_trips_app
...
...
  assets:
    - assets/img/people.jpg
    - assets/img/ann.jpg
    - assets/img/girl.jpg
    - assets/img/mountain.jpeg
    - assets/img/beach.jpeg
    - assets/img/beach_palm.jpeg
    - assets/img/mountain_stars.jpeg
    - assets/img/sunset.jpeg
    - assets/img/river.jpeg
  • Finalmente abrimos el proyecto con Android Studio y arreglamos manualmente las referencias de los imports de los archivos .dart

algo que me rompió la cabeza fue cambiar la ubicación de flutter en mi Android Studio, en Mac esta en Android Studio>Preferences>Languages & Frameworks
El secreto es arreglar primero la ruta de nuestra carpeta de Flutter y dar apply, esto hará que se cargue nuestro Dart, reiniciar Android Studio(es necesario, me marcó error hasta que no lo hice) y luego funcionará todo perfecto.
Espero que le pueda ayudar a alguien más =D

No tengo idea de porque tenemos que organizar el proyecto pero si clonas una rama más adelante te evitas todo ese trabajo tedioso.

git clone --branch 1.ArquitecturaBLoC https://github.com/anncode1/Curso-de-Flutter-Avanzado-en-Platzi.git

Y para los que preguntan porque esta tan pesado el proyecto, es porque alguien olvido agregar el .gitignore para los archivos no necesarios.

Lo mejor para evitar problemas de compatibilidades en las clases posteriores, es crear un nuevo proyecto Flutter e incorporar solo las carpetas que integran “lib”. No abran directamente el archivo clonado de github en Flutter, ya que desde que se grabó el curso las versiones se han ido actualizando (de Gradle, Flutter, Android Studio, etc).
Saludos!

Solucionar problema proyecto

El proyecto es viejo en 3 pasos lo puede reparar.

  1. Eliminar carpeta /android y carpeta /ios.
  2. ejecutar fluter upgrade
  3. ejecutar flutter create . (Ojo va con punto al final).

Listo a seguir aprendiendo. 😄

Si aun sigue sin funciona en el archivo pubspec.yaml actualiza el sdk así:

// pucspec.yml
environment:
  sdk: ">=2.7.0 <3.0.0"

Vuelve a ejecutar los pasos anteriores.

Creo que el primer “git init” en el minuto 13:29 no es necesario 😉, simplemente el:

git clone https://github.com/alvarohurtadobo/Curso-de-Flutter-Avanzado-en-Platzi.git

Comparto mi git con la version del proyecto actualizada

https://github.com/norchili/places_app

No pierdan el tiempo clonando este repositorio. Lo peor es que se trata de un pésimo repo sin el gitignore correspondiente que solo te descargará más de medio gb de código desactualizado.

No sé por qué nos hace batallar tanto moviendo archivos, eso no es aprender por nuestra cuenta, es hacernos perder tiempo.

PARA TENER EN CUENTA
Lo mejor es copiar toda la carpeta lib en un nuevo proyecto y no tendrán problemas mayores.

Pésimo inicio de curso hasta el momento

Nuestro repositorios pueden pesar mucho menos si agregamos el .gitignore

Creo que se debería eliminar el .idea enel repo yel build ya que trae varias dependencias que hacen del repo se muy pesado. Deberíamos en nuestros repos manejar el .gitignore conal menos este contenido



<h1>Miscellaneous</h1>
*.class
*.log
*.pyc
*.swp
.DS_Store
.atom/
.buildlog/
.history
.svn/

<h1>IntelliJ related</h1>
*.iml
*.ipr
*.iws
.idea/

<h1>The .vscode folder contains launch configuration and tasks you configure in</h1> <h1>VS Code which you may wish to be included in version control, so this line</h1> <h1>is commented out by default.</h1>
#.vscode/

<h1>Flutter/Dart/Pub related</h1>
**/doc/api/
.dart_tool/
.flutter-plugins
.flutter-plugins-dependencies
.packages
.pub-cache/
.pub/
/build/

<h1>Web related</h1>
lib/generated_plugin_registrant.dart

<h1>Exceptions to above rules.</h1>
!/packages/flutter_tools/test/data/dart_dependencies_test/**/.packages

Los que no estén familiarizados todavía con como se manejan algunos cursos acá, recuerden que para evitar tener que hacer eso a mano de estar organizando los imports y nombres que es tedioso cámbiense a la rama 1.ArquitecturaBLoC que ya esta lista con todo solo tienen que dar git checkout 1.ArquitecturaBLoC y quedarán en esa rama, si hicieron cambios y no los deja pasarse de rama usen el git reset --hard, recuerden que ese comando borra los cambios que hayan hecho.

🖐 Antes de irte cuéntame todas tus dudas sobre Arquitectura BLoC

Empieza diciéndome lo siguiente:

  1. ¿Qué fue lo que entendiste mejor?
  2. ¿Qué fue lo que no entendiste para nada?

Respondo a todas tus preguntas.
Para eso estoy 🥰

!AVISO IMPORTANTE!
Este curso esta muy desactualizado les va a resultar mucho mas facil utilizar su proyecto anterior y agregar los archivos que no tienen si no explota en muchos lugares!!!

Puedes importar más fácilmente seleccionando el widget o la clase que está en rojo y presionando ALT + ENTER y selecciona la opción de import que aparece ahí.

Hola compañeros, estuve probando varias cosas conforme leí sus comentarios, puede que el proyecto este DESACTUALIZADO en cuanto el código fuente, pero puedes corregir o cambiar las cosas conforme a los mensajes de consola, igual dejo un repositorio con el código fuente.

Codigo fuente al dia 8 de Marzo del 2022.

Que hice:
borre las carpetas Android e iOS
ejecute

flutter upgrade
flutter create .

Borre todo el contenido de la carpeta Test.
Y actualice propiedades que fueron cambiadas en el SDK de flutter al dia de hoy, espero les ayude.

ami no me deja crear directorios, solo dice package

Hola compañeros si están trabajando en VS y les sale error a la hora de importar la librería de material
vayan a la consola, al directorio del proyecto y ejecuten el siguiente comando:

flutter bash-completion

Dice la profesora que nos bajemos el repo porque hay cosas que están optimizadas… Es cierto. Hay cosas… Pero otras que ‘optimizamos’ nosotros mismos durante el curso ahora no están… Y son cosas que ‘ella’ misma iba anotándonos para cambiar… Muy mal, muy mal… Si se dice que se han optimizado cosas, lo mejor es que se haya optimizado TODO el código de todo el repo… No tiene sentido que habra la app en Android y vuelva a tener los problemas de la parte de arriba de la pantalla de nuevo, ni que en el MAIN no se hayan borrado las líneas de código que pertenecen al ejemplo que viene inherente al inicio de Flutter… Ni que se hayan arreglado los problemas de persistencia de los corazones cuando los presionas, o las mejoras que tuvimos que implementar en uno de los retos. MUY MAL por la organización del curso.

dure mucho tiempo sin poder hacer funcionar el codigo al final lo resolvi corriendo flutter doctor en la consola de flutter y solo accepte las licencias y listo ya me dejaba agregar librerias

Efectivamente como mencionan algunos compañeros, el proyecto como esta en el repositorio presenta errores por lo antiguo de este, además que se descuadra por las rutas donde fue creado originalmente, Lo mas sencillo es:

  1. Crear un nuevo proyecto con el mismo nombre “platzi_trips_app”

  2. Después de creado pegar todos los archivos que estan en la carpeta “lib” sobre escribiendo el main.dart

  3. Pegar en la raíz del proyecto las carpetas “assets” y “fonts” con sus contenidos

  4. Editar el archivo “pubspec.yaml”, pegando al final las partes de las imágenes y los font

assets:
    - assets/img/people.jpg
    - assets/img/ann.jpg
    - assets/img/girl.jpg
    - assets/img/mountain.jpeg
    - assets/img/beach.jpeg
    - assets/img/beach_palm.jpeg
    - assets/img/mountain_stars.jpeg
    - assets/img/sunset.jpeg
    - assets/img/river.jpeg

  fonts:
    - family: Lato
      fonts:
        - asset: fonts/Lato-Regular.ttf
  1. Por último, si, actualizar las dependencias y ya debería funcionar adecuadamente.

Como un adicional, debido a que el código es antiguo, presenta algunas advertencias en partes de código que ya no se usan de esta manera, como por ejemplo en los archivos platzi_trips_cupertino.dart y platzi_trips.dart, cambiar los Text de los icon, por label, agregar el default al switch en cupertino, y en varios de los archivos se hace necesario poner las variables como final.

Ami me funciono como dijeron en un comentario, cree un proyecto x, luego eliminine todo de la carpeta lib, agregue los archivos de este proyecto, configure el pubspec.yaml como esta en su proyecto, agregue las carpetas correspondientes y listo.

No estaba siguiendo los ejemplos, solamente miraba los videos. Vi los comentarios negativos acá del curso y los problemas que han tenido, entonces me entró curiosidad por descargarlo y probar, me parece que todo el problema se debe a que este curso fue creado hace varios años, las versiones de Flutter y las dependencias usadas en el repo de GitHub ya son viejas, e incluso luego de descargarlo y arreglar las versiones de Flutter y dependencias me presentó un error sobre la versión del Android (Upgrading pre 1.12 Android projects), no sé nada de Android y no me iba a poner a hacer eso xD

Lo que hice para probar fue crear un proyecto nuevo con flutter create (pueden hacerlo desde el Android Studio, es lo mismo), y copiar los archivos de la carpeta lib, solo validar que las dependencias estén en el pubspec.yaml. Si hubiera una dependencia que no está, entonces la busca en pub.dev para ver cuál es la última versión, estoy usando el channel stable de flutter.

Ya con esto me parece funciona sin problema, si habían puesto íconos para el app, o los ajustes para la transparencia de la barra de arriba en Android pues hay que ir a aplicarlos de nuevo.

Asegúrense que en el pubspec.yaml el name esté así: name: platzi_trips_app porque sino los imports no encuentran el package.

Finalmente no se enojen tanto, piensen que esto les puede pasar a ustedes con sus propios proyectos más adelante conforme sigue avanzando Flutter, iOS y Android, es mejor ir aprendiendo a solucionar o ver que hacer en estas situaciones. Fue de las primeras cosas que busqué validar al elegir Flutter para un proyecto que estoy haciendo, qué sucede con las actualizaciones y los cambios de versión.

Les comparto mi git con una version mas actualizada de Flutter ya que en el repositorio del curso esta deprecado y causa muchos problemas

solo pongan en la terminar

git clone https://github.com/NeryC/Curso-de-Flutter-Avanzado-en-Platzi-Base/tree/fc0836725b3e25017a1f703e3b0e2d05082ed478

SPOILER ALERT!

Mejor terminen bien su proyecto, porque el importar el que tiene Anahi en su github a esta fecha da muchos problemas. Traté de avanzar lo que pude y al llegar a firebase me dió muchos errores. Así que regresé a hacer todo con mi propio proyecto.

Para los que tuvieron problemas con la version, el gradle o algo, simplemente borran la carpeta android, o ios, y luego le dan a

flutter create .

eso les vuelve a configurar el proyecto
de ultima corren

flutter doctor -v

para saber si tienen algun otro problema.
Saludos

Logrdo…

Inicio en Android Studio

El Android estudio, no es recomendable arrastrar y soltar ya que se dañan los imports. Si quieres que al mover un archivos dus referencias y dependencias cambien puedes hacerlo mediante la opción refactor:

Click derechos sobre el archivo -> Refactor -> Move File

Bastante interesante aplicar la arquitectura BloC, al inicio me estaba confundiendo ya que no me salía la opción de agregar Directory, entonces me di cuenta que permite crear un Package que prácticamente es lo mismo.

Veo que ahora hay muchos más objetos en el proyecto 😃

Si esta pesado el repo xD, no se si es un error pero a mi me sale que tienen 49 branches y pesa sobre los 700mb.

Hola estoy revisando y android studio no me deja crear directorios dentro de lib, solo paquetes, pero no me deja crear un paquete dentro de otro

Para que el editor detecte los errores y genere las ayudas y autocompletado después de clonar, es necesario agregar la libreria de flutter ya descargada en el curso anterior en:
File - Settings - Languages & Frameworks - Dart.

Podemos copiar el path usado en un proyecto anterior, o descargarlo nuevamente desde la url.

Para no refactorizar los import a mano, cuando tengan todo ordenado, solamente borran los imports, y le dan control+space y le dan el import, eso se los hace automaticamente

Una bonita combinación
BLoC + Clean Arquitecture ❤

a lo 9:35 se corta el sonido del video y aparece una cancion

Para los que no pueden crear un directorio hagan lo siguiente:

  • Ir a File -> Project Structure.
  • Seleccionas “Modules”.
  • Verás las carpetas de tu proyecto y seleccionas “lib”.
  • Verás que en la parte superior dice: Mark as: Source, Test, Resources, etc.
  • Pues desmarca “Source”, le las OK a los cambios y listo!
    by KaroDev

Si tienen problemas con la caperta lib, por la nueva versión de flutter
Les dejo este repositorio para que puedan clonarlo, y tenerlo igual con el video. ❤️
Pero con completa compatibilidad a flutter 2
repositorio

Me gusto el reto de resolver los problemas que se originan al cargar o abrir un proyecto creado por otra persona. no se hice problemas use el metodo copiar y pecar y listo XD. Resumen crear nuevo proyecto , copiar archivo de la carpeta lib, fonts,assets y obvio no olvidar el pubspec.yaml XD.

Este curso está muy desactualizado, en mi caso, tengo conocimientos en flutter intermedio y pensé en llevar este curso para profundizar más mis conocimientos sobre el framework, pero resulta que está muy obsoleto, el repositorio desactualizado, en fin, creo que en general no es un buen curso

Seria muy interesante un curso utilizando solo API de terceros como shopify o Wordpress

Tengo duda; donde queda profile_trips.dart? yo lo puse en User/ui/widgets

Buena forma de estructurar un proyecto

Gracias, estas cosas hacen a este curso muy bueno, por que en la vida real, tenemos que aplicar todas estas tecnicas para que nuestros productos sean excelente.

Muy buena clase, sigamos!

Hola, alguien pudo descargar el proyecto? Por que pesa tanto?
A mi me baja hasta los 300mb nomas 😦

Todo bien hasta aquí, es mejor bajar el proyecto así puedes seguir el curso sin problema.

Buen inicio, vamos con toda

**Una pregunta: **
Para el nombre de las carpetas no seria recomendable colocarlas en minúscula al inicio? es decir, Place = place, User = user

Quedo atento a sus comentarios.

Tengo ese ERROR, alguna sugerencia?

donde puedo encontrar como quedaron todos los “import”

Buenas gente,
En mi caso descargo correctamente, acutalizo dependencias pero…
[!] Your app isn’t using AndroidX. y me genera un Failture.

Alguien sabe como solventar esto?

Un saludo.

No entiendo nada… Todo el mundo ha tenido problemas… SI hay tanta gente que ha tenido problemas (fuera de que luego los hayan podido o no solucionar por su cuenta) es porque algo no está bien estructurado (o bien en la clase o en el curso) Soluciónenlo rápido porque a mí, por ejemplo, el problema lo tengo con Gradle. En dos cursos de Flutter hasta ahora no se ha explicado nada al respecto… Y si uno no puede continuar porque no encuentra por ningún lado la solución??? Por qué se encamina solo a los que tienen Mac si tb hay gente que tiene Windows o Linux??? No tiene sentido.

Muy clara la explicación 😃

creé menos archivos y me confundí un poco. Al final todo quedó 😉

Yo tomé la decisión de continuar con mi proyecto pero el primero detalle que se me presenta es que al querer agregar un nuevo directorio en “lib” solo me arroja la opción de crear new package. ¿Será lo mismo? ¿qué debería hacer para poder agregar un nuevo directorio?

IMPORTANTE:
En alguno de los comentarios leí que había que reemplazar los directorios Android & ios. Lo que hice fue copiar los que tenia en mi proyecto y los pegue en el nuevo que acabamos de descargar. Luego usé Flutter Clean en el Android Studio, luego Get Dependences y así logré correr el nuevo proyecto.

llevo mas de una hora tratando de correr el ejemplo y es por gusto, se veia bien interezante el curso pero lamentablemente veo que hay muchos problemas que no se resuelven por parte de los profesores. Deben actualizar los cursos porque por lo que veo es bastante viejito, si mi intencion hubiera sido inscribirme a platzy por este curso que decepcion me hubiera llevado.

es posible descargar los archivos de GitHub y abrirlos directamente con android studio?

No me descarga el repo, dice infinito xd

Hola, les quiero compartir un recurso útil para la migración del proyecto https://flutter.dev/docs/development/androidx-migration

Feliz tarde!

cuando quiero hacer Get dependencies me dice ‘Pub Get’ has not been run. como lo resuelvo? ya probe de todo pero no me da mas el cerebro

En mi caso con el proyecto de GitHub, me dio conflicto la versión del compileSdkVersion tuve que subirle a “28” y de ahi corrio de maravilla.