Aplicación de blog de Flutter con Firestore: crea una aplicación completa de ios y Android

1. Introducción: Bienvenidos a este curso. Mi nombre es diástole en breve y seré su instructor en este curso. En este curso, vas a ser un flop si la aplicación de bloque de flutter completamente funcional usando Firebase Cloud Firestore. Aquí está la aplicación que vas a desarrollar al final de este curso. Todos los datos provienen de firebase, Cloud Firestore. En este curso, aprenderás que nuestro diseño de materiales, cómo trabajar con eso, al menos para Builder, cómo pasar datos de un lugar a otro lugar y muchas cosas más. Por lo que ahora todavía estás a tiempo de inscribir este curso. Todavía en el curso. Gracias. 2. Barra de aplicaciones de diseño: Hola chicos, bienvenidos de nuevo. Entonces en esta parte, vamos a iniciar nuestro nuevo proyecto y esa es nuestra aplicación de blog flutter utilizando la base de datos Firebase Cloud Firestore. Tan rápido, necesitamos crear un nuevo proyecto, vale, crear un nuevo proyecto. Entonces ve a este archivo, nuevo y nuevo proyecto de flutter. Seleccione más aplicación. Y podemos llamarlo bloque aleteo. Y Siguiente y Acabado. Podemos sólo esta ventana. ¿ De acuerdo? Muy bien. Tomará poco tiempo completar todo este proceso de Oldfield de cuadrícula. Tenemos que esperar hasta eso. Vale, creo que ya estamos listos para irnos. Por lo que aquí puedes ver nuestra aplicación y esa es una aplicación en blanco. Y aquí se puede ver algún código autogenerado que es proporcionado por flutter. De momento lo haremos. A lo mejor no entenderás todo este código y eso es una plantilla en blanco, o puedes decir. Entonces. Tendremos que trabajar con esta plantilla. Entonces qué haremos, simplemente quitaremos todo este código, seleccionaremos control, un stream de OK. Ahora Primero necesitamos importar nuestro conducto de material. ¿ De acuerdo? Entonces lo que tenemos que hacer, necesitamos importar, importar material dot ok. Ahora aquí dentro necesitamos abiertamente a nuestros hombres blancos, hombres blancos. Y ahora tenemos que sumar nuestro previo. Y diseño f tiene un widget de Apple. Entonces este va a ser material nuevo. Ok. Ahora aquí necesitamos agregar nuestra palabra clave home y definiremos nuestra página de inicio de actividad en el hogar. Eso significa cuando un usuario hará clic en esta aplicación, entonces ¿quién es aplicación? Siempre empareja con abierto para que no tengamos ritmo alguno. Por lo que necesitamos crear una nueva página. Así que ve a esta carpeta de hoja y crea un nuevo archivo de datos. Y podemos llamarlo basado en casa. Simplemente estamos separando todo este código para que puedas entender muy fácilmente. De acuerdo, entonces ahora aquí, también necesitamos importar nuestra alerta de mensaje. Entonces importa mercancía, pero ahora necesitamos definir nuestro widget de estado. Por lo que un widget de estado, y podemos llamarlo este nombre de clase como casa. De acuerdo, Así que ahora esta casa va a ser esta casa. Se puede ver ahora en aquí, necesitamos agregar nuestra página de inicio y pesto punto y heredado. Tenemos que añadir nuestra cláusula from. Entonces toda esta clase es esta clase Home que acabamos de crear. Entonces lo que hicimos aquí, simplemente separamos todos estos abrigos para que podamos entender muy fácilmente. De acuerdo, Así que hemos creado una nueva clase y ese tiempo de clase es en casa, y este contenedor de clase es un widget con estado, y simplemente lo lanzamos con esta palabra clave home dentro de nuestro EP principal de material RunApp. De acuerdo, entonces cuando, cuando ejecutemos esta aplicación, nuestro trepidante se cargará y esa es nuestra página de inicio. Ahora tenemos que empezar a diseñar nuestra aplicación. Así que aquí podemos ver constructor de widgets, construir contextos, contextos, y devolver nuevo contenedor. Por lo que para esta aplicación, necesitamos importar nuestro widget de andamios, eliminar este contenedor y agregar widget de andamios. En el interior. Esto es de fiar. Haremos todo este código, ¿de acuerdo? Esto está acoplado tiene mucha propiedad que podemos usar para diseño o épica. De acuerdo, entonces primero necesitamos agregar la parte superior para nuestra aplicación. Entonces, si desea agregar la barra de la aplicación, entonces necesitamos agregar estos AB, barra AB, barra AB que contiene amperios. Por lo que nueva barra de aplicaciones. Entonces inserta esto sobre, necesitas agregar nuestra app, pero título y color de fondo En el título y el título, obviamente un texto. Por lo que necesitamos agregar texto. Aquí adentro. Necesitamos agregar nuestros datos de texto y podemos llamarlo aleteo. Mira, está bien. Y necesitamos definir un color de fondo para nuestro amperio. Así que elige color de fondo y tenemos que elegir colores. Por lo que los colores y el pensamiento, podemos elegir rojo X en color. Ahora, si ejecutamos esta aplicación, podremos ver nuestra, podremos ver su aplicación. Tan muy similar a allá. Entonces aquí vamos, donde podrás ver nuestra aplicación y nuestra barra de aplicaciones, un título y un color de fondo. De acuerdo, Ahora la única cosa, solo estoy agregando algo de diseño real para que puedas aprender algo de diseño de materiales. Después implementaremos nuestro back-end de Firebase con esta aplicación. De acuerdo, así que aquí puedes ver, así que haz una cosa aquí dentro. Necesitamos agregar dos botones, ¿de acuerdo? Entonces ahora a ver cómo podemos agregar botón. Entonces dentro de esta barra AB, esta superior tiene otra propiedad y esta propiedad llamada acciones. Y la acción tiene un widget o propiedad. Y dentro de este presupuesto original de propiedad, necesitamos agregar nuestro botón de icono. Tan nuevo. Botón de icono, y nos dará dos parámetros. Uno es icono y otro está en pegar. Entonces para icono y para desagradable, para icono va a ser nuevo icono. Icono tiene iconos de propiedad. Yo puedo empezar. Ahora. Si presiona el icono de inicio, entonces verá algún icono incorporado que es proporcionado por flatter. Por lo que para nosotros, podemos elegir este icono de búsqueda. Y para este propio ritmo, ¿qué significa? ¿ Qué, qué hará? Por lo que si desea utilizar, haré clic en cualquier usuario haga clic en este botón. Entonces si quieres tomar alguna acción, entonces necesitas trabajar con estos entrantes. Entonces por ahora, no haremos nada. Nosotros simplemente en alguna impresión de depuración para que pueda entender la impresión de depuración. Y podemos llamarlo búsqueda. Cuando el usuario haga clic en este botón, luego imprimiremos en esta fuente dentro de nuestro terminal. Vale, así que ganas, ejecútalo. Ahora aquí podemos ver nuestro ícono. ¿ De acuerdo? Ahora si yo, si hago clic en este icono aquí y abro nuestra terminal, ahora podemos buscar palabra clave. De acuerdo. Ahora en un botón más, nuevo botón de icono. Y de nuevo nos mantendrá al parámetro, icono y sin precio. Por lo que para este icono, podemos elegir nuevo icono. Icon va a ser, puedo empezar presionado. Agregaremos debug print, debug print. Y podemos llamarlo al, vale, ahora corre esto. Ahora aquí podemos ver dos iconos. Y si abro nuestra terminal y se puede ver en respuestas en tal y tal, ok. Por lo que nuestros nuestros cuerpos y es completo. Entonces espero que entiendas lo que hicimos. Déjame explicarlo de nuevo. Entonces lo que hicimos en esta parte, acabamos de crear un proyecto y eliminamos todo este código generado automáticamente. Después agregamos estos run-up de hombres blancos y app Home. Y este es el principal, podemos llamarlo. Este es el encabezado de nuestra aplicación. Por lo que necesitas escribir este entorno y dentro de este previo para definir tu nombre trepidante que quieres ejecutar. Ok. Ahora, aquí, hemos creado un widget con estado y agregamos nuestro widget de andamios. Y por qué necesitamos usar un andamio. Un andamio que nos proporcionaría alguna propiedad decente que necesitamos usar para nuestra aplicación. Necesitamos usar nuestro widget de andamios y perspicacia como un widget de andamio. Si queremos agregar AB bar, entonces necesitamos agregar esta palabra clave y un contenedor de patio trasero. Y dentro de esto arriba, pero tenemos que añadir toda esta propiedad que contienen estos aparte o que queremos agregar dentro de esta barra de aplicaciones. Entonces agregamos un título y un título, obviamente un texto. Entonces agregamos un texto, y este texto es este texto. Después agregamos un color de fondo. Se puede ver que este color de fondo es esta X roja y color de fondo. Si queremos agregar botón de icono de herramienta dentro de nuestra barra de aplicaciones, tal vez muchos de aplicación se ve el icono. Entonces, ¿cómo puedes hacer esto? Por lo que EPR tiene otra propiedad llamada acciones. Y acciones. Acciones es un presupuesto de propiedad. Y dentro de este widget o propiedad, necesitamos usar este botón de icono. Por lo que nuevo botón de icono y contiene dos parámetros. Uno es icono y otro está encendido presionado. Dentro de este parámetro de icono, necesitamos usar nuestro ícono que queremos mostrar. Y este on-prem nos llamaré. Y estos, y estos en página funcionarán cuando hagamos clic en cualquiera de estos icono. Entonces espero que lo entiendas y ya está por esta parte. Seguiremos con nuestra siguiente parte. Gracias. 3. Diseño de cajones: Hola chicos, bienvenidos una vez más, en nuestro tutorial anterior, hemos diseñado con éxito nuestra app para nuestro ícono. Y en esta parte y hacer una cosa, podemos agregar un arrastre de navegación. ¿ De acuerdo? Entonces esta es nuestra barra AB y esta es nuestra barra de aplicaciones, y simplemente podemos comentar aquí. De acuerdo, ahora, es hora de agregar navegación rara, vale. Por lo que si quieres sendero de navegación, entonces necesitamos utilizar en esta sequía QR. Y este medicamento podría contener una rara, tan rara. Y dentro es donde necesitamos agregar una lista de campos. Por lo que a niño va a ser nuevo campo de lista. Entonces, ¿por qué necesitamos usar la vista de lista? Porque Lisp nos dará a los hijos de widget. Y dentro de estos hijos de widget, podemos agregar múltiples listas para que solo podamos llamar, ok, Así que esta es nuestra disputa y list2 tiene una propiedad llamada children of widget. De acuerdo. Recuerda que debes sumar en estos niños a presupuesto. De lo contrario en esta lista no trabajaremos. Ok. Ahora aquí, podemos agregar nuestros todos estos datos. Ahora si ejecutamos esta aplicación, entonces podremos ver en rojo de riego, puede ver navegación rara, pero estas vista de lista central límbica no está en blanco. De acuerdo, ahora es el momento de agregar datos. Entonces primero lo que vamos a hacer, vamos a añadir inhibición, calentador raro y color de fondo y texto, y aleteo nos proporcionó un nuevo atributo y llamarlo nuevo encabezado de cuenta de usuario. Nos dará dos parámetros. Uno es el nombre de la cuenta y otro es el correo electrónico de la cuenta. Por lo que añadir algún icono ficticio ellos. Entonces obviamente eso, va a ser un texto. Entonces nuevo texto y podemos llamarlo código con ¿por qué ves por qué DC? Y para el correo electrónico, Va a ser texto. Y agrega texto. Puedes llamarlo a blanco y simplemente agregar algún e-mail ficticio a la tarifa gmail.com. ¿ De acuerdo? Ahora si queremos volver a agregarlo, ahora, si ejecutas esta aplicación, verás un color por defecto que está en color azul y podrás ver nuestro texto y nuestro correo electrónico. Ahora bien, si quieres cambiar este color y entonces ¿cómo podemos hacer esto? Simplemente puedes agregar decoración. Y esta declaración tiene una decoración de caja. Sabía que esta declaración tiene un atributo de ecuación en caja. Y dentro de esta decoración de caja, puedes agregar este color y el color va a ser, podemos elegir colores. Para éste, podemos elegir el color morado. Ahora si haces lo que recarga, entonces podemos ver nuestro color cambiado. De acuerdo, así que tenemos éxito editar nuestra navegación a nuestro calentador y a texto y cambiamos el color. Ahora es el momento de agregar, es el momento de agregar lista de artículo usado aquí. Ahora necesitamos agregar nuevo ListItem. Lista, al menos díganos dos partes a la propiedad. Unose titula. Y obviamente este título va a ser nuestro título de lista, eso significa navegación propia, título de ítem, nuevo texto. Podemos agregarlo. Puedes llamarlo primer lugar. Ahora, si ejecuta esta aplicación, podremos ver un texto. Aquí. Se puede ver en el texto. Ahora si quieres agregar un ícono, ahora si quieres agregar ícono con este texto, entonces pasando a esto, hay otra propiedad llamada ícono principal y nuevo. Y este icono tiene iconos propiedad es para iconos. Podemos elegir algún icono al azar. Y si quieres cambiar el color de este icono, ahora, si has hecho de ver, puedes ver icono, pero si quieres cambiar color de este icono, ¿cómo puedes hacer esto? Simplemente puedes agregar color. Y el color va a ser colores. Color morado oscuro. Puedes elegir cualquier auto, lo que quieras. Se puede ver este color. Ahora. Si quieres agregar ícono en el lado derecho, entonces ¿cómo puedes hacer esto? Hay otra propiedad llamada trailing. Por lo que si lo cambias llevando a trailing, entonces podrás ver este ícono del lado derecho. ¿ De acuerdo? Entonces lo que sí me dice es si seleccionas trailing, cualquiera de los iconos agregará lado derecho. Y si tú, si seleccionas un encabezamiento, entonces tu ícono lo agregaremos en el lado izquierdo. ¿ De acuerdo? Entonces por ahora, elegiremos este icono del lado izquierdo. Haz una cosa a pocos más, pocos artículos más. Tan nuevo estilo. El título va a ser texto nuevo y lo podemos llamar segundo ritmo. Y liderar va a ser nuevo icono. Almacenamiento de iconos. O puede elegir Fuente y cambiar este color. El color va a ser colores. Se puede elegir la X roja en color. En otro ListItem. Título de la lista. Título va a ser nuevo texto. Y podemos llamarlo que paga. Al liderar. Este va a ser icono. Por lo que nuevo icono, icono tiene iconos propiedad. Entonces íconos, punto. Podemos elegir algún icono al azar y agregar color. Y el color va a ser colores y oscuros. Color naranja. En otro estilo de lista, título novedad. Título va a ser nuevo texto. Y éste va a ser ritmo de pie. Y liderar va a ser nuevo icono. Icon va a ser icon Store. Podemos elegir este menú. Icono y color van a ser colores. Color amarillo. Ahora bien, si ejecuto esta aplicación, lo haremos, vemos por icono, creo que necesitamos cambiar este amarillo a verde porque podemos ver aquí en fondo, fondo blanco. Ahora, necesitamos agregar nuevo divisor en un divisor. Si corro esto, estaremos a ver, un divisor, pero necesitas dos diferentes altura y color. La altura va a ser de 10. Y color, puedes elegir colores. Negro y peludo. Se puede ver este color. Aquí, se puede ver este divisor. ¿De acuerdo? Y después de eso, puedes hacerlo, podemos agregar otro título de estilo recién listado. Y este título va a ser nuestros nuevos textos y cerrar. De acuerdo, Ahora necesitamos agregar para este ícono, para este estilo, necesitamos agregar un ícono al final. Vamos a sólo icono escalofriante. Nuevo icono. Icon va a ser íconos. Podemos elegir cerrar icono y cambiar el color a color. Colorea, almidón, color rojo, y ejecútalo. Ahora, ya puedes ver que tenemos tacos azules de diseño esto. Pero si hago clic en este ícono de cerrar, este vendedor de la Marina debería cerrar, pero, pero no está funcionando en este momento. Entonces, si quieres cerrar esto, si quieres colapsar este rastro de Mutación, cuando el usuario haga clic en cualquiera de estos iconos, son este botón de cerrar, cerrar icono, o revelar texto. Entonces lo que tenemos que hacer, simplemente podemos agregar a su propiedad, su propiedad en cinta. Y aquí, podemos pasar nuestro interior estos tirantes rizados. Necesitamos agregar navegador, pensado como contexto y punto pop. Si escribes esta línea de código que si ejecuto esto. Y si hago clic en este icono, ahora puedes verlo colapsar. ¿ De acuerdo? Puedo darle click, colapsar. De nuevo, córtalo, colapsa de nuevo, da clic en ocho colores. Está funcionando. Entonces necesitamos usar esto en su propiedad, ella y cuando quieras tomar alguna acción. Entonces si quieres cerrar este desalojo donde simplemente necesitas agregar navegador dot of contexts, dot pop. Entonces déjame explicarlo de nuevo. Entonces si quieres agregar, así que en primer lugar, si quieres agregar navegación rara en tu aplicación, tan rápido, lo que necesitas hacer, necesitas usar esta palabra clave, ok, bien. Este medicamento curó el envase al aire seco que es proporcionado por el equipo de Flutter. E inserte esta sequía, necesitamos agregar una vista de lista y simplemente hemos agregado para editar un niño y listas. Y estas listas tiene un hijos de los cuales en la propiedad, para que podamos instalar, inserte este niños. Hemos agregado un nuevo icono de usuario. Nos dirigimos. ¿Por qué estamos usando este? Estamos usando este porque agregamos un encabezado de navegación y que es proporcionado por flutter. Necesitamos y cuando lo importarás, nos mantendrá al parámetro en este nombre de icono y uno es e-mail. Así se hizo eco de ellos es un texto. Añadimos un texto y si cambiamos este color de fondo, entonces simplemente necesitas agregar decoración y cambiar este color. Ahora, si quieres agregar una lista de artículo dentro de Univision raro que necesitarás usar el título de la lista. Hay algunas otras cosas que puedes elegir también tintero, pero por ahora estamos usando esta lista. Esta lista nos dará alguna propiedad y uno de ellos es título y apretado es un texto. Por lo que agregamos nuevo texto y lo editamos los toma y este texto ellos está en este nombre de texto. Y si deseas agregar un ícono con este título, que necesitas elegir esta propiedad líder, entonces necesitas usar este nuevo ícono. Y necesitas elegir estos iconos dot cake, y estamos cambiando el color. Si eliges un trailing, entonces lo harás, luego tu ícono lo agregaremos en el lado derecho. Hemos seleccionado para nuestra, para nuestra opción de ropa. De acuerdo. Ahora, si desea cerrar esta aplicación, cierre esta secadora de navegación. Cuando el usuario va a colocar estos cualquiera de estos elementos, entonces lo que hay que hacer, sólo tiene que añadir una propiedad y heredar. Tenemos que añadir estos navegador punto de contextos dot path. De acuerdo, así que hemos completado con éxito nuestra parte arrastrada Navegación. Por lo que podemos comentar aquí en su Centro para esta parte. En nuestra siguiente parte, conectaremos nuestra base de datos de Firebase y luego comenzaremos a trabajar, trabajando para el resto de la parte. De acuerdo, así que nos vemos en el próximo curso. Siguiente parte. Gracias. 4. Conéctate con Firestore: Hola chicos, bienvenidos una vez más, en nuestro tutorial anterior, hemos diseñado con éxito nuestra navegación y nuestra app. Pero ahora en esta parte conectaremos nuestra aplicación con nuestra base de datos Firebase y luego empezaremos a trabajar. Entonces acude a estos bomberos y crea un nuevo proyecto. Ahora podemos llamarlo, podemos llamarlo simple low cap. ¿ De acuerdo? Ahora necesitamos aceptar este término y condicionar crear proyecto. Y te llevará tiempo completar este proceso. De acuerdo, ahora, lo podemos continuar. Ahora. En este momento, estamos trabajando para Android, lo que podemos hacer clic en Android y en cualquier lugar que necesitemos agregar el nombre de nuestro paquete. Entonces, cómo obtendrá el nombre de su paquete. Así que vaya a este nodo medio archivo Gradle aquí. Y aquí puedes ver, verás ID de aplicación y ese es tu Pakistán. Entonces copia este y pega aquí. Y podemos agregar un apodo para éste, desarrollar y usar los pulmones opcionales, por lo que no necesitamos agregarlo. Ahora sí podemos estudiarlo de verdad. Por lo que necesitamos descargar este servicio de Google Jason. Ahora mostrar en carpeta. Ahora podemos cortarlo e ir a tu aplicación y dentro tu Android y dentro de tu Android. Y voy a poner estas app para Android. Y hay que pegarlo aquí. Pegar. Y este es nuestro sitio de Google con Jason. Ahora, da clic en este botón Siguiente y necesitamos copiar este classpath. Así que copia esta ruta de clase y ve a esta acumulación Gradle y pegarla aquí. Necesitas abrir tu gradle de acumulación, luego debes pegar esta clase. Pero después de esta ruta de clase, necesitamos copiar estos Plugin Library. Entonces copia este. Y ahora abre tu buena voluntad de compilación que está dentro de este directorio de aplicaciones. Y al final de esta dependencia, necesitamos pegarla. De acuerdo, ahora ya terminamos todos. Ahora siguiente, y podemos saltarnos este paso. De acuerdo, Ahora este es nuestro tablero de instrumentos y heredar se puede ver la base de datos. Entonces haga clic en esta base de datos. Y aquí veremos nuestra base de datos Cloud Firestore y calvario TEM. Entonces por ahora, estamos trabajando para Cloud Firestore y trabajaremos como en modo de prueba para que LR lea y escriba y lo habilite. Creo que ahora ya estamos todos listos para irnos. Tomará poco tiempo mostrarnos el dashpot. Por lo que ahora podemos ver nuestro tablero de instrumentos aquí. Agregaremos nuestros datos más antiguos. momento, se trasladó a este directorio de proyectos. Por lo que ahora necesitamos agregar nuestra biblioteca Cloud Firestore. Por lo que necesitamos abrir su pelvis pic dot archivo YML. Y este es el archivo donde se necesita agregar toda la dependencia y todo el picoteo extra de una biblioteca que desea utilizar en la replicación. Por lo que después de estas dependencias revolotean SDK, cappuccino icon, necesitamos usar nuestras dependencias de Firestore en la nube, Cloud Firestone. Simplemente puedes buscarlo en Google y obtendrás toda esta dependencia de dependencia. Pero si usas la nube de Firestore cloud, entonces funcionará para la versión de actualización de Cloud Firestore. Y si quieres defender cualquier versión exacta como esta, 10.1.2, entonces simplemente puedes copiarla desde el sitio Firestore way. De acuerdo. Por lo que en este momento trabajaremos para la nube Firestore. Ahora. Regresar a la página principal. Ahora. Nos muestra un mensaje que es pobreza se ha editado. Por lo que necesitamos conseguir este paquete. Por lo que ir a estas herramientas y revolotear y heredar unidad a utilizar, haga clic en este aplanador paquetes obtener. Es necesario hacer clic en estos paquetes de aleteo obtener. Y a ver si va a funcionar. Aquí. Se puede ver proceso terminado con el código de salida 0. Eso significa que no hay útero, así que ya estamos listos para irnos, si podemos ejecutar esto, ojalá podamos ver a lo mejor agregamos algún texto aleatorio en nuestra aplicación. Simplemente podemos editarlo. Podemos hacer recarga en caliente. De acuerdo, entonces ahora necesitamos importar algunos paquetes para nuestro Firestore, nube Firestore. Y necesitamos usar un paquete más, importar, sincronizar, asíncrono, oscuro. Todos esos paquetes que necesitamos a Azure. Creo que eso es todo por esta parte. A continuación, comenzamos a implementar nuestro resto del equipo. Gracias. 5. Función de Firestore: Hola chicos, bienvenidos una vez más, NRP primera parte, hemos conectado con éxito nuestra aplicación con nuestra base de datos Firebase, Firebase Cloud Firestore. Ahora en esta parte, necesitamos comenzar a implementar nuestra funcionalidad Cloud Firestore. ¿De acuerdo? Por lo que aquí puedes ver tenemos tres importantes para empaquetar. Uno es Cloud Firestore y uno es acing dot, dot. De acuerdo, así que ahora aquí es que estas clases homotrópicas que necesitamos importar son algunas funcionalidades incorporadas para usar Firestore. El primero es la suscripción extrema. Necesitamos importar es suscripción Stream. Corriente. Tenemos que usar es Tim. Y creo que necesitamos importar otro nombre es punto. Esa asíncrona. Necesitamos importar estos datos asíncrono décadas para que podamos utilizar una suscripción de vapor, suscripción huracanes oriental. Y esto es Tim suscripción tiene alguna propiedad y se puede ver consulta instantánea. Entonces necesitamos usar snapshot de consulta, ¿de acuerdo? Y lo podemos llamar suscripción, ¿de acuerdo? Muy bien. Ahora necesitamos importar nuestro no es necesario agregar una lista, lista, lista de artículo. Y esta lista de ítem pasará instantánea documentada. Por lo que podemos agregar snapshot. De acuerdo, ahora necesitamos agregar colecciones. Entonces lo que hicimos aquí, necesitamos agregar suscripción oriental, y es solo suscripción tiene snapshot de consulta. Y hemos creado una instancia de esta suscripción oriental. Y necesitamos agregar una lista de artículos. En esta lista de ítem pasaremos y documentos instantánea y añadimos el nombre de nuestra lista de ítem. Ahora necesitamos agregar referencia de colección. Referencia de colección. De acuerdo, Eso también se proporciona con aleteo y hay una funcionalidad para virus más rápido y referencia de conexión es una llamada a la instancia de Firestore. Necesitamos usar esta colección y lo es, y nos pedirá nuestra parte de colección. Podemos llamarlo post. Recuerda que necesitamos usar el mismo nombre dentro de nuestro Cloud Firestore. De acuerdo, Entonces lo que hicimos aquí, hemos agregado colección de referencia. Y referencia de colección tiene una colección de referencia. Y necesitamos pasar esta instancia de punto de Firestore esa colección y que es post. ¿ De acuerdo? Por lo que necesitamos agregar referencia de colisión. Necesitamos crear una instancia de esta referencia de colección. Entonces necesitamos usar esta colección de puntos de instancia de punto de Firestore. Y este nombre de colección es nuestra colección ellos que agregaremos dentro de nuestra base de datos. ¿ De acuerdo? Por lo que ahora necesitamos importar nuestro intestino. Por lo que necesitas bienes. Y dentro de este estado init, lo que podemos hacer, lo que podemos hacer, podemos agregar nuestra suscripción. Nuestra sustitución es igual a referencia de colección, punto, instantáneas, punto escucha. Y aquí tenemos que pedir nuestra snapshotting de datos, sólo conseguir instantánea. Podemos llamarlo instantánea de datos. Y dentro de estas llaves, necesitamos agregar el método set state para que podamos actuar. Solo podemos usar este documento Q1, así que estamos listos para ir. Entonces hemos agregado con éxito todos estos campos, ¿verdad? De acuerdo, pues déjame explicarlo de nuevo. Entonces si quieres recuperar datos de Firestore, necesitamos usar, hay algunas otras propiedades, alguna otra técnica, pero estamos usando esta propiedad. Por lo que necesitamos ayunar para necesitar usar estos suscripción extrema. Por lo que obtendrá nuestra instantánea de consulta anterior. Y hemos añadido un m de esta sustitución oriental como sustitución. Después hemos creado una lista y tiene una instantánea del documento. Y hemos creado en ellos no sólo a estas referencias colisionales, lo que va a funcionar, esta colección referenciada, esta colección referencia. Crearemos una base de datos dentro de nuestro Cloud Firestore y obtendremos todos los datos y podremos acceder a todo el feed de esta recopilación de post. Por lo que estamos creando una colección y el nombre de la colección es post. Por lo que necesitamos usar esta referencia de colección, referencia de colección, luego Firestore instancia que el colesterol aquí, necesitamos usar nuestro nombre de colección. De acuerdo, el nombre de nuestra colección es post. Ahora tenemos que añadir cualquier prueba de ello. Y dentro de este estado init, necesitamos conectar nuestra suscripción con nuestra diferencia de cobranza. Por lo que esta sustitución es igual a esta instantánea de punto de referencia de colección al menos. Y necesitamos escuchar, suscripción y nuestra colección de amigos y hemos agregado una instantánea de datos. Esta instantánea es igual a. Ahora, necesitamos sumar satisfechos. Ahora, necesitamos usar la instantánea, y esa es nuestra instantánea de documentos. Snapshot es igual a nuestra instantánea de datos que hemos creado aquí en el documento DOD. Y estamos almacenando todos estos datos, todos estos datos que, que contendrán dentro esta colección, dentro de la instantánea. Y aquí se puede ver snapshot, dos, documento snapshot. Ahora tenemos que empezar a trabajar para nuestra parte del cuerpo. Entonces esta es nuestra parte del cajón de navegación. Entonces creo que eso es todo por esta parte. Podemos continuar con desde nuestra siguiente parte. Gracias. 6. Consigue datos de publicaciones en el blog de Firestore: Hola chicos, bienvenidos de nuevo una vez más. En esta parte, nos retiraremos por nuestros datos de nuestra nube Firestore. De acuerdo, entonces en nuestra parte anterior hemos agregado toda esta funcionalidad como se muestra el subíndice oriental y algunas otras cosas. Y en esta parte, necesitamos empezar a trabajar en nuestra parte del cuerpo. Entonces, después de este entero, necesitamos agregar nuestra etiqueta de cuerpo, cuerpo, y necesitamos trabajar en la compilación ListView al mediodía. Construyamos. Esta lista lista lista vista dot constructor tiene estos poco q-dot constructor tiene a la propiedad. Uno es el recuento de artículos y uno es la acumulación de artículos. Recuento de artículos. Para el recuento de artículos, necesitamos agregar nuestra longitud de punto instantánea. ¿ De acuerdo? Por lo que esta instantánea es nuestra instantánea de disco que agregamos nuestra con nuestra lista y instantánea de documentos. Aquí puedes ver snapshot, snapshot puerta para documentar. Eso quiere decir que queremos toda la tierra de datos que tendremos dentro de esta, estos acopio y vamos a recuperar todos estos datos ahí. Por lo que necesitamos agregar la longitud del punto de instantánea. Ahora este item vendor atom builder tiene dos parámetros que necesitamos pasar. Uno es el contexto, y el segundo es para nuestra posición índice. ¿ De acuerdo? Todo bien. Ahora dentro de este constructor de elementos, ahora índice de contextos de constructor de elementos. Ahora tenemos que retener nuestro, por lo que queremos establecer nuestros datos. ¿ De acuerdo? Por lo que voy a devolver tarjeta pocas escritas. Podemos llamarlo tarjeta nueva, ¿de acuerdo? Y necesitamos sumar elevación. cartelización va a ser diez veces 0. Y hay que sumar, hay que sumar margen. Podemos elegir como inserto los 10 y a un niño. Y necesitamos definir un contenedor. Y dentro de este contenedor, añadiremos todos estos datos. Contenedor tiene un niño y rápido a la necesidad de definir su papel. ¿De acuerdo? Tan nueva fila. Row tiene hijos de propiedad widget, ¿de acuerdo? Y aquí, necesitamos agregar nuestros avatares circulares. Nuevo avatar circular, puesto arbitrario tiene un hijo va a ser nuevo texto. Y aquí, necesitamos establecer nuestros datos para que nuestra instantánea. Y obtendremos todos estos datos por posición de índice. Esta condición de índice no es esta posición de índice? Este cubo de datos. Aquí adentro. Añadimos nuestro nombre de filtro, título. ¿De acuerdo? Entonces este título agregará, necesitamos agregar dentro de nuestro cuello de colección, ok, en lugar de base de datos Firebase, ok, ahora para avatar circular, necesitamos agregar una posición cuyos datos de posición queremos agregar dentro del diámetro del círculo. Entonces para esto, me gustaría sumar 0 posición, ¿de acuerdo? Eso significa que nos dará la primera letra, ¿de acuerdo? Y necesitamos agregar otro texto en otro texto. Por lo que va a ser nuevo texto, podemos llamarlo. Para texto. Podemos agregar podemos agregar un contenedor, un contenedor adultos niños, del cual se va a renovar niño. Y aquí tenemos que añadir una columna. Y la columna tiene una propiedad hijos de widget. Por lo que los niños frente a propiedad. Por qué estoy agregando esta columna porque voy a agregar, porque agregaré un título y un contenido para que, para que podamos agregarlo verticalmente ahí. Entonces necesitamos usar columna, ¿de acuerdo? Entonces primero hay que añadir, se necesita texto nuevo. Y este texto es, vamos a ser instantánea por datos de punto de posición. Y necesitamos pasar su nombre de campo, título. ¿ De acuerdo? Y necesitamos agregar otro texto. El nuevo texto va a ser instantánea por datos de puntos de índice de posición. Y cuando tienes un poco de llamarlo m, el nombre del campo es contenido. ¿ De acuerdo? No necesitamos agregar los datos de nuestra base de datos. Así que ve a tu Cloud Firestore en donde necesitamos agregar un nombre de colección. Por lo que el nombre de nuestra colección es post. Recuerda que necesitas agregar exactamente el mismo nombre. Si agrega si agrega una letra pequeña o mayúscula, entonces no será trabajo. Así que post que es nuestro nombre de colección y necesitamos a la noche Hanover ID. Y nos dará alguna identificación aleatoria. O si lo desea, puede elegir su propia identificación por lo que nuestro primer nombre de campo es el título que desea mostrar. Entonces copia este título y agrega dentro de este campo título y valor, podemos llamarlo aleteo. Aleteo. Y el segundo es nuestro contenido. Y podemos redactor. Y podemos llamarlo. Estamos aprendiendo aleteo. ¿ De acuerdo? Ahora. Entonces ahora si ejecuto esta aplicación, ojalá podamos ver datos. Entonces aquí vamos. Entonces aquí puedes ver nuestro avatar circular, nuestro título, y nuestro contenido, pero no se ve bien. Porlo que necesitamos diseñarlo. Por lo que podemos ver estos f dentro de este círculo Avatar causa que hemos añadido la posición 0. ¿ De acuerdo? Por lo que necesitamos cambiar este color de este aficionado circular. De acuerdo, y antes de eso, dentro de este contenedor, este contenedor tiene todos estos datos aquí. Podemos agregar un poco de relleno. Acolchado como inserto todos los 10. ¿ De acuerdo? Ahora para el avatar circular, necesitamos cambiar ese nombre de color poder elegir un color de fondo. No es así. Tenemos que agregarlo fuera del niño. De acuerdo. Porque esto es propiedad de la materia sarcómero. Por lo que el color de fondo va a ser color. Colores pensados que podemos elegir. Podemos elegir la base y el color, vale, y para el color de primer plano, eso significa que el color del texto va a ser colores. Colores blanco punteado. De acuerdo, ahora si hacemos recarga en caliente, entonces veremos nuestro color blanco y nuestro avatar circular color de fondo es acento rojo, y también podemos ver algún relleno. De acuerdo, ahora tenemos que añadir, necesitamos crear un espacio y gusto estudiado. Entonces esta es nuestra fila principal, y dentro de esta fila hemos agregado todos estos tres datos. De acuerdo, entonces necesitamos agregar aquí salida principal. Porque x es elemento. Voy a ser cruz x es elemento o un stat para que pueda empezar desde el lado izquierdo. No funciona. Creo que quieres decir x es elemento, va a ser principal y luego punto principal. ¿ De acuerdo? Ahora tenemos un contenedor. Para estos dos contenedores, necesitamos agregar muchos elementos Xs y men x es un elemento o un inicio. Este es nuestro contenedor principal. Para esta columna necesitamos usar, creo que cross x es incluso significado y ejecutarlo. Y podemos ver que comenzó desde la parte oriental, pero necesitamos agregar algo de margen y relleno para este contenedor y actualizar el avatar circular. Podemos agregar una nueva caja de tamaño. Y por qué usamos el bloque de tamaño decide que los libros nos proporcionan algo de espacio. Entonces podemos agregar blanco, podemos sumar diez puntos, 0, y nos dará espacio desde el lado izquierdo. Ahora, podemos ver este espacio. De acuerdo, perfecto. Ahora creo que se ve bien, pero sigue siendo, hay que cambiar algo. Por lo que necesitamos modificar algunos datos como para nuestro aleteo, para nuestro título, necesitamos cambiar nuestro color y nuestro color de texto. De acuerdo, Entonces este es nuestro texto de título. Y aquí hay que añadir un estilo. El estilo va a ser estilo de texto. Podemos cambiar el tamaño de la fuente, podemos seleccionar 22, y necesitamos elegir el color. Se puede elegir. El color va a ser antorcha de cartílago. Se puede elegir un color verde. Sólo por ejemplo. Ahora recarga demasiado caliente. Ahora podemos ver que se ve bien. ¿ De acuerdo? Ahora necesitamos agregar un espacio entre estas dos colas. Por lo que añadir Nuevo. También podemos elegir nueva caja de tamaño así como nuevo tamaño poro. Esta vez es que tenemos que elegir altura porque necesitamos expresar desde altura. Vamos a usar 5 y ejecutarlo. Y podemos ver algo de espacio, ¿de acuerdo? Ahora necesitamos si quieres, creo que para éste está bien. De acuerdo. Hagamos una cosa. Hagamos una cosa. Tenemos que definir la altura y la unidad. Podemos definir la línea máxima de este texto. Para este texto, me gustaría mostrar esta línea máxima uno porque mostraremos sólo una línea de título. Y para este texto, para esta prueba, no necesitamos agregar ningún diseño y podemos cambiar esta línea máxima para causar cuándo agregaremos múltiples datos. Si no seleccionamos esta línea máxima, nos dará todos estos datos, entonces se verá muy mal. De acuerdo, entonces ahora, ¿qué podemos hacer si ejecutamos esto? No vamos a poder ver ninguna oportunidad porque sólo tenemos un post. Y ahora podemos, ¿qué podemos hacer? Y también necesitamos definir el blanco de este contenedor. Porque dentro de este contenedor tenemos estos dos datos. Uno es nuestro título y otro es nuestro contenido. Por lo que necesitamos definir la altura para definir el blanco. Para que podamos elegir, podemos elegir. 210 y brille. De acuerdo, ahora es el momento de agregar varios artículos. De acuerdo, entonces tengo algún texto ficticio. Por lo que algún maniquí después de impuestos, lo agregaré ahora aquí. Por lo que esta es nuestra colección post y heredar. Necesitamos agregar nuestros datos de recolección más antiguos. Por lo que en nuevo documento y necesitamos generar ID al azar. Y aquí necesitamos agregar nuestro nombre de campo, ese es nuestro título. Y para los datos del este aquí, podemos usar este título. Podemos pegarlo y necesitamos agregar otro campo que va a ser contenido. Contenido e inhalar necesidad de utilizar bucle delta y podemos elegir este valor total y el contenido del título y guardar. Ahora, si abro esta aplicación, entonces veremos nuestros datos. Qué es, qué aprendió algunos y estos datos ficticios. Y aquí puedes ver nuestro, para nuestro contenido, hemos seleccionado máxima línea para allá, así podemos ver dos líneas, pero en nuestro contenido real hay muchos datos. Entonces para esto, necesitamos usar nuestro, si selecciono la línea máxima cinco y si ejecuto esta aplicación, entonces verás cinco datos de alineación. A ver 12345. Entonces para esto, o puedes elegir la línea máxima dos. Y va a funcionar perfectamente, ¿de acuerdo? Y hemos definido el blanco porque necesitamos mostrar este diente blanco a diez. Si quieres, puedes voltearlo blanco. Ahora, agrega algunos textos más y ya puedes ver ese tiempo en tiempo real. Eso significa que no necesitamos ejecutarlo una y otra vez. Nuestra replicación se actualizará automáticamente. Para este segundo dato, se puede ver nuestra palabra w dentro de nuestro círculo Lavater, causa para este título, W está en 0 posición que hemos seleccionado aquí. Si selecciono una, entonces agregará segunda posición y contará como repetición de matriz. Ahora podemos ver en Los Ángeles, más rápido, todos sabemos esto. El primero es la posición 0 y el segundo es uno. Por lo que hemos seleccionado una y R una posición es i ahí. que puedas deslizarte, podemos ver, y para, en esta parte que hemos visto es posición, esa es nuestra única posición y podemos ver en estos días, ¿vale? De acuerdo, así que para nuestra aplicación, podemos ver, para esta aplicación, necesitamos agregar pocos artículo más. Por lo que campo va a ser título. Y el valor es que podemos agregar algún contenido post y copiar y guardar. Ahora si abro R, verás j. ¿De acuerdo? De acuerdo, creo que se nos olvidó ejecutarlo. Y Génesis 2120 y ejecútalo. De acuerdo, entonces veremos loci, vale, agrega más texto o di, di, di cola. El valor va a ser este. Continuo va a ser contenido va a ser este contenido. Agrega algunas ID impares más. Título. El valor va a ser sólo algunos datos. Y agrega un campo más. Contenido. Y pelo va a ser todo este dato. Y puedes ver cinco post 1234581 más. Este va a ser título. Y por valor, podemos elegir éste. Y contenido. Contenido. Tenemos que elegir éste. Podemos elegir éste. Entonces, ¿dónde puedo conseguir? Y ahora podemos ver, ahora podemos ver, simplemente podemos llamarlo y podemos ver nuestros todos estos datos y todos estos campos que hemos diseñado e implementado con éxito. Entonces creo que hay suficiente para esta parte. En nuestra siguiente parte, lo haremos, añadiremos cómo podemos enrutar y cómo podemos configurarlo a nuestro espacio digital. Entonces creo que eso es todo por esta parte. Gracias. 7. Función de página de detalles para cada publicación: Hola chicos, bienvenidos de nuevo una vez más. En esta parte, crearemos un nuevo ritmo y enviaremos nuestros datos a más de nuevo ritmo. Por lo que cuando un usuario haga clic en cualquiera de estos elementos, cualquiera de estos icono, y usted tiene el elemento de datos, entonces ellos los redirigirán. Después los redirigiremos a un espacio digital donde podrán leer post detallado. De acuerdo, entonces por hacer esto, ¿qué podemos hacer? Primero, necesitamos crear un nuevo archivo, nueva carpeta lib de archivos dot, y crear un nuevo archivo. Y podemos llamarlo post detalles aquí. ¿ Qué tenemos que hacer en ella primero, necesitamos importar nuestro material, Dart material de importación. De acuerdo. Ahora, necesitamos importar nuestro Firestore. Necesitamos importar nuestro Cloud Firestore. ¿ De acuerdo? Y ahora necesitamos definir nuestro widget de estado. Así que crea un fiar con estado y podemos llamarlo post detalles. ¿ De acuerdo? De acuerdo, ahora ve a esta página principal. Y aquí, tenemos que cambiar algo. Este es el título de nuestro texto. Por lo que cuando el usuario haga clic en este título, entonces podemos moverlos a la página siguiente. Para hacer esto, lo que tenemos que hacer aquí, quién necesita cambiarlo, necesitamos importar una nueva propiedad llamada twell para que podamos agregar tiff o de lo contrario no seríamos capaces de hacer esto. Por lo que los textos normales no podemos agregar clickable. Entonces, si desea agregar vista de texto clicable, entonces necesitamos usar new in coil. Necesitamos usar nueva indagación. Esa es la otra propiedad llamada gesto. Por lo que me gustaría usar este tintero. Y tintero tiene una propiedad llamada niño. Y en este niño hay que agregar son estos campos de texto. Para que podamos cortarlo aquí y simplemente pegarlo aquí. ¿ De acuerdo? Así que solo edita en bobina. Por lo que sólo editar en bobina y la consulta tiene un hijo e inserte el niño. Necesitamos pegar nuestros textos que quieras mostrar algunos textos nuevos, snapshot, data, index y Esther, igual. Y en bobina tiene una propiedad llamada. ¿ De acuerdo? Y aquí tenemos que pasar nuestros datos. Antes de hacer esto, lo que podemos hacer, podemos simplemente en lo que podemos hacer, podemos, necesitamos crear un método. Tenemos que crear un método. Yantes de eso aquí, dentro de nuestro espacio digital, necesitamos crear nuestra instantánea de documentos, y podemos llamarla instantánea. Y necesitamos crear un constructor para nuestra esta clase. Por lo que publicar detalles. Necesitamos crear un constructor y podemos agregar estos puntos snapshot. Por lo que hemos creado nuestro constructor, ahora necesitamos conectarlo dentro de nuestra página de inicio. Entonces después de este paso, podemos crear un nuevo, podemos crear un nuevo método y podemos llamarlo . Podemos llamarlo. O podemos llamarlo, podemos crear un nuevo método de datos de bus universitario. Y como parámetro, necesitamos pedir a nuestros documentos snapshot y crear un objeto de nuestra instantánea. Y aquí, necesitamos pasar nuestros datos. Entonces, antes de esto, necesitamos importar ¿son tan importantes estas páginas de detalles de post? Tenemos que añadir post. Pega el nombre del paquete dot, dot, litro. Y ahora aquí adentro, cuando le dice a nuestro navegador de enrutamiento, punto de eso es un push de punto de contexto. Y empuje tiene una pasta metálica redonda. Tan nuevo, tan nuevo. Por lo que nuevas plagas materiales Out. Y aquí, necesitamos pasar nuestro contexto. Y después de eso, de esta manera, tenemos que llamar a nuestro, tenemos que llamar a nuestro nombre de pasta digital. El apellido es publicación y detalles de la publicación de incentivos. Hemos agregado un constructor para que podamos pasar nuestros datos. Entonces aquí podemos ver, podemos agregar snapshot. Esta instantánea es esta instantánea que estamos pasando parámetros para este constructor. Y ahora necesitamos usar la instantánea que acabamos de crear. Ya terminamos todos. Entonces ahora en este punto y coma, así que lo que hicimos aquí, hemos creado este método post data y como parámetro pasamos estos documentos snapshot. Esta instantánea para sujetar datos o mover de un lugar a otro. Pegar revoloteado tiene plano tiene, necesitamos usar navegador punto de contexto o empujar un nuevo material primero en salir, nos dará este constructor y constructor contexto contenedor. Y estos contextos necesitamos pasar nuestro detallado lugar donde queremos ir. Y hemos añadido un constructor, y necesitamos pasar estos datos con este constructor. De acuerdo, entonces esta instantánea que he mostrado es esta instantánea que hemos agregado. Vale, ahora ya terminamos todos. Ahora. Desplázate hacia abajo y dentro este contenedor y dentro de este tintero. Para nuestro título de lista, hemos agregado al método. Y aquí tenemos que llamar a nuestro método ahora que acabamos de crear. Y hemos creado este post data, y necesitamos pasar nuestra instantánea aquí. Nuestra instantánea, instantánea y punto de índice, no de esta manera. Entonces broches o forma de punto para usar este resultado. Entonces índice de instantáneas, por lo que nos dará todos y cada uno de los datos del índice. De acuerdo, Entonces en las pruebas, y esto va a ser datos pasados y la instantánea se va a indexar en tarifa. Y éste va a pasar instantánea de datos e índice. Será para la facilidad y cada usuario. Entonces si hago clic en estos cuatro 0s y cada ID único, único, obtendremos esto. Vamos a conseguir este detallado plagas terminado. Daremos clic en este icono, en este título. Después pasaremos a segundas plagas y obtendremos esta identificación. Todos los datos obtendrán este título y este contenido. Estamos usando, esta instantánea. Esta instantánea es nuestra instantánea que hemos creado para nuestros documentos ahora disparar y como lista. Y hemos agregado esta posición de índice desde aquí, se puede ver constructor de artículos. Hemos agregado esta posición de índice. Por lo que podemos ver este índice. Y aquí estamos consiguiendo esto no es cada ID único porque hemos definido el nombre del campo. Pero aquí dentro estamos consiguiendo el puesto para que podamos conseguir, aguantarlo. Entonces creo que eso es todo por esta parte. En nuestra siguiente parte, establecdremos estos datos en nuestra base de datos. Si hago clic en esto, si ejecuto esta aplicación, tal vez podamos pasar al segundo lugar. Pero podemos decir cualquier cosa. Se puede ver negro, en blanco se puede causar que no agregaron widget de andamios y cualquier diseño de material. Lo haremos en nuestra siguiente parte. Entonces ojalá lo entiendas. Muchasgracias. 8. Detalles Diseño de páginas para mostrar detalles Post: Hola chicos, bienvenidos de nuevo una vez más. En nuestra parte anterior, hemos establecido toda la funcionalidad requerida para pasar datos de Pegar principal a pegar. Ahora en esta parte vamos a establecer nuestros datos. Entonces ve a este post detalle ritmo. Y aquí hemos añadido nuestros documentos ahora, detalles de post cortos, ahora trampa de salida corta. Y rápido para necesitar retirar este contenedor. Así que retira este contenedor y agrega un widget de andamio. Y aquí hay que añadir e insertar un andamio. En primer lugar, hay que añadir. Por lo que haga clic M bar va a ser nuevo. Un bar. Ab bar tiene un título del cual título va a ser texto nuevo. Y podemos llamarlo post detalles. ¿De acuerdo? Y ahora necesitamos agregar un color de fondo. El color de fondo va a ser colores. Colores dot. Podemos elegir color verde. ¿ De acuerdo? De acuerdo, así que ahora necesitamos diseñar nuestras partes del cuerpo. Entonces ahora si ejecuto esta aplicación, y si hago clic en alguno de estos títulos que podemos ver nuestros detalles de post y nuestro color superior. Ahora retrocede, haz clic en qué podemos ver nuestros datos y necesitamos configurarlo en nuestro RecyclerView para hacer esto. Y dos ahora heredamos, hay que añadir, ahora aquí tenemos que añadir nuestros textos corporales o textos corporales. Por lo que el cuerpo se va a, podemos girar nuestro carro, carro y necesitamos agregar elevación. Podemos elegir 10 y niño editado y sábado, marzo en marzo en va a ser como inserto todo 0.02. Ahora aquí dentro tenemos que sumar a nuestro hijo. Y aquí tenemos que añadir nuestra nueva lista. ¿ De acuerdo? Entonces hagámosle peligro a los niños de que lo sea, y dentro de esta lista podemos agregar todas estas cosas. Entonces dentro de esto, cuando vas a este ritmo. Por lo que lo definiremos en dos partes. Entonces la primera será nuestra fila. Dentro de nuestra fila, agregaremos nuestro círculo Avatar, y luego agregaremos nuestro título. Y después de la deuda y resto de la parte sería nuestra parte de contenido. ¿ De acuerdo? Tan rápido. Defina una fila. Tan nueva fila. Row tiene chileno de widget. De acuerdo, no hay problema. Ahora, primero necesitamos agregar nuestro nuevo avatar circular, algún nuevo diámetro circular circular de círculo amateur en un niño. Niño va a ser nuevo texto. Y ahora necesitamos agregar nuestro widget, nuestra instantánea, nuestros datos. Y necesitamos pasar nuestro campo de campo que va a estar apretado l y r. y para sarco apetito habrá que colocar nuestra, nuestra posición. ¿ De acuerdo? Y ahora necesitamos agregar un color de fondo para nuestro ciclo o lo que sea. El color de fondo va a ser colores. Colores, dodge, verde. Y para primer plano, color va a ser de color blanco. ¿ De acuerdo? Muy bien. Ahora, podemos ver este color, vale, perfecto. Ahora si hago clic en aleteo, podemos ver lo que eso significa que se envía para todos y cada uno de los artículos. Podemos ver este. Para éste, esto está funcionando perfectamente, pero necesitamos todavía, necesitamos resolver algún problema de diseño. Lo haremos en nuestra siguiente parte. Creo que eso es todo por esta parte. Gracias. 9. Enviar datos a la página de detalles: Hola chicos, bienvenidos de nuevo una vez más. Por lo que en nuestra parte anterior, hemos marcado con éxito nuestro ritmo detallado y nuestro avatar circular. Ahora necesitamos diseñarlo y cuando se rasga terrorista resto de datos, vale, así que aplicado este avatar circular, necesitamos agregar nuestro borde de título, nuevo texto. Tenemos que añadir nuevo texto. Y cómo están cayendo aquí cuando creamos nuestro widget, punto, nuestra instantánea. Esta instantánea, esta instantánea, esta instantánea punto de datos. Y aquí podemos agregar nuestra para agregar texto widget snapshot dot data, dot title. Muy bien. Y como menos necesidad de agregar nuestro estilo. Por lo que va a ser estilo de texto. Y el tamaño de la fuente va a ser 22, y el color va a ser, podemos elegir colores, oscuro, color naranja. Ahora, vamos a ejecutarlo. Ahora aquí podemos ver nuestro artículo. Ahora ya podemos ver nuestro artículo, pero aún tenemos que hacer algo alguna oportunidad decente. ¿ De acuerdo? Entonces esta es nuestra vista de tarjeta y esta es nuestra fila. Esta es nuestra principal herramienta para este avatar circular. De acuerdo, Entonces dentro de esta fila, esta fila, podemos agregar un nuevo contenedor. ¿ De acuerdo? Para que podamos cortarlo y editar canto en nuevo contenedor para que podamos añadirlo y pegarlo aquí. Y si nosotros, si agregamos contenedor, no es necesario que agreguen. Necesitamos usar el chat. ¿ De acuerdo? Niño y remar y heredar. Ahora necesitamos agregar ropa de cama. Ropa de cama. Como en cambio todo lo que puedes elegir 10 es 0. Y ahora podemos ver esta ropa de cama desde esto, desde el lado izquierdo y fuera del sitio. ¿De acuerdo? Para que podamos hacer una cosa. Podemos simplemente, por este contenedor. Podemos separar nuestros dos contenedores. Podemos conectarnos a contenedor. Tan rápido continente es por hora, este kilómetro lateral y este título. Podemos, o podemos hacer, simplemente podemos definir la altura de este contenedor. La altura va a ser. La altura va a ser, puede elegir un 120 y Blanco definido. Podemos hacer estos dos a 0. Ahora corre. Ahora ya veremos, vale, Pero la cosa es, pero el problema es que estamos obteniendo todos estos datos para dentro de esta tarjeta. ¿ De acuerdo? Creo que no necesitamos usar este contenedor y este contenedor, simplemente podemos quitar esto. Ya que estamos utilizando para decirle a la vista de tarjeta. Están usando el espacio interior, dentro de la vista de tarjeta. Para que podamos modificarlo para que el círculo Avatar, necesitamos agregar un espacio cuando le digas a un espacio. Entonces, ¿cómo podemos hacer esto? Por lo que editar una nueva caja de tamaño y blanco, podemos elegir 0. Ahora bien, si ejecuto esta aplicación y puedo ver este espacio, vale, creo que podemos cambiar este color naranja a color verde. Eso va a ser bueno. De acuerdo, color verde y verde. Ahora después de eso, ¿qué tenemos que hacer? Ahora después de eso, lo que tenemos que hacer, necesitamos agregar nuestro contenido principal. ¿ De acuerdo? Entonces este es nuestro primer contenedor, y este es nuestro primer contenedor. Y después de esto, necesitamos agregar una nueva caja de tamaño solo para el espacio de la autopista. Y podemos agregar altura 10 en un contenedor nuevo. ¿ De acuerdo? Dos contenedores nuevos y coincidentes va a ser como inserto las diez monedas 0, ¿de acuerdo? Y agrega un niño. Este niño va a ser nuevo texto. Y podemos agregar nuestros datos aquí, que puntean instantánea. Así widget, datos de instantáneas, widget de punto instantánea, datos de instantáneas. Y aquí, necesitamos usar nuestro contenido. Tan contenido. De acuerdo, Ahora vamos a correr. Esperemos que funcione. Ahora aquí podemos, oye, así que aquí puedes ver son todos los datos y podemos ver un espacio entre estos. Entonces ve a estos aleteo. Y podemos ver, creo que diez dB es un espacio enorme, así que podemos elegir 7 y ahora ejecutarlo. ¿De acuerdo? Creo que necesitamos cambiar el color del texto, tamaño del texto, vale, para este contenido. Entonces, si queremos hacer esto, simplemente agrega un estilo. El estilo va a ser al estilo Texas. El tamaño de la fuente va a ser un equipo de 18. Vamos a ejecutarlo. Ahora. Ya podemos ver, ahora podemos desplazar todos estos datos y podemos ver esto. Podemos ver este texto. Entonces, ¿por qué usamos e n? Es un largo plazo y podemos ver nuestro diseño de materiales. Entonces espero que entiendan todo este proceso, cómo implementamos esta aplicación, cómo desarrollamos esta aplicación, y este es nuestro icono de navegación y todas estas cosas. Entonces espero que hayas aprendido mucho de que disfrutaste este curso. Entonces, gracias chicos. Su asiento.