Transcripciones
1. Lo que aprenderás y lo que construirás: Oye, ahí. Yo soy el sentido del aleteo Y en esta clase,
vamos a atrevir algo súper divertido
e increíblemente útil, un
diseño completo de aleteo desde cero Sin configuración complicada,
sin teoría abrumadora, solo
pasos prácticos y limpios
que te enamorarán de
construir hermosas UI En esta clase,
aprenderás a configurar tu
proyecto más plano de la manera correcta,
cómo usar relleno, filas y columnas para estructurar
tu diseño como un profesional, cómo usar expandido para diseño
receptivo que
se ajuste a cualquier pantalla Cómo crear widgets
reutilizables modulares como un tablero c, cómo agregar un área de contenido en una barra de navegación inferior para
darle a tu diseño
una sensación real de aplicación. Por último, cómo hacer que
toda tu interfaz de usuario les sea adaptador. Cambia de color dinámicamente
con una sola ramita. Al final de esta clase, habrá construido completamente un diseño de tablero de
aleteo completamente funcional Puedes personalizar para cualquier
idea portfolio dashboards, paneles de
administración,
herramientas personales, cualquier cosa que quieras Su proyecto de clase será
construir su propia versión
de este diseño, elegir su propio tema de color, reemplazar el icono y el
texto para que sea único. Comparte una captura de pantalla
o grabación de pantalla de tu panel final en
la sección del proyecto de clase. No te preocupes
si eres principiante. Te guiaré paso a paso
como debería hacerlo un sensor real. Agarra tu coditor,
estira esos dedos. Construyamos juntos algo
hermoso. Te veo en
la primera lección. ¿A qué
esperas? Empecemos.
2. Crear el proyecto de práctica de diseño: Todo bien. Empecemos. Lo primero que tenemos que hacer es crear un nuevo proyecto de flutter Abramos nuestra terminal y naveguemos hasta la carpeta donde quieras
crear tu proyecto. Voy a navegar hasta mi escritorio y por dentro que
tengo proyectos de aleteo Dentro de eso, ya puedes
crear tu proyecto. Aletear, crear,
maquetar, practicar. Esto generará un
nuevo proyecto de inundación para nosotros. A continuación, abramos el proyecto
en código VS escribiendo CD, punto de código de
Layout Practice. Ahora que está abierto, vamos a
cerrar la terminal. Ahora en el código VS, vayamos a la carpeta de labios
y luego abramos el dardo de punto principal. Verás un montón de código
predeterminado dentro. Limpiemos todo
y comencemos de nuevo. Bonito. Ahora tenemos un lienzo
limpio. Vamos a configurar la estructura
básica. Empezaremos con importación,
paquete, aleteo, dardo de punto de
material Entonces vamos
a decir vacío, principal. Entonces podemos decir run,
const, layout Practice. A continuación, crearemos nuestra clase de práctica de
maquetación. Entonces decimos clase, práctica de
diseño, se extiende widget sin estado Y dentro de eso vamos a decir const, práctica de maquetación Entonces vamos a
decir super dardo key. Vamos a escribir todos la compilación. Voy a deshacerme
de todas las cosas que tengo dentro de esto. Entonces podremos devolver el material
App. Vamos a guardar eso. Bien, ahora que tenemos
nuestra estructura básica, hagámosla más completa
agregando un título, girando el banner de depuración y configurando el tema
y la pantalla de inicio Para eso, necesitamos meternos
dentro de la App material, y se puede ver que sí
escribí por aquí. Esta va a ser L.
Esa es la práctica de maquetación. Asegúrate de que sea el
mismo nombre que éste. Sí, ahora eso es perfecto. Ahora podemos decir título
y podemos establecer el título a la práctica de maquetación. Entonces podemos establecer el banner de
depuración en falls. Entonces podemos usar un tema. Yo les diré datos. Dentro de esto diremos
usar material tres verdadero entonces podemos decir semilla esquema de color semillas
agregan eso a los colores TO. Vamos a guardar eso. Después de esto, vamos a
configurar una pantalla de inicio. Decir home, decir const, entonces podemos decir
layout pantalla de inicio Y ahí vamos. Hemos
configurado nuestra envoltura de inundación base, agregado un tema y declarado
la pantalla de inicio de diseño, que será el corazón
de la práctica de diseño. En la siguiente lección,
vamos a construir esa
pantalla de inicio paso a paso.
3. Construir la pantalla de inicio para la disposición: Todo bien. Ahora que hemos configurado la base de nuestro proyecto, es el momento de construir
nuestra pantalla de inicio. Ahora, en lugar de escribir
todo dentro de main dot dart, vamos a crear la
pantalla de inicio en un archivo separado. ¿Por qué? Porque nos ayuda a mantener
nuestro código limpio, organizado y fácil de mantener, lo cual es un muy buen hábito medida que tu proyecto crece. Hagamos esto paso a paso. Dentro de la carpeta de labios aquí, vamos a crear una carpeta
llamada pantallas. Y dentro de esa carpeta de pantalla, vas a
crear un archivo llamado layout underscore home,
Underscore screen Ahora que tenemos nuestro archivo,
escribamos algún código. Lo primero que tenemos que hacer es importar la biblioteca de
materiales de flutter Diremos paquete de importación, aleteo, material punto oscuro No necesitamos escribir
la función principal ni volver a llamar al Runap aquí. Ya lo hemos hecho en el archivo principal punto oscuro,
y eso es todo lo que necesitamos. Aquí, solo definiremos la clase de pantalla de inicio de
diseño. Para eso, diremos
clase y puedes sostener la barra de control y espaciadora y puedes ver el
tema de la clase mostrar aquí. Ahora puedes decir aquí se extiende sin estado, que dentro de eso, vamos a decir CST,
layout home screen, entonces podemos decir super punto K. Aquí
sobrescribimos el Vamos a deshacernos de
estas cosas y luego vamos a
devolver un andamio Vamos a guardar eso. Vea cómo
usamos andamios directamente Eso es porque la
aplicación de material ya está envuelta alrededor de esto en
el archivo de dardos de puntos principal. No necesitamos llamar a la aplicación de
material dos veces. El andamio aquí actúa como
el cuerpo de la pantalla, mientras que la aplicación de material
en el dardo principal es el contenedor que lo sostiene A continuación, importemos esta pantalla
en nuestro archivo principal dot dart para que la
cosa roja swiggi de aquí desaparezca Para ello, puedes ir a
tu punto principal archivo Tart y aquí puedes decir importar, puedes decir paquete,
y
puedes ver el
nombre del paquete aquí es la práctica de diseño, y aquí tenemos pantallas, y luego aquí tenemos el
layout home screen dot Tt file Aquí verás que el
subrayado rojo se ha ido. Como ya
devolvimos el andamio, ahora
podemos ejecutar esta
app y probarla Voy a ejecutar esto como una aplicación para Windows, pero puedes usar la
plataforma que prefieras. Android, IUS web o escritorio.
Sigamos adelante y ejecutemos esto. Voy a elegir Windows, y ahí está una bonita pantalla
limpia en blanco. Permítanme alinear esto al lado nuestro editor de código para que
podamos entenderlo fácilmente. Se puede ver el
diseño y el código. Ahora voy a esconder esto
y cerremos esto. Está vacío porque no
hemos agregado nada dentro de este andamio,
pero no se preocupe Eso es exactamente lo que vamos a construir en las
próximas lecciones. En la siguiente lección,
comenzaremos a estructurar el diseño dentro de
la pantalla de inicio y darle vida.
4. Cómo añadir espacio adicional en widgets: Muy bien. Ahora que nuestra
aplicación está en funcionamiento, comienza
a agregarle
poca estructura introduciendo una appa. Así que vamos a ir a nuestra pantalla de inicio de
diseño, y en sien scam food, aquí, vamos
a agregar en una appa Entonces diremos app app y aquí, agregaremos en el título, y llamaremos al
título un chat de texto, y llamaremos a esto
como práctica de diseño. Y luego vamos a
agregar un color de fondo. Diré equipo punto de esquema de
color de punto, punto primario. Después vamos a agregar el color de
primer plano como ellos esquema de color de
punto punto,
punto, en primario Vamos a guardar eso. Deberías
ver la barra de aplicaciones aquí arriba. Bastante simple. Ahora es el momento de trabajar en el
cuerpo de nuestro layout. Pero antes de escribir
más código, quiero que le echen un
vistazo a esta imagen. Cuando añadimos relleno, lo que sucede es esto. Tu contenido se mueve hacia adentro, creando espacio extra a su alrededor,
pero aún dentro del elemento Piense en ello como su contenido sentado cómodamente
dentro de un cojín suave. Entendamos esto
con un ejemplo sencillo. Volvamos a nuestro código. Ahora mismo, si escribo cuerpo, entonces agreguemos en un texto que llamaremos a esto como hola mundo. Y vamos a guardar eso.
Notarás que el texto se pega justo
al borde de la pantalla. Eso no es muy bonito, ¿
verdad? Pero arreglemos eso. No necesitamos eliminar
el widget de texto. En su lugar, podemos simplemente
hacer clic derecho en él y luego hacer clic en Refactorar y luego elegir
envolver con relleno. ¿Ves eso? Nuestro widget de texto ahora está envuelto
dentro del widget de relleno. La línea aquí, borde insertado
todo agrega igual
relleno en todos los lados, arriba, abajo, izquierda y derecha Ahora cambiemos eso a 20. Ahora es seguro. Y
digamos esta vista previa, el texto se desplaza por dentro dejando un
espacio limpio y equilibrado a su alrededor. Así es exactamente como funciona el
relleno. No mueve el
contenedor hacia afuera, empuja el contenido hacia adentro, haciendo que todo se vea más
estructurado y transpirable En la siguiente lección,
exploraremos filas y columnas y veremos cómo estructurar varios
widgets juntos. Pero por ahora, solo
juega con los valores de relleno y ponte
cómodo con este concepto. Lo usarás mucho
en froterayout más tarde.
5. Cómo entender las filas y columnas: Todo bien. Ahora que
sabemos cómo funciona el relleno, vamos a darle un
paso más allá y entender filas y
columnas en aleteo Antes de tocar el código, quiero que
mires esta imagen. Aquí podemos ver que
tenemos tres cartas
colocadas una al lado de la otra. Eso es porque
están dentro de una
fila y Row coloca a sus hijos
horizontalmente uno al lado del otro. Pero fíjese en la tarjeta inferior. Está sentado debajo de la fila. Eso sucede porque
la fila con sus tres cartas verticales en la parte inferior de la
tarjeta se envuelven juntas dentro de una
columna y la columna colocan a sus hijos verticalmente,
uno debajo del otro. Esa es básicamente la superpotencia de filas y columnas en plano Solo recuerda esta disposición
horizontal de filas ,
columnas disposición vertical. Vamos a probar eso en código. Ahora mismo, tu cuerpo se ve
algo así. Tenemos un relleno, y luego tienes un niño y
luego un widget de texto. Envolvamos el
widget de texto en una columna. Haga clic derecho en el texto, y haga clic en refactorial Entonces verás wrap con columna y
apenas da click sobre eso. Esto nos da hijos de
columna hijo, y luego hay widget de texto. Ahora, si agregamos más widgets
dentro de los niños, aparecerán uno
debajo del otro. Así es como funciona la columna. Pero para este texto en particular, realidad
quería poner en fila, para poder colocar otros
elementos al lado de él más tarde. Vamos a refacturar el texto
y envolverlo con una cuerda. Aquí voy a hacer click
derecho refactorial, y luego diremos
envolverlo con cuerda Ahora, como está dentro de la fila, cualquier otra cosa que agreguemos aquí, nos sentaremos al lado del
texto horizontalmente. Hagamos que el texto se vea un poco más agradable, como un encabezado
adecuado Entonces, si digo esto,
verás que aquí no pasa ningún
cambio. Así que sigamos adelante
y estiloquemos esto. Aquí se puede decir estilo coma. Entonces voy a decir textil,
S peso de la fuente. Dije, peso de la fuente, ese cuenco. Eso lo guardaré. Después de esto, vamos
a guardar el tamaño de fuente. Voy a ponerle eso a 16. Entonces se puede decir que el color es los colores hacen negro,
y eso es guardar. Entonces ahora se puede ver
que el texto está negrita y así es como se ve. Ahora, creo que esto es demasiado atrevido. Voy a cambiar
esto a alrededor de W 500. Eso va a hacer que
sea un poco más ligero. Ahora se puede ver que el
texto en realidad aparece en el estilo negrita y está listo para más
que unirse a él. En la siguiente lección, agregaremos otra fila debajo de esta
y dentro de ella, pegaremos varias tarjetas para construir el diseño
paso a paso. Las filas y columnas son como
el esqueleto de tu interfaz de usuario. Una vez que entiendas estos dos, podrás dar forma a tu
pantalla como quieras.
6. Agregar varios elementos en una fila con la herramienta Expandida: Bien. Ahora que hemos aprendido cómo funcionan las filas
y columnas, es el momento de hacer nuestro layout
un poco más interesante. Vamos a agregar otra
fila dentro de nuestra columna, y esta vez, colocaremos
varios elementos dentro de ella. Dentro de tu código, justo
debajo de la primera fila, que es esta,
agreguemos otra fila. Vamos a guardarlo.
Ahora, vamos a llenarlo con algunos widgets de marcador de posición
para ver cómo se comporta Por ahora, solo
usaré el widget de texto. Entonces dentro de la fila, podemos decir niños. Y luego dentro de eso, podemos agregar en widgets de texto. Llamaremos a esto como tarjeta uno. Tarjeta dos y tarjeta
tres. Vamos a guardar eso. Aquí en la vista previa, se
puede ver que hay tres textos que aparecen uno
al lado del otro, exactamente cómo funciona la fila. Pero se ve un poco desordenado. Todo está
agrupado a
la izquierda y el
espaciado no es igual Quiero que cada uno de estos artículos ocupe el mismo
espacio dentro de la fila. Para ello, podemos envolver cada widget de texto con algo
llamado widget de expansión. El widget de expansión le dice a
su hijo que estire y ocupe todo el espacio
horizontal disponible por igual. Actualicemos nuestro código.
Vamos al texto aquí y déjame desplazarme un poco
esto. Y puede hacer clic derecho aquí, y diremos refactorial Entonces vamos a
decir wrap width expand. Si guardo, se puede ver que tomó mucho espacio y nosotros hacemos
lo mismo por éste, refactorial, rap width expandido Entonces otra vez, el refactor, el ancho del
rap se expandió. Vamos a salvar,
ahora eso se ve mejor. Cada texto ahora comparte el ancho
disponible por igual, creando un diseño limpio y agradable. Por defecto, el texto dentro del widget expandido
se alinea a la izquierda, razón por la
cual aparecen en el lado izquierdo de sus
respectivos espacios. Y así, hemos construido la estructura
para nuestras tarjetas. En la siguiente lección,
reemplazaremos estos widgets de texto con
los widgets de tarjetas adecuados, dando a nuestro diseño un aspecto más
pulido y profesional.
7. Reemplazo de texto con tarjeta de regalo: Bien, es hora de subir
de nivel las cosas. Hemos estado usando el widget de
texto simple hasta ahora. Pero vamos a reemplazarlos algo más limpio
y estructurado. Ahí es donde entran las tarjetas. Antes de hacer eso, vamos a darle a nuestro diseño un poco de
espacio para respirar entre las filas. Justo sobre la segunda fila aquí. Vamos a agregar en una caja de tamaño A. Voy a establecer la
altura en 20. Guarde eso. Esto solo agrega un
espacio vertical de 20 píxeles, haciendo que nuestro diseño se sienta más
abierto y menos estrecho Reemplacemos el primer
widget de texto con un widget de tarjeta. Con eso, lo que podemos hacer
es simplemente quitar esto y luego podemos decir tarjeta, y esta vez, voy a usar la versión llena de la tarjeta. Hago clic en caja fuerte. Observe ese constructor lleno de
puntos, eso simplemente significa que la tarjeta
tendrá un color de fondo, que podremos
personalizar fácilmente más adelante. Pero una tarjeta puede contener
múltiples capas en su interior, iconos de
relleno,
texto, incluso botones. Construyamos completamente la
primera tarjeta. Dentro de esto,
lo primero que voy a hacer es agregar
una elevación a cero. Y luego voy a establecer
el color a colores punto T, y voy a establecer
eso en 100, salvo eso. Después de esto,
vas a agregar un gráfico. Aquí es donde las cosas
comenzarán a aparecer. Vamos a agregar un padding
y vamos a decir edge y le pondré yo voy a
poner el padding a 15. Guarde eso. Ahora ves
esa tarjeta en la vista previa. Desplázate un poco para
que podamos ver el código. Ahora, después de este relleno,
agreguemos una coma. Entonces, si presionas
Control y barra espaciadora, puedes ver lo siguiente que
tenemos que hacer es agregar un niño. Aquí vamos a centrar alinear todo dentro de ese centro, vamos a agregar
otro niño, que va a sostener una columna. En esta columna, quiero que la alineación
del eje principal esté en el centro. Esta columna tendrá hijos, y los primeros hijos
va a ser un icono. Vamos a establecer el icono
en iconos punto Persona. Bien. Y si digo eso, deberías ver ese ícono de
persona ahí. Y para este icono, justo después de la persona, voy a establecer una talla. Voy a establecer el tamaño en
30. Digamos eso otra vez. Puedo ver que se hizo más grande. Y entonces en realidad podemos
establecer el color aquí. Entonces el color sería el esquema de color de tema fuera de punto. La primaria. Guarde eso, y verá que conseguimos que el icono de
la persona sea de un color. Ahora bien, esto es sólo el icono. Después del icono,
vamos a agregar un costo, y luego agregaremos una caja de tamaño. Voy a establecer la
altura en ocho píxeles. Y luego
agregaremos un widget de texto, que diría perfil. Y luego podemos darle estilo con tema punto de tema de texto. Y eso llevará un título
Pequeño. Vamos a guardar eso. Ahora puedes ver cómo se
ve
nuestra tarjeta de perfil dentro del tablero. Vamos a descomponer eso rápidamente. Aquí, lo primero que
tenemos es tarjeta llena de punto. Esto nos da una simple tarjeta
llena con la tarjeta de
fondo. Después agregamos un relleno. Esto crea un espacio
dentro de la tarjeta para que nuestro contenido en el interior no
quede atascado en los bordes. Entonces dentro de eso,
dimos una columna. Esto etiqueta el icono
y el texto verticalmente. Si notas aquí,
también proporcionamos un centro. Esto mantiene todo
muy bien centrado. Entonces aquí dimos un costo de caja de
tamaño de ocho píxeles. Esto agrega un poco de espacio para
respirar entre el icono y el texto. Cuando digas esto, verás una tarjeta de perfil limpia centrada. Eso se ve muy
bien, ¿no? Ahora, por supuesto,
podríamos copiar pegar esta misma tarjeta
para las otras dos, pero esa no es la forma más
elegante de construir diseños. En lugar de repetir
esta gran cantidad de código una y otra vez, podemos hacer que este sea modular Crearemos un archivo
widget separado para nuestra tarjeta y luego la llamaremos con
diferentes parámetros como icono, texto y color. De esa manera, nuestro código se mantiene
limpio y escalable. Eso lo haremos exactamente
en la siguiente lección.
8. Hacer que la tarjeta sea modular: Muy bien. Ahora que hemos
construido nuestra primera tarjeta, hagámosla
modular. ¿Por qué modular? Porque en lugar de copiar y pegar la misma tarjeta una
y otra vez, podemos crear un widget limpio y simplemente reutilizarlo
con diferentes valores, títulos, iconos, colores,
cualquier cosa que quieras Esto mantiene nuestro código hermoso,
organizado y escalable. Empecemos configurando la estructura de
carpetas para eso. Así que vamos a abrir nuestra estructura de
carpetas aquí, y dentro del laboratorio, voy a crear una carpeta
aquí y vamos a llamar a esto como widgets de subrayado del tablero Dentro de esto, vamos
a crear un archivo llamado dashboard underscore card dart Ahora, dentro de este archivo, primero
vamos a construir la
estructura básica de nuestra tarjeta Widget. Así que aquí, voy a decir import,
package, shutter material, luego diremos class, dashboard card extiende
apátrida Widget Dentro de esto diremos Cast, luego diremos tarjeta de tablero, llave
superdt entonces voy a
decir en absoluto bien Y luego llamaremos a una devolución. Llamaremos a esto como punto
de tarjeta archivado. Guardar. Genial. Ahora vamos a traer el código de
la tarjeta que
construimos anteriormente y
pegarlo dentro de este widget. Así que vayamos al punto de la pantalla de
inicio de diseño y puedes ver el
widget de la tarjeta aquí mismo Entonces, si haces clic aquí, puedes ver que esta es nuestra tarjeta completa. Así que toma todo
ese código, córtalo, luego ve a tu tarjeta de tablero, y luego aquí,
vamos a
reemplazarlo . Déjalo a salvo. Ahora bien, esto funciona,
pero aún no es dinámico. Ahora mismo, todo
está codificado duro. Hagamos que este widget personalizable agregando
algunas variables. Empezaremos declarándolos dentro de la clase
que está por aquí Lo primero que vamos a
hacer es decir tarjeta de color
final color BG color. Aquí, el color es
en realidad el tipo, y final significa que no
podremos personalizar
esa variable más adelante. Entonces, a continuación vamos
a decir final. Necesitamos un dato de icono, que en realidad es un tipo, y creamos una
variable llamada icon. Entonces creamos otra final, usamos una cadena, que
va a ser un título. Ahora, tenemos que agregar eso
a nuestro constructor. Entonces aquí, diremos que se requiere este color de
fondo de tarjeta de puntos. Por lo que se requería este icono de punto. S requirió este
título de punto, vamos a guardar eso. Entonces, esto es lo que hace cada
variable. Tarjeta de color grande que va a controlar el
color de fondo de la tarjeta. Icono nos permite
utilizar diferentes iconos. El título le da a cada
tarjeta su propia etiqueta. Ahora vamos a cerrar esta estructura de
carpetas aquí, desplácese un poco hacia abajo. Ahora vamos a actualizar el
widget de tarjeta para usar estas variables. Entonces lo primero
que verás aquí es el color de la tarjeta. Entonces voy a cambiar esto a la variable que le dimos
que es tarjeta Biglor Y lo siguiente fue icono. Así que aquí vamos
a eliminar esto y vamos a simplemente usar
nuestra variable llamada icon. Y luego tuvimos el título. Entonces aquí, en lugar de perfil, vamos a decir simplemente
título. Vamos a guardar eso. Y así, nuestra
tarjeta ahora es dinámica. Puede pasar en diferentes
iconos, títulos, colores, y el widget único
se adaptará a todo. Ya no se necesita copiar y pegar. En la siguiente lección, volveremos a nuestro diseño
y realmente usaremos este widget de tarjeta modular para construir nuestro tablero
con varias tarjetas.
9. Cómo usar la tarjeta de tablero modular: Bien, es hora de poner
nuestra tarjeta dinámica en acción. Ya
lo hemos construido en un archivo separado, así que ahora solo necesitamos
importarlo a nuestro diseño principal. Dirígete a nuestro punto de pantalla de inicio de
diseño. Y luego en la parte superior derecha
después del dardo material, diremos Import,
package, layout practice. Puedes ver que tenemos dashboard, y luego la
tarjeta personalizada que creamos. Vamos a guardar eso. Asegúrese de que el nombre del archivo coincida con el archivo
real que creó. Si hay un error tipográfico, las cosas no
funcionarían como tú quieres. Ahora, a continuación, desplácese hacia abajo hasta el widget de la tarjeta donde
retiramos la tarjeta. Y aquí dentro de este niño, todo lo que tenemos que hacer
es sostener Control y golpear la barra espaciadora y
decir tarjeta del tablero. Y puedes ver aquí,
automáticamente tomó las variables. Ahora tenemos tarjeta BG
color icono, y título. Ahora para la tarjeta BG color, lo que voy a hacer es
que voy a quitar esto. Y yo sólo voy a decir colores que t y luego establecer ese 200. Guarde eso. Puedes poner un signo de exclamación ahí si quieres
eliminar ese error A continuación, dentro del icono, podemos decir icono punto persona. Digamos eso y
luego en el título, simplemente
podemos decir
perfil. Vamos a guardar eso. Y solo para asegurarnos de que
vamos a reconstruir este diseño. Así que simplemente pulsa en este botón de
actualización que va a
reiniciar nuestro diseño. Y no se ve nada cambiado. Eso significa que nuestra tarjeta
está funcionando bien. Ahora sigamos adelante y reemplacemos los tres marcadores de posición
con cartas reales Entonces me voy a
deshacer de éste, y luego podemos decir tarjeta de
tablero y aquí, el color va a ser colores punto Para establecer eso en
100 y luego para icono, vamos a usar íconos
punto mensaje y para título, voy a usar
esto como mensaje. Vamos a guardar eso. Ya veo
que tenemos la tarjeta de mensajes. Hagamos
lo mismo por éste. Voy a
deshacerme de éste. Digamos tarjeta de tablero. Y aquí, el
color de fondo va a ser colores punto TO eso
va a ser 100. Y el icono,
vamos a cambiar eso a iconos punto app
subrayado redondeado El título, sólo voy a
llamar a esto como apps.
Vamos a guardar eso. Ya veo que tenemos tres tarjetas. La tarjeta del tablero es
ahora nuestro widget reutilizable. El expandido asegura que todas las
tarjetas tengan el mismo ancho. Y la caja de tamaño es en realidad una que se supone que debemos usar
para dar espaciado. Si ves tenemos buen espaciado aquí aquí, pero no dentro de esto. Pero en realidad se ve bien, pero si quieres
dar algo de espaciamiento, lo que puedes hacer es que
puedes dar eso por aquí. Podemos decir caja de tamaño con
un wedth de 20 pixeles. Digamos eso. Ahora
eso va a dar el espaciado igual
entre esas cartas. Y así, tenemos
tres tarjetas de
tablero dinámicas limpias que tres tarjetas de
tablero dinámicas limpias sientan perfectamente una al lado de la otra. Sin código duplicado, sin desorden,
solo magia de flutter limpio En la siguiente lección,
agregaremos un área de contenido y estableceremos enlaces de navegación para que este tablero se sienta más
real como una aplicación real.
10. Añadir el área de contenido y la barra de navegación inferior: Bien, es hora de darle
vida al tablero. Ya tenemos una fila
de cartas en la parte superior. Pero ahora vamos a agregar
un área de contenido debajo de eso. Luego termina el diseño con
una barra de navegación inferior. Empecemos por
el área de contenido. Ahora aquí, esta es la fila
que en realidad contiene todas las cartas aquí.
Esta es la fila principal. Justo después de eso,
vamos a agregar una caja de tamaño de una
altura de 20 píxeles. Bien. Y luego por debajo de eso, vamos a decir ampliado. Y eso expandido va
a tener un punto de tarjeta lleno. Bien. Y vamos a golpear Guardar. Todavía no podemos ver nada,
pero eso está completamente bien. Entonces aquí vamos
a agregar algo de color. Entonces ahora lo que podemos hacer es
que podemos establecer un tema aquí. Entonces podemos decir que puntean fuera. Punto de color primario, y luego
podemos usarlo con Alpha. Entonces básicamente, aquí establecemos
la transparencia. Entonces podemos establecer eso en 30. Y si no guardo, bueno, todavía no vemos nada
porque no hemos dado ningún tipo de artículos
ni ningún dato dentro de él. Entonces a continuación, lo que podemos hacer es que
podemos sumar en alguna elevación. Voy a establecer la
elevación a cero, que es básicamente elimina
la elevación por defecto. Y aquí, en el niño, vamos a sumar centro. Y dentro de ese centro, vamos a agregar
otro niño. Y aquí, vamos
a agregar el widget de texto. El widget de texto
dirá área de contenido. Guarde eso, y ahí lo tenemos. Ahora, dentro de este widget de texto, en realidad
podemos darle estilo a esto. Entonces podemos decir estilo. Y entonces podemos decir
tema que fuera. Entonces podemos decir tema de texto, y podemos establecer el título
en mediano o pequeño. Voy a poner eso en pequeño. Entonces solo pone en negrilla esa cosa. Ahora vamos a desplazarnos un poco atrás y si ven
aquí, ¿qué hicimos? Usamos un tema con Apha. Esto hace que el color sea
dinámico basado en el tema actual de la aplicación.
Esto es lo que está sucediendo. El trabajo de tamaño que agregamos
con los 20 píxeles que agrega espaciado entre las
tarjetas y el área de contenido, expandido asegúrese de que
el área de contenido se
llene con el
espacio restante en la pantalla. Tarjeta toot llena nos da
una superficie de fondo agradable. Entonces básicamente obtuvimos
todo lo que necesitábamos. Ahora, volviendo a esta cosa
Alfa, si ves esto, realmente
podemos cambiar el color
basándonos en el tema que
seleccionamos en el material b. Así que aquí le dimos un color
codificado duro, ¿verdad? Así que en realidad podemos cambiar eso con esto. Entonces sigamos
adelante y hagamos eso. Yo sólo voy a copiar esto, y luego sólo voy a
reemplazar esto por éste. Y hagamos lo
mismo aquí. Voy a sustituir esto por
éste y éste también. Así que ahora la próxima vez que cambies el color semilla de la app de material, todo
el color de la app
cambia con ella. Vayamos y en realidad intentemos eso. Vamos a nuestro punto punto principal, y ya puedes ver quién dijo eso para rasgar vamos a
cambiar eso a azul. Guardemos eso y boom, la tarjeta y el
área de contenido actualizados juntos. Esto le da a su interfaz de usuario un reloj dinámico
unificado. Ahora terminemos esta lección
con una barra de navegación. Ya tenemos una bonita barra de
aplicaciones en la parte superior, así que agregaremos una
parte de siesta inferior a ese andamio en sí Entonces, si vas al punto de tu pantalla de
inicio de diseño en la parte inferior, puedes ver el andamio aquí Aquí es donde realmente terminó el
andamio. Y si solo quieres
confirmarlo , puedes desplazarte hacia arriba, y puedes ver que
esto es un andamio, haz clic en eso para
que veas el soporte de cierre Bien, entonces este es el andamio. Entonces ahora estamos dentro
del andamio. Entonces aquí, todo lo que tienes que hacer es escribir bom de
navegación inferior, y luego podemos decir bom de
navegación Por lo que pide
algunos destinos. Entonces aquí, voy a crear un elenco y va
a contener algunas matrices. Ahora, dentro de esta lista, es
necesario tener al menos
tres destinos de navegación. Pero vamos a sumar cuatro.
Sigamos adelante y hagamos eso. Entonces dentro de esto, vamos a decir
destino de navegación. Aquí está. Ahora aquí puedes ver
que toma en un icono y toma en una etiqueta. Ahora, para el icono, lo que podemos hacer es
podemos decir icono, decir iconos punto HOME. Porque queremos el icono de inicio. Ahora, la etiqueta puede ser un texto
simple como home. Ahora bien, si guardo esto,
ves que obtenemos un error. Básicamente, aquí se puede ver que la longitud del destino debe ser mayor o igual a dos, lo cual no es cierto en este momento.
Sigamos adelante y arreglemos eso. Lo que podemos hacer es simplemente duplicar esto tres veces más. Básicamente, ahora tenemos
cuatro navegaciones. Ahora si no guardo, bueno, creo que se me ocurrió,
está completamente bien. Lo que puedes hacer ahora es
que realmente puedes
volver a cargarlo en caliente ,
reiniciar la aplicación Ahora puedes ver que
tenemos cuatro artículos NAB. Sigamos adelante y cambiemos
los datos para esto. En lugar de esperar para
el segundo, voy a decir búsqueda, y esto va a convertirse en
búsqueda de la tercera, vamos a cambiar
eso a configuración, y aquí vamos a cambiar
eso a configuración. Entonces para el último,
vamos a llamar a esto como ayuda. Aquí podemos llamar a esto como ayuda. Vamos a guardar eso. Ahora
puedes ver que tenemos los íconos. Ahora el problema aquí
es que esto en realidad no coincide con el tema
que realmente creamos. Tenemos un tema azul
y este es gris. Lo que podemos hacer es
que realmente podemos cambiar o aplicar el
color para esto. Dentro de la barra
de navegación inferior aquí, se
puede decir color de fondo. Y si recuerdas, lo
hicimos en esta,
que en realidad es bastante buena. Tema punto de contexto un Alfa. Copia esto, pegarlo aquí y vamos
a cambiar esto a 80. N cinco no guarden, se puede ver que le dio ese
color para eso. Si quieres, en realidad puedes
cambiar la opacidad aquí. Entonces puedes establecer eso en 30
para que coincida con el color
de lo que tenemos. Bien, hay una
cosa más que debes anotar. Entonces si ves aquí, en realidad
se selecciona el hogar, ¿verdad? Entonces tal vez no puedas ver eso, así que déjame cambiar el
valor aquí. A lo mejor podamos. Así que vamos a agregarlo a como 100. Bien, entonces ahora puedes ver esto
está resaltado, ¿verdad? Entonces, si quieres cambiar
eso de casa a buscar, todo lo que tienes que hacer
es decir índice seleccionado, empieza desde cero. Entonces cero es el hogar. Uno es la búsqueda, dos es el escenario, y tres es la ayuda. Así podrás navegar fácilmente
entre estos botones. Así que ahora volvamos
a poner eso a 30, vamos a salvar. Bien, entonces el índice seleccionado controla qué elemento de navegación
está seleccionado actualmente. El color de fondo utiliza el color primario
dinámico con Alpha para obtener consistencia. destino de navegación
crea cada icono por elemento de etiqueta en la barra de navegación Entonces ahora tenemos una maquetación
completa. Vamos a cambiar el tema aquí para que se
vea mucho mejor. Entonces voy a cambiar
eso de nuevo a lágrima, voy a guardar eso, y
este se ve mejor.
11. Cierre y proyecto de clase: Trabajo increíble, todo el mundo. Acabamos de construir un diseño completo de
aleteo desde cero. Comenzamos
configurando el proyecto base, entendiendo los conceptos de relleno y diseño
básico, construyendo con filas y columnas usando la interfaz de usuario expandida para
estructurar receptiva, creando un widget de tarjeta de
tablero modular, agregando un área de contenido dinámico y finalmente reuniendo todo con la barra de navegación
inferior. Debido a que usamos el punto de
contacto del tema con colores dinámicos, ahora
puede cambiar el aspecto completo de
su aplicación solo actualizar
el color del tema. Mira esto. Si ahora cambio
a morado y boom, todo
el tablero se adapta. De hecho, puedes cambiar
esto a azul o incluso ámbar, sea cual sea tu vibra. Esta es la magia de construir
diseños limpiamente en aleteo, una estructura sólida
infinitas posibilidades Para tu proyecto de clase, duplica este diseño y
elige tu propio tema. Reemplaza los íconos y títulos las tarjetas para que coincidan con tu propia idea, como una aplicación de viajes, un panel de
finanzas o un administrador de tareas o
cualquier cosa que te guste. Experimenta con
diferentes colores de espaciado e íconos para
que sea realmente tuyo. Si lo desea, puede agregar más destino de navegación
y ver cómo se escala la interfaz de usuario. Una vez hecho esto, comparte una captura de pantalla
o grabación de pantalla de tu diseño terminado en
la sección del proyecto de clase. Me encantaría ver lo
creativo que se puede conseguir con esta fundación. Y eso es todo. Ahora tiene un diseño flotante adaptativo de
tema completamente funcional diseño flotante adaptativo de
tema que puede construir sobre, ya sea para paneles, páginas de
destino o aplicaciones completas Estoy muy orgullosa de ti por
seguir paso a paso. Sigue construyendo, sigue
experimentando, y te veré
en la siguiente clase
Flutter Sensei, Teaching Flutter from Scratch
