Transcripciones
1. 01 Lo que aprenderás y construirás: Oigan, todos. Bienvenida.
Soy Flutter Sensei, y en esta clase, vas a aprender
a construir una hermosa aplicación de
código aleatorio
completamente funcional usando Este proyecto es
corto, práctico y absolutamente perfecto si recién
estás comenzando con aleteo o quieres mejorar
tus habilidades con una mini aplicación del mundo
real En esta clase,
aprendes a agregar y configurar paquetes como
proveedor para su administración. Agrega fuentes personalizadas para que
tu app se sienta única. Configura temas claros y oscuros usando un solo interruptor de palanca, usa herramientas de IA para generar códigos
aleatorios, automáticamente, escribe la lógica que muestra los nuevos códigos con solo
tocar un botón
y, finalmente, aprende a diseñar una interfaz de usuario limpia y elegante que
se vea genial en cualquier dispositivo. Al final de esta clase, tendrás una app completa de
flutter lista para ejecutar, compartir y personalizar, y la mejor parte es que
entenderás cada línea de la misma En cuanto a tu proyecto de clase, crearás tu
propia aplicación que
mostrará un
código inspirador en la pantalla, cambiará
aleatoriamente los códigos
con una sola pestaña, alternará entre temas claros
y oscuros y usará tu propia
fuente personalizada para que destaque Es pequeño, simple e
increíblemente satisfactorio. El proyecto perfecto
desarrollará tus habilidades de aleteo. Antes de comenzar,
necesita que flutter esté instalado en su sistema Cualquier editor de código,
estaré usando código VS y un poco de curiosidad para
jugar, explorar y experimentar. Muy bien, enciende tu IDE, toma tu anillo favorito
y vamos a sumergirnos. En la siguiente lección, crearemos un proyecto y comenzaremos a
configurarlo todo. Vamos a darle vida a tu generador
de código
aleatorio . Empecemos.
2. 02 Configuración del proyecto y fuentes personalizadas: Todo bien.
Lo primero que tenemos que hacer es crear nuestro proyecto de filtro. Así que ve a tu terminal
y vamos
a navegar al escritorio y vamos
dentro de nuestros FlotterPjects Y luego vamos a crear un nuevo proyecto de flutter
llamado flutter, crear
generador de código aleatorio y golpear Esto creará nuestro proyecto
base de aleteo. A continuación,
entraremos en el proyecto, el generador de código aleatorio, y luego lo archivaremos con código. Es código. Ahora vamos a cerrar nuestra terminal, y vamos a ampliar nuestra pantalla. Ahora, la primera configuración que
haremos es agregar nuestras dependencias. Usaremos proveedor para cambiar de
tema entre el modo
Luz y el modo oscuro. Así que abre tu
punto de Pupspeck YAML y en las dependencias Vamos a guardar eso. Una vez que presione Guardar, Flutter buscará automáticamente el paquete Si no ejecuta Flutter
Pub G desde la terminal. A continuación, agreguemos algo de personalidad a nuestra aplicación con fuentes personalizadas. En nuestra clase anterior, usamos Google Faunt, ¿verdad? Pero esta vez,
aprendes a agregar tus propias fuentes personalizadas
manualmente en flutter Para eso, agreguemos
más al navegador. Vamos a pons.google.com. Estaré usando Playfair Display, pero puedes elegir
cualquier fuente que te guste Solo asegúrate de que esté en
el formato TTF de puntos. Y descarguemos una fuente
llamada Playfair Display. Sigamos adelante y haga clic en Obtener fuente y luego haga clic en Descargar. Y guardemos
eso en descargas. Ahora podemos cerrar el navegador, y vamos a abrir nuestra carpeta
Descargas. Entonces podemos ir a más opciones. Sum y Zep vamos a
abrir esta carpeta. Y verás que
tenemos una fuente aquí llamada Playfair Display fuente
variable punto TTF Esto es lo que necesitamos. Ahora, pasemos a los proyectos de escritorio, Putter,
y aquí encontrarás tu
aplicación de generador de código aleatorio. Vamos a abrir eso. Ahora aquí, vamos
a crear una carpeta llamada assets y dentro de eso, necesitamos crear
otra carpeta. Llamaremos a esto como fuentes, y luego dentro de eso
vamos a mover nuestra fuente. Ahora bien este nombre es
bastante complicado. Así que voy a renombrar
esto como Playfair Display. Ahora, asegúrate de que la extensión sea verdadera tipo uno. Eso es TTF Ahora, una vez hecho eso, vamos a
cerrar la carpeta de descargas. Ahora, en pupspec dot AML, vamos a desplazarnos hacia abajo para Y aquí, agregaremos nuestros activos. Y dentro de los activos,
vamos a agregar assets Fonts. Digamos eso. Una vez hecho eso, si te
desplazas un poco más hacia abajo, puedes ver que hay una
guía sobre cómo usar las fuentes. Aquí vamos a
seguir esa guía. Todo lo que tenemos que hacer aquí
es primero llamar a
Cervatillos y luego dentro de eso, necesitamos agregar el apellido Aquí voy a establecer
el apellido como Playfair Display Y luego Winter
definió las fuentes. Entonces diremos fuentes, y la fuente está dentro de los activos. Y la carpeta es Carpeta Activos
llamada difuns. Y dentro de esas fuentes, tenemos el nombre de la fuente. Entonces, si abres los activos,
puedes ver que este es el nombre. Así que sólo voy
a renombrar esto, copiar eso, y
pegarlo aquí. Guarde eso. Ahora, para poder usar esta fuente, estaremos usando
este apellido. Buen trabajo. Tenemos
nuestro proyecto listo. Nuestra dependencia está instalada, y la configuración de fuente personalizada. En la siguiente lección,
configuraremos nuestro archivo principal para habilitar el modo
oscuro y el
modo Luz usando proveedor.
3. 03 Configuración del archivo principal y del proveedor: Todo bien. Ahora vamos a ir
a ib main dot dart, aclaremos todo lo
que tenemos aquí. En esta lección,
configuraremos nuestras funciones principales, estado
creativo Vamos a
widget y habilitaremos el soporte del tema oscuro usando proveedor. Sigamos
adelante y hagamos eso. Entonces diremos Import, package, flutter, material dot dart, yo diré Import, proveedor Entonces ese es proveedor de paquetes. Entonces diremos void main, y dentro de eso diremos Run y luego
necesitamos llamar al proveedor del
notificador de cambios Entonces este va a
ser ellos proveedor. Y entonces tenemos que
llamar al niño que es const generador de código aleatorio Guarde eso. Ahora necesitamos escribir la clase para
el proveedor de temas. Voy a decir clase ellos proveedor
extiende, notificador de cambio. Llamaremos a lingotes, está oscuro. Voy a establecer eso
a caídas por defecto. Entonces lo llamaremos getter, es
decir boll get, es oscuro Voy a poner
eso a es oscuro. Después escribiremos el método
toggle que es void toggle theme. Y entonces dentro eso
vamos a decir que es oscuro, es igual a no es oscuro. Entonces avisaremos a los
oyentes y guardaremos eso. A continuación, necesitamos crear el widget de lates
generadores de código aleatorio Vamos a decir clase Generador de código
aleatorio extiende widget sin estado y dentro de eso
vamos a decir const, generador de código
aleatorio, clave
super dt Entonces diremos, build, aquí necesitamos crear la variable para
el proveedor de temas, es
decir ellos proveedor es proveedor de ellos proveedor. Guarde eso. Y entonces
tenemos que devolver un material p. Ahora dentro del material
p, necesitamos un título. Llamaremos al título
como arator de código aleatorio. Y deshabilitaremos
el banner de depuración. Configuraremos los datos del tema
para usar el material tres, luego estableceremos el esquema de
color para elegir entre semilla que
es colores punto azul, o estableceremos el brillo en
brillo punto luz. Ahora, para habilitar el tema del perro, simplemente
copiaremos esto
dirá tema oscuro y lo pegaremos. Ahora esta vez, esto va a ser ahora necesitamos
habilitar el modo ellos. Comprobemos que el proveedor de ellos
está oscuro. ¿Vamos a decir? Ellos modo punto oscuro
o el modo punto. Entonces llamemos al
hogar ese elenco. Llamaremos a esto como pantalla de inicio. Vamos a guardar eso. Perfecto. Ahora tenemos lista nuestra configuración
base. El proyecto
ya puede cambiar entre temas
claros y oscuros cuando se llama con
un botón de alternar. En la siguiente lección,
comenzaremos a construir la pantalla de inicio para nuestro generador de código
aleatorio, y ahí es donde realmente comienza la
diversión porque finalmente
verás que las cosas
cobran vida en la pantalla.
4. 04 Creación de la pantalla de inicio y configuración de citas: Todo bien. Ahora
comencemos a construir la pantalla principal de nuestra
app, la pantalla de inicio. Para eso, vamos
a entrar en la lib, y vamos a crear una carpeta aquí. Llamaremos a esto como
pantallas, y dentro de esto, voy a llamar a esto
como punto punto de pantalla de inicio. Y luego dentro de eso,
diremos import, package, flutter
material dot dot Digamos que la
pantalla de inicio de clase se extiende, mantente lleno con ella. Entonces diremos const, pantalla de
inicio, tecla superdt Entonces vamos a decir
bien, crear estado. Y luego vamos
a tomar esta
pantalla de inicio , aplicarlo aquí. Entonces vamos a crear
un estado privado que sea subrayado
pantalla de inicio, estado Deletreemos eso.
Vamos a copiar eso. Se clase, estado de pantalla de inicio, extiende el estado, que
es la pantalla de inicio. Entonces diremos en,
bien, build, y vamos a escribir
el proveedor de temas. Diré proveedor punto apagado. Y aquí,
les diré proveedor. Ahora aquí, tendremos que
devolver andamio. Guarde eso. Ahora vamos a
llegar al archivo principal. Importemos nuestras pantallas generadoras de código
aleatorio de paquetes, y luego la pantalla de inicio. Guarde eso. Pasemos ahora a
nuestra pantalla de inicio. Impresionante. Ahora antes de comenzar a
codificar la lógica real, necesitaremos una lista de códigos. Nuestra app
pasará por estos códigos aleatoriamente y mostrará uno
cada vez que toquemos un botón. Podríamos ir a
buscar códigos manualmente, pero eso va
a llevar una eternidad. Entonces, en cambio, usemos la IA para que esto sea más
rápido y divertido. Para ello, vayamos
a nuestro navegador. Y luego ir a d.ai. Es una herramienta ligera
para la generación rápida de texto. Entonces aquí vamos
a escribir un prompt. Voy a escribir,
quiero que generes una lista de diez códigos en este formato. Aquí voy a escribir en lista final, que es una cadena. Y aquí vamos a decir códigos. Y dentro de eso,
enumeraremos nuestros códigos. Eso es código uno código dos. Después código tres. Vamos a golpear a Endo. Esto
te dará instantáneamente una lista de puntos limpia de diez códigos que puedes copiar
directamente y pegar
en tu proyecto. Ahora sigamos adelante
y copiemos esto. Vamos a llegar a tu proyecto. Y justo después del estado, sólo
vamos a
pegarlo. Guarde eso. Se puede ver que hay
algunos pequeños errores. Queremos escapar de esto. Ya no tenemos ningún error.
Vamos a guardar eso. Andamio es un lugar donde vamos a
exhibir esos códigos En la siguiente lección,
escribiremos la lógica real que elegirá aleatoriamente y mostrará un nuevo código cada vez
que haga clic en un botón. Ahí es cuando comienza la
verdadera magia.
5. 05 Escribir la lógica para citas aleatorias: Bien, es tiempo lógico. En esta lección, haremos que nuestra aplicación realmente haga algo
escribiendo el código
que
mostrará aleatoriamente un nuevo código cada
vez que toque el botón. Primero, necesitamos
algo que mostrar en la pantalla antes de que se genere cualquier
código, como un mensaje de bienvenida o una sugerencia
suave para el usuario. Definamos eso dentro nuestro estado de la pantalla de
inicio de subrayado Así que justo después de
estos códigos aleatorios, voy a escribir en cadena. Llamaremos a esto como código actual. Y lo configuraremos para, toca
el botón para inspirarte. Eso lo guardaré. Este será el mensaje predeterminado que
aparece cuando se inicia la aplicación. Ahora, escribiremos una
función que escoja un código aleatorio de nuestra lista y lo muestre en la pantalla. Entonces para eso, aquí
vamos a decir vacío. Déjame desplazarme un poco
esto. Digamos mostrar código aleatorio. Y aquí escribimos ahora una
variable llamada random, y usaremos el
método random de dot math. Crearemos otra variable. A esto lo llamaremos índice. Entonces este será el
número aleatorio que
vamos a elegir. Entonces eso va a venir
del siguiente INT aleatorio, y aquí tenemos que
establecer el límite máximo. Entonces eso va a
ser códigos de longitud de punto. Y ahora vamos a guardar eso. Así que esto es lo que está pasando. Creamos un objeto aleatorio, luego generamos un número de índice
aleatorio basado en la longitud
de nuestra lista de códigos. Esto nos da una posición aleatoria
en la lista en cualquier lugar 0-9, ya que tenemos diez códigos Ahora, para mostrar realmente
el código en la pantalla, actualizaremos nuestra variable de
código actual y
llamaremos al estado establecido para reconstruir
el widget con un nuevo código. Para eso, todo lo que tenemos que hacer
es escribir en un estado establecido, y diremos que
el código actual es código y estableceremos un índice A, que será el número aleatorio. Perfecto. Ahora, cada vez
que llamamos Mostrar código aleatorio, Flutter
seleccionará aleatoriamente un código de la lista y luego actualizará
el código actual
y actualizará la interfaz Impresionante. En la siguiente lección, daremos
vida a esta lógica diseñando la interfaz de usuario. Mostraremos el
código actual maravillosamente en la pantalla y agregaremos un
botón que desencadene esto. Ahí es cuando tu generador de código
aleatorio realmente
comenzará a
verse como una aplicación.
6. 06 Cómo crear la interfaz de usuario para la aplicación de citación aleatoria: Bien. Ahora es el momento de unir
todo y
hacer que nuestra aplicación se vea viva. En esta lección, diseñaremos
la interfaz de usuario o la interfaz para nuestro generador de código aleatorio y asignaremos las funciones
que construimos. Antes de comenzar a codificar, sigamos adelante y ejecutemos la aplicación. Voy a ejecutar
esto en Windows, pero puedes elegir
tu propia plataforma. Bien, sigamos adelante
y arreglemos esto correctamente. Y voy a
poner esto así. Bien, entonces vamos a
colapsar este, y vamos a nuestra pantalla de inicio. Vamos a cerrar esto. Bien, entonces dentro del andamio, empezaremos a escribir nuestros widgets Entonces lo primero que
necesitamos es la appun. Entonces diremos título, digamos const, digo widget de texto Y aquí, voy a llamar
a esto como código
aleatorio entonces
podemos agregar el cuerpo aquí. En realidad, primero,
vamos a necesitar el botón de alternar para el modo
oscuro y el modo de luz. Entonces este va
a ser el botón de icono, y al presionarlo,
los va a llevar proveedor y
buscar alternarlos. Y luego dentro del
icono, diremos icono. Después los buscaremos
proveedor dotes oscuros. Vamos a decir icono Dot. Modo de luz o iconos, modo
oscuro. Vamos a guardar eso. Y necesitamos deshacernos de
éste para alinearlo correctamente. Derecha. Entonces después del appr, vamos a agregar
el cuerpo aquí Voy a poner el
relleno para esto. Y el relleno
va a ser de 25 pixeles. Ahora, antes de eso, sigamos
adelante y revisemos éste. Entonces el modo de luz
y el modo oscuro funcionan. Y ahora dentro del cuerpo, después del acolchado,
vamos a agregar un niño. Llamaremos a esto como columna. Y dentro de esta columna,
agregaremos niños. Y primero, agreguemos un
widget de texto que solo dice hola. Para que veas que
viene por aquí, así que necesitamos alinear
eso al centro. Entonces después de esta columna, vamos a decir alineación de acceso
principal, centro de
punto de alineación de acceso principal. Bien, entonces eso viene por aquí. Y como viene por aquí, necesitamos alinear
todo al centro. Entonces voy a refactorizar
esto al centro. Ahí, eso es mejor.
Entonces después del texto, vamos a agregar un cuadro de tamaño con la altura de 25 píxeles, y luego un botón elevado, que por ahora, podemos
dejarlo en blanco, y luego aquí,
podemos agregar un const, widget de
texto que
dice inspirarse voy a decir. Así que
ahora puedes ver si conseguimos esto
inspírate por ahí. Ahora para el texto, lo que podemos hacer es
en lugar de simplemente hola, podemos mostrar nuestro código actual. Ese sería el código actual. Si no guardo,
puedes ver que dice, toca el botón para inspirarte. Ahora bien, si toco este botón, nada va a pasar
todavía porque
no hemos asignado este
botón a una función, así que sigamos adelante
y asignemos eso. Aquí, esta función va a mostrar código aleatorio guardar eso. Ahora bien, si hago clic en esto, puedes ver cada
vez que haga clic en esto, aparece
un nuevo código aleatorio. Pero esto parece demasiado básico. Queremos que esto sea estilo. Aquí es donde entran nuestras fuentes personalizadas de
Google, la fuente personalizada que agregamos. Ahora, lo que podemos hacer es aquí para que funcione,
podemos darle coma Digamos línea de texto, digamos línea de texto, el centro para
que pueda mirar en el centro. Ahora podemos darle un
estilo, digamos estilo de texto. Y dentro del textil, podemos decir familia de fuentes. Y recuerda la
familia de fuentes que dimos. Si no, puedes volver
aquí y puedes comprobarlo. Esa es la familia de fuentes
que asignamos. Copiemos eso,
volvamos a nuestra pantalla de inicio y
peguémosla aquí. Ahora puedes ver que se aplica la fuente
personalizada. Se ve bien, pero la fuente
tiene que ser mucho más grande. Entonces lo que podemos hacer es aquí
podemos decir tamaño de fuente. Voy a establecer el tamaño de
fuente en 40. Entonces ahora se ve mucho mejor. Entonces tal vez 30. Sí, 30 es bueno. Y ahora, si hago clic en esto, se
puede ver cada
vez que hago clic en esto, obtenemos una nueva fuente que es muy estilizada y se ve muy bien Y puede volver
al tema oscuro, y se puede ver cómo se ve eso. Pero el color de la
fuente aquí es blanco, así que también podemos cambiar el color. Para esto, lo que
podemos hacer es aquí, podemos decir coma, color, y podemos usar el color del tema Entonces ese es el tema de off. Esquema de color de puntos, punto primario. Entonces esto va a tomar el color
primario de nuestra app, que es azul, y eso
va a mostrar. Si vuelvo al modo
de luz, puede ver que se ve todavía en el color primario de
nuestra combinación de colores. Bien,
repasemos rápidamente lo que
está pasando aquí Entonces primero, tenemos esta barra de aplicaciones. AppR muestra el código aleatorio
del título y agrega un
botón de alternancia de tema en la parte superior derecha Y cuando está tabulado, se
llama el tema proporcionado
punto toggle theme para cambiar entre el modo oscuro
y el modo de luz Entonces tenemos el cuerpo así que este es el
cuerpo entero aquí. Díselo aquí. Todo el cuerpo aquí está
envuelto con un acolchado y una centrífuga para mantener todo bien
espaciado y alineado. Entonces dentro de eso,
tenemos una columna. Columna
centra verticalmente nuestro contenido y el texto de código
y el botón. Después a continuación, tenemos
un widget de texto. El widget de texto muestra
el código actual utilizando la pantalla Playfat de fuente personalizada
en un tamaño grande y elegante El color se adapta automáticamente
al tema actual. Entonces finalmente, tenemos
un botón elevado. Y cuando lo tocas, llama show Random code function, escogiendo un código aleatorio de la lista y actualizando
el texto instantáneamente. Ahora, cuando ejecutemos esta app, deberías ver primero el texto de
bienvenida. Entonces, si ejecuto esto
verán primero el texto de bienvenida. Y cuando haces clic en
el botón inspirado en G, el código se actualiza cada vez
con uno nuevo aleatorio. Ahora también puedes intentar
cambiar del modo oscuro al modo luz o del modo de luz al
modo oscuro suave e instantáneo. Y ahí vamos. Tu aplicación
de código aleatorio ya está lista. Acabas de crear una aplicación de flutter
funcional con fuentes personalizadas, cambio de
tema y una divertida lista de códigos generados por
IA
7. 07 Resumen y proyecto de clase: Muy bien, lo logramos.
Acabas de terminar de construir tu propia aplicación de
generador de código aleatorio en flutter Hagamos un resumen rápido de todo lo que
aprendimos en esta clase Aprendiste a crear un nuevo proyecto de flutter
desde cero. Agregaste dependencias como proveedor para
administrarlas cambiando. Finalmente
entendiste cómo agregar fuentes
personalizadas y hacer que
tu aplicación sea realmente tuya. Construyó un
proveedor de temas para alternar dinámicamente
entre el modo claro y
el modo oscuro. Creaste una
pantalla de inicio con una lista de códigos generados por la IA. Escribiste una lógica para elegir un código aleatorio cada vez que el
usuario toca el botón. Y finalmente,
diseñaste una interfaz de usuario limpia y
elegante usando
tu fuente personalizada y un diseño receptivo. Esa es una app de trabajo completa de principio a fin,
todo en una sola clase. Para tu proyecto de clase, quiero que tomes esta app
y la hagas por tu cuenta. Aquí hay algunas ideas con
las que jugar. Agrega tu propio
conjunto de códigos personalizados. Tal vez cambie el
color del texto, cambie la combinación de colores o el estilo de
fuente para que coincida con
su gusto personal. Agrega categorías como motivación, amor, vida y sabiduría. Cuando termines, sube
una captura de pantalla rápida o un video corto de tu app final en la sección de proyecto de
clase. Los estaré revisando
y dejando un comentario. Si llegaste hasta aquí, estoy muy orgullosa de ti. Cada línea de código que escribiste
construyó no solo una aplicación, sino tu confianza como desarrollador
de flutter A partir de ahora, sigue experimentando, sigue construyendo, y no te olvides Cada proyecto que termines te
hace más fuerte. Gracias por tomar mi clase. Y, créeme, el siguiente
va a ser aún más divertido. Te veré en la siguiente clase.
Flutter Sensei, Teaching Flutter from Scratch
