Transcripciones
1. Lo que aprenderás y formarás: Oigan, chicos, bienvenidos.
Alfredocenc. Y en esta clase, vas a aprender los fundamentos de
la gestión
estatal construyendo
una aplicación Counter Pro plus La mejor parte,
vamos a utilizar IA
agéntica como nuestro asistente
personal de codificación para ayudarnos a escribir un código mejor y
más limpio desde
el principio Aprendes a
configurar un nuevo proyecto, entender la
diferencia entre los apátridas y los widgets de
pliegue de estado, y diseñar una interfaz de usuario hermosa y
moderna utilizando el sistema de diseño de material
tres Aprenderás a agregar texto
dinámico y crear botones
elevados, y con la ayuda de la administración
estatal, agregaremos funcionalidad de incremento, decremento y reset Entonces usaremos IA para refinar nuestro código y encontrar pugs
y arreglarlos uno por uno Antes de sumergirnos,
asegúrese de tener instalado el
flutter y la configuración del
código VS en su máquina También usaremos la extensión
Chat PD Codex para ayudarnos con nuestra búsqueda de pug
EI Esta clase es perfecta para principiantes que recién están
comenzando con Flutter Vamos a mantener las cosas divertidas, simples y amigables para principiantes. Una vez que se cree nuestra aplicación, pondremos nuestra IA a trabajar para
buscar errores y problemas de
rendimiento. Sin jerga complicada, solo código
limpio y eficiente. Para tu proyecto de clase,
estarás construyendo tu propia versión de la aplicación Contra Pro Plus usando el archivo punto principal
que desarrollamos juntos. Deberá construir la
lógica, configurar funciones de incremento,
decremento y restablecimiento, funciones de incremento,
decremento y restablecimiento, luego usar IA para encontrar errores
y problemas de rendimiento Una vez hecho esto, publica una captura de pantalla o una grabación de pantalla de tu
app en la galería del proyecto. No puedo esperar a ver
lo que has construido. Y si te emociona ver cómo IA está cambiando la
forma en que construimos aplicaciones, asegúrate de presionar ese
botón de seguimiento en mi perfil, para que no te pierdas
la próxima aplicación nuestra serie. Empecemos.
2. Creación del proyecto, función principal y RunApp: Todo bien. Lo
primero que vamos a hacer es crear
un nuevo proyecto. Abramos nuestra terminal
y naveguemos hasta la carpeta de tu
proyecto. Entonces para mí, eso es un CD, tipo
escritorio, CD, proyectos de aleteo Y luego escriba, revolotear, crear, contador P plus. Después pulsa Enter. Una vez creado el proyecto, vamos a movernos dentro de él. CD, Counter Pro plus. Ahora abriremos el proyecto
en código VS escribiendo código, D y hit end. Voy a cerrar
este pront de mando aquí y vamos a maximizar esto Ahora que estamos
dentro del proyecto, vamos a abrir la carpeta de labios y luego abrir el dardo punto principal. Aquí es donde estaremos escribiendo todo el código
para nuestro CountAP. Para comenzar,
eliminemos todo el código predeterminado dentro de este archivo para que podamos
construir todo desde cero. Seleccionemos todo
y golpeemos el retroceso. A continuación, importemos la
biblioteca de materiales de flutter en la parte superior Entonces diremos paquete de importación, material de
aleteo punto. Ahora que tenemos la
biblioteca importada, vamos a configurar nuestro punto de
entrada principal para nuestra aplicación. Eso va a ser nulo principal. Entonces diremos Runapp
Cast, contador P plus. Guarde eso. Aquí estamos
llamando a la función run app y pasando en nuestro
widget principal, counterpro plus Aún no hemos creado este
widget, pero no te preocupes. Lo construiremos juntos
en la siguiente lección.
3. Creación del widget sin estado de CounterProPlus: Bien, es hora de darle vida a
nuestra app un poco. Vamos a crear
nuestro
widget contador Pro plus y éste va
a ser un widget sin estado Ahora, antes de que
empecemos, un resumen rápido. ¿
Recuerdas qué es el widget sin estado? Un widget sin estado es como
una pintura tranquila. No se mueve ni reacciona
ante nada porque, bueno, no tiene ninguna
actividad entrando. Es solo que ahí,
maravillosamente quieto. Sigamos adelante y
construyamos esto juntos. En nuestro archivo punto principal, vamos a escribir en clase, counter pro plus
extiende git sin estado Dentro de esto,
vamos a decir const, counter Pro plus, y luego vamos a decir
super dot key Entonces vamos a o
escribimos este método de compilación y luego nos deshacemos de todo lo
que tenemos aquí y vamos a
devolver una app de material. Bien. Ahora dentro de
esa app de material, vamos a decir título, y el título va
a ser contador P plus. Y luego podemos eliminar
ese banner de depuración. Estoy puesto eso a caídas. Y aquí podemos
establecer el tema ahora. Voy a establecer los datos del tema para usar el material tres True. Entonces voy a establecer el esquema de color seed
a colores punto azul. Eso lo guardaré. Y después de esto, vamos a establecer
la región de origen. Y esto va a ser const. Y aquí diremos
contador pantalla de inicio. Vamos a guardar eso. Entonces,
¿qué acabamos de hacer aquí? Creamos una
clase Counter Pro plus que extiende
el widget sin estado Dentro del método de construcción, devolvimos un amplificador de material. Esto agrega como la
raíz de nuestra aplicación. Establecemos un título, deshabilitamos el
pequeño y molesto banner de depuración, y luego le dimos un tema
simple y apuntamos el inicio a un widget llamado Pantalla de inicio del
contador. No entre en pánico si ve línea
roja que se mueve debajo de la pantalla de inicio
del mostrador. Eso es totalmente esperado. Aún no hemos creado
ese widget, y eso es exactamente lo que
haremos en la siguiente lección.
4. Construir la pantalla de inicio y crear un estado privado: Todo bien. Ahora es el momento de hacer las cosas un
poco más vivas. Vamos a construir nuestra pantalla de inicio de
contador,
y esta vez, va a ser un widget completo de
estado, porque aquí es donde ocurre toda
la actividad. Aquí es donde
estaremos actualizando y reaccionando a
los cambios en la app. Empecemos a crear
ese widget. Así que aquí vamos a decir la pantalla de inicio del contador de
clases extiende el widget completo stat. Déjame desplazarme hacia arriba. Y aquí, vamos a decir
const, Contador pantalla de inicio. Digamos super dat key. Y aquí, vamos
a decir, Bien. Y esta vez,
vamos a decir, crear estado y
dejarme deshacerme de todas las
cosas que tenemos aquí. Y dentro de este widget de estado, voy a agregar en nuestro widget de pantalla de
inicio Y déjame deshacerme de
estos dos rizados. Y aquí, voy a
asignar eso para subrayar el estado de
contador. Y
vamos a guardar eso. ¿Qué acaba de pasar
aquí? Declaramos una
clase de pantalla de inicio de contador que extiende el widget completo de estado y
luego dentro de create state, devolvimos un contraste de
subrayado Ese es el estado privado que utilizará
este widget. Ahora vamos a construir ese estado privado y agregarle
alguna funcionalidad. Después de esto, aquí
vamos a decir clase,
subrayado, contra-estado extiende estado Y dentro de este estado, vamos a decir pantalla de inicio de
contador. Y dentro de esto,
voy a establecer A INT que es un entero. Voy a llamar a una
variable privada llamada count. Voy a poner eso a cero. Entonces necesitamos crear
tres estados aquí, uno para incremento,
uno para decremento y otro para reinicio. Sigamos
adelante y creemos eso. Aquí, vamos a decir
vacío, subrayado, incremento. Y aquí, diremos
set date set that too. Ya que esto es un
incremento, solo podemos decir contar más más Esto va a incrementarse. Ahora, necesitamos
crear el decremento. Nulo, decremento de subrayado. Y aquí vamos a decir set state, y lo configuro para que
cuente menos menos. Eso va a decrementar. Entonces tenemos que
restablecerlo todo. Para restablecer eso podemos decir
void, underscore, reset. Entonces diremos set state, vamos a establecer el conteo de
guiones bajos a cero Eso va a poner
eso de nuevo a cero. Vamos a desglosarlo. Creamos una clase privada llamada
underscore counter state Observe el guion bajo
antes del nombre. Eso lo hace privado
a este archivo. Agregamos un conteo simple de subrayados
enteros para mantener nuestro valor de contador Después escribimos tres métodos, incremento de
subrayado
para aumentar el conteo, el grado de
subrayado
para disminuir el conteo, el subrayado
restablecemos para devolverlo a cero Cada vez que llamamos a
estos métodos, envolvemos la lógica
dentro del estado establecido. Eso es lo que le dice a Flutter, oye, algo ha cambiado,
reconstruye la interfaz de usuario Sí, sé que también ves esas líneas
rojas y amarillas. No te preocupes. El código es
perfecto. Aquí no hay problemas en absoluto. Ahora que tenemos
nuestro estado listo, es hora de construir la
interfaz de usuario para nuestra aplicación de contador, y nos encargaremos de
eso en la siguiente lección.
5. Cómo construir la AppBar de interfaz de usuario y ColorScheme: Bien. Ahora que
tenemos la lógica en su lugar, es el momento de hacerla cobrar vida. Aquí es donde
tomamos todo el trabajo detrás de escena y de hecho lo
ponemos en la pantalla. Vamos a construir
la interfaz de usuario paso a paso, agradable y fácil y
luego hacerla dinámica. Empecemos por anular
el método de compilación dentro nuestro counter strate de guiones bajos,
que ya creamos Así que aquí vamos a
decir en override build, y déjame desplazarme hacia arriba. Y aquí, sólo voy
a quitar estas cosas. Y aquí, voy
a devolver andamio. Y ahora dentro del andamio, puedo agregar una APA Aquí vamos a decir APA dentro de esto, puedo agregar un título ese título va
a tener un widget de texto
y ese widget de texto
ahora mismo dice counterproplus Vamos a guardar eso. Lo que estamos haciendo aquí es
devolver un andamio Piensa en un andamio como la estructura
básica de una casa. Nos da la base. Un appr en la parte superior, una sección de cuerpo para llenarlo widget y la flexibilidad
para agregar más elementos posteriormente Ahora vamos a ejecutar la aplicación. Lo estoy ejecutando como la
app para Windows, como puedes ver aquí. Pero puedes elegir plataforma que quieras,
Windows, IOS,
Android o incluso web Vamos a correr esto. Ahí hay un simple bar sentado
justo encima de nuestra pantalla. Vamos a alinear
esta propiedad. Así que sólo voy a
ponerlo por aquí y mi código por aquí y simplemente
comprimir esto un poco. Esto es bueno. Entonces
déjame ver el código completo. Bien, tenemos nuestra app, pero podemos hacer que se
vea un poco más pulida con un toque
de diseño de materiales. Actualicemos nuestra barra de aplicaciones. Así que sólo voy a dejar
esto un poquito. Voy a romper estas cosas para que pueda leer mejor. Pongámoslo coma aquí. Ahora, lo que podemos hacer es
después del título aquí, quiero ponerlo coma y
dirás color de fondo, voy a decir tema punto,
apagado, punto color grito Voy a decir primaria. Yo voy a hacer lo
mismo aquí. Guardemos eso primero.
Veamos cómo se ve eso. Nuevamente, a ver si conseguimos
ese color azul. Y entonces podemos decir color de
primer plano, y yo voy a
hacer lo mismo Tema punto apagado
esquema de color punto punto en primaria. Guardemos eso, y eso nos
dará el texto blanco aquí. Entonces, ¿qué cambió aquí? Agregamos un color de fondo usando el color primario de
los temas actuales, y luego establecemos el color del texto que es un color de primer plano, para que se vea limpio y legible Agradable y sencillo. se siente como en
la app real, ¿no? En la siguiente lección,
comenzamos a construir el cuerpo de nuestra aplicación
contador Pro Plus, y ahí es donde comenzará la
verdadera diversión.
6. Construcción del cuerpo de la interfaz de usuario: Todo bien. Ahora que
tenemos nuestra barra de aplicaciones en su lugar, es el momento de darle el cuerpo a
nuestra aplicación. Aquí es donde mostraremos
el valor del contador y posteriormente agregaremos botones para
que cobre vida dinámicamente. Vamos a agregar el cuerpo
dentro de nuestro andamio. Se puede ver que este es nuestro
andamio y dentro de este, podemos decir cuerpo, y luego puedo colocarlo al centro Aquí, el centro toma a un niño, y ese niño
agregará en una columna. Ahora dentro de esa columna, necesitamos alinear
las cosas en el centro. Entonces diremos alineación de acceso
principal,
digamos
alineación del eje principal, centro de punto Entonces tenemos que asegurarnos de que todo tome solo el
tamaño que se requiere. Entonces diremos ejercicio principal, digamos ejercicio principal punto min. Bien. Ahora dentro de esto,
podemos agregar niños. Entonces aquí es donde entran todos los
artículos de nuestra app. Entonces aquí, podemos agregar
en un widget de texto. Y aquí podemos
decir tu contador. Y vamos a guardar eso. Se puede ver que su mostrador
apareció aquí. Y ahora en
realidad podemos darle estilo a esto. Entonces aquí podemos decir estilo. Entonces podemos decir que puntean fuera. Entonces podemos usar el tema del texto. Y aquí podemos usar el
título pequeño y guardarlo. Se puede ver que se volvió más audaz. Ahora, en lugar de título pequeño, podemos usar título medio. Eso va a hacer que
sea un poco más grande. Ahora, después de esto,
hay un widget de texto. Vas a agregar
otros widgets de texto. Ahora bien, este widget tecnológico va a contener la variable de nuestro conteo, que ahora es cero. Entonces aquí podemos decir conteo de subrayados en
dólares. Y si me dirijo, ahorre, ya se
puede ver que dice cero, pero es un cero muy minúsculo, así que hay que hacerlo grande. Entonces aquí, lo que podemos hacer
es decir estilo. Aquí, puedo usar textiles. El textil primero,
vamos a incrementar el tamaño
de esa variable. Para eso, podemos decir tamaño de fuente y puedo establecer el tamaño de
fuente en 80. Guarde eso. Se puede ver
que se hizo más grande. Ahora ese es un color negro
grueso muy negro. Necesitamos usar el color azul, los temas color azul. Para eso, podemos decir color. Entonces se puede decir Equipo punto,
punto ColorScheme punto primario Y puedes ver que ahora está tomando el
color primario del tema para esa variable. Desplácese hacia abajo, y veamos
qué sucedió realmente aquí. Vamos a
romper eso agradable y fácil. Envolvimos todo
dentro del widget central, que puedes ver aquí. Eso trae todo nuestro contenido justo en medio
de la pantalla. Dentro de eso, agregamos una columna. Podemos apilar varios
widgets verticalmente. Luego usamos la alineación del eje principal
y la configuramos en el centro. Para alinearlo perfectamente
en el centro. Después agregamos dos widgets, texto y otro texto. El primero, lo estamos usando para el título, tu contador. El siguiente, en realidad lo estamos usando para la variable de
contador. Dado que nuestro recuento de subrayados
comienza en cero por defecto, eso es lo que
verás en la pantalla Pero no te preocupes,
solo estamos calentando. La siguiente lección, agregaremos los botones que
realmente cambiarán este número,
incremento, decremento,
y el reinicio Por fin podrás ver
tu app en acción.
7. Cómo crear botones y funcionalidades para agregar la interfaz de usuario: Bien,
aquí es donde las cosas se ponen divertidas. Tenemos el mostrador
sentado en la pantalla. Ahora vamos a darle
algunos superpoderes. Vamos a agregar
tres botones, incremento para aumentar
el contador, decremento para disminuirlo, reiniciar para devolverlo a cero La mejor parte, ya
hemos escrito la lógica para estas
funciones antes. Ahora es el momento de
darles vida usando alguna interfaz de usuario. En lugar de botones simples, vamos a usar el icono de botón
elevado. Podemos tener tanto texto
como iconos. Esto es lo que
vamos a hacer. Vamos a usar
plus para incremento,
menos para decremento y refrescar para reiniciar Y como
los queremos lado a lado, usaremos widget de fila. Bien, así que comencemos. Entonces justo después de este
widget de texto que ves aquí, voy a agregar en
algún espacio para respirar. Entonces voy a decir caja de tamaño. Voy a llamar a una
altura de 15 pixeles. Y entonces aquí
vamos a sumar en nuestra fila. Guarde eso, se puede ver que el
mostrador se movió un poco hacia arriba. Ahora dentro de esa fila, queremos que todo
esté alineado al centro. Entonces diremos alineación de
acceso principal,
digamos alineación del eje principal
punto centro. Bien. Ahora bien, esta fila acoge
a muchos niños. Entonces dentro de esos niños, lo primero que
vamos a hacer es agregar un botón elevado con un icono. Entonces aquí, el botón elevado con icono toma en una
función y una etiqueta. Sigamos adelante y demos esto. El primero que
vamos a hacer es decremento. Entonces al presionar, queremos cargar la función de
decremento de subrayado Bien. Y para etiqueta, voy a usar un
widget de texto que dice decremento. Guarde eso. Mira, aquí
tenemos ese botón, pero no tiene íconos. Así que entremos y
agreguemos ese icono. Entonces vamos a decir icono,
y aquí
vamos a decir icono, íconos. Ahora, para decremento, se
suponía que debíamos usar menos, así que eso es eliminar icono Vamos a guardar eso. Verás,
tenemos esa cosa menos. Y si hago clic en eso,
se puede ver que va a
la versión menos. A partir de cero, va a menos. Ahora, agreguemos un poco de espacio
para respirar aquí. Esa es una caja de tamaño. Voy a establecer el
ancho esta vez en cinco. Y entonces lo que podemos hacer
es por otro botón, sólo
voy a copiar
esto, pegarlo aquí. Bien, entonces tenemos dos decrementos. Todo lo que tenemos que hacer es
cambiar esto para resetear, y esto va a restablecerse. Y aquí, reducimos
icono de actualización. Vamos a guardar eso. Ahora puedes ver,
tenemos el reset, y si un canon gl reset, vuelve a cero. Y ahora, nuevamente, agreguemos
algo de espacio para respirar. Y luego otro
botón elevado con un icono. Entonces esto va a
ser incremento y el texto va
a ser incremento Y aquí, esto se
va a sumar. Guarde eso. Ya veo que
tenemos ese botón de incremento. Ahora bien, si hago clic en decremento, va a menos Si hago clic en reiniciar,
va a cero. Ahora si hago clic en el botón
de incremento, sube. Bien, entonces, ¿qué está pasando aquí? Ves que usamos
algo llamado caja de tamaño. Esto le da un poco de
espacio para respirar en altura y ancho. Entonces, si damos ancho, va a mover los laterales Si le damos altura, se
va a mover en base a
la altura. Y entonces se puede ver que
usamos algo llamado fila. Fila alinea los
widgets horizontalmente. O también puedes ver que usamos alineación de ejes
principales y
hemos establecido esto al centro. Esto mantiene las cosas en el centro. Luego creamos tres botones, botón
elevado, botón
elevado y otro botón elevado. Estos botones llaman
a funciones como decremento, reinicio e incremento Ahora, cuando ejecutas esta app, puedes ver aquí,
tenemos decremento, nos reiniciaron, y también
obtuvimos incremento. Ahora aquí está la mejor parte.
Dado que toda la aplicación está construida con la interfaz de usuario de material, simplemente
puede cambiar la semilla del
esquema de color en el tema y toda la paleta de colores de la aplicación cambiará con ella.
Vamos a probar eso. Si nos desplazamos todo el camino hacia arriba,
verás este color. Voy a cambiar
eso a tal vez verde azulado. Y si
le pego en guardar, se puede ver que
todo cambió, y de hecho puedo cambiar eso
a verde y no guardo. Se puede ver que cambió a verde. Y si lo pongo en morado y no se guarda,
cambia a morado. Ahora tienes un CounterAP completamente funcional, dinámico y
amigable con el tema
8. Cómo corregir errores y problemas de rendimiento con IA: Bien, todos. Ahora que nuestro mostrador Pro plus
está tomando forma, es hora de una pequeña limpieza
primaveral. Vamos a usar la extensión
hangebty Codex para ayudarnos a encontrar y Tocamos esto
en nuestra última clase, pero mantener tu código
limpio y eficiente es un hábito que
te ahorrará mucho más tiempo
a largo plazo. Primero, asegurémonos de que
la extensión esté habilitada. Vamos a las extensiones aquí. Nuevamente vemos que tenemos códice, y voy a habilitarlo Y una vez que eso esté habilitado,
cerremos esto. Y ahora volvamos
a nuestro archivo punto principal. Una vez que esté listo, nos
dirigiremos al chat y simplemente haremos
clic en eso y daremos
una misión muy específica. Vamos a escribir esto. Quiero que compruebes si hay errores y problemas de
rendimiento en mi app dentro de la carpeta de labios. Por favor, escriba un comando
de bloqueo sobre cada error con una solución y
etiquételos como error uno, error dos, y así sucesivamente. Ahora una vez que tengas el baile,
sigamos adelante y pateemos a Hena Perfecto. Los comentarios están en. Echemos un
vistazo a lo que encontró. Sigamos adelante y
cerremos la charla aquí. Y si me desplazo hacia abajo, y se puede ver
que tenemos el primer error. Los widgets estáticos
en esta pantalla se reconstruyen cada vez que se ejecuta State La solución es agregar
una const a los widgets. Esos valores nunca cambian, como el texto
counterpro plus, la caja de tamaño, las
etiquetas de los botones y los iconos Entonces tenemos éste. Así que
sigamos adelante y arreglemos eso. Voy a decir const. Y se puede ver,
usamos el tema punto A, pero no nos dio ese bicho. Pero como ya sabemos
esto de nuestra clase anterior, puedes seguir adelante y
arreglar esta también. Entonces ahora lo que podemos hacer es aquí, podemos crear una variable que voy a llamar
esto tiene datos del equipo. Es igual a Team dt
de contexto. Eso es. Esta vez no voy a agregar esquema de
color. Eso es porque si me desplazo hacia abajo, puedes ver que tenemos
el tema del texto, la combinación de colores, y bueno, muchas otras cosas también. Entonces, lo que haremos
es
usar directamente los datos de este tema
para aplicar esto. Entonces aquí sólo
vamos a eliminar esto y les diremos datos. Y aquí haremos lo
mismo. Vamos a deshacernos de éste. Llamemos a esto como
datos. Eso lo guardaré. Y ahora si me desplazo hacia abajo, pueden
ver
que tenemos su contador. De hecho, puedes poner
este en la costa dos, y ahí vamos. Tenemos otro, voy a llamar
a esto como datos. Si los usas
datos, no podemos usar const, sigamos adelante
y eliminemos eso Y vamos a desplazarnos hacia abajo.
¿Qué más tenemos? Tenemos otro aquí así que solo
podemos decir datos temáticos. Digamos que
tenemos una caja de tamaño. Voy a decir const aquí
y hay un segundo bicho. Ahora antes de continuar y comenzar agregar contras a todo lo demás, veamos el segundo error. Esta fila puede desbordarse
en pantalla pequeña porque los tres botones mantienen sus
tablas de texto completo una al lado de la otra. Bien, entonces la solución se usa para envolver esos botones
con el rap richard. Bien, entonces veamos de qué
está hablando. Entonces, si trato de comprimir
esto, mira eso. Obtenemos esas partes amarillas
y negras. Esas son las cosas de las que necesitamos deshacernos
. Ese es el bicho. Entonces aquí, la solución es
usar un rap Richard. Entonces usamos fila, ¿verdad? Entonces lo que vamos a hacer es llevarnos aquí a
estos niños enteros. Voy a cortar eso. Y en vez de remar, voy a usar rap
y solo paginar esto. Bien, entonces nada cambia. Todo sigue igual, pero se puede ver ahora que están
bastante cerca el uno del otro. Y ahora si trato
de comprimir esto,
mira, el espaciado no
es tan bueno. Sin embargo, responde, pero el espaciado no es bueno. Entonces necesitamos agregar algo de espaciado. Sigamos adelante y agreguemos eso. Ahora, en la envoltura,
tenemos espaciado. Así puedo establecer el
espaciado en fino. Si configuro eso, ya
ves, tenemos ese espaciado. Pero ahora si comprimo esto, puedo ver que
viene uno debajo del otro para arreglar ese también. Para eso, llamaremos a
esto como espaciado de corridas. Voy a poner eso a 15. Ahora tienes mejor
espaciado ahí. Ahora, quiero que este botón
se alinee en el centro. Para alinear eso al centro, diré alineación. Centro de punto de alineación de rap. Guarde eso y eso
va a venir en el centro. Entonces tenemos a los niños aquí. Ahora tu
aplicación de contador responde. Ahora lo mejor es
que ya que estamos usando wrap, no
necesitamos
usar la caja dimensionada. Entonces aquí podemos
deshacernos de éste, para que podamos deshacernos de éste
también, y guardemos eso. Bien, entonces ahora el
espaciado está mucho más cerca. Y si comprimo esto, puedo ver cómo se ve eso. Entonces establecemos esto en 15. Voy a poner
eso a cinco atrás. Bien, entonces ahora están
cerca el uno del otro, y ellos también responden. Ahora, ahora que hemos hecho esto, puede ver
que está usando decremento y todas esas cosas y
no tenemos que usar
costo en esa Entonces ahora sigamos adelante
y ahora sigamos
adelante y pidamos a nuestra IA
otro chequeo. Bien,
vuelve a revisar el código y quita los comentarios si todo está arreglado. Sigamos adelante hit end. Bien, entonces obtuvimos la respuesta. Y si revisas esto, en realidad no agregamos se suponía que íbamos a agregar
el costo del texto, pero la IA
se encargó de eso. Entonces no tuvimos que agregar para los botones porque estamos
usando una función aquí, sino para las etiquetas y los iconos
se supone que debemos agregar. Pero el Códice sí lo
sumó para nosotros. Y bueno, increíble. Codex acaba
de darnos luz verde y nuestro código está limpio y
los s responden, y estamos listos para el próximo
desafío. Gran trabajo hoy.
9. Resumen y proyecto de clase: Y eso es todo.
Hemos construido con éxito la aplicación Counter Pro
plus juntos. Comenzamos
configurando nuestro proyecto y construyendo el
material personalizado de tres temas. Pasamos a dominar la gestión
estatal,
creando funciones de incremento,
decremento y reinicio que hacen que nuestra aplicación Pero no solo nos detuvimos ahí. Compramos el poder
de la IA agéntica para actuar como nuestro auditor personal de
codificación Usamos nuestro asistente de IA
para escanear la carpeta If, encontrando ajustes de rendimiento y errores de
diseño que incluso los desarrolladores
experimentados
a veces se pierden Como tener un
desarrollador senior ahí mismo en tu editor de código
asegurando que cada línea de código sea profesional
y limpia. Ahora es tu turno. El proyecto de tu
clase es construir tu propia versión de
la app Counter Pro Plus. Quiero ver tu toque
personal. Intente agregar nuevos iconos, cambiar esquemas de color e
incluso agregar una nueva función. Lo más importante, usa tu asistente de IA para
verificar tu trabajo. Una vez que hayas terminado,
sube una captura o una pantalla
según la galería del proyecto. Estaré ahí para
comprobarlo y darte un comentario. Recuerda, este es
un hito enorme. Al combinar tu lógica flotante con la solución de problemas de AI Power, ya
estás creando
aplicaciones como una Pro Si puedes dominar
estos fundamentos, puedes construir cualquier cosa en el mundo del desarrollo móvil Si estás disfrutando de esta clase, asegúrate de presionar el
botón de seguir en mi perfil. De esa manera, serás el
primero en saber cuándo
lanzamos la próxima aplicación de
la serie impulsada por IA. Gracias por codificar
conmigo el día de hoy. Yo soy tu sentido de Floater, y te veré
en la siguiente clase Hasta entonces, sigue experimentando, sigue construyendo y mantente curioso.
Nos vemos en la siguiente.
Flutter Sensei, Teaching Flutter from Scratch
