Transcripciones
1. Lo que aprenderás y formarás: Oigan, todos. Bienvenida. Soy
freosens y en esta clase, aprenderás a construir una app planar diaria
que sea persistencia,
lo que significa que esta vez, los datos se almacenarán
permanentemente en En esta clase práctica, vamos a cerrar
la brecha entre la interfaz de usuario
simple y las aplicaciones basadas en
datos funcionales. Comenzaremos configurando la base de
nuestro proyecto y construyendo una
interfaz limpia y moderna utilizando el material tres. Aprendes a administrar entradas
complejas de usuarios
implementando selectores de fecha y
hora personalizados y a mantener tu código limpio usando ayuda o lógica
dedicada A medida que
avancemos,
profundizaremos en la
gestión de bases de datos locales con Hive Aprenderá a crear adaptadores de tipo
personalizados para
almacenar modelos de datos complejos, implementar un
tema persistente, para que su aplicación recuerde
su preferencia por modo
claro y oscuro
incluso después de un reinicio Organice y muestre
los datos de manera eficiente usando alternancias de clasificación
dinámica y grupos menos, realice operaciones de crud completas, permitiendo a los usuarios agregar, editar y eliminar
notas Antes de comenzar, asegúrate de tener
instalada la última versión de flutter y código VS en tu PC Tu proyecto para esta
clase es construir la app Dani Planner desde
cero siguiendo las lecciones. Para completar el proyecto,
debe configurar entorno de flutter
y
la base de datos de colmena Crear un modelo de nodos y generar los adaptadores de
base de datos necesarios. Cree la interfaz de usuario para agregar
y editar nodos, incluida la lógica de selección de fecha y
hora. Implementar el tema toggle y
la funcionalidad de clasificación, el ascendente y descendente para administrar cómo se muestran los nodos. Una vez terminado,
comparte una captura
de pantalla de tu app final en
la galería del proyecto. Además, siéntase libre de
ser creativo agregando sus propios colores de tema personalizados o mostrando una larga lista
de tareas organizadas Ahora, antes de saltar, asegúrate de presionar ese
botón de seguir en mi perfil. De esa manera, serás el
primero en saber cuándo deje caer las nuevas clases de flutter. Entonces,
¿a qué esperas? Empecemos.
2. Configuración de proyectos y fundamentos de la aplicación: Muy bien, comencemos. Lo primero que
vamos a hacer es crear un nuevo proyecto de flutter
para nuestra aplicación de planificador diario Entonces abramos nuestra terminal, y naveguemos
hasta el escritorio. Naveguemos a nuestros proyectos de
aleteo. Y aquí,
crearemos un nuevo proyecto llamaremos SAS, flutter,
create, daily planner
y pulsaremos Enter Ahora vamos a entrar en
ese planificador diario, y vamos a
abrir eso con VSCode Voy a cerrar
todo lo demás. Y vamos a abrir el punto principal punto f. ahora aquí vamos a borrar todo
dentro de este archivo, para que podamos construir la
app desde cero. Una vez que todo esté despejado, puede seguir adelante
y agregar el código. Entonces diremos import, package, flutter, material dot dot Entonces diremos vacío principal. Entonces diremos Run app, const, my app, luego
cerraremos esto Copia esto, digamos clase,
mi app, se extiende
apátrida, rígida Dentro de esto diremos
const MyApp, clave Superdt. Y luego vamos
a decir en todo bien construir y vamos a eliminar
todos estos elementos, vas a devolver un
material luego dentro de este, vamos a decir título. Voy a llamar al
título como Planificador diario. Entonces vamos a establecer el banner de
depuración para que siga. Les diremos datos, y usaremos el material tres. Usaremos el
esquema de color de semilla, llamado colores punto azul. Voy a ajustar el brillo a luz de punto de
brillo.
Eso lo guardaré. Una vez hecho eso,
vamos a llamar a nuestra casa. Voy a llamar a esto
como pantalla de inicio const. Vamos a guardar eso. Muy bien, este es nuestro envoltorio de aplicaciones de
material. Ahora mismo estoy manteniendo las cosas
intencionalmente simples. Notarás que aún no he
agregado el modo oscuro ni ninguna tematización avanzada,
y eso es a propósito Cuando integremos Hive más tarde, manejaremos correctamente los temas
y la configuración persistente Por ahora, esto nos da una base
limpia sobre la que construir. En la siguiente lección,
comenzaremos a construir la interfaz de usuario de la pantalla de inicio para
nuestra aplicación de planificador diario.
3. Creación de la pantalla de inicio y conexión con la aplicación: Bien, dentro de la carpeta de elevación, vamos a crear una nueva
carpeta llamada pantallas. Entonces aquí podemos simplemente
llamar a esto como pantallas. Ahora, dentro de esa carpeta, vamos a crear un nuevo archivo, y vamos a llamar a este archivo
como pantalla de inicio punto, punto. Aquí es donde vivirá nuestra interfaz
de usuario de pantalla de inicio. Ahora, comencemos a construir
la interfaz de usuario para nuestra pantalla de inicio. Entonces dentro del punto de la pantalla de
inicio,
podemos comenzar a agregar import,
package, flutter,
material dot dot podemos comenzar a agregar import,
package, flutter,
material Aquí diremos
clase, pantalla de inicio, extiende, Estado cuatro con gt. Y podemos decir const, pantalla de
inicio, superdt key Dicen en absoluto, crear estado. Y voy a copiar esta pantalla de inicio,
pegarla por aquí, y esto va a ser
subrayado el estado de la pantalla de inicio Y vamos a guardar eso.
Ahora, tomemos este estado de pantalla de
inicio no descubierto Diré clase, pegue
un estado extenso. El estado es la pantalla de inicio. Y aquí veremos bien, construir y dentro de la construcción, devolveremos un andamio Aquí, notarás que
hemos creado un widget de estado completo. Eso es porque esta
pantalla pronto manejará datos
dinámicos como agregar
y actualizar tareas. Entonces tiene sentido prepararse
para eso desde el principio. Ahora volvamos
al punto principal. Y entonces aquí vamos
a importar esa pantalla de inicio. Digamos paquete, planificador
diario. Digamos pantallas,
pantalla de inicio, y digamos eso. En cuanto hagas esto,
verás que el error aquí se ha ido. Ahora ya podemos ejecutar la app. ir aquí y simplemente puedes
hacer click sobre este botón. Puedes ejecutarlo en un emulador de
Android, navegador o cualquier
plataforma que prefieras. Voy a ejecutarlo en Windows ya que es más rápido
para el desarrollo. Bien, así que
parece que has empezado. Así que vamos a cerrar esto y
vamos a alinear esto justo al lado de éste.
Y vamos a colapsar esto. Impresionante. La aplicación se está ejecutando, pero está completamente en blanco en este
momento, y eso se espera. Hasta el momento sólo hemos establecido
la estructura. En la siguiente lección,
comenzaremos a agregar los componentes reales de la interfaz de usuario como la barra de aplicaciones y el botón de acción
flotante, y ahí es donde la aplicación
comenzará a sentirse viva.
4. Cómo agregar AppBar y FAB: Impresionante. Ahora es el momento de comenzar a agregar algunos
componentes de interfaz de usuario a nuestra aplicación. Entonces dentro del punto punto de la pantalla de
inicio, tenemos este Entonces dentro de ese andamio, lo primero que
agregaremos es la app Entonces aquí, diremos app, app on, y estableceremos
el título a un costo. Voy a llamar a
esto un texto wechir. Y aquí podemos decir planificador de día. Entonces agreguemos un poco de color de
fondo. Ese es un tema de color de fondo de esquema de color de
punto, contenedor primario de punto. Después agregaremos el color de
primer plano. Eso va a ser el esquema de color
punto de
punto, punto en contenedor primario.
Y vamos a guardar eso. Ahora que tenemos la app,
sigamos adelante y agreguemos el botón de acción
flotante. Entonces diremos botón de
acción flotante, el
botón de acción flotante en pulsado, solo lo vamos
a dejar en blanco, y aquí agregaremos al niño. El niño va
a ser una const con un icono llamado icons dot add Vamos a guardar eso.
Ahora puedes ver, tenemos el botón de
acción flotante. Lo que podemos hacer es que
en realidad podemos cambiar
la forma de eso. Llamaremos a esto como borde
circular por lo que parece el redondeado. Bien, tenemos la barra de
aplicaciones en la parte superior, un
botón de acción flotante en la parte inferior La aplicación finalmente parece una aplicación real en lugar
de una pantalla en blanco. Ahora mismo, el botón de acción
flotante no hace nada,
y eso está bien. Cuando tocamos este botón, el objetivo es llevar al
usuario a una nueva pantalla. Esa pantalla será
nuestro anuncio, no pantalla. En la siguiente lección,
crearemos una pantalla
no personalizada donde el usuario
podrá elegir la fecha, seleccionar la hora, agregar un título y escribir algún
contenido de la nota. Ahí es donde nuestro panner diario
realmente comienza a tomar forma.
5. Crear la pantalla de agregar notas y la barra de navegación: Todo bien. Ahora, dentro de
la carpeta Pantallas, vamos a crear un nuevo archivo
y lo llamaremos como add note dot dt. Dentro de este archivo, vamos a importar un paquete llamado flutter, material dot dart y
agregaremos la clase llamada add Note extends
State full widget Y aquí va a
decir const, agrega nota, superdt key y voy a decir en, bien, crear estado Voy a tomar esta nota, pegarla por aquí y
deshacerme de estas cosas. Voy a llamar a esto como guión bajo,
agregar nota, pantalla. O en realidad agregar nota
estado. Y eso lo guardaré. Voy a tomar este
, y voy a decir clase, agregar no estado extiende,
estado, y vamos a llamar a
esto como Añadir tuerca. Y aquí, vamos a
ver bien, construir, va a
devolver un andamio Eso está bien. Ahora volvamos a
nuestro estado de pantalla de inicio. Así que sólo voy a
mover esto por aquí. Ya hemos llamado la barra de aplicaciones y al botón de
acción flotante aquí. Entonces, en lugar de
reescribir todo, reutilizaremos esta estructura Así que solo voy a copiar esto, volver a nuestra nota publicitaria luego a plantarla por aquí. Entonces aquí, vamos a llamar a esto
como añadir nota. Guarde eso. Y volvamos por aquí y voy a
copiar esta también. Y luego justo después de
ésta, sólo voy a pegar. Y lo que vamos a hacer ahora
es en lugar de este anuncio, lo
llamaremos como guardar. Ahora, volvamos
a nuestra pantalla de inicio. Y ahora conectemos nuestra pantalla de anuncios no a nuestra pantalla de inicio. Entonces lo que vamos a
hacer aquí es en prensa, vamos a decir
navegador punto perca y la ruta va a ser ruta página
material y el constructor va a ser pantalla Add Nod.
Y vamos a cerrar esto. Ahora si toco en éste, pueden
ver que vengo
a agregar Nodescreen Ahora puedes ver que tenemos un nuevo appr y un botón de guardar Ahora, dentro del botón de guardar, lo que vamos a hacer
es que vamos a decir navigator dot y
voy a guardar eso. Ahora bien, si le pego a este saveton, me llevarán de vuelta
a la pantalla de Hong En la siguiente lección, comenzaremos a construir la interfaz de usuario de entrada real. Dentro de esta pantalla de agregar nodo, agregaremos un botón de fecha y hora. Añadiremos campo de texto para el título del
nodo y el contenido del nodo. Ahí es donde la pantalla
empieza a verse bien.
6. Cómo crear la interfaz de usuario de agregar notas: Todo bien. Ahora es el momento
de agregar las cosas reales. Dentro de la pantalla add node, comenzaremos
construyendo primero la interfaz de usuario. Ahora nos centraremos solo
en el diseño. La lógica vendrá más tarde. Ahora, dentro del nodo add dot, dot, después de la app, vamos a agregar el body. Y aquí, agregaremos relleno. Voy a llamar a
esto como recuadro H. Voy a poner eso a 16. Y aquí, voy a decir niño. Y para el niño,
vamos a agregar una columna. Esa columna tenemos hijos. Y vamos a desplazarnos un poco
esto. En esos niños, lo
primero que vamos a tener es un botón elevado. Mantendremos esta tabla por
ahora y en el niño, agregaremos un campo de texto
llamado Pick date Un ventilador seguro. Ahora puedes ver que tenemos
el botón de escoger fecha. Entonces después de esto, lo que
vamos a hacer es añadir una
caja dimensionada con un ancho de ocho. Después agregaremos otro botón
elevado. Y para este, llamaremos a
un widget de texto y lo
llamaremos como tiempo de clic
y lo guardaremos. Se puede ver que vino
uno debajo del otro. Entonces queremos que uno
al lado del otro. Entonces lo que podemos hacer es que podemos tomar estos y voy a cortar eso. Voy a agregar en
un widget de fila aquí. Y dentro de eso, voy
a pegar mi botón elevado. Entonces ahora vendrán
uno al lado del otro. Entonces una vez
hecho eso, después de la fila, voy a agregar una
caja dimensionada con una altura de ocho. Y luego voy
a agregar un campo de texto. Ya ves, tenemos
el campo de texto aquí. Para este campo de texto,
vamos a establecer una decoración. Eso va a ser decoración
de entrada. Y agregaremos una
etiqueta para esto, y esa etiqueta
va a ser título. Y vamos a guardar eso. Ya
veo que ahí conseguimos el título. Agreguemos otra caja de tamaño. Sólo voy a copiar
esto, pegarlo por aquí. Y ahora agreguemos
otro campo de texto. Campo de texto S. Voy
a decir decoración, entrada decoración, y
pondremos la etiqueta. Como contenido. Yo digo que
puedo ver que tenemos esto. Pero queremos que el contenido
esté en plena altura. Entonces para esto, lo que
haremos es envolverlo con un widget expandido. Bien. Y aquí, vamos
a decir que se expande es cierto. Y entonces vamos a
decir Mx líneas es nulo. Entonces ahora se puede ver que lo
conseguimos en altura completa. No queremos esta
frontera en el fondo. Entonces para eso, lo que podemos
hacer es decir pólvora. Entrada S, el borde no es ninguno. Entonces ahora ese borde se ha ido, y queremos que esta etiqueta de
contenido se alinee con el título de aquí. Entonces lo que podemos hacer aquí es que podemos decir alinear etiqueta con pista. Vamos a poner eso en verdad. Guarde eso, y eso va
a volver a la cima. Bien. Ahora tenemos botones
para escoger fecha y hora. Tenemos rueda de texto para el título y una
rueda de texto más grande para el contenido. La interfaz de usuario es limpia, simple y ya muy utilizable. Ahora mismo, estos botones
no hacen nada, y eso está completamente bien. Estamos separando intencionalmente
la interfaz de usuario y la lógica, para que las cosas no se vuelvan confusas. En la siguiente lección, agregaremos la lógica para abrir
el seleccionador de fecha, abrir el recogedor de hora y manejar AM y PM correctamente. Y ahí es cuando la pantalla
se vuelve completamente interactiva.
7. Cómo agregar la funcionalidad de Selector de fechas: Bien. Ahora agreguemos algunas funcionalidades
a nuestro recogedor de fechas Primero, dentro de la
fecha del nodo de anuncios que está por aquí. Vamos a crear una variable para
almacenar la fecha seleccionada. Para eso, llamaremos a
esto como fecha y hora. A esto lo llamo como fecha seleccionada. Estamos usando la fecha y hora
anulable porque al principio,
no se selecciona ninguna fecha Ahora vamos a crear una función
para abrir el picker de fecha. Esta función
devolverá un vacío futuro. Eso simplemente significa que esta función
se ejecutará de forma asíncrona, y solo se completará
después de que el usuario escoja la fecha Ahora después de esta variable,
podemos decir vacío futuro. Y aquí vamos a decir escoger fecha. Y aquí vamos
a llamar a esto como un sumidero y vamos a crear
una variable llamada picked y va a
esperar show date picker Y déjame cerrar esto.
Ahora, lo primero que vamos a
necesitar es una fecha inicial. Voy a decir fecha inicial, y voy a establecer eso en
datetime punto ahora La fecha inicial
será la fecha de hoy. Y para la primera fecha, fijaremos eso en 2001, y para la última fecha, lo fijaremos en 2,100 Ahora aquí, necesitamos
crear la declaración FML. Diremos que yo escogí no
es igual a no. Entonces podemos establecer el estado. Llama a esto como fechas seleccionadas
es igual para que guardemos eso. Ahora, conectemos esta función
a nuestra función de fecha PIC. Si te desplazas hacia abajo,
puedes ver que tenemos este botón llamado
Fecha de cerdo y vamos a reemplazar esto con fecha de cerdo. Vamos a ahorrar. Ahora, si
tengo fecha CliconPig, ya pueden ver, obtenemos este
hermoso calendario material Alcón, bien. Así que aquí
no aparece nada. Y eso está completamente
bien porque ahora se almacena la fecha, pero aún no es visible. Mostremos la
fecha seleccionada dentro del botón. Para ello, lo que podemos hacer es que
podamos deshacernos de este texto aquí, y aquí diremos si la
fecha seleccionada es igual a nula, entonces podemos decir fecha de clavija. Si no es nulo, entonces tendremos que
mostrar algo, ¿verdad? Entonces aquí, vamos a mostrar la fecha seleccionada.
Y vamos a guardar eso. Y ahí tenemos la
fecha por defecto que seleccionamos. Ahora bien, si
miras este pre tejido, notarás que aparece
la fecha, pero es un formato largo y desordenado Eso no queremos. Solo
necesitamos día, mes, y aquí. Vamos a formatear eso manualmente. Entonces para ello, lo que
vamos a hacer es aquí, vamos a decir día D. Si digo eso,
se puede ver dice cuatro. Ahora agreguemos aquí
un separador. Y luego volveremos a llamar a lo
mismo que se selecciona fecha dt
mes. Guarde eso. Ya veo que tenemos uno
porque es enero. Entonces voy a poner
otro slash adelante, y después diremos
fecha seleccionada hecha aquí dice 41 2026 La fecha ahora es limpia, legible y exactamente
lo que queríamos. Aún no es muy bonito, y eso está bien. Puliremos la interfaz de usuario más tarde. Por ahora, lo importante
es que el picker de fechas funcione, la fecha seleccionada se almacena, y es visible en la interfaz En la siguiente lección,
agregaremos el recogedor de tiempo.
8. Cómo agregar la funcionalidad de Selección de tiempo: Bien. Ahora agreguemos la funcionalidad
para el seleccionador de fecha Primero, dentro del estado del nodo ad. Eso es por aquí. Crearemos una variable para
almacenar la fecha seleccionada. Y para ello, llamaremos a esto
como hora del día y configuraremos eso a la hora seleccionada, guárdala. Al igual que la fecha,
esto es nulo
porque no se
selecciona tiempo al principio Ahora vamos a crear la función
que abre el recogedor de tiempo. Entonces, después de la función de
fecha de selección aquí, vamos a decir vacío futuro, esa va a ser la hora de elegir. Y vamos a llamar a esto como un fregadero. Y aquí vamos a decir final
recogido es igual a un peso. Mostrar recogedor de tiempo. Y
déjame cerrar esto. Y aquí, la
hora inicial es la hora del día.NET. Y después de esto,
vamos a decir que
elegí no es igual a no. Entonces diremos set state Digamos que el tiempo seleccionado
es igual a elegido. Digamos eso. A continuación, conecta esta función al botón PiT, que tenemos por aquí, y llamaremos a este pick Time. Si hago clic en Pick time, puedes ver que tenemos
la hora aquí, y notarás
algo extraño. El pick time se ve un poco raro. Muestra tanto las 12 horas como
las 24 horas. Este problema suele ocurrir
en las plataformas de escritorio. En Android, funciona
bien por defecto. Arreglemos esto para que funcione
correctamente en todas las plataformas. Si te desplazas hacia atrás arriba, tenemos esta hora de selección y la
actualizaremos en esta. Entonces porque vamos a hacer es que
vamos a decir constructor aquí, vamos a devolver
una media query. Y para los datos,
vas a ver media query, d off, punto copy width. Entonces diremos, usar siempre el formato de
24 horas es
falso. Voy a ahorrar. Y ahora vamos a elegir el tiempo otra vez. Ahora el momento en que el pepinillo también se ve
correcto en Windows. A continuación, mostremos la
hora seleccionada dentro del botón. Vamos a hacer clic en K
y desplazarnos hacia abajo, y aquí tenemos la hora de elegir. Entonces aquí, diremos que el
tiempo seleccionado es igual a no. Entonces vamos a
decir hora de recogida o de lo contrario, vamos a decir hora seleccionada en
dólares. Y si digo eso, se
puede ver que solo dice hora del día y muestra
el formato de las 24 horas. Y aquí podemos hacer lo
mismo. Entonces lo que podemos hacer es que
podemos decir hora, eso lo guardo. Se puede ver que dice 14, entonces podemos dar una columna
aquí. Abramos otro. Diré tiempo seleccionado punto
minuto y vamos a guardar eso. Se puede ver que muestra el minuto. Y ahora necesitamos
exhibir lo de AMPM. Entonces aquí, solo
diremos la hora seleccionada. Pero ese periodo, nombre de punto. Guarde eso. Entonces ahora puedes
ver si es AM o PM. Ahora el tiempo seleccionado se
muestra correctamente, y todo funciona como
se esperaba. Pero fíjense algo. Solo para manejar la fecha y la hora, ya
estamos escribiendo mucha
lógica directamente dentro de la interfaz de usuario. Esto funciona, pero no está limpio, y no queremos código desordenado En la siguiente lección, crearemos un método auxiliar que
limpia la lógica,
mejore el formato y haga nuestro código de interfaz de usuario parezca
mucho más fácil de leer Ahí es donde nuestro código empieza
a verse profesional. A
9. Limpieza de la lógica de fecha y hora: Bien. Ahora es el momento de traer
a los ayudantes. Antes de comenzar, hay algo importante que
debes entender. Hasta el momento, hemos estado usando la
hora del día para almacenar el tiempo. Eso funciona bien para la interfaz de usuario, pero la hora del día es un
tipo de plutón y no un tiempo puro Y más tarde, cuando usemos Hive, no apoyará
la hora del día Entonces, en lugar de almacenar
la hora como hora del día, convertiremos en fecha ¿Por qué no hicimos
esto antes? Porque antes
solo estábamos construyendo la interfaz de usuario. Y ahora estamos preparando la app para platicar con la base de datos.
Esa es la diferencia. Entonces primero, vamos a
abrir el pub spect dot YAML. Y en las dependencias, vamos a agregar entel
vamos a desplazarnos Vamos a encontrarla. Eso está por
aquí, y vamos a guardar eso. Esto permitirá que el
aleteo arregle el paquete. A continuación, necesitamos
crear el ayudante. Así que dentro de la carpeta lib, vamos a crear
otra carpeta. Voy a llamar a
esto como ayudantes. Dentro de esto,
voy a crear un archivo llamado ayudante diurno. Punto punto. Y vamos a coapsees.
Entonces lo primero que haremos aquí es que vamos
a importar ese paquete. Eso es int. Ahora, lo
que necesitamos es una cadena. Bien, y ese va
a ser formato, fecha. Va a tomar en fecha y
hora como tipo para fecha, y luego vamos a
devolver un formato de fecha. Y el formato de fecha que
queremos devolver es día, mes,
seguido de un Ca y año. Y queremos formatear
eso con la fecha. Eso lo guardaré. Ahora vamos a
crear otro ayudante para el tiempo. Eso es tiempo de formato de cadena. Y en lugar de
tomarse la hora del día, va a tomar fecha y hora. A esto lo llamaremos tiempo. Y aquí vamos a crear una variable para obtener
la hora actual. Para ello, diremos
ahora fecha t ahora. Y luego obtendremos la fecha actual,
en realidad la hora actual. Y eso va a ser
fecha hora ahora punto aquí, ahora punto ahora punto mes, ahora punto
mes, ahora punto día. Y entonces aquí es donde cambian
las cosas. Queremos tiempo punto hora, y luego queremos
tiempo punto minuto. Bien. Y a continuación, tenemos
que devolver ese formato de fecha de devolución. Y el formato que queremos es nuestro minuto y esa cosa AMPM Y aquí, diremos formato, hora
actual vamos a guardar eso. Estas funciones de ayuda mantendrán nuestro código de interfaz de usuario limpio y legible. Ahora volvamos a agregar nodo punto dt y vamos
a importar ese ayudante. Entonces aquí, diremos paquete de
importación, planificador
diario, entonces tenemos
aquí ayudantes, ayudante diurno Ahora, sigamos adelante y
primero actualicemos la fecha del PIC. Así que todo lo que tienes que hacer es
llamar todo el camino hacia abajo, y puedes ver que esto
es el PiDate, ¿verdad Entonces lo que podemos hacer es que te puedas deshacer de todo esto. Bien, y no
necesitamos éste también. Podemos deshacernos de éste también. Y diremos formato fecha y
la fecha es fecha seleccionada. Guarda eso y mira eso. Ya tenemos esta hermosa cita. Y hagamos lo
mismo con el tiempo también. Ahora, antes de hacer eso, necesitamos cambiar el tipo de variable. Entonces esto va a
convertirse en fecha y hora. Ahora necesitamos actualizar también
la hora de recogida,
que está por aquí. Se puede ver que ya
tenemos un error. Entonces lo que vamos a hacer
aquí es que vamos a decir final ahora es igual a fecha hora punto N. Y aquí, hora
seleccionada será fecha hora, y eso va a
ser ahora punto año, ahora punto mes, ahora punto día, y luego escogió punto hora y cogió punto minuto
y guardar eso. Ahora, vamos a desplazarnos
hasta nuestro recogedor de tiempo aquí Voy a
deshacerme de éste. Y aquí diremos que el tiempo de cuatro
minutos es el tiempo seleccionado. Y digamos eso.
Otra vez, dice, la
hora del día no es un sub
tipo de datetime, ¿verdad? Entonces lo que podemos hacer aquí es que solo
podemos refrescar duro esto. Y ahora puedes dar click
sobre esta nueva nota. Escojamos la fecha. Escojamos la hora y miremos eso. Ahora bien, muestra la
hora correctamente. Genial. Ahora tenemos formato de fecha
limpio, formato de tiempo
limpio, tipos de
datos amigables con bases de datos y código de interfaz de usuario mucho más limpio. En la siguiente lección, tomaremos estos datos y los
almacenaremos dentro de un modelo. Ahí es donde todo
empieza a juntarse.
10. Creación del modelo de notas y validación: Bien. Ahora vamos a crear un modelo para definir cómo se almacenarán
nuestros datos. Vamos a abrir la carpeta de labios, y aquí vamos a crear
otra carpeta. Llamaremos a esto como modelo. En realidad van
a ser cargas de modo. Y dentro de esto,
vamos a crear un archivo llamado note dot dot. Ahora aquí, vamos a crear una clase. Nota llamada. Y dentro de eso, voy a decir cadena final. Y lo primero
que necesitamos es el título. Vamos a
crear otro. Esto también es una cadena, y lo llamaremos como contenido. A continuación, vamos a
crear otra variable, y esta va
a ser la fecha y hora. Y esa va a ser una cita. Vamos a crear otra variable. Esta también será fecha y
hora llamada hora. Ahora, vas a
crear un constructor, así que const note y dentro de eso, diremos que requieren
este título de perro Se requiere este contenido de punto, se requiere esta fecha de punto, se requiere este tiempo de punto.
Y vamos a guardar eso. Esta clase de nodo representa
una sola entrada de planificador. Cada nodo tiene un título, un contenido, una fecha y una hora. Ahora más adelante en la app, estaremos agrupando notas por fecha. Para eso, solo necesitamos la parte de
fecha sin el tiempo. Entonces agreguemos un getter. Entonces justo después de este constructor, diremos fecha hora,
obtener solo fecha. Voy a llamar a esto como
fecha hora S fecha punto aquí, fecha, punto, mes y fecha
punto día. Eso lo guardaré. Esto hace que la agrupación sea
mucho más fácil para después. Ahora, volvamos
para agregar ningún punto punto. En este punto,
ya tenemos fecha,
hora, campo de título
y campo de contenido. Pero aún no tenemos la
validación. Vamos a arreglar eso. Entonces, si te desplazas hacia abajo por aquí, lo que vas
a hacer es que
vamos a crear una función. Voy a llamar a esta
función como añadir nota. Y aquí vamos a decir que seleccioné
la fecha es igual a no. Entonces vamos a decir
es andamio mensajero, punto F muestra snack bar Va a contener una const
llamada Snack Br con un widget de texto y vamos a llamar a
esto ya que se requiere fecha, y eso es cerrar eso Así que vamos a devolver eso. Y luego agreguemos otro. Yo sólo voy a copiar esto, pegarlo por aquí,
y esta va a ser hora seleccionada. Simplemente cambiaremos la
fecha a la hora, guárdalo. En este momento, no podemos leer el
título y los valores del contenido. Entonces, sigamos adelante y
agreguemos esos controladores. Entonces aquí, justo después de
esta fecha hora, voy a decir controlador final de edición de
texto. Voy a llamar a esto como título. Pero y dijo eso también, controlador de edición de
texto. Y vamos a duplicar eso, y esto va a
convertirse en contenido de subrayado Digamos eso. Dado que los controladores tienen
memoria, debemos desecharlos. Entonces para eso, vamos
a decir bien, disponer, y luego vamos
a disponer título, punto,
disponer, y
punto de contenido, disponer decir eso. Ahora necesitamos actualizar
los vielos de texto. Entonces nos desplazamos hacia abajo, este
es nuestro primer campo de texto. Entonces aquí, todo lo que
tenemos que hacer es decir controlador es título de subrayado Y para el siguiente que es
controlador es subrayado
contenido. Vamos a guardar eso. Ahora, actualice la función del nodo de
anuncios. Si nos desplazamos todo el
camino hacia arriba, tienes esto. Sólo voy a copiar
esta página por aquí, y tenemos que
deshacernos de esta. Vamos a decir título,
el texto está vacío, y va a haber título. Y vamos a copiar eso
y pegarlo de nuevo, y esto ahora se va
a convertir en contenido. Y esto va a estar contento.
Vamos a guardar eso. Si toda la validación pasa, necesitamos crear una
nota para devolverla. Entonces para eso, lo que
vamos a hacer es aquí, diremos navigator dot pump. Bien. Ahora, para crear esa nota, todo lo que tengo que hacer es
escribir nota. Y mira aquí obtenemos esa
nota del modelo. Golpea a Ender. Y se puede ver
que llena los detalles. Entonces necesitamos agregar el título. Entonces ese es el texto del punto del título. Y para este, este es el texto de punto de
contenido, y para la fecha, se va a seleccionar la fecha, y por el tiempo, se va a seleccionar el tiempo y guardar eso. Ahora lo único
que necesita actualización es nuestro botón de acción flotante, que está por aquí. Entonces lo que vamos a hacer es deshacernos de éste, y lo agregaremos para agregar nota. Ahora, vamos a revisar
esto uno por uno. Si hago clic en guardar, puedo ver que dice que el
título es obligatorio porque la fecha y la hora ya
están seleccionadas. Así que vamos a rellenar los detalles. Voy a llamar a
esto como nodo uno. Vamos a golpear en guardar dice que se requiere
contenido. Entonces voy a decir el nodo uno. Contenido, guarda eso y nos
lleva a la pantalla de inicio. Bueno, estamos enviando
los datos con éxito, pero aún no los podemos ver. Eso es porque la pantalla de
inicio no sabe cómo mostrar esas notas En la siguiente lección, construiremos lógica de
la pantalla de inicio
para recibir notas, agruparlas por fecha y
mostrarlas en una lista limpia Ahí es donde todo
se junta.
11. Mostrar notas en la pantalla de inicio: Bien, ahora es el momento de
trabajar en nuestra pantalla de inicio. Lo primero que necesitamos es
un lugar donde guardar nuestras notas. Abra el punto de la pantalla de inicio y desplácese hasta el estado Pantalla
de inicio Y aquí, crearemos un
video llamado lista final. Y en esta lista vamos a tener un tipo. El tipo es el
tipo de nodo que creamos, y va a contener notas, y eso va a
estar vacío por ahora. Esta lista contendrá todos los nodos provenientes de
la pantalla de agregar nodos. Ahora, actualicemos el botón de acción
flotante para que pueda recibir los datos cuando volvamos de
la pantalla Agregar nodo. Entonces si nos desplazamos
todo el camino hacia abajo, se
puede ver aquí tenemos esto en prensa y aquí
va a decir un fregadero. Y voy a tomar
todo esto, cortar esto, y vamos a decir nota nueva final y vamos a establecer eso
para evitar y página esto. Y vamos a comprobarlo. Entonces si la nueva nota
no es igual a null, entonces podemos decir set State
underscore nodes dot add, vamos a agregar el nuevo nodo Vamos a guardar eso. Entonces, ¿qué está pasando aquí?
Abrimos la pantalla add node, esperamos a que
devuelva los datos, y si se devuelve el nodo, lo
agregamos a nuestra lista. Como queremos agrupar
los nodos por fecha, usaremos un paquete. Vamos a Pubspec punto YAML. Y aquí en las dependencias, vamos a agregar
otro paquete Vamos a llamar a esto como lista
agrupada y guardarla. Ahora, de vuelta en
la pantalla de inicio punto punto, agreguemos un cuerpo
a nuestro andamio Eso es por aquí,
vamos a decir cuerpo. Y diremos si las
notas dt están vacías, entonces vamos a
crear una const con un Wichet central que
tendrá
un hijo
con el texto Wichet que dice que no hay notas Bien. Ahora, si se agregan los nodos, vamos a mostrar
una lista agrupada. Y puedes ver que ya
toma algunas cosas, pero antes de eso,
necesitamos agregar el tipo. Entonces el tipo que queremos es nota, y queremos fecha y hora. Los elementos que
buscará son las notas. Y entonces queremos
agruparlo por fecha, ¿verdad? Entonces, ¿dónde se
encuentra esa fecha está dentro de las notas? Entonces aquí, vamos a decir
nota y luego vamos a decir, anotar esa fecha solamente. Ahora necesitamos
crear el grupo
constructor separador constructor separador va a tomar en un valor. El valor es fecha, y va a generar un relleno con un
borde y establecer los 16 y luego va a
tener un hijo con un texto, y ese texto es formato
fecha con la fecha. Vamos a guardar eso. Y por último, lo que necesitamos es un constructor de artículos. Y ese constructor de artículos
va a ser la nota. Y lo que podemos hacer aquí
es que en realidad podemos devolver el mosaico de la lista aquí. Y el estilo de lista por
ahora tiene un título con un widget de texto llamado note
dot title. Vamos a guardar eso. Y ahora antes de agregar más
detalles, probemos esto. Sigamos adelante y volvamos
a ejecutar la aplicación. Ahora vamos a crear una nota aquí. Seleccionemos la fecha, la hora. A esto lo llamamos nota uno. Y aquí dirá el contenido
del nodo uno. Y vamos a guardar eso. Y a ver, nos llegó la nota separada de
fecha. Perfecto. El agrupamiento funciona. Ahora hagamos que la
lista se vea mejor. Dentro del tejido de lista agrupada, puedes ver que tenemos
esta cosa de fecha, que en realidad es formatear. Entonces lo que podemos hacer es
aquí podemos decir estilo. Voy a llamar al estilo de texto establecer
el la fuente al peso de la
fuente W 500. Bien, entonces ahí va
a verse grande. Lo siguiente aquí en el azulejo, vamos a agregar
el color del azulejo. Entonces el color tiene
que ser un poco más claro para que pueda
funcionar fácilmente con el modo oscuro, también. Y para esto, lo que
vamos a hacer es por el color del azulejo, diremos delgado esquema de color de Dart off
dot, contenedor de superficie de punto. Y ya ves, ahí tenemos el color gris
claro. A continuación, agreguemos este subtítulo. Entonces diremos que el subtítulo
será un widget de texto. Y aquí eso va
a ser nota punto T. Ahora bien, el nodo punto tiempo
tiene que ser formateado. Entonces diremos tiempo de formato, eso es tiempo de punto de nodo. Se puede ver que vemos
el tiempo ahí. Hagámoslo un poco más pequeño. Entonces lo que podemos hacer
es aquí podemos decir estilo texto estilo, tamaño de teléfono. Voy a poner eso a 12. Entonces eso lo va a hacer
un poco más pequeño. Ahora agreguemos un botón de borrar. Después del subtítulo, diremos botón
de icono al final pulsado, vamos a
dejar eso por ahora Y para el icono, diremos icono,
iconos, punto, eliminar. Vamos a guardar eso. También tenemos el botón de borrar. Ahora, hagamos que esto sea viable. Entonces lo que podemos hacer aquí
es que podemos decir set date, y vamos a tomar
ese nodo dot remove y vamos a
quitar la nota. Y déjame costar esto. Vamos a probar eso. Voy
a dar click aquí Eliminar, y eso va a
quitar la nota. Y cuando
no hay nada ahí,
va a decir que todavía no hay notas. Genial. Ahora todo funciona. Ya podemos agregar nota, podemos eliminar una nota. Podemos agregar notas en diferentes fechas. Todo
funciona a la perfección. Sus notas ahora están
agrupadas por fecha, se muestran
limpiamente
y completamente infactoriales En la siguiente lección, construiremos la pantalla de edición de notas para que
los usuarios puedan actualizar
los nodos existentes.
12. Cómo editar notas reutilizando la pantalla de Agregar notas: Todo bien. Ahora vamos a trabajar en la parte de edición de nuestra
aplicación. La idea es simple. Cuando un usuario toca un nodo, queremos abrir la pantalla
Editar nodo. Pero antes de hacer eso, primero
necesitamos una pantalla de edición. Ahora, aquí está la
parte divertida. No necesitamos construir una nueva
pantalla desde cero. Ya tenemos una pantalla
add node, y hace casi
todo lo que necesitamos. Entonces todo lo que tenemos que hacer es, vamos a agregar Node punto, punto, y luego solo necesitamos
duplicar eso, y vamos a llamar a esto como
dit, note dot, dot. Eso lo guardaré. Ahora bien, si solo te
desplazas todo el camino hacia arriba, solo
necesitamos
actualizar algunas cosas. Entonces esa es esta va a ser editada. Nota. Bien. Y luego
nos llevaremos éste. Cambiaremos eso
a Editar estado del nodo, y lo mismo sucede aquí. Guarde eso. Ahora bien, si nos
desplazamos un poco hacia abajo, pueden
ver que tenemos este título. Voy a cambiar eso
a Edit node. Guarde eso. Y también, aquí estamos
agregando el nodo, ¿no? Entonces llamaremos a esto como editar. Nota. Ahora desplácese hasta
abajo, cambie esto para editar,
tenga en cuenta. Eso es. Ahora viene la parte más
importante. Cuando tocamos la nota, queremos que su contenido del título, fecha y hora se envíen desde la pantalla de inicio a
la pantalla de edición. Podemos hacer esto fácilmente
pasando la nota a través
del constructor. Para eso, si te
desplazas hasta aquí, lo que vas
a hacer es crear una variable con una nota tipo llamada nota. Bien. Y aquí, diremos que
requirió esta nota de punto. Ahora necesitamos rellenar previamente
la interfaz de usuario con los datos de nodo
existentes Entonces, dentro del estado del nodo de edición, lo que haremos aquí es
justo después de esto todo bien disponer a la derecha en su estado. Y aquí tenemos que
deshacernos de este comentario, y vamos a
tomar algunos detalles. Entonces tenemos el título aquí. El texto tendrá widget
punto nodo punto título. Entonces necesitamos el contenido, que es un texto, que tomará en Widget
punto n punto contenido. Lo siguiente que
necesitamos es la fecha seleccionada va a ser Widget
D sin fecha de punto. Y lo mismo para el momento también. Entonces diremos widget no
hacer tiempo de punto. Eso es. La pantalla de edición ahora muestra automáticamente
los datos existentes. Ahora, volvamos
a la pantalla de inicio. Y ahora, si te desplazas
hasta el mosaico de lista aquí, puedes ver que tenemos el trailing
y después del trailing, ese es el botón del icono, agreguemos un botón on tap. Entonces, de barril,
queremos ejecutar una función. Esa función va
a ser un sumidero y tendrá una variable
llamada nota actualizada. Y eso va a evitar
navegador punto perca Bien. Y va a tomar en la ruta de la página de material
con el constructor, y el constructor es editar nota. Y toma en el
nodo automáticamente, así que no tienes que
preocuparte por eso. Ahora tenemos que comprobar esto. Entonces diremos F
nota actualizada no es igual a null. Entonces vamos
a decir set state, y vamos a crear una
variable aquí llamada index, va a encontrar
el índice
de nodos de la nota que
será el índice. Y luego diremos notas, y vamos a
encontrar ese índice, y vamos a asignarlo
a nota actualizada. Y vamos a guardar eso.
Ahora vamos a probar la aplicación. Vayamos por aquí.
Como click en nuevo. Voy a escoger fecha.
Voy a escoger algo de tiempo. Voy a llamar a esto como
Nodo uno, Nodo uno, contenido. Como haga clic en guardar. Ya ves
que conseguimos esa nota uno, y agreguemos otra
fecha, en realidad. Entonces para fijar eso al día siguiente. El tiempo va a ser seis, y vamos a llamar a esto como nota dos. Nota dos contenidos. Y vamos a guardar
eso. Puedo ver que tenemos dos notas agrupadas por fecha. Y sólo para probarlo, vamos
a agregar otra fecha para hoy. Entonces vamos a agregar eso por aquí con un tiempo diferente ahora. Voy a llamar a
esto como nota tres. Nota tres. Contenido. Y vamos a guardar eso. Bien, es agrupar.
Ahora se puede ver, en realidad, podemos flotar dos Eso es porque
habilitamos la pestaña on. Ahora actualicemos la nota uno. Voy a llamar a esto como anticuado. Como C guardar se puede
ver que dice actualizado. Ahora vamos a actualizar el nodo tres, contenido. Diremos actualizado. Voy a cambiar la
fecha y hora en realidad a 6:00 P.M. Digamos que y
se puede ver que muestra 6:00 P.M. Está actualizado. Y también, puedes ver el
contenido actualizado aquí. Así como así, tenemos una aplicación totalmente funcional que puede agregar notas, editar nodos, eliminar notas y agruparlas por fecha. Esto completa la primera
parte de nuestra aplicación real. En la segunda parte,
pasaremos al
lado de la base de datos de las cosas. En la siguiente lección,
aprenderá a usar colmena para almacenar estos datos localmente
y hacerlos persistentes
13. Cómo integrar Hive y el tema de aplicación persistente: Bien, es hora de integrar
Hive en nuestro proyecto. H nos ayudará a almacenar datos localmente incluso después de
que se cierre la aplicación. Para agregar Hive, lo que podemos hacer es primero e ir
a PubSAK Y luego en las dependencias, primero
vamos a agregar Hive Bien. Y luego
vamos a agregar aleteo de
Hive y guardar Ahora ve punto principal dt. Y en realidad, voy a
cerrar todos estos archivos para que puedas ver mejor
y entender esto mejor. Bien, entonces dentro de
la tarta principal de Dot, ya que Hive necesita una inicialización
asincrónica, actualice la función principal Vamos a establecer
eso en asíncrono. Y lo que podemos hacer aquí
es justo después de éste, diremos widgets flutter
binding dot seguro inicializado Bien. Y luego usaremos una colmena
ingenio ahora en una colmena tipo, asegúrate de seleccionar
el aleteo de colmena Dt en ella, aleteo.
Digamos eso. Lo que esto hace es
asegurar que se inicialicen los
widgets de flutter Hive está listo antes de que comience
la aplicación. Ahora, antes de ejecutar la aplicación, abramos una caja colmena para
almacenar la configuración de la aplicación Así que justo después de esto,
vamos a decir espera, colmena punto caja abierta, y vamos a llamar a esta caja
configuración. Vamos a guardar eso. Ahora nuestro cuadro de configuración
está listo para usar. Ahora, necesitamos escuchar los cambios
de la colmena. Así que dentro de la Mapp, tendremos que actualizar
este widget todo construido Entonces lo que podemos hacer aquí es que vamos a
crear una variable. Voy a llamar a
esto como configuración Box. Y aquí, tomaremos esa
caja que creamos. Eso es colmena punto Bx y
el nombre de la caja es configuración. Guarde eso. ver que muestra un error
que está completamente bien. Ahora, en lugar de ejecutar directamente la aplicación de material por aquí, envolveremos con un generador de
valor listenable Esto permite que nuestra aplicación
se reconstruya automáticamente cuando cambian los datos de la
colmena Entonces lo que vamos a hacer es llevarnos toda
esta app de material y
vamos a cortar esto. Bien, no la borres, córtala. Ahora lo que podemos hacer es que podemos escribir en valor
listenable Builder Y aquí en este
valor listenable, vamos a tomar en la configuración de chispas y vamos a
poner eso en listenable Bien. Y aquí, el constructor va a
poner eso a éste. Entonces aquí, el valor es una caja
y el niño no es nada, así que simplemente vamos a
ignorar esa parte aquí, y aquí tenemos que
devolver algo. Entonces lo que vamos a hacer es
que vamos a volver ahora pega la app de material
que cortes antes. ¿Bien? Entonces ahora digamos esto. Ahora, estamos devolviendo la app de
material, ¿verdad? Antes de devolver
esa app de material, leamos un valor
de la colmena Así que dentro del constructor, que está por aquí,
vamos a crear una variable. Esa variable es final es oscura. Bien. Y cuando me sale la caja, esta es la misma caja
que agregamos por aquí. ¿Bien? Eso es box dot get, y vamos a conseguir un valor. Es toque. Ahora bien, esto no existe.
Lo estamos agregando. ¿Bien? Y el valor por
defecto va a ser falso. Bien. Ahora, necesitamos actualizar la aplicación de material para
admitir ambos temas, el tema claro y
el tema oscuro. Ahora, puedes ver aquí ya escribimos el tema de la luz, ¿verdad? Entonces ahora necesitamos
escribir el tema oscuro. Es decir, los datos utilizan
material tres es cierto. Entonces podemos decir que el esquema de color es esquema de color de semilla, digamos colores punto azul, y el brillo es
brillo punto oscuro. Bien. Ahora vamos
a establecer el modo de tema. Entonces el modo tema aquí,
vamos a comprobar. Es oscuro. Si es cierto, vamos a decir
el modo, no oscurezca. Si es falso,
vamos a decir el modo, no enciendas. Guarde eso. Ahora volvamos a ejecutar la aplicación. Así que volvamos a ejecutar esto por aquí. Puedo ver todavía muestra un error. Eso es porque esto es almacenar algunos datos extra
que no queremos. Entonces, en cambio, voy a iniciar la aplicación en ejecución y volver a ejecutar toda
esta aplicación nuevamente. Y ahora tenemos esta app. Entonces lo que podemos hacer es poner esto por aquí. Ahora, por defecto, la app a
default está establecida en falls. Entonces cae significa tema ligero, por lo que nos está mostrando
el tema de la luz, pero no vemos ningún
error en este momento. En la siguiente lección,
agregaremos un botón de alternar, para que los usuarios puedan cambiar entre tema
claro y tema oscuro y almacenaremos esa
preferencia en colmena
14. Cómo agregar una variante de tema persistente: Todo bien. Ahora, todo lo que necesitamos es un botón de palanca para cambiar entre el modo de luz
y el modo oscuro. Dado que nuestra lógica temática
ya vive en Hive, esta parte es en realidad
muy simple Ahora, a partir de aquí, tenemos que ir al punto de la página de
inicio y
desplazarnos hasta el final Y dentro de este
método de compilación o aquí, primero, necesitamos acceder
al cuadro de configuración y luego escuchar sus cambios. Entonces lo que vamos
a hacer aquí es que vamos a decir final, llamar a esto como cuadro de configuración. Eso va a ser Hive. Y vamos a conseguir esa caja llamada configuración como tiempo de cierre. Y ves
todo este andamio, vamos a tomar todo
este andamio Voy a cortar eso,
no borrar, sino cortarlo. Diré valor listenable
builder settings box punto listenable Y el constructor va
a ser una caja con niño. Y luego vamos a
devolver este andamio. Desplázate todo el camino hacia arriba. Bien, entonces este es el andamio al
que estamos regresando. Ahora antes de que
devolvamos esto, necesitamos verificar si existe
el modo oscuro. Entonces vamos a decir final es oscuro, y vamos a
decir box dot get, y estamos consiguiendo es oscuro. Y el valor predeterminado es false. Así que vamos a asegurarnos de
que este nombre sea el mismo
que el que establecemos aquí. ¿Bien? Entonces ese es el mismo nombre. Entonces ahora lo que tenemos que hacer es simplemente
crear un toggle. Entonces este es el botón. Bien, entonces necesitamos
agregar un botón. Entonces aquí, voy a
llamar a esto como acciones, y dentro de esto,
diremos botón icono. Que estará en blanco por ahora, y configuraremos el icono en
iconos para refrescar por ahora. Ahora, dentro de esta prensa
diremos box dot, pero para obtener un valor aquí primero. Ese es el As oscuro. Y el valor no es
ADRC y salvo eso. Ver, aquí no hay un estado establecido. Bien, entonces ahora si hago clic en esto, podemos cambiar entre el modo de
luz y el modo oscuro. Necesitamos cambiar el icono en
función de los datos
que tenemos aquí. Entonces lo que podemos hacer es que
podamos deshacernos de esto, y diremos si Etok es cierto, vamos a decir
icono punto Modo Luz, o podemos decir iconos
punto modo oscuro Guarda eso y ya puedes ver, tenemos ese
modo de luz, cosa de modo oscuro. Bien, entonces pongamos eso modo oscuro ahora
porque por defecto, se configuró en modo claro,
y vamos a detener la app. ¿Bien? Y volvamos a casa, y volvamos a
leer sobre eso otra vez. Ahora, como es persistente, tiene
que estar
ya en modo oscuro. Y ahí vamos. Está en modo oscuro. Eso significa que nuestros datos
son ahora persistentes. Entonces, ¿qué está pasando
aquí? Leemos el valor de Es dark de Hive Cuando se presiona el botón,
alternamos el valor. Hive notifica a los oyentes, la aplicación
Material reconstruye la aplicación Material se reconstruye automáticamente El tema cambia instantáneamente. Y como Hive almacena
el valor localmente, la elección del tema persiste incluso
después de reiniciar Y así,
ahora tenemos un switcher persistente de
ellos en nuestra app En la siguiente lección, pasaremos al verdadero poder de Hive Crearemos una caja compleja y comenzaremos a almacenar nuestras
notas de forma permanente.
15. Creación de adaptadores de colmena para el modelo de nota: Todo bien. Ahora es el momento
de las cosas reales. Hasta el momento hemos estado almacenando valores
simples en colmena, como bulones para tema Pero nuestro modelo de nodos contiene
múltiples tipos de datos. Sí, podríamos almacenar
todo como dinámico, pero ¿por qué hacer eso cuando ya
tenemos un modelo fuertemente
mecanografiado, verdad Para almacenar objetos personalizados en colmena, Flutter necesita comprender
su estructura. Para eso, utilizamos adaptadores de colmena. Ahora bien, lo que podemos hacer aquí
es en lugar de escribir el adaptador de colmena para nosotros mismos,
podemos generar eso. Vayamos a perp spec dot YML. Y en las dependencias dev, vamos a agregar Hive, generador de
subrayado Y luego agregaremos build
Runner. Y vamos a guardar eso. Ahora, ve que
obtendrá este error. El error básicamente dice que esta versión no es compatible
con el generador de colmena Por lo que tendremos que
pasar a 2.4 0.13. Sigamos adelante y hagamos
eso. Diré 2.4 0.13, y guardemos eso Sí. Y ahora ese código de error es cero así que no
tenemos ningún error. Vamos a cerrar esto. Ahora,
estos paquetes nos ayudan a generar el código
automáticamente para nuestro modelo. Entonces digamos esto. Y ahora dentro de nuestros modelos, no
tenemos punto, punto. Vamos a abrir eso.
Y en la parte superior, lo que vamos a hacer es
que vamos a importar colmena Voy a decir paquete de
importación, colmena. Eso es Hive dot dot. Entonces necesitaremos
generar un archivo. Ese archivo no será punto G
dot dart y guardemos eso. Ahora, necesitamos actualizar
el modelo de nota. Entonces, lo primero
que haremos es configurar una columna para el
nodo principal. Ese es éste. Entonces para esto, diremos en colmena y se puede ver aquí tenemos
algo llamado tipo colmena Voy a poner el tipo
colmena a cero. Recuerda, siempre
comienza desde cero. ¿Bien? Y después de eso, necesitamos establecer algunos campos. Entonces vamos a decir en colmena
y eso es un campo, y el índice es cero Voy a poner otro,
digamos en colmena El campo es uno, y esto va a ser en colmena El campo es dos. Y luego en colmena, el campo es tres y salvo eso Esto es lo que hace esto. En el tipo Hive le dice a colmena que
se trata de un objeto almacenable El ID de tipo
identifica este modelo de forma única. El campo Hive define cómo se almacena
cada campo. Una vez que estos están establecidos, Hive sabe exactamente cómo
serializar y
deserializar Ahora, tenemos que
abrir la terminal. Y a partir de aquí, voy a ir
al Símpter del sistema. Y entonces ahora tenemos que
ejecutar el corredor construido. Para ejecutar el corredor construido, diremos revolotear, pub, correr, construir, corredor,
construir, luego golpear Enter Ahora, una vez que termine, verás que el
error aquí se ha ido. Entonces ahora si abres esto, puedes ver que ahora se genera ese archivo. Ese es tu adaptador colmena. Ahora, necesitamos
registrar ese adaptador. Vamos al punto punto principal,
voy a cerrar esto. Y aquí en la parte superior, después del aleteo innit, lo que vamos a hacer
es que vamos a decir registro de puntos
colmena
y el adaptador que
queremos es nota adatress justo por aquí, y Y vamos a quitar
esta línea extra. Esto hace Hive. Oye,
cada vez que veas una nota, aquí te explicamos cómo manejarla. En este punto, Hive
entiende nuestro modelo de nota. El adaptador es generado
y registrado. Estamos listos para almacenar
los nodos correctamente. En la siguiente lección,
crearemos una caja colmena para notas. Almacena notas dentro de él y
cárgalas automáticamente
al inicio de la aplicación. Ahí es cuando la persistencia
se vuelve real.
16. Cómo guardar notas permanentemente con Hive: Bien. Ahora necesitamos agregar otra caja colmena esta
vez para nuestras notas Hagámoslo primero.
En tu punto principal justo después de la configuración, agregaremos otra espera. Llamaremos a esto como
colmena punto caja abierta, y llamaremos a
esta caja como nodos Ahora bien, esta no es una sola caja de
valores como la configuración, por lo que contiene múltiples valores. Entonces aquí tenemos que
especificar el tipo. Entonces el tipo aquí es nota.
Y vamos a guardar eso. Ahora hemos abierto
una caja llamada nodos, y almacena los
datos de tipo note. Ahora pasemos al dardo de la pantalla de
inicio, que está por aquí. Porque aquí es donde pasa
toda la magia. Ahora aquí en la parte superior, si nos desplazamos un poco hacia abajo, se
puede ver que tenemos
este método construido. Dentro de ese método construido, justo debajo del cuadro de configuración, agreguemos otro cuadro de notas
finales. Y eso va a
ser caja de puntos colmena. Y ahora éste
tiene un tipo llamado nota y éste se llama
notas. Y vamos a guardar eso. Si vemos ese error,
no se preocupe por ello. Ahora tenemos acceso a nuestras notas baox que ya contiene los datos
persistentes Ahora bien, esto es importante. Ya tenemos un cuerpo de trabajo. Entonces, en lugar de
reescribir todo, cortemos todo el
cuerpo y
lo mantengamos en una app de nodo o en
algún otro lugar seguro Lo traeremos de vuelta y
reemplazaremos las cosas una por una. Entonces si te desplazas hacia abajo,
puedes ver que tenemos este cuerpo. Voy a llevarme
todo este cuerpo hasta aquí. Bien, y yo sólo
voy a cortar eso. Y abriremos un bloc y voy a
pegarlo por aquí Mantengamos eso a salvo.
Sólo voy a minimizar eso. Ahora aquí, lo que
vamos a hacer es que vamos a llamar a un cuerpo,
y este cuerpo va a tener un constructor de números
sin valor El generador de números sin valor
que necesitamos en este momento son las notas BooXtt ¿Bien? Y el constructor
va a ser caja, y el niño va a ser, Oh, vamos a ignorar eso por ahora. Y aquí, diremos regreso. Y en realidad, en lugar de regresar, lo que podemos hacer es
que en realidad podemos hacer la declaración del INS aquí. Entonces diremos si la
caja que tenemos aquí está vacía, vamos a
sacar algo. Devolveremos un chat central, que tiene un niño llamado texto, y ese texto dirá que aún
no se han agregado notas. Y vamos a cerrar eso. Y ahora, si la caja está vacía, necesitaremos convertir esas notas
almacenadas en una lista. Para hacerlo justo después de
la declaración If, lo que vamos a hacer es que
vamos a decir definitiva. Diremos nodos.
La lista es igual a, digamos valores de punto px, lista de puntos dos. Entonces ahora todos los valores que
tenemos dentro que se
convertirán en una lista. Ahora vamos a traer de vuelta
la antigua
interfaz de usuario de lista agrupada que cortamos antes. Entonces lo que podemos hacer es
que solo podemos regresar, y ahora podemos llegar a nuestro bloc de notas y puedes ver
esta lista agrupada teje Yo sólo voy a tomar eso y luego sólo lo
pegaremos aquí. Eso lo guardaré. Y
vamos a minimizar esto. Eso lo mantendremos abierto
para que en
caso de que ocurra algún error,
podamos solucionarlo. Entonces estamos ahora mismo aquí en
el tejido de lista agrupada. Ahora reemplazaremos
los artículos uno por uno. Lo primero que
verás aquí son las notas. Vamos a sustituir
eso con lista de notas. Ahora necesitamos reemplazar
la lógica de eliminación. Si nos desplazamos hacia abajo, puedes
ver lo siguiente que
tenemos es el botón de icono,
que es la lógica de eliminar. Ya no necesitamos establecer estado, así que vamos a
deshacernos de eso. Primero necesitamos un
índice para eliminar. Entonces diremos notas
lista índice de nota. Bien. Y todo lo
que tenemos que hacer es conseguir que
la casilla elimine en el índice. Vamos a guardar eso. Ahora lo siguiente que
tenemos es la lógica de actualización. Entonces todo esto está bien, pero aquí es donde está sucediendo la actualización
real. Entonces me voy a
deshacer de esto y aquí vamos a decir índice final. Es igual a, diremos notas
lista índice de punto de nota. Y entonces todo lo que tenemos que hacer es
estacionar punto puesto en el índice, y el valor que queremos
poner es nota actualizada. Y guarda eso. Por último, ahora necesitamos
actualizar el botón de
acción flotante. Entonces aquí está la cosa. Entonces ya tenemos un
procedimiento de trabajo aquí, así que todo lo que tenemos que hacer es
reemplazar este estado establecido. Entonces, deshagámonos
de ese estado establecido. Y aquí diremos notas
cuadro punto agregarle nota. Eso es. Ahora, volvamos a ejecutar la aplicación y podrás ver que aquí
tenemos un pequeño problema Bien, entonces este
es inútil ahora, para que podamos deshacernos de eso. Y ahora en realidad podemos volver a
ejecutar la aplicación. Se puede ver que los
errores ya se han ido. Nuestro modo doc sigue encendido. Entonces ahora vamos a seguir adelante y
probarlo. Agreguemos una nota. Voy a escoger una fecha.
Voy a escoger una hora. Voy a llamar a
esto como Nodo uno, nodo uno, contenido,
y dar clic en Guardar. Vamos a agregarlo. Vamos a
hacer clic en este, y llamaremos a esto como
actualización o actualización TD. Simplemente haz clic en
guardar, está actualizado, y hagamos lo
mismo aquí. Digamos actualizado, guárdalo,
y eso también está actualizado. Ahora tenemos que verificar
si esto es persistente. Entonces voy a detener
la aplicación en ejecución y luego ejecutarla de nuevo. Bien, tenemos la app y
la mejor parte, la nota se queda. Eso quiere decir que es
persistente. Eso es. Hemos
reemplazado con éxito el estado de
memoria temporal con almacenamiento alto
persistente sin reescribir toda la interfaz Así es exactamente como se hacen los factores reales de
re. En la siguiente lección, agregaremos un simple botón de alternar donde podremos ordenar la lista de
antigua a última o viceversa.
17. Ordenación de notas con ASC y DESC Toggle: Bien. Hagamos de
esta nuestra lección final. Hasta ahora, nuestros nodos
están agrupados por fecha, y están ordenados en orden
descendente por defecto. Ahora mismo, sigamos adelante
y algo hardcore. Entonces, si te desplazas hacia abajo, lo siento, vamos a la pantalla de inicio. Y si te desplazas hacia abajo aquí, puedes ver que tenemos esta lista de
grupos Builder. Y aquí, voy
a agregar algo, llamar a esto como orden, y eso va a ser
agrupado orden de lista punto TSE Bien, entonces ahora
agreguemos algunos detalles. Bien, voy a escoger fecha. Voy a añadir alguna
otra fecha. Algún tiempo. Voy a llamar a esto como
nota a nota al contenido. Voy a salvar eso.
Voy a elegir otra fecha. A lo mejor
uno anterior del año pasado. ¿Bien? Y déjame
entrar en alguna cita aleatoria. Voy a llamar a esto como contenido del Nodo
tres. A ver. Bien, entonces ahora puedes ver que el
último está en la parte superior, el del medio está aquí
y el viejo está aquí. Entonces básicamente, es orden
descendente. Bien, entonces lo que queremos ahora
es tener un efecto toggle. ¿Bien? Entonces básicamente
lo que estamos haciendo, realidad
estamos
forzando en un orden. Demos el uso
del control. Vamos a añadir un botón de alternar en la parte superior para cambiar
entre el más nuevo, que es el orden descendente, el más antiguo, que es
el orden ascendente. Al igual que el tema, este persistente se guardará permanentemente. Reutilizaremos nuestras chispas de ajuste
existentes. Almacenaremos un bullin llamado
es DESC que es descendente. Si es verdad,
va a descender, si es falso,
va a ser ascendente Vamos a nuestra pantalla de inicio
punto punto punto aquí donde teníamos este valor listenable constructor vamos a agregar
otra final, y voy a llamar a
esto como Es DESC Voy a poner eso en box dot Get Voy a
poner esos dedos de los pies DESC Y por defecto se establecerá en true. Y vamos a guardar eso. Y ahora necesitamos agregar el botón tagle. Entonces aquí ya
tenemos las acciones. Entonces justo antes de esto, voy a agregar otro, llamar a esto como botón de icono. Y dejaremos esto como
sea ahora mismo, y pondremos el icono
en iconos puntean ARR hacia arriba Vamos a guardar eso. Bien, para
que veas que tenemos esto. Ahora dentro de esto, lo que
podemos hacer es que podemos decir bolsa DP y vamos
a llevar Es DESC Y el valor,
sea cual sea el valor que tengamos para es DESC, vamos a ir simplemente en
dirección opuesta a esa Y aquí, lo que podemos hacer
ahora es que podemos fijarlo. Entonces aquí podemos decir que es cierto DESC. Vamos a decir Iconos
Dt, flecha, hacia arriba. De lo contrario, en realidad, esto va
a ser como flecha hacia abajo. De lo contrario, se pueden decir
iconos, punto, flechas. Hacia arriba, y vamos a guardar eso. Todo bien. La nieve se puede
ver ya está tomada de nueva a vieja. ¿Bien? Entonces, si hago clic en éste, va a pasar
de viejo a nuevo. Pero no pasó nada
cuando hago clic en esto. Sólo sucedió lo de la palanca,
nada cambió aquí. Para cambiar esto, podemos hacer uso de éste dentro de nuestro valioso
constructor de aquí Para que veas que
tenemos esta, ¿verdad? Entonces lo que podemos hacer es
simplemente cortar esto y podemos decir Es DESC, entonces vamos
a poner éste Si no, vamos
a poner ascendente. Eso lo guardo. Ahora cambia. Entonces, si hago clic en esto, puedes
ver todos los turnos del pedido. Con este toque final, tu app ahora puede agregar
notas, editar nodos, eliminar nodos, agrupar
nodos por fecha, ordenar notas en ambos sentidos,
persistir todo localmente. Recuerda
las preferencias del usuario, y esta es una aplicación completa de flutter
del mundo real
18. 17 Resumen y proyecto de clase: Enhorabuena.
Acabas de cruzar la línea final y crear una aplicación de planificador diario
persistente completamente funcional usando flutter y Hive A lo largo de esta clase, no solo construimos una interfaz
bonita. Implementamos una solución de base de datos
del mundo real. Haber dominado la creación de adaptadores de tipo
personalizados, manejo de
operaciones de multitudes y la construcción un tema persistente que
sigue las preferencias del usuario Estos son los tipos exactos de habilidades
fundamentales como administrar almacenamiento
estatal y permanente, que se traspasarán a cada proyecto de
desarrollo móvil profesional que toque de aquí en adelante. Tómate un momento para ver
lo que has creado. Ahora tienes una
app en funcionamiento que vive en tu dispositivo y recuerda
lo que le dices. Ese es un gran hito en
su viaje de desarrollo. Ahora, para tu proyecto de clase, quiero que tomes el código
que hemos escrito y lo
hagas tuyo. Complete la aplicación asegurándose de que todos los adaptadores de colmena estén registrados y la
lógica de clasificación sea completamente funcional Una vez que esté satisfecho con ella, tome una captura de pantalla o una captura rápida de pantalla de
su aplicación en acción, especialmente
mostrando el toggle de tema o una
lista bien organizada de notas, y cárguela a la galería del
proyecto a continuación. Ver tu trabajo es la
mejor parte de la enseñanza, y ayuda a construir más
proyectos como este. Soy Flosense y ha sido un verdadero placer
guiarte a través de esta construcción Si encontraste útil esta clase, por favor déjala una reseña. Realmente me ayuda a seguir
creando estas guías para ti. Si quieres mantenerte actualizado sobre mis últimas clases y
nuevos grifos más planos, asegúrate de
seguirme en Skillshare Hasta entonces, sigue codificando, sigue construyendo, y te
veré en la siguiente clase.
Flutter Sensei, Teaching Flutter from Scratch
