Transcripciones
1. Lo que aprenderás y construirás: Oigan, todos. Bienvenida.
Mi nombre es Flutter Sense, y en esta clase,
vamos a construir una sencilla aplicación de
galería de imágenes en flutter Este proyecto es perfecto para principiantes que
quieren practicar diseños,
navegación, activos
y tematización, todo en una
pequeña mano en la construcción Al final de esta clase, sabrás cómo crear un nuevo proyecto de flutter y
estructurarlo adecuadamente Agregue y administre activos de imagen
locales, muestre imágenes en un diseño de cuadrícula
receptivo, navegue a un visor de
imágenes de pantalla completa en la pestaña, use la
animación de héroe de flutters para crear transiciones
suaves
y cambio de tema como el modo oscuro y el modo de luz usando
el proveedor Esta clase es corta, amigable
para principiantes y
completamente enfocada en proyectos. No hay teoría larga, solo construyendo. En cuanto a tu proyecto de clase, tu tarea es agregar tu propio
conjunto de imágenes a la app. Muéstralos en una cuadrícula de galería, prueba la pantalla completa
siempre y tema Togo y comparte una captura de pantalla o una grabación
de pantalla rápida de tu app final. También puedes agregar tu propio
giro como diferentes colores, tamaños de
cuadrícula, esquinas redondeadas o animaciones que lo
hacen tuyo. Construyamos tus
galerías de imágenes paso a paso. Entonces, ¿a qué
esperas? Empecemos.
2. Configura el cambio de tema: Todo bien. Empecemos a
construir nuestro proyecto. Vayamos a nuestra terminal. Naveguemos hasta el escritorio y naveguemos dentro de
nuestros proyectos de aleteo Aquí crearemos un nuevo proyecto de
aleteo, revolotearemos, crearemos una galería simple
y golpearemos Ahora naveguemos dentro de eso. Eso es CD simple galería, y vamos a abrir eso en código. Ahora, vamos a cerrar nuestra terminal. Ampliemos nuestro código. Antes de escribir cualquier interfaz de usuario, queremos que el
cambio de tema sea parte de nuestra aplicación de galería. Para ello, utilizaremos
el paquete del Proveedor. Abra su punto Pubspec YAML, desplácese hacia abajo hasta dependencias
aquí agregaremos Proveedor Guarde eso. Una vez hecho eso,
cerremos esto. Abramos la carpeta de labios, dardo de punto
principal, y
deshagamos de todo lo
que tenemos aquí. Vamos a empezar a escribir
todo desde cero. Ahora, primero, vamos a importar
paquete, material de aleteo. Luego importaremos proveedor de
paquetes. Después escribiremos nuestra app Run principal
void. Y dentro de esto, necesitaremos agregar proveedor de notificador de cambios Y éste, vamos a
ponerle eso a ellos proveedor. Entonces agregaremos un niño para eso. Esa es la galería const simple. Lo primero, vamos a
crear el proveedor de temas. Es clase. Ellos
proveedor extiende, cambio notificador, y
vamos a establecer un lingote aquí, llamar a esto como está oscuro Voy a establecer eso
por defecto en false. Entonces vamos a crear
un getter, G es oscuro. Voy a asignarle
eso a es oscuro. A continuación, crearemos
una función de alternar. Llamaremos a esto como tema de toggle. Y entonces diremos Es dark no
es igual a East dark. Entonces básicamente, esto
va a alternar. Entonces avisaremos a los oyentes. Entonces una vez hecho eso, lo
siguiente que tenemos que
hacer es crear nuestra
sencilla app de galería. Entonces aquí, diremos clase, galería
sencilla, se extiende
apátrida rígida Y dentro de esto, queremos
decir const, galería sencilla. Super punto K. Entonces diremos, bien, build, y aquí es donde tendremos que
crear nuestra variable. Entonces vamos a decir final
dicen ellos proveedor, que es el proveedor punto
del proveedor del tema proveedor. Bien. Entonces, a continuación, agregaremos
la app de devolución de material. Y dentro de esa
app de material, diremos título. Voy a llamar a esto
como simple galería. Voy a quitar
la pancarta Debe. Luego crearemos nuestro
tema que son los datos del tema. Así que usar el material tres es cierto, y luego vamos a elegir el esquema de color de la semilla. El color es punto azul, y el brillo
va a ser ligero. Haremos lo mismo
por el tema oscuro. Entonces todo lo que tenemos que hacer
ahora es el tema oscuro, y simplemente copiar todo
esto, póngalo aquí. Y lo que podemos hacer ahora es
simplemente cambiar esto a oscuridad. Y ahora necesitamos
agregar el modo de tema. Eso es
proveedor de temas punto es oscuro. Vamos a cambiar
el modo theme a dark o theme mode a light. Ahora llamemos al hogar, digamos hogar const, voy a
llamar a esto como pantalla de inicio Vamos a guardar eso y listo. Nuestro proyecto base ya está listo. El proveedor está configurado, el cambio de
equipo está cableado y la aplicación se dirige
a la pantalla de inicio. En la siguiente lección,
construiremos una pantalla de inicio donde realmente vivirá la interfaz de usuario de la
galería.
3. Creación de pantalla de inicio, recursos de imágenes y cambio de tema: Ahora que nuestra
configuración principal está completa, construyamos nuestra pantalla de inicio. Dentro de la carpeta de labios, vamos a crear una carpeta
llamada pantallas. Y dentro de eso
crearemos un nuevo archivo. Voy a llamar a esto como inicio
subrayado pantalla punto punto. Y aquí, vamos
a impartir paquete,
aleteo, punto punto material, y vamos a crear la pantalla de inicio Entonces se puede decir extiende
el widget completo de Estado. Va a ser const, pantalla de
inicio, super doot key Entonces podemos decir en
o creamos estado. Esta es la pantalla de inicio se queda. Vamos a deshacernos
de todas estas cosas aquí. Subrayar el estado de la pantalla de inicio. Y voy a crear esta función
privada. Diré clase, el
estado de la pantalla de inicio extiende el estado, que es la pantalla de inicio. Aquí vamos a decir, bien, construir, y luego ahora
podemos devolver un andamio Ahora aquí, necesitamos crear esa variable para
ellos cambiando. Diremos proveedor de tema final. Yo configuré eso para proveedor punto off. Contexto, y voy a
conseguir el proveedor de temas aquí. Muy bien, ahora
volvamos a la principal, e importemos
nuestra pantalla de inicio. Es paquete, galería simple,
pantallas, pantalla de inicio. Guarde eso. Y ahora vamos a ejecutar la aplicación. Genial. Todo
está cableado y ahora estamos viendo una
pantalla en blanco sin errores. Entonces, sigamos adelante y
alineemos esto correctamente. Y vamos a esto así.
Vamos a colapsar este. Ahora, antes de construir
la galería UY, necesitamos algunas imágenes para mostrar Puedes descargar
imágenes gratis de pixels.com, o puedes usar tus propias Por ahora, voy
a usar pixels.com. Entonces vamos al navegador. Y vamos a pixels.com. Y a partir de aquí, voy
a buscar la naturaleza. Y encontremos algunas imágenes
realmente buenas. Voy a agregar diez imágenes. Eso es uno, dos,
tres, cuatro, cinco, seis, siete, ocho, nueve y diez. Así que sigamos adelante y
descarguemos esta imagen de descarga. Voy a guardar esto
dentro de proyectos más libres. Misma p la galería,
voy a crear una carpeta aquí llamada assets. Dentro de esa carpeta,
voy a crear otra carpeta llamada images. Y aquí vamos a guardar
esto como Foto uno. Bien. Entonces ahora vamos a guardar
esta segunda imagen. Voy a guardar
esto como Foto dos. Y por último, foto diez. Ahora, el trabajo del navegador está hecho, S solo va a cerrar eso. Ahora bien, si abres la carpeta del
proyecto aquí, puedes ver que tenemos activos y
dentro de esa carpeta de imágenes, tenemos diez imágenes que aparecen. Ahora, ve a tu popspec dot AML y puede desplazarse hacia
abajo para revolotear aquí Y aquí,
lo primero que tenemos que hacer es que tendremos que sumar activos. Y dentro de los assets, vamos a agregar assets, y luego agregaremos la carpeta
images. Guarde eso. Por lo que ahora las imágenes se agregan oficialmente a
su envoltura de aleteo Una vez hecho eso,
déjame mover esto por aquí. Ahora, una vez hecho eso,
podrás volver a
tu pantalla de inicio. Y ahora sigamos adelante y
agreguemos la barra de aplicaciones a nuestro andamio Entonces aquí, voy a
llamar a esto appr appr. Voy a agregar un título aquí
con una const llamada texto. Y aquí vamos a llamar a
esto como galería sencilla. Entonces voy a agregar algunas
acciones con un botón de icono. Al presionar, queremos que el proveedor de temas
conmute este tema. Y para los iconos,
vamos a usar un icono, y vamos a
revisarlos proveedor si está oscuro. Entonces vamos a decir que es oscuro vamos a decir
íconos, punto, modo Luz. De lo contrario, vamos a decir
íconos, punto, modo oscuro. Guardemos que
deberías ver la barra de aplicaciones con
el tema de alternancia funcionando. Esto nos da una barra superior limpia con modo de trabajo claro
y oscuro. Perfecto. Ahora tenemos
la pantalla de inicio. Nuestra carpeta de activos está configurada y podemos alternar temas
directamente desde la interfaz de usuario. En la siguiente lección,
comenzaremos a mostrar imágenes reales en nuestra cuadrícula.
4. Crear una pantalla de detalles y lista de imágenes: Ahora es el momento de traer
nuestras imágenes a la app. Utilizaremos dos pantallas, una pantalla que muestra
la cuadrícula de imágenes, una pantalla que muestra una
sola imagen a la vista completa. Para construir la vista de detalle, comencemos con
la segunda pantalla. Ahora, dentro de la carpeta Pantallas, vamos a
crear un nuevo archivo. Voy a llamar a esto como pantalla de
detalle punto oscuro.
Vamos a colapsar esto. Y aquí, voy a decir importación,
paquete, aleteo,
material punto punto Y aquí, voy a
decir clase, pantalla de detalle, digamos extiende apátrida, widget Y dentro de esto,
diremos const, pantalla de detalle. Súper punto K. Entonces
diremos: Bien, construye. Voy a deshacerme de
todas estas cosas aquí. Digamos que el andamio de retorno. Cerremos aquí esta terminal. Y dentro del andamio, vamos a decir
appr con un appr, digamos título, const el
texto que dice foto a.
vamos a guardar eso. Y
luego agregaremos un cuerpo. Esto tendrá un jet central, y esto tendrá un
niño llamado héroe. Ahora, puedes ver
aquí, el heroiget toma en dos cosas
la etiqueta y un niño Entonces necesitamos estas dos cosas. Lo primero, lo que
vamos a hacer es que
vas a agregar en una variable aquí. Llamaremos a esto como cadena final. Trayectoria de imagen. Y entonces tenemos que
llamarlo aquí. Entonces diremos que se requiere esta ruta de imagen de
punto. Guarde eso. Ahora, en el héroe, vamos a tomar esta etiqueta, y luego vamos
a decir que la ruta de la imagen va a ser una imagen, punto activo de esa trayectoria de imagen. Así que guarda eso. Entonces esta va
a ser nuestra pantalla de detalles. Entonces vamos a cerrar esto. Y ahora volvamos a nuestra pantalla de
inicio aquí. Y luego vamos a
importar esa pantalla de detalle. Diré paquete,
galería simple, pantallas, pantalla de detalle. Y dentro del estado aquí, vamos a agregar una lista final, que va a ser una cadena. Y el nombre para
esto van a ser imágenes. Y va a contener
las imágenes que realmente
descargamos de pixels.com Entonces eso está dentro de los activos. Imágenes, 41 puntos JPG, ¿verdad? Entonces dupliquemos
eso diez veces. Eso es uno, dos, tres, cuatro, cinco, seis, siete,
ocho, nueve, diez. Entonces van a
haber dos, y luego diez. Vamos a guardar eso. Ahora la aplicación sabe dónde se encuentran las
imágenes, y la pantalla de detalles
está lista para mostrarlas. Perfecto. Ahora existe nuestra pantalla de
detalles. Nuestra lista de imágenes está lista, e importamos
todo lo que necesitamos. En la siguiente lección,
mostraremos estas imágenes dentro de
una cuadrícula ave en la pantalla de inicio y haremos que
cada imagen se pueda hacer clic para que
se abra en un tejido completo
5. Mostrar imágenes en cuadrículas: Ahora es el momento de mostrar nuestras imágenes en la app usando una
cuadrícula Wave dot Builder. En la pantalla de inicio
punto punto dentro del cuerpo que está por aquí, agregaremos un Grid
Wave dot Builder. Se puede ver que
se necesitan muchas cosas. Lo primero
que vamos a necesitar es la longitud de la cuadrícula. Entonces aquí diremos que el
recuento de artículos es imágenes longitud de punto. Ahora, lo que debes
recordar es que Grid Wave dot Builder funciona igual que el Generador de puntos
List Wave, excepto que organiza los elementos en una cuadrícula en lugar
de una lista vertical Ahora que
tenemos el recuento de elementos, necesitamos un delegado de cuadrícula para
definir cómo se ve la cuadrícula. Entonces aquí en el delegado de cuadrícula, mantén presionado Control y barra espaciadora, y encontrarás esto. Este es delegado de rejilla astilla
con conteo fijo de ejes cruzados. Eso es un montón de cosas grandes de dientes. S, pero verás
cómo funciona esto. Entonces lo primero es que
tenemos conteo de ejes cruzados. Pongo el conteo de ejes cruzados
a cuatro y guardemos eso. Y entonces tenemos que
básicamente lo que hace esto es que va a mostrar cuatro
cuadrículas, como las cuatro columnas. Y ahora necesitamos el espaciamiento
entre estas columnas. Entonces, si pulsas Control
y espacio pero de nuevo, verás que
hay dos espacios. Uno es el espaciado entre ejes transversales y hay un espaciado entre ejes principales. Agreguemos el eje transversal uno, y lo pondremos en 12. Y ahora agreguemos
el siguiente que es el eje principal.
Voy a poner eso en dos. Ahora, dentro del constructor de artículos, obtenemos cada imagen para
hacerla tappable Para ello, vamos a
eliminar esto y mantengamos Control y espacio bagin verás que
obtenemos Context index Entonces vamos a abrir
esa, y dentro de esta, creamos una variable
llamada image. Sendero. Ahora, si recuerdas, sí
creamos esto en
la pantalla de detalles. Eso fue para la pantalla de detalles. Ahora bien, esto es para la grilla. Entonces aquí vamos
a obtener las imágenes, y luego vamos a
obtener el índice de eso. Lo siguiente es que vamos a devolver un detector de gestos. Esto es para la parte de golpeteo. Entonces aquí dentro de esto de barril, lo que queremos hacer es que queremos empujar esto
para que pueda
ir a la pantalla de detalles. Diremos navigator dot push, y la ruta aquí va
a ser ruta de página material y el constructor va a
ser la pantalla de detalles. Ahora, como puedes ver, ya
tomó la ruta de la imagen porque aquí
le dimos la variable. Lo siguiente es que necesitamos
mostrar esas imágenes. Entonces después de esto,
vamos a decir niño, y vamos a agregar un héroe. Ahora recuerda, lo que viene dentro de
la etiqueta, la ruta de la imagen. Y para el niño, diremos, imagen punto ácido es imagen camino. Eso lo guardaré. Ahora puedes ver todas las
imágenes que usamos. Además, se puede ver que en realidad va al borde, tenemos que dar un
poco de relleno aquí. Aquí para el cuerpo dentro
del Constructor de ondas Grid, agregaremos un relleno
con 16 píxeles. Entonces eso va a dar
algo de relleno ahí. Ahora bien, estas imágenes son desiguales, pero primero veamos si funciona. Si toco esto, se puede ver que
se abre en la foto alguna vez. Si toco en la segunda imagen, eso también se abre en
la foto alguna vez. La funcionalidad está funcionando, pero las imágenes son desiguales,
así que necesitamos arreglarlo. Ahora para hacer eso, estas imágenes
en realidad se están cargando del
niño, que está por aquí. Lo que podemos hacer es que
en realidad podemos cortar todo esto. Entonces podemos decir
clip o rectángulo, y esto va a tener un hijo, y vamos a pegar a
este héroe por aquí. Ahora bien, este clip o rectángulo
sí tiene un radio de borde. Voy a poner
el radio
del borde circular, que está por aquí. Voy a poner
éste a 12, salvo eso. Y ya verás que en realidad
no pasó nada. Eso es porque necesitamos
encajar eso dentro de ese máximo. Entonces justo después de esta imagen de aquí, vamos a decir ajuste, y luego diremos
box fit dot cover. Guarde eso. Ahora verás que todas las imágenes caben
dentro de esa caja rectangular. Ahora, el espaciado se ve ahí
bastante cerca el uno del otro. Entonces ahí es donde entra
esta parte. Entonces podemos establecer eso en 16, 16, salvo eso, y
verás que el espaciado crece. Ahora bien, si toco en
éste, se abre en un visor de fotos. Si abro este, que también abra
eso en Visor de fotos.
Y eso es todo. Ahora estamos mostrando las
imágenes en cuadrícula limpia. Cada imagen se abre en una pantalla completa con una animación de héroe
suave. La rejilla está acolchada,
espaciada uniformemente y se ve pulida. Y la mejor parte, el cambio de
tema funciona.
6. Resumen y proyecto de clase: Hemos llegado al final
de nuestro mini proyecto. Tomemos un momento para recapitular todo lo que
construimos en esta clase Creamos un
nuevo proyecto de flutter, agregamos el paquete de proveedor
para su administración, construimos un proveedor de temas para
alternar Light y Dog them, conectamos todo
dentro del punto principal
con el proveedor del
notificador de cambios, creamos una
estructura de proyecto limpia y pantallas separadas, agregamos activos a
pubspec dot YAML y cargamos imágenes Cree una
vista de cuadrícula receptiva para mostrar fotos, agregar detección de pestañas y navegación a una pantalla de detalles de
pantalla completa, implementó una animación de
héroe suave, diseñó cada elemento usando espaciado y relleno de clip o destrozado Al final, teníamos una galería de
imágenes simple que
funcionaba completamente con ellos cambiando y vista de imagen a
pantalla completa. Ahora es tu turno. Elige tu propio conjunto de imágenes, agrégalas a tu carpeta de activos, muéstralas en la galería,
comparte la captura de
pantalla o una
grabación de pantalla corta de tu app. Sube tu resultado final
a la sección del proyecto. Me encantaría ver cómo resulta
tu galería. Cada versión se verá única dependiendo de
las imágenes que elijas. Gracias por
unirse a esta clase. Te veré en
la siguiente donde construiremos algo
aún más emocionante.
Flutter Sensei, Teaching Flutter from Scratch
