Crea una aplicación para Android simple con Flutter desde cero

1. Lo que aprenderás y construirás: Oigan, todos. Bienvenidos a esta clase. Soy Flutter Sensei, y en esta clase, vamos a aprender a construir un NoeSAM completo A lo largo de esta clase, aprenderá a crear un nuevo proyecto aleteado, configurar el paquete de proveedor para que cambien, construir la pantalla de inicio con un diseño de cuadrícula, crear la pantalla de agregar nodo con un campo de texto completamente expandible, editar cualquier nota existente, pasar datos entre pantallas con navegador, agregar funcionalidad de eliminación y pulir la interfaz de usuario con relleno, ritmo, configurar el paquete de proveedor para que cambien, construir la pantalla de inicio con un diseño de cuadrícula, crear la pantalla de agregar nodo con un campo de texto completamente expandible, editar cualquier nota existente, pasar datos entre pantallas con navegador, agregar funcionalidad de eliminación y pulir la interfaz de usuario con relleno, ritmo, y azulejos redondeados. Al final de esta clase, podrás construir una aplicación de nodos completamente funcional con soporte de modo claro y oscuro. Para tu proyecto de clase, estarás personalizando la app, todo lo que tenemos cubierto Puedes jugar con colores, cambiar el diseño del mosaico, ajustar las fuentes y crear tus propios estilos visuales. Esta clase es perfecta para principiantes que recién están comenzando con Flutter Todo lo que necesitas es Flutter instalado y código VS. Entonces, ¿a qué esperas? Empecemos. 2. Configuración del proyecto y proveedor de temas: Bien, comencemos. Lo primero que tendremos que hacer es crear un nuevo proyecto dentro de nuestra carpeta de proyectos. Así que vayamos a nuestro símbolo del sistema. Y a partir de aquí, voy a navegar al escritorio. Luego entraremos en los proyectos de Flutter, y diremos Flutter, crearemos Nodes Light y golpearemos Ahora entremos a la carpeta del proyecto, es decir Nodes Light. Y ahora lanzemos VS Code. Eso es código punto. Ahora vamos a cerrar el símbolo del sistema. Vamos a maximizar esto. Ahora vamos a nuestro Pub spec dot YAML, y necesitamos agregar un paquete Vamos a desplazarnos hacia abajo hasta las dependencias, y aquí agregaremos el paquete Pror Eso es Proveedor y ahorra. Vamos a usar el paquete Provider para cambiar entre el tema claro y el tema oscuro. Ahora vamos a nuestro punto punto principal. Y vamos a deshacernos de todo lo que tenemos aquí. Ahora, sigamos adelante e importemos los paquetes. Eso es paquete de importación, aleteo, punto de material y proveedor de paquetes de importación punto punto A continuación, escribamos la función principal. Está vacío principal Dentro de esto, tendremos Runapp Dentro esto agregaremos el proveedor de notificador de cambios Y va a ser proveedor de equipo. Entonces necesitamos agregar una const infantil. Voy a llamar a esto como notas, Luz guardo. Bien. A continuación, necesitamos crear el proveedor de temas. Yo sólo voy a tomar esto. Vamos a crear una clase aquí. Proveedor de temas extiende, notificador de cambios. Dirás que Ball está oscuro. Establezca eso en falso. Diré bola y ahora necesitamos crear un getter que se ponga es oscuro Voy a poner eso al marcador es oscuro. Necesitamos crear el efecto toggle que es void, toggle theme. Entonces dentro de esto, diremos Es dark no es igual a Es dark. Entonces avisaremos a los oyentes. Eso lo guardaré. Ahora necesitamos crear nuestro widget Node light. Sigamos adelante y tomemos éste y lo espaciemos por aquí. Digamos clase, nodo ligero se extiende, widgets sin estado dicen const, Nodo leve que es tecla súper dardo Entonces diremos, bien, build, y aquí vamos a crear la variable llamada ellos Provider. Y eso es Provider dot el proveedor de temas. Guarde eso. Justo debajo de eso, vamos a devolver Material App guardar eso. Y ahora actualicemos la app Material con todos los elementos requeridos. El primero que necesitaremos es título, que dice notas Luz. Vamos a quitar el banner de DBC. Entonces vamos a establecer el tema para los datos de este tema, usar Material tres, true, y luego vamos a establecer el esquema de color a esquema de color a partir de la semilla. Eso es colores azul. El brillo es brillo, luz puntual. Guarde eso. Ahora vamos a crear el tema del perro. Así que sólo voy a copiar esto y yo diría tema de perro y simplemente pegarlo. Ahora esto va a ser el doc. A continuación, necesitamos el modo tema. Ese es el proveedor punto Esdg. Si está oscuro, vamos a decir themode dot dog. Si no, vamos a decir el modo, punto Luz. Ahora necesitamos crear la HomeScreen. Vamos a decir casa, eso es CecT'm para llamar a esto como HomeScreen. Vamos a guardar eso. En la siguiente clase, construiremos nuestra pantalla de inicio, y ahí es donde nuestro Notepp comenzará a verse vivo. 3. Crear el diseño de la pantalla de inicio: Bien, ahora que nuestro archivo principal está listo, sigamos adelante y construyamos nuestra pantalla de inicio. Dentro de tu carpeta de labios, vamos a crear una nueva carpeta, voy a llamar a esto como pantallas. Y dentro de eso, voy a crear un nuevo archivo llamado home underscore screen dot dot Y aquí, diremos import, package, Flutter, Material dot dot Ahora, sostén el Control y la guerra espacial y veremos si obtenemos esta pantalla de inicio, que va a extender el widget de pliegue de Estado. Y aquí, diremos const, HomeScreen, superdt key. Y aquí vamos a crear un estado. Vamos a tomar esta pantalla de inicio y reemplazarla por esta, y vamos a deshacernos de estos elementos aquí, y llamaremos a esto como subrayado estado HomeScreen Ahora necesitamos crear este, tal toma que digamos clase, el estado HomeScreen se extiende, el estado, y el estado es Y aquí, vamos a decir en absoluto bien construido. Y tenemos que conseguir el proveedor de temas aquí. Diremos proveedor de tema final. Proveedor punto de y vamos a conseguir proveedor. Guarde eso. Y aquí, vamos a devolver el andamio. Guarde eso. Ahora tenemos que ir al archivo Dot dart principal e importar este archivo. Vamos al punto punto principal, desplácese hasta aquí, voy a decir impartir paquete, diapositiva de nota, pantallas HomeScreen. Vamos a guardar eso. Puedo ver que el error se ha ido. Puedo volver a tu HomeScreen, y como puedes ver aquí, ahora que tenemos el andamio, podemos ejecutar Vamos a nuestro punto punto principal y sigamos adelante y ejecutemos esto. Estoy ejecutando esto como app para Windows, pero puedes elegir tu propia plataforma. Sigamos adelante y ejecutemos esto. Bien, así que sigamos adelante y alineemos esto lado a lado y justo esto mucho y vamos a colapsar este . Vamos a cerrar esto. Ahora, volvamos a nuestro punto punto de pantalla de inicio, y agreguemos el appr Entonces voy a decir appr appr aquí vamos a decir título es Cast, texto. El texto aquí va a decir Noa. Y añadiremos un color de fondo. Voy a llamar a esto como esquema de color de punto de equipo, contenedor primario de punto. Y solo voy a copiar esto luego pegarlo aquí, esto va a ser color de fondo completo. Y en vez de esto, diremos en contenedor primario. Vamos a guardar eso y debería ver la app. Ahora necesitamos agregar el botón de alternar aquí. Entonces justo después de este, vamos a decir acciones es el botón del icono, y al presionarlo, queremos tomar el proveedor de temas y alternar el tema. Y para los iconos, se puede decir icono y aquí comprobaremos que el proveedor de temas es oscuro. Si está oscuro, diremos iconos puntean Modo Luz. Si no, diremos íconos, punto, modo oscuro. Guarda eso y ahora ya puedes ver que tenemos el botón de alternar. Entonces, sigamos adelante y probemos esto. Entonces, si hago clic en esto, cambia al modo luz y al modo oscuro. Bien, ahora que nuestro botón de alternar funciona, agreguemos el cuerpo para nuestra aplicación. Primero, necesitaremos un generador de listas. Esto es para probar y ver cómo se verán nuestros nodos una vez que los construyamos. Entonces justo después de este estado de pantalla de inicio aquí, diremos final, diré nodos de subrayado Establecer eso a lista para generar, voy a generar seis de ellos. Y el generador va a ser un simple hola mundo. Vamos a guardar eso. Ahora vamos a desplazarnos hacia abajo y vamos a crear el cuerpo aquí. Es un cuerpo. Aquí voy a agregar el Grid Wave Builder. Entonces, el generador de ondas de cuadrícula primero necesita una lista de recuento de elementos. Aquí voy a decir el recuento de artículos es subrayado notas longitud de punto Guarde eso, y ahora podemos agregar el delegado de Grid. Ese es el eje transversal fijo. Yo puse eso en dos. Y aquí necesitamos agregar algo de espaciado. Entonces eso va a ser 25, y otro va a ser 25. Necesitaremos un poco de acolchado para el cuerpo. Podemos agregar ese relleno dentro del constructor. Entonces aquí solo podemos decir que el relleno es en absoluto. Voy a poner eso a 25. Eso lo guardaré. Ahora, dentro del constructor de artículos, vamos a deshacernos de este. Y aquí agregaremos nuestro estilo de lista porque el mosaico de lista ya tiene una opción de toque. Sigamos adelante y volvamos mosaico de lista. Ahora, actualicemos nuestro estilo de lista con algunos datos. Aquí, lo primero que voy a añadir es un título. Esto va a ser un texto w silla, y va a venir de notas, índice, y digamos en guardar. Ahora podemos ver el texto que aparece en la vista previa. Pero estos textos se ven un poco más grandes, tenemos que hacerlo un poco más pequeño. Para eso, lo que podemos hacer es justo al lado de esto, podemos ver que el estilo es textil. Puedo decir que el tamaño de la fuente debe ser 13. Guarde eso. Eso se ve más pequeño. Eso es mucho mejor. Después del título, quiero agregar un trailing. Este trailing va a ser un botón de borrar. Para ello, podemos decir botón icono. presionar, aún no tenemos nada, solo lo vamos a dejar en blanco y el icono va a ser icono, iconos punto eliminar. Guarde eso. Ahora puedes ver el título y el botón de borrar. Pero necesitamos agregar algo de color de fondo para nuestra nota para mostrar el tamaño de cada nota. Para eso, podemos usar el color del azulejo. Justo encima del título, vamos a decir color de mosaico. Aquí, en lugar de especificar un color específico, vamos a usar el color fino. Que son ellos punto, punto Esquema de Color. Llamaremos a esto como contenedor de superficie, y eso es un salvamento. Ahora puedes ver que nuestros azulejos se ven bien. Si tomo mi cursor aquí, se puede ver que literalmente no pasa nada. Sería bueno tener un efecto ho también. Eso lo conseguimos automáticamente con la función on tap. Sigamos adelante y agreguemos eso. Justo después del trailing aquí, se puede ver de barril, y aquí sólo voy a agregar una función de tablón Ahora bien, si tomo mi cursor, ya pueden ver, obtenemos un efecto hover Ahora cuando me cambio al tema del perro, puedes ver cómo se ve eso. Y ahora tenemos el efecto hover y el efecto on top también. En la siguiente clase, aprenderemos a agregar un nuevo botón de nodo y construir una nueva pantalla de nodo. 4. Agregar la pantalla de agregar notas y el campo de entrada: Todo bien. Ahora necesitamos agregar un botón de acción flotante que nos llevará a la pantalla de agregar nuevo nodo. Vamos a crear eso. En nuestra pantalla de inicio justo después del cuerpo que es el Generador de ondas Grid, vamos a agregar un botón de acción flotante. Al prensar, vamos a mantenerlo vacío por ahora. Y aquí vamos a agregar un icono. Entonces llamaremos a esto como icono. Icono stat icono empezar en y guardar eso. Voy a poner esto a Cs salvo eso otra vez. Y puedo ver si tienes ese botón. Voy a cambiar la forma a bot circular para que se vea así. Bien, este botón aún no hace nada. Para que este botón nos lleve a la pantalla del nuevo nodo, primero necesitamos crear la pantalla. Entonces dentro de la carpeta lip, tenemos pantallas y dentro de pantallas, vamos a crear una nueva pantalla, y llamaremos a esto como add node dot dart. Volvamos aquí y diremos import, package, flutter, material dot dart, y diremos clase Añadir nota, extiende estado cuatro Widget. Y voy a decir const, agregar nota supertat clave, en absoluto bien, crear estado Voy a tomar la nota add y sustituirla aquí. Me deshago de estos artículos. Diré, agregue nota, estado. Y voy a crear esta, copiar esta clase, agregar estado de nota, extiende estado, que es agregar nota. Y aquí, vamos a agregar un andamio. Todo bien. Ahora que tenemos este andamio, podemos agregar esta pantalla a nuestro botón Volvamos a la pantalla de inicio y dentro del botón de acción flotante. Lo que podemos hacer aquí es que podemos decir navegador punto perch luego puede tomar esta ruta y agregar una ruta de página de material, y el constructor va a ser nota de anuncio. Guarde eso. Ahora, cuando toque este botón más, nos llevará a la pantalla de agregar nodo. Ahora, actualicemos nuestro nodo add. Volvamos por aquí. Aquí, agregaremos la vista de texto appr y un botón de guardar. Para eso, comencemos primero con el appr. Aquí, lo que podemos hacer es que puedas ir a la pantalla de inicio y puedes ver que ya tenemos este appr Sólo voy a copiar esto y luego pasarlo por aquí, y no necesitamos las acciones. Entonces me voy a deshacer de esto. Yo sólo guardo. Se puede ver que tenemos esto, y aquí sólo vamos a decir, agregar nota y guardar eso. Ahora puedo navegar entre la pantalla de agregar notas. Bien, así que tenemos la barra de aplicaciones. Ahora necesitamos agregar la rueda de texto. Entonces aquí, justo después de la barra de aplicaciones, vamos a decir cuerpo. Voy a poner el relleno aquí. Voy a poner el relleno a 25. Voy a poner al niño aquí en columna, y dentro de esta columna, vamos a tener hijos. Y dentro de los niños, vamos a agregar un campo de texto. Guarde eso. Y dentro del campo de texto, podemos agregar una decoración llamada decoración de entrada. Voy a establecer el texto de la etiqueta como agregar su nota aquí como guardar esto. Entonces ahora puedes ver que tenemos el campo de texto. Pero este campo de texto se ve bastante pequeño. Lo que queremos es un campo de texto expandido donde podamos escribir tanto como el texto que necesitemos. Para eso, primero, necesitamos colocar nuestro campo de texto dentro de un Wichet expandido Así que sigamos adelante y seleccionemos nuestro campo de texto. Haga clic derecho en refactorial. Yo configuré eso para envolver con expandido y guardar eso. Ahora necesitamos agregar algunos detalles a nuestro campo de texto. Lo primero que voy a hacer aquí es que voy a agregar líneas max y voy a poner eso en null. Entonces voy a poner la extensión a un verdadero. Vamos a guardar eso. Ahora se puede ver el borde en la parte inferior. No queremos la frontera en la parte inferior, ¿verdad? En realidad, no queremos la frontera en absoluto. Para eso, dentro de la decoración de entrada aquí, podemos decir frontera, digamos entrada frontera punto monja Y eso va a quitar ese borde del fondo. Y ahora queremos que este texto se muestre en la parte superior. Entonces para esto, diremos alinear etiqueta con pista. Yo también voy a poner eso. Cierto. Da click en guardar, eso va a ir en la parte superior. Ahora si hago clic aquí, pueden ver, podemos escribir todo lo que queramos y la etiqueta se queda arriba. Sigamos adelante y probemos esto. Vamos a nuestro navegador. Y aquí, voy a buscar a Lorem Epsom. Vamos a hacer clic en Mostrar más. Yo sólo voy a copiar esto. Y vamos a pagarlo por aquí. Voy a espaciarlo otra vez. Entonces ahora puedes ver que tenemos la barra de desplazamiento dentro del campo de texto, y podemos desplazarnos fácilmente hacia arriba y hacia abajo. Ahora, lo que necesitamos a continuación es un botón de guardar, que por ahora nos llevará de vuelta a la pantalla de inicio. Así que vamos a desplazarnos hacia abajo. Y aquí dentro del andamio, vamos a decir botón de acción flotante, botón acción flotante en pulsado, lo dejaremos en blanco por ahora y diremos icono hijo Inicio de iconos. Guardar. Guarde eso. Y para este icono, voy a establecer eso para que cueste. Y ahora tenemos el botón de guardar. Cambiemos la forma de eso a borde circular. Bien. Entonces ahora cuando guardo esto, se supone que debe volver a la pantalla de inicio. Para eso, aquí, podemos decir navigator dot pop y guardar eso. Así que ahora si tuviera en guardas voy a volver a la pantalla de inicio. En la siguiente lección, aprenderemos a hacer la pantalla de edición. 5. Crear la pantalla de edición de notas: Bien, sigamos adelante y creamos la pantalla de edición. Dentro de la carpeta de labios dentro de las pantallas, llamaremos a esto como editar, subrayado nota punto punto Y está cerca de esto. Aquí vamos a decir paquete de importación, Flutter, material punto punto, decir clase, Editar nota, extiende Estado cuatro widget Diremos const, Edit note, super dt key El agregar o escribir, crear estado. Yo sólo voy a reemplazar esto de aquí. Y va a haber dit, nota estado. Y sigamos adelante y construyamos esto. Clase. Edit node, State extends State, que es edit node. Y aquí, voy a decir A construido, y vamos a devolver andamio Vamos a guardar eso. Ahora, vayamos a la pantalla de inicio por aquí, y dentro del mosaico que tenemos aquí, podemos ver que tenemos la función on tap. Entonces, al tocar, queremos ir a la pantalla Editar. Entonces aquí lo que podemos hacer es que podemos decir Navigator Dat perch y la ruta es Material page route El constructor es editar nota. Y vamos a cerrar esto. Así que ahora fi tap en esto me va a llevar al nodo Edit. Y aquí es donde necesitamos agregar nuestros artículos. Lo que vamos a hacer por ahora es que vamos a tomar todo dentro del andamio add node y pegarlo por aquí Entonces ahora vamos a agregar nota y tomar todo lo que tenemos por aquí dentro de este andamio, copiemos eso, ven a editar nota, luego pegarlo aquí ¿Ves? Lo que vamos a hacer aquí es que sólo vamos a actualizar algunas cosas. Entonces aquí, voy a llamar a esto como Editar nota. Y aquí decimos actualización, no lo eres. Y el botón de guardar llevará de nuevo a la pantalla de inicio. Entonces todo está configurado. Además, si ves nuestra pantalla de inicio, los bordes de las baldosas se ven muy nítidos. Vamos a agregarles algunas esquinas redondeadas. Para eso, lo que podemos hacer es que podamos meternos dentro de la pantalla de inicio, y este es el azulejo aquí, podemos decir forma y llamarlo como borde rectángulo redondeado. Si tomas tu cursor aquí, puedes ver que toma algo llamado radio de borde. Vamos y agreguemos eso. Diré radio portal, y lo que queremos es radio portero. Circular. Aquí voy a establecer el radio a 15. Guarde que ahí ahora tenemos las esquinas redondeadas. Ahora tenemos la interfaz de usuario, es el momento de hacer que la interfaz de usuario sea dinámica. En la siguiente lección, haremos que nuestra pantalla de nodo de anuncios sea funcional. Todo lo que escribamos se guardará en la pantalla de inicio. 6. Cómo hacer que la pantalla de agregar notas sea funcional: Todo bien. Ahora es el momento de agregar alguna funcionalidad a nuestra aplicación. Primero, vamos a agregar nota. Y aquí, necesitamos capturar los datos del campo de texto. Para eso, vamos hasta arriba y aquí vamos a crear una variable, voy a llamar a esto como controlador de edición de texto, y el nombre de la variable va a ser contenido. Voy a configurar eso en controlador de edición de texto. Bien, ahora necesitamos asignar este controlador a nuestro campo de texto. Para eso, vamos a desplazarnos hacia abajo. Nuevamente vemos tenemos un campo de texto. Podemos decir controlador. Subrayar el contenido. Guarde eso. Bien, digamos que agregamos los datos dentro del nodo de anuncios, y cuando presionemos el botón Guardar, volveremos a ser llevados a la pantalla de inicio. Pero esa pantalla del nodo de anuncios seguirá conservando esos datos. Tenemos que disponer de esos datos. Para eso, lo que podemos hacer aquí es que podemos decir bien, dispersar. Y aquí, podemos tomar ese contenido, y luego podemos dispersarlo. Ahora cuando agreguemos una nota y volvamos a una nueva, los datos anteriores no seguirán ahí. A continuación, estamos obteniendo los datos, pero necesitamos enviarlos a nuestra pantalla de inicio. Para eso, vamos a desplazarnos hacia abajo hasta el botón de acción flotante de aquí. Primero, tenemos que verificar si el usuario no está enviando un dato vacío. Para eso, vamos a cortar esto. Diremos que subrayo el contenido que el texto está vacío, vamos a agregar un andamio messenger F dot show snack bar Digo snack bar, y el contenido va a ser un relleno de texto. Dice: Nota no puede estar vacía. Y vamos a guardar eso. Ahora, una vez hecho esto, vamos a decir regreso. Y aquí, vamos a añadir nuestro Navigator dot pop. Ahora, cuando añadimos el punto navegado Pop, queremos llevar también el contenido aquí Entonces aquí podemos decir, subrayar el contenido. Texto punteado, guárdalo. Bien. Ahora el contenido se pasa a través de navegator.com A continuación, necesitamos recibirlo asincrónicamente en la pantalla de inicio Para eso, volvamos a nuestra pantalla de inicio. Ahora, en la parte inferior, tenemos este botón de acción flotante, y vamos a actualizar. Entonces aquí en prensa, voy a llamar a esto como una sincronización. Voy a cortar todo lo que tengo aquí y vamos a decir nota nueva final, va a esperar y luego pegar. Bien, hemos añadido el Sing. Por lo que ahora los datos están pasando del nodo de anuncios a su pantalla de inicio. Pero primero, tenemos que verificar si los datos que vienen del nodo ad no están vacíos. Entonces para eso, aquí, diremos si nueva nota no es nula. Y Nne es una cuerda. Si esto es cierto, vamos a establecer un estado. Eso va a ser nodos que agreguen y lo que vamos a agregar, vamos a agregar la nueva nota. Guarde eso. Ahora, lo que tenemos aquí es un generador. Podemos seguir adelante y deshacernos de eso. Vamos a desplazarnos todo el camino hacia arriba y me voy a deshacer de éste. Voy a añadir una lista vacía. Ahora bien, esto de aquí va a ser una lista de cadenas. Eso lo guardaré. Entonces ahora si vuelvo a cargar la app, puedo ver si nos sale una nota en blanco Bien. Ahora intentemos agregar una nueva nota. Vamos a hacer clic en este botón más aquí y podemos llamar a esto como. Esta es una nota nueva y haz clic en Guardar e i. Tenemos una nueva nota en nuestra pantalla de inicio. Ahora, cuando toco esto, sí me lleva a la pantalla de edición, pero ahí no puedo ver la nota creada. Para ello, tendremos que llevar el contenido de la nota a la pantalla de edición, y eso es exactamente lo que vamos a aprender en la siguiente lección. 7. Hacer que la pantalla de edición sea funcional: Bien. Ahora necesitamos que la pantalla de edición sea funcional. Para eso, esto es lo que tenemos que hacer. Necesitamos crear una variable en la pantalla de edición, que llevará los datos desde la HomeScreen y los devolverá La pantalla de inicio tomará esos datos editados y los guardará como datos actualizados Ahora para que esto funcione, necesitamos crear una variable en la pantalla de edición. Vamos a la pantalla Editar y vamos a Editar estado del nodo aquí. En realidad, antes de eso aquí, necesitamos crear una variable. Llamaremos a esto como cadena final, y esto va a ser editado nodo. Y vamos a añadir eso aquí. Diré que requieren este punto editado nodo. Ahora nuestra pantalla de edición también tiene un campo de texto. Actualicemos eso también. Entonces dentro de este, vas a decir final, digamos controlador de edición de texto, y llamaremos a este como contenido, va a ser controlador de edición de texto. Ahora vamos a actualizar el campo de texto. Digamos controlador. Descri contenido. Ahora necesitamos obtener los datos que vienen de la pantalla de inicio. Para eso, vamos a desplazarnos todo el camino hacia arriba y aquí podemos decir todo bien y tenemos algo llamado int state. Dentro de esto, lo que vamos a hacer es que vamos a tomar el contenido que tenemos y el texto dentro de él, y vamos a asignarle eso a Wig esa nota editada. Guarde eso. Una vez que los datos son editados y guardados, necesitamos disponer esos datos de la pantalla. Para eso, aquí podemos decir en absoluto, disponer y podemos subrayar contenidos que dispersen salvo eso Ahora la pantalla de edición está lista para recibir los datos de la pantalla de inicio, pero aún necesitamos verificar y enviar los datos actualizados de vuelta a la pantalla de inicio. Para eso, en la parte inferior, en el botón de acción flotante, hagamos primero la validación. Así que sólo voy a cortar esto. Y aquí, diremos F subrayado contenido punto texto está vacío Vamos a agregar un andamio mensajero, punto F, punto show snack bar Esto va a ser un snack bar. Este va a ser un campo de texto, que dice, nota actualizada no puede estar vacía. Yo ahorro. Y una vez hecho eso, vamos a regresar. Entonces aquí, podemos agregar la palmera de punto navegante. Ahora esto va a llevar los datos actualizados. Para eso, diremos subrayado contenido, texto, guárdalo. Ahora nuestra pantalla de edición puede recibir y actualizar los datos. En la siguiente clase, configuraremos nuestra pantalla de inicio para recibir esos datos actualizados y reemplazar la existente. 8. Actualización de notas y solución de problemas de desbordamiento: Todo bien. Ahora necesitamos actualizar la pantalla de inicio para recibir los datos actualizados. Pero primero, se puede ver que tenemos un pequeño error en la pantalla de inicio. Si te desplazas hacia abajo, puedes ver en el nodo de edición, necesitamos un parámetro. Sigamos adelante y arreglemos esto rápidamente. Eso es nodo editado. Voy a establecer eso para subrayar nodos, ese será índice Vamos a guardar eso. Si obtenemos este error, no se preocupe por ello. Yo sólo puedo cerrar esto y tú puedes volver aquí. En realidad, podemos volver a ejecutar nuestra aplicación. Añado el nuevo nodo aquí. Voy a decir que esta es una nota nueva, guardar. Se puede ver si obtenemos esto y si toco esto, los datos vienen aquí, y cuando digo actualizado, y haga clic en guardar esos datos no vienen aquí. Eso es lo que tenemos que arreglar ahora. En nuestra pantalla de inicio, actualice el mosaico de la lista de esta manera. Aquí, puedes ver que tenemos esto en la pestaña, ¿verdad? Entonces aquí, lo que vamos a hacer es que vamos a agregar en un fregadero. Y vamos a tomar todo esto y simplemente cortar esto. Y aquí, voy a crear una variable final. Voy a llamar a esto como nota actualizada. Voy a poner eso para esperar y paginarlo atrás. Ahora necesitamos verificar si el nodo actualizado que viene de la pantalla del nodo de edición no está vacío. Para eso, aquí, se puede decir que F nota actualizada no es nula y la nota actualizada es cadena. Y si eso es cierto, vamos a establecer el estado, y vamos a tomar las notas y el índice dentro de eso, y vamos a actualizar eso con la nota actualizada. Digamos eso. Y así, ahora podemos crear y actualizar notas. Vamos a probarlo. Así que cuando vuelva. Voy a reiniciar la app. Cambia el modo oscuro, y diremos, esta es una nota nueva. Doy clic en guardar, y viene aquí. Toquemos por aquí. Voy a llamar a esto como actualizado. Vamos a hacer clic en guardar, y ya puedes ver, obtenemos la actualización. Pero, ¿qué pasa si agrego una prueba larga? Vamos a probar eso. Agreguemos un gran Lamepsm Vayamos a nuestro navegador, y solo voy a copiar esto y volver a mi código. Y entremos en esto. Sólo voy a reemplazar esto con un texto grande y hagamos clic en Guardar. Ahora puedes ver aquí que el texto está rebosante en el título Podemos arreglarlo agregando un límite de línea a los widgets de texto. Por ejemplo, aquí puedes ver, tenemos el título que es un widget de texto. Y aquí, lo que podemos hacer es que podemos dar una coma y podemos decir que las líneas máximas deberían ser ocho Y si lo guardo, se puede ver que el texto desbordante ya se ha ido Y ahora se puede ver que las cosas se ven un poco desalineadas. Vamos a arreglar eso. Entonces justo después de esto, podemos decir alineación del título. Voy a decir alineación del título de la lista. Y a partir de aquí, puedo configurarlo al principio como clic en Guardar. Esto alineará el título y el botón Dilt lado a lado en la parte superior Ahora, lo único que nos queda por hacer es agregar la funcionalidad dilit. Hagámoslo. Entonces aquí puedes ver que tenemos la función trailing, y dentro de esta, podemos decir set state underscore notes que eliminan en el índice y guardan eso Así como así, ahora puedes eliminar esa nota. Eso es. Ahora hemos construido una aplicación Notes que puede alternar entre el tema claro y oscuro, y esta nota puede crear texto largo. Por ejemplo, puedo tomar esta y puedo pegarla aquí dentro. El ángulo no puede guardar, podemos editarlos. Entonces aquí podemos decir actualizado, Ángulo no puede guardar. Y si no se requiere, también podemos eliminarlos. 9. Resumen y proyecto de clase: Lo lograste hasta el final de la clase. No solo seguiste los pasos, creaste una app completa de Notes desde cero. Cambio de tema, adición de notas, edición notas, eliminación de notas, creaste todo con tus propias manos. Gran trabajo, manteniéndose consistente a lo largo de cada lección. A lo largo de esta clase, montamos el proyecto desde cero. Se agregó un proveedor para ellos cambiando, construyó una pantalla de inicio con diseño de grano, agregó la pantalla de agregar notas con campo de texto en expansión Guardó notas en la pantalla de inicio dinámicamente, construya la pantalla del nodo de edición, pase los datos entre pantallas, actualizó los nodos existentes, agregó funcionalidad dilit, interfaz de usuario pulida con relleno, espaciado y mosaicos redondeados Estas son habilidades de flotadores esenciales, y las has usado todas en un proyecto real Ahora es tu turno de tomar esta app de notas y darle tu propio toque creativo. Ya aprendiste todo lo que necesitas. Todo lo que estás haciendo ahora es alicatado, personalizar y mejorar la apariencia Cambia el color del azulejo a algo fresco. Experimenta con esquinas redondeadas, más o menos radio. Prueba diferentes tamaños de fuente o estilo de notas en negrita. Agregue relleno adicional o espaciado en la cuadrícula. Ajuste el espaciado de acceso cruzado y el espaciado del eje principal. Cambia el fondo de la barra de aplicaciones o el estilo del título. Prueba un ícono, tamaño o forma de fab diferente. Pruebe diferentes colores de semillas en su esquema de color. Dale a tus pantallas de notas una sensación personalizada. Haz que tus notas se vean como notas adhesivas. Tarjetas, bloques, lo que se ajuste a tu estilo. Solo pequeños retoques, pero hacen que la app le sea tuya. Diviértete experimentando, hazlo colorido, mínimo, lindo, audaz, lo que quieras Una vez que hayas terminado, quiero que tomes una captura de pantalla de tu pantalla de inicio personalizada, una captura de pantalla de tu nodo de anuncio, captura de pantalla de tu nodo de edición, una captura de pantalla en modo oscuro y al menos tres notas que creaste usando tu diseño y las subas en la sección de proyectos. Muéstrame cómo lo personalices, muéstrame tu creatividad. No te preocupes. El diseño no tiene por qué ser perfecto. Sólo tiene que ser tuyo. Gracias por unirse a esta clase y construir la aplicación Notes conmigo. Ahora tienes un proyecto flor de trabajo completo y, lo que es más importante, entiendes los cimientos detrás de él. Espero que estés orgulloso de lo que has creado. En nuestra próxima clase, construiremos algo nuevo, algo emocionante y algo que lleve tus habilidades de aleteo aún más lejos Nos vemos en la siguiente clase.