Flutter E-commerce App With Backend | Food Delivery App | Part 1

entonces extranjero entonces hacer Hola a todos, Assalamualaikum, bienvenidos a un tutorial
completo de creación de aplicaciones Flutter. aquí aprenderá cómo crear una aplicación de
comercio electrónico para entrega de alimentos y esta aplicación sería tanto para ios como para android y
esta aplicación también vendría con un back-end completo y por qué crear esta aplicación porque quieres dominar
flutter framework porque quieres dominar la suciedad lenguaje de programación y marco de back-end y también
desea conseguir un trabajo mucho después de hacerlo En este curso mejorarás mucho o dominarás el marco
Flutter y el lenguaje de programación Dart. si eres nuevo en flutter o si vienes de
otra experiencia u otra programación idioma o si eres un recién graduado de la universidad,
este es el lugar adecuado para ti porque esta sería una aplicación
completa y si estás buscando trabajo Inmediatamente después de terminar este tutorial tendrás
algunas cosas pesadas que escribir en tu CV.

Aquí cubriremos algunas características importantes, mientras que
primero aprenderemos cómo mostrar productos según la categoría. Luego, aprenderá cómo crear carritos de compras. Realizar su
pedido. Realizar un seguimiento del pedido. Después de eso, También aprenderá a crear perfiles de usuario y páginas, como
páginas de inicio de sesión y de registro, y también Vea cómo crear la ubicación de la dirección del usuario desde el
mapa de Google y también puede crear una ubicación basada en zonas.

El orden para los usuarios y toda la aplicación realizaría un seguimiento de
la autenticación del usuario y algunas otras características importantes. Cubriremos la notificación de Firebase y veremos
cómo realizar pagos y SDK de pago como PayPal y luego, desde el back-end, también aprenderá cómo cargar
nuevos productos y ver los detalles del pedido. y actualizar el orden y también verás el perfil de usuario
en la parte posterior mientras estás en el tutorial. parte 1 tendremos 12 horas y en 12 horas
cubriremos muchas ideas útiles primero Comience construyendo cuatro pantallas de interfaz de usuario
complejas y para construir esas pantallas usaremos widget de pila y posición, así como diferentes fragmentos,
cubriremos envoltorios de fragmentos y fragmentos caja al adaptador y una de las interfaces de usuario complejas sería
una vista de página animada donde veremos cómo escalar aumentar, reducir y animar la posición y, justo después,
aprenderemos sobre la arquitectura de nuestra aplicación. lo cual sería muy útil más adelante cuando
vayas a crear una nueva aplicación Y aquí cubriremos el repositorio del cliente API
y los controladores y también aprenderemos qué son y cómo construirlos y veremos su conexión entre
sí y después de aprender este concepto Veremos cómo cargarlos en las dependencias y nos aseguraremos
de que nuestras dependencias se carguen.

Cuando se inicie nuestra aplicación y luego continuaremos y
comenzaremos a trabajar con clases de modelos de construcción con el mapa json y la lista y sé que este
es un concepto muy aterrador para principiantes de Flutter, así que aquí lo tomaremos con calma
y cubriremos las cosas en detalle paso a paso y una vez. Si tenemos estas ideas, seguiremos adelante y crearemos
nuestro primer controlador de producto. controlador de tarjeta y aprenderemos cómo procesar los
datos relacionados y a lo largo de esta primera parte También cubrimos el diseño responsivo, lo que también significa
que cuando ejecutamos nuestra aplicación en iOS o Android diferentes dispositivos se verían exactamente iguales
pero al mismo tiempo tendrán proporciones tamaño, así que justo después de la parte 1 de
este tutorial definitivamente mejorarás en aleteo y lenguaje de programación dart mientras que en la parte
2 tendremos 12 horas y a las 12 horas terminarás 8 pantalla de interfaz de usuario compleja y después de esto, realmente
te convertirás en un héroe en el desarrollo frontal más plano.

Y aquí aprenderá cómo crear clases de modelos complejos
y cómo trabajar con mapas y listas json. Otra característica importante sería trabajar
con Google Map y cómo interactuar con Google Map y guarde los datos del usuario y luego aprenderá cómo crear
usuarios de ubicación y controladores de autenticación. y cómo procesar los datos relacionados, así
que aprenderemos y nos centraremos en cómo Elija la ubicación del usuario según la pestaña del usuario y luego aprenderá
cómo realizar un seguimiento de los pedidos de los usuarios. y muestre la notificación relacionada con el usuario
desde firebase y también aprenderá cómo configurar realice el pago de PayPal utilizando PayPal SDK y todos
ellos también estarían cubiertos en el backend para Gestión de usuarios: otra característica importante sería la ubicación
y el servicio de los usuarios basados ​​en zonas.

Entonces, al final de la segunda parte, dominarás realmente
el lenguaje de programación Dart y la parte del tutorial. tres tendremos tres horas y aquí nos ocuparemos de
algunos de los problemas específicos de la plataforma como notificación tanto para Android como para iOS y también
veremos cómo convertir esta aplicación móvil en aplicación web y aquí es donde brilla el aleteo, está
bien, porque el aleteo una vez que escribes código en uno plataforma prácticamente puedes ejecutarla en todas
partes, así que solo necesitas saber cómo construir una aplicación responsiva y al final veremos cómo publicar
esta aplicación en la tienda de aplicaciones.

Hola a todos. así que comencemos bien, este es el código de
inicio que espero que hayas descargado de el sitio web y si lo descargas e instalas tendrás una interfaz
de usuario básica como esta y un proyecto básico con esta estructura de proyecto donde tendrás
tus activos de fuentes y muchas imágenes Muy bien, entonces tendrás tu carpeta de labios y
dentro de ella he incluido el color, los colores. que vamos a usar para nuestra aplicación, bien los colores
básicos y luego tenemos este archivo principal Y, por supuesto, este es una vez más el archivo principal
más básico que salió del proyecto Flutter. directamente, está bien, entonces no vamos a usar eso,
está bien, ahora primero eche un vistazo a lo que Lo que vamos a hacer durante las primeras dos horas.

Definitivamente
construiré nuestra interfaz de usuario primero. Bien, mientras estoy aquí tengo esta interfaz de usuario. Esta interfaz
de usuario se puede desplazar y, por supuesto, puedes hacer clic en ella. o puedes ir a una nueva página y regresar y, por supuesto,
tenemos esta interfaz de usuario un poco diferente a la aquí está bien, está bien, y aquí tengo
este generador de vistas de página o control deslizante en realidad si lo entiendes
de forma sencilla y tendremos nuestro página de inicio de sesión donde te pide
que inicies sesión y cosas así pero hablaremos de eso más tarde, así que primero trabaje en
la página de inicio.

Vale, esta es la página de inicio. página que queremos crear y nuestra página de inicio tendrá
una sección de encabezado y la sección principal aquí y la sección de pie de página está bien, así que esta es
la página que queremos dibujar primero, está bien, hazlo, eh. Primero necesitamos crear algunos archivos uh dart.
Está bien, aquí dentro de la carpeta lib. Crearé un directorio y en este directorio guardaré
todos los archivos de nuestra página de inicio. y aquí crearé un nuevo archivo dart.

Está bien, así
que sigamos adelante y creemos un nuevo archivo dart. Bueno, el nombre de este archivo Dart sería la página principal de alimentos,
así que sigamos adelante y llamémoslo página principal de alimentos. Bueno, esta sería una clase con estado. Bien, así que
sigamos adelante y creemos una clase con estado. Y la llamaré página principal de alimentos y luego necesitamos
importar algunas de las dependencias o bibliotecas.

Ahora la llamo página principal de comida porque contendrá
este encabezado y esta sección del cuerpo, ¿vale? Entonces, se trata de la página principal de alimentos, por lo
que la página principal de alimentos contendría este encabezado y esta sección del cuerpo está bien, lo primero que queremos
hacer es seguir adelante y dibujar este encabezado Está bien, entonces, para este, lo que haré será
seguir adelante dentro de este contenedor y dentro. este contenedor intentará dibujar directamente esta sección
de encabezado por ahora, esta sección de encabezado Sería estático, pero en el futuro leeremos esta sección
del encabezado, esta información de nuestra base de datos.

Pero de todos modos tengo este contenedor aquí, bueno, tengo
este contenedor aquí, así que dentro de este contenedor declararé aquí otro niño, así que
déjame minimizar esto, está bien y aquí el El niño sería otro contenedor. Ahora tomemos una estructura
básica de este contenedor, lo que queremos. Definitivamente esta es una fila, entonces tendremos
una fila y dentro de la fila tendremos dos hijos. este y este ahora esta fila los primeros
hijos o el primer hijo este sería una vez nuevamente en la columna donde tendrás esta letra el
nombre del país y el lugar pero dentro de la columna También tendrá otra fila porque estos dos elementos aquí,
el texto y la flecha están bien, así que una vez más.

La primera sección sería la fila, está bien, eso es lo que
haremos, así que seguiremos adelante y aquí declararemos un niño y aquí lo llamaremos fila y aquí tendremos
niños bien ahora como dije que dentro de este fila tendremos dos secciones, este elemento y este,
muy bien, este una vez más una columna, ¿y qué? haremos, seguiremos adelante y declararemos la columna aquí,
así que hagamos una columna y hacemos niños aquí Bueno, eso es para este y luego queremos hacer
este también, pero ahora esto es simplemente un contenedor está bien, así que seguiremos adelante y crearemos
un contenedor para este, sigamos adelante y hagamos Es así que aquí dentro de la fila continuaré y
declararé un contenedor, crearé un contenedor.

Y el contenedor tendrá ancho y alto, así
que por ahora digamos que el ancho es 45 y la altura es 45, está bien, y comenzaré
con este porque sería más simple. y sería fácil de entender, está bien, ahora
por aquí lo haré porque, como ves tenemos este borde así que queremos decorar nuestro
contenedor con un color de fondo, ¿vale? Así que ahora, por eso usaría decoración y
haríamos decoración de cajas, ¿vale? en la decoración de la caja definitivamente tendrá un radio de borde,
así que eso es lo que seguiremos adelante y haremos Está bien, llamaremos al radio del borde punto circular
y aquí diremos radio del borde 15 en todas partes. Bien, todas estas esquinas están bien y ahora aquí
también tendremos color para nuestro contenedor. entonces eso es lo que haremos ahora aquí hacemos colores punto
um guarde el azul por ahora está bien, definitivamente tenemos cambiarlos en el futuro pronto, está bien,
esa es la estructura básica y aquí Quiero poner un texto al azar.

Está bien,
país y luego aquí hacemos otro texto. digamos que la ciudad está bien, hasta ahora todo bien, pero,
por supuesto, si seguimos adelante y la ejecutamos, no lo hará. ejecutar, todavía tendremos este predeterminado, podemos
continuar y verificarlo y conocemos esa aplicación reiniciado por qué porque tenemos que venir aquí y llamar a
esta página principal de alimentos desde aquí, ¿vale? Entonces, lo que haremos será eliminar esta
sección y simplemente llamaré aquí.

La página principal de alimentos está bien y se conectaría
e importaría la dependencia inmediatamente. Asegúrate de tener esta dependencia bien y,
para ser claro, simplemente seguiré adelante. y elimine esto aquí y ya no necesitamos
esta sección, está bien, ahora está mucho más limpio, así que ahora seguiremos adelante,
lo ejecutaremos y veremos cómo se ve, um, sí, Tiene una pantalla bastante fea, pero sí, algo
de lo que queríamos todavía está ahí. Bien, bueno, lo primero que quiero eliminar es este
ícono de depuración porque no me gusta. Está bien, configuraremos el banner de depuración
del modo marcado en falso y luego, con suerte, Debería desaparecer y ahora se ha ido, ahora tenemos
este fondo negro o pantalla negra solo porque usted está o estamos usando un contenedor aquí directamente
dentro del método de compilación, entonces, ¿qué podríamos hacer, podríamos simplemente seguir adelante y envolverlo
alrededor de otro widget y eso sería un andamio, está bien, pero Para este simplemente cortaré este y aquí haría
un andamio, está bien y dentro de él regresaré. cuerpo y dentro del cuerpo pondremos este contenedor y
con suerte veremos una pantalla de país mucho mejor.

Y un nombre, bueno, quizás te preguntes para
qué sirve este contenedor en el futuro. Bueno, echemos un vistazo a esta aplicación
actual aquí si te desplazas para Al ver la sección principal, el color cambia, por lo que
en el futuro, a medida que nos desplazamos, queremos que sección principal el color debería cambiar bien y ahora
para ese propósito queremos poner algo aquí un parámetro de desplazamiento está bien, por
eso tenemos este, pero por ahora no es tan útil Eso es lo que queremos hacer en el futuro,
por eso tenemos este contenedor aquí. Está bien, ahora volvamos a nuestra aplicación
aquí. Está bien, está bien. Así que ahora sigamos adelante y solucionemos otro problema.
¿Qué queremos? Quiero que esto sea lo que Esto debería estar a la derecha y ellos deberían estar a la izquierda,
pero ahora mismo, bueno, esto está a la izquierda. y esto no está a la izquierda, definitivamente
empuja este a la derecha, vale, ahora mira este Bueno, definitivamente estos dos están dentro
de esta fila y la fila tiene una propiedad que podemos usar y que se llama acceso principal,
así que eso es lo que hacemos acceso principal alineación y luego usaremos un espacio entre para
crear el mayor espacio vacío posible dentro la pantalla y colóquelos uno a la izquierda
y el otro a la derecha, así se creará espacio vacío, así que sigamos adelante y ejecutemos,
guárdelo y podemos ver que ahora el problema es Al igual que este, queremos que estén en la parte superior derecha,
así que mientras uno ya está en la parte superior, este no está bien, así que ahora esta columna ya está en la parte
superior porque la propiedad predeterminada de la columna está en la parte superior, está bien, pero ahora este está dentro
de la fila, ahora la propiedad predeterminada de las filas es Intenta ponerlo centrado verticalmente, por lo
que está centrado verticalmente, por eso está aquí, pero si tiene una columna dentro de la
fila y la fila no tiene otra propiedad establecida entonces la propiedad predeterminada de las columnas, que debe permanecer
en la parte superior, se usa bien, así que aquí contenedor está usando su propiedad predeterminada dentro de la fila, entonces, ¿qué
quiero decir con que está usando la propiedad predeterminada de filas? que debería estar en el centro vertical, ahí es
donde está ahora y la columna debería estar en la parte superior, así que ahí es donde está ahora, está
bien, pero ahora, si echas un vistazo al diseño aquí Esta es la barra superior o sección de encabezado y luego tendremos
una sección de cuerpo, así que definitivamente todo esto sección y esta debe estar dentro de una columna,
esta y ésta deben estar dentro de una columna Así que ahora solo tenemos este, pero en el futuro
dibujaremos este y por qué les digo esto.

Uno porque queremos ponerlo en la parte superior, así que
si puedo poner esta fila dentro de una columna, entonces pondría todo lo que los niños intentan poner desde
arriba, está bien, eso es lo que dije antes Así se usa la propiedad superior, pero si puedo poner la
fila dentro de una columna, entonces todo funcionaría. estar en la cima al menos comenzaría desde arriba
y lo necesitamos porque, como dije, en el futuro Tendremos más secciones, así que lo que haré será seguir adelante
y colocar estos dos contenedores dentro de una columna.

Espero que tenga sentido, así que cortaré
este y lo pondré dentro de una columna. y por aquí tendré hijos y lo pondré ahí ahora
vamos a guardarlo y ahora está arriba así que Esto está funcionando como esperábamos y, de acuerdo
con la teoría, ahora sigamos adelante y creemos un margen para este contenedor porque hay demasiado en la parte superior,
por lo que aquí podemos establecer una propiedad de margen y aquí solo hacemos inserciones de borde y aquí
hacemos arriba, digamos, 45 y abajo, digamos 15 ahora lo guardaremos y veremos que bajó ahora
por aquí son demasiado esta propiedad es demasiado a la izquierda y demasiado a la derecha también
podemos ayudar con esto ahora hacemos esto uno dentro del contenedor, por lo que el contenedor
mismo desde el interior del contenedor creará espacio vacío espacio en blanco está bien, entonces aquí usaría
un relleno y una vez más aquí inserta inserciones de borde Solo así quedaría, digamos, 20 y escribiríamos,
digamos, 20.

Está bien, ya se ve mucho mejor. Está bien ahora mientras esta sección
se hará un poco más tarde aquí. Podemos poner un ícono aquí. Para hacerlo,
aquí podemos simplemente usar un niño y Usaríamos el widget de íconos para hacer eso, de modo que los
íconos busquen puntos, creo que antes de seguir adelante. Creo que podemos importarlo bien, este
y luego usaremos el color, así Los colores puntean ahora, este paquete de íconos es
parte de Flatter, por lo que no es necesario importarlo.

Está bien, ahora continuaremos y lo guardaremos. Ahora
vemos que está ahí. Está bien, ahora para asegurarnos. que está en el centro, podemos seguir adelante y simplemente
envolver este contenedor alrededor de un widget central Entonces, en Mac, usaría la opción Enter y me dará
esta opción, así que la colocaré alrededor del centro. Bueno, si de alguna manera no está centrado, lo centrará,
por supuesto, todavía no vemos ninguna diferencia aquí. Bueno, ahora podemos cambiar el color de este
fondo y este no es el color que queremos. queremos, como podemos ver en la aplicación, queremos
un tipo diferente de color azul, no este, así que Aquí podemos cambiar el color, así que aquí yo
haría el punto de colores de la aplicación.

Color principal, bien, ¿cuál es el color de la aplicación de
este archivo? Una vez más, este es el archivo de color que tengo y el nombre de la clase es colores de la aplicación y aquí he
declarado que este es el color principal como final estático Entonces este es un miembro estático, lo que significa que puedes
acceder a esta variable miembro desde cualquier lugar. en tu proyecto solo usa este nombre de clase, está
bien, eso es lo que hacen los miembros estáticos si tiene un miembro estático en cualquier lugar de su clase
o en cualquier lugar de su proyecto, simplemente use el nombre de la clase pone un punto en el nombre del miembro, por lo que nuestro nombre
de miembro es el color principal, está bien, eso es lo que usaremos Bien, ahora se ve tal como lo vimos.

Bien, ahora
queremos seguir adelante y crear esta sección, pero Ahora, si ves esta aplicación, muchos de los lugares
de este tamaño de fuente y esta fuente como este este este y este bueno, todos son iguales,
entonces, ¿qué podríamos hacer? Podríamos seguir adelante y crear un widget de texto
predeterminado para nosotros. Vale, yo diría. En realidad, es un widget de texto personalizado, así que ahora seguiremos
adelante y crearemos un widget de texto personalizado. para que podamos reutilizarlo una y otra vez, queremos
crear un widget de texto reutilizable, ¿vale? Muy bien, iré aquí y dentro de la
carpeta lib crearé otra carpeta. y lo llamaremos widgets, está bien ahora, dentro
de él crearé una clase y le llamaré uh texto grande, vale, texto grande, punto, dardo por aquí,
crearé una clase sin estado, así que haría st y entonces tendré esta opción y lo llamaré texto grande.
Bien, ahora por aquí continuaré e importaré.

Las bibliotecas necesarias y estamos listos para comenzar,
ahora definitivamente no queremos importar, usar contenedor aquí simplemente devolveremos un widget de
texto, está bien y necesitamos algo predeterminado propiedades, de lo contrario mostrará un error, pero
ahora mire este widget de texto porque queremos que ser reutilizable para que veas que es reutilizable aquí en muchos
lugares, incluido creo que en el interior, pero ya se acabó. Aquí el color es bastante diferente a este, así que
definitivamente queremos que el color sea dinámico. Por eso seguimos adelante y declaramos el color final.
Esto significa que pasaremos una variable de color. Está bien, y luego tendremos una secuencia como texto,
por lo que este texto es diferente a este.

Entonces el texto se pasaría desde la función
de llamada, así que aquí hacemos la cadena final texto, está bien, ¿qué más podemos mencionar? También podemos mencionar
un tamaño. De acuerdo, tendremos un tamaño predeterminado establecido dentro. de este conjunto dentro de este widget sin estado, pero también
podemos, si es necesario, pasar un tamaño diferente Vale, está bien y, como puedes ver aquí, tenemos
este texto largo, un nombre largo de comida aquí. o título y aquí tenemos este punto punto punto, así que
también queremos usarlo y es por eso que necesitamos para configurar otra propiedad aquí declarar y que
se llama desbordamiento de texto, está bien y Aquí declararemos el desbordamiento de texto variable y luego, está
bien, entonces necesitamos configurar algunas de las propiedades.

Dentro del constructor con, de lo contrario obtendremos
un error, así que sigamos adelante y hagámoslo bien. y ahora el color, creo que el color debería
ser opcional porque podemos pasar el color o Puede que no pase el color, así que aquí el color
es opcional, está bien, y el texto es uh. Bueno, envía el texto, así que lo ajustaré al widget
requerido. Está bien, veamos qué más y pienso. aquí ahora con respecto a este desbordamiento de texto, así que con
respecto a este desbordamiento de texto también configuramos configuramos el predeterminado, así que hacemos este desbordamiento de puntos,
lo llamas elipses de puntos de desbordamiento de texto, está bien, entonces Si el tamaño del texto es más largo que cierto
ancho, se mostrarán estos puntos.

Estos puntos se llaman elipses y esta es la propiedad
predeterminada que estamos configurando. pero también podemos anularlo porque aquí tiene otras propiedades
que puedes atenuar para que el clip sea visible Cosas así, así que en el futuro, si lo
deseas, podemos pasar un valor diferente. y eso tendrá efecto; de lo contrario, usaremos
elipses de desbordamiento, y para el tamaño ahora el tamaño es interesante um en general aquí ahora
mismo estableceremos el tamaño predeterminado es uh 20 está bien, ahora veamos,
así que eliminemos este Bien, ahora el error debería desaparecer, así que ahora
tenemos estas propiedades aquí y los parámetros y todo lo que tenemos que hacer es seguir adelante y llegar a este
texto con el interior y configurarlo bien, así que aquí ahora hacemos texto, este texto es el texto que
transmitirá desde la función de color y para desbordamiento, por lo que el widget de texto toma la
propiedad de desbordamiento y usaremos la que está Establecer como predeterminado o el uno pasará bien,
por lo que esto se transmitirá aquí.

Ahora el predeterminado es este y luego
haremos el color y luego el color. color Entonces este es el color que tenemos, veamos. Oh, lo siento, realmente no podemos poner color dentro del
widget de texto directamente para el que necesitamos diseñar. aquí y dentro de la propiedad de estilo podemos usar un estilo
de texto y usando el estilo de texto podemos usar color Bien, ahora sea cual sea el color que pases, ese
color usaremos y aquí tendremos una fuente.

Peso, por lo que la fuente predeterminada para texto grande
usaremos 400 y la familia de fuentes usaremos roberto No estoy seguro de cómo lo llaman y debería
estar en tu código de inicio si vienes aquí. si dices este archivo yml de especificación pop y
aquí ya tenemos a roberto y la fuente en sí es dentro de esta carpeta de recursos, por lo
que deberíamos poder acceder a ella Ahora, para el tamaño de fuente, usaremos
el tamaño que transmitimos. Bien, este es nuestro widget de texto reutilizable y
aquí configuramos el tamaño del texto en color y desbordamiento y cosas así está bien, bueno para el color,
creo que podemos configurar un valor predeterminado color en realidad, así que para que este pueda usar el
color predeterminado, podemos seguir adelante y bueno, Creo que habíamos eliminado esta propiedad final
de cadena y aquí usaré const ahora como color. el color principal debería venir de aquí, que es este
o para el texto tendremos un color negro principal Así que seguiré adelante y copiaré esto y lo
pondré aquí, está bien, pero puedes preguntar.

¿Por qué no estoy usando la propiedad predeterminada directamente?
Quiero decir que puedo llamar a esta directamente desde aquí. no, no puedes si quieres configurar una propiedad de color predeterminada,
debes usar una propiedad de color predeterminada como estos hexadecimales o cualquier tipo de números,
no ningún tipo de variable como la que tenemos aquí Vemos que no puedes usar el color como propiedad predeterminada.
De esta manera, debes usarlo en hexadecimal o cualquier otro. otros números o dígitos no pueden ser una variable,
está bien, entonces esta es la predeterminada Bien, ahora lo que podríamos hacer podríamos
seguir adelante y usarlo, así que aquí tengo este. Entonces, en lugar de llamar al país ahora mismo, puedo llamar a nuestro
mensaje de texto grande, así que llamó texto grande aquí.

Entonces, como puedes ver, puedes cambiar entre ellos, así
que definitivamente el primero está bien y por aquí. el texto que quieras decir dice bangladesh o
tu país favorito lo que quieras poner soy de Bangladesh, por eso estoy poniendo este, ahora
qué hará, qué haremos, seguiremos adelante. y ejecuta nuestra aplicación en el simulador, así que veamos
qué sucede, está bien, eso es lo que vemos hermoso ahora. aquí podemos ahora está usando el color predeterminado,
que es este color negro principal, pero Podemos cambiar el color si lo deseas. Aprendimos
que podemos pasar el color y podemos. También pase el tamaño del texto, así que aquí primero
pasaría el color y haría los colores de la aplicación. punto color principal está bien, ahora iremos a actualizarlo
y guardarlo para que funcione correctamente y ahora mismo el tamaño predeterminado es 20, así
que puedo decir que quiero usar un tamaño como 30 y podemos hacerlo, pero definitivamente
eso no es lo que queremos, ¿vale? Así que este widget de texto grande nos ahorrará
mucho tiempo en el futuro, y así es como creas un texto reutilizable.

Bien, ahora con esto hemos
terminado con el texto reutilizable para el texto grande. Muy bien, ahora queremos crear un texto reutilizable
o un texto pequeño como la ciudad de aquí, así que Una vez más, si miras con atención, el texto pequeño
se está utilizando en otros lugares como aquí. como aquí o como aquí está bien, como aquí así
que definitivamente quiero crear otro reutilizable texto para nuestra aplicación, pero ese sería
un texto pequeño, entonces, ¿qué haremos? Iré aquí y justo aquí crearé un nuevo archivo
y lo llamaré pequeño punto de texto.

Dart, está bien ahora, con suerte, porque ya hicimos el texto grande,
así que podemos copiar gran parte, así que simplemente Copie este aquí y haremos algunos cambios menores. Definitivamente,
este no es el texto grande que desearía. Para llamarlo texto pequeño correctamente y el mismo
nombre tenemos que usarlo en el constructor. Bueno, para este definitivamente queremos configurar un
tamaño de texto predeterminado y lo hacemos como 12 Está bien, y para este realmente no necesitamos
ningún desbordamiento, así que eliminaremos este. desbordamiento desde aquí que no necesitamos
y también desde aquí todo bien y Aún mantendremos la familia de fuentes Roberto
y aquí usaremos eliminar el peso de la fuente.

Ahora el tamaño es el tamaño que se enviaría
ahora para el color una vez más. Quiero configurar un color predeterminado, pero este
color predeterminado definitivamente no es este. o no negro, no negro directo, así que vendremos
aquí y usaremos el color negro principal para El color predeterminado está bien, que sería más parecido
a este, pero podemos cambiarlo si lo aprobamos. pasado el color, así que sigamos adelante y revisemos
aquí, lo quitaré y lo pondré allí. Vale, está bien, entonces este es el predeterminado. Y aquí
en realidad también queremos configurar un mensaje de texto. altura para que podamos cambiarla si es necesario,
aquí declararé doble altura y aquí esto La altura del punto es igual a 1,2, por lo que si vienes aquí
tendrán un espacio predeterminado entre cada uno. líneas bien y esto es lo que estará haciendo bien y aquí
queremos configurarlo, así que lo configuraremos como altura, bueno, esta es la predeterminada, pero ahora
podremos cambiarla. Creo que en texto grande, estoy falta otro porque queremos tener este problema de desbordamiento,
así que aquí necesito establecer una línea máxima uno está bien, si es más de una línea, tendrá
estos puntos suspensivos que se llama tomar Ocúpate de este desbordamiento ahora que hemos terminado con este
pequeño texto, entonces, ¿qué podrías hacer? Ven aquí y úsalo bien, así que aquí lo llamaremos texto
pequeño y aquí simplemente pasaremos el uh parámetro requerido en este momento veremos
nuestra aplicación y veremos cómo funciona vale, vale, eh, veamos, creo que pegué, copié
el color equivocado, aunque debería ser Color negro principal, lo siento, creo que este debería
ser el color del texto, así que copié el incorrecto.

Así que vendré aquí y lo pondré allí. Está
bien, este es el predeterminado, por supuesto. El predeterminado es muy ligero, así es, está bien,
pero como dije, podemos cambiarlo para cambiar. que simplemente podemos venir aquí y pasaremos la
propiedad de color y haremos colores punto negro 54 para este, así que solo para este cambiaremos
un color diferente, vale, quiero decir. De lo contrario, terminaremos con un color predeterminado
como este. Bien, ahora con estos dos. widget reutilizable, nos ahorrará mucho tiempo. Está bien,
a continuación veremos cómo seguir adelante y dibuja este este ícono para poder dibujar este ícono
qué debemos hacer envolver este pequeño texto dentro de otro widget de fila y luego el texto pequeño
y este ícono permanecerían juntos, ¿vale? Por eso cortaré este aquí.

Ahora escribiré
aquí la fila y dentro de ella. Tendremos hijos porque sabemos que la fila requiere
niños y este sería el primer hijo y después de eso, simplemente podemos seguir adelante y usar
un widget de ícono y aquí hacemos íconos punteados. botón desplegable de flecha así, vale, menú desplegable de
flecha, redondeado este, vale, eso es todo lo que queremos Úselo ahora, después de eso continuaremos y lo guardaremos
y me dejaremos encontrar mi simulador, el que estamos. Trabajando con este para que se vea exactamente
igual al que vimos anteriormente en el diseño. Bueno, este está bien, así que a continuación seguiremos
adelante y crearemos este generador de vistas de página. Está bien, esto sería muy emocionante
y también sería un poco largo. Para hacer eso, primero debemos seguir adelante
y crear un nuevo archivo dart dentro de esta casa. La carpeta creará un nuevo archivo Dart y lo llamaremos cuerpo de la
página de comida. Está bien, entonces página de comida.

Body dot dart está bien, ahora esta sería una clase con
estado, así que lo que haría aquí con estado y lo haré ciérralo aquí y lo llamaré aquí cuerpo de página
de comida, y ya tenemos un contenedor. Así que seguiremos adelante e importaremos la biblioteca que
necesitamos. Ahora déjame hablar sobre la estructura. de esta página que oh esto es parte de toda la
pantalla déjame hablar sobre esta parte de cómo Definitivamente van a construir esto bien, como
puede ver al desplazarse por aquí que tienen que Podrás desplazarte hacia la izquierda y hacia la derecha y luego
hay dos partes para esta página principal aquí.

Bueno, aquí tenemos la sección de vista a la derecha,
por lo que se superpondrán entre sí. Entonces, dentro de este contenedor, de alguna manera también
necesitamos poder usar el widget de pila porque sabemos que Si usamos un widget de pila, podremos superponer
widgets o contenido entre sí. eso es lo que tenemos que hacer y como vamos a utilizar
el creador de páginas, me refiero a esto a la izquierda y desplazamiento hacia la derecha, por lo que necesitamos usar el creador de páginas,
o el controlador de páginas o el creador de vistas de páginas. Bueno, todos están conectados de alguna manera, así que aquí
seguiría adelante y primero haría child y inside child.

Llamaré pageview.builder a este, como cualquier otro constructor,
se necesita generador de elementos, está bien. eso es lo que tenemos aquí ahora generador de elementos, se necesita
una función que realmente funcione con dos parámetros El primero es un contexto y el segundo es un índice,
por lo que en nuestro caso lo llamaremos posición. puedes llamarlo como quieras, está bien, ahora
aquí presiona enter para que regresemos como esto entonces tendremos estos dos corchetes y dentro de
ellos tenemos que devolver algo, está bien, por ahora También devuelve el contenedor, está bien, vacía el contenedor
y aquí el creador de páginas también toma un contador. que se llama recuento de elementos, así que eso es lo que hacemos
y por ahora lo configuraremos de forma predeterminada en cinco. ahora este cinco y esta posición están conectados
porque la posición comenzaría desde cero y más Aquí terminaremos teniendo cinco, por lo que aumentará
de cero a cuatro, por lo que el índice o posición del El primero es cero, el último es cuatro y juntos tenemos
cinco elementos aquí, así que eso es lo que Ahora tengo otra cosa, aunque definitivamente no
queremos devolver un contenedor directamente.

Queremos poder devolver algo que se desplace hacia
la izquierda y hacia la derecha y tendrán esto espacio como puedes ver aquí a izquierda y derecha,
tenemos un poco de espacio como puedes ver Muy bien, es por eso que aquí, en lugar de devolver
el contenedor, en realidad quiero regresar. una función aquí y la llamaré elemento de página de creación.
Bueno, ahora el elemento de página de creación tomaría Definitivamente dos cosas, la primera es la posición,
así que envía el índice y qué más. veamos bien, por ahora estamos enviando índice y sería
bastante bueno con eso en el futuro agregaremos más elementos, así que en este caso la posición es nuestro
índice y bueno, por supuesto, tenemos que seguir adelante y declarar esta función, así que aquí seguiremos adelante
y devolveremos esta función y declararemos su cuerpo.

Y la función devolverá el widget, así que eso
es lo que vamos a hacer y aquí compilamos página artículo ahora aquí int index mientras este índice esté en esta posición,
está bien, ahora necesitamos devolver algo porque tenemos este objeto de tipo de retorno, así que eso es
lo que vamos a devolver ahora y ahora aquí regresaremos Bueno, primero devolveremos un contenedor aquí y, con suerte,
después de eso no tendremos ningún error. Así que primero queremos construir este contenedor.
Vale, este o déjame encontrar uno amarillo. aquí la parte amarilla y luego construiremos
esta, la otra encima, está bien, sí, dije Sé que dije que vamos a devolver un widget de pila
aquí, quiero decir que necesitamos una pila.

Widget y tendremos uno, pero primero trabajemos con el
primero, está bien, está bien, vamos a hacerlo. que necesitamos establecer ciertas restricciones,
como margen de relleno y altura, cosas así Bien, primero lo que haremos será seguir adelante y configurar
una altura para ello y decir establecer nuestra altura 220. y luego queremos establecerle un margen, así que siga
adelante y haga eso, solo hacemos inserciones de borde izquierda cinco derecha cinco y aquí porque tenemos esta frontera
y queremos tener una decoración entonces hacemos decoración y aquí hacemos
decoración de caja y aquí radio de borde Entonces hacemos el radio del borde. punto circular 30 bien, eso es lo que queremos
hacer ahora aquí tendremos color y Por ahora tendremos un color, digamos,
un color estable ox ff69c5df Por ahora solo tendremos un color
y creo que está bien, así que ¿Qué podríamos hacer? Podríamos seguir adelante,
ejecutarlo y ver cómo funciona. ahora sigamos adelante y ejecútelo pero definitivamente nada va a funcionar porque creamos
una nueva página pero no está bien conectada De todos modos, esta es la página principal de comida,
así que desde aquí deberíamos llamarla.

Ahora recuerda que ya hicimos una configuración
para este aquí, tenemos una columna y dentro de la columna tenemos este contenedor
y este contenedor es este que muestra este Así que justo debajo podemos llamar a nuestro archivo dart cuerpo de página
de alimentos, por lo que el nombre es cuerpo de página de alimentos. así que cópialo y ponlo aquí y lo llamaremos
así y todo lo que tenemos que hacer es para importarlo, está bien, sigamos adelante e importemoslo,
ahora ejecútelo y veamos qué vemos, bien. Definitivamente tenemos algunos errores aquí y estos errores
tienen que ver con restricciones, vamos a revisarlos. por lo que a la ventana gráfica horizontal se le dio una altura
ilimitada, por lo que el error significa que aquí hay un contenedor, pero el contenedor no tiene ningún tamaño,
está bien, especialmente la altura que necesitas mencionar la altura, está bien, eso es lo que queremos hacer,
así que seguiremos adelante y mencionaremos la altura.

Aquí, entonces hacemos una altura, digamos 320, y veremos
si desaparece. Sí, el error desapareció. Al mismo tiempo, esto también significa que el desplazamiento de
nuestro generador de páginas de desplazamiento ya está disponible. funcionando bien ahora para que sea interesante aquí,
haría un tipo diferente de color para que tengamos un color ahora mismo aquí y tenemos cinco
elementos aquí, por eso se llama se llama cinco veces ahora aquí puedo verificar el índice,
está bien, haré que el índice sea par, entonces usa este color si no es uniforme usaremos un color un poco
diferente, está bien y ahora aquí está ox ff929 4 cc, así que ahora guardémoslo como ves según el
índice, tenemos diferentes colores, ¿vale? Ahora esto también sería útil en el futuro cuando carguemos
la imagen desde la red, incluso si la imagen está no cargado, todavía tendremos este color como El cargador principal está bien y una vez que se haya
cargado la imagen, serán reemplazadas por la imagen.

Bien, ahora hay una cosa que no queremos
mostrar este color aquí en realidad. ¿Qué queremos hacer? Queremos mostrar la imagen. Las
imágenes de aquí son las que teníamos antes. Imágenes como esta están bien, eso es lo que queremos
mostrar aquí, pero por supuesto parece una mucho más grande pronto nos encargaremos de esto
y también nos ocuparemos de este factor deslizante como acercar y alejar así de todos modos,
así que ahora aquí vendría aquí y usaremos en la propiedad que se llama imagen
y dentro de ella usaremos imagen de decoración y aquí usaremos otra propiedad que se llama imagen
y aquí usamos imagen de activo, ¿vale? y dentro de él debemos mencionar la ruta de nuestra
imagen, ahora las imágenes están en la carpeta de activos Dentro de la carpeta de imágenes y dentro de ella
puedo elegir una imagen que es comida cero uno. o cuatro png de un punto ahora para encontrar la
imagen, debes venir aquí y deberías verla allí. es esta carpeta de activos y dentro de ella tenemos esta
imagen, por lo que debemos mencionar la ruta completa imagen de activos y quiero usar comida 0 0 comida 1.png
eso es lo que iba a usar y asegurarme de que En el archivo yml de especificación pop aquí también tienes
este configurado, así que estamos intentando configurar nuestro ruta de activos, así que todo son activos aquí, las
imágenes y fuentes, cosas así, así que pertenecen a esta dependencia y luego debes mencionar la ruta
de la imagen o la ruta de los recursos, diría yo.

Está bien, eso es lo que hicimos de todos modos. Lo
cerraré ahora por aquí. Lo ejecutaré. Adelante. Vale, nuestras imágenes ya aparecieron como puedes
ver y, por supuesto, es la misma imagen, pero Quiero cargar una imagen diferente y lo haremos, pero
ahora las imágenes son un poco grandes y no son encajar como portada, así que eso es lo que queremos
hacer, así que aquí mencionaré encajar Está bien, y yo haría que la caja encajara correctamente con la cubierta de puntos
de ajuste de caja para que después de eso quepan como una cubierta, ¿vale? Como puedes ver aquí, sí, puedo obtener una
imagen diferente, digamos cero, esta y ahora.

Se ve mucho mejor, quiero decir, más claro, está bien y con esto
ya estamos trabajando muy bien con nuestra aplicación. Muy bien, ahora echemos un vistazo a algo interesante,
mientras que aquí este contenedor que es este tamaño de imagen tiene una altura de 220 y aquí
el contenedor principal que tiene un tamaño de 320 Así que ahora parece que están ocupando
la misma cantidad de espacio. Míralo aquí esta función crea la página del elemento
desde aquí desde el contenedor principal Tienen diferentes tamaños de altura pero
parece que están tomando lo mismo. altura aquí podemos probar eso, así que aquí podemos hacer
una depuración básica, aquí solo hacemos color y Los colores puntean en rojo, como ves,
esta altura 320 es esta altura total. pero el contenedor secundario
que tiene esta altura es 220 pero parece que ocupa todo el espacio, sí, es cierto,
así que cuando pones un contenedor dentro otro contenedor, el contenedor secundario en general
ocupa todo el espacio del contenedor principal Está bien, eso es lo que sucede en general,
aunque hay una altura aquí que no toma.

Efecto, está bien, de hecho, si lo quitas, todavía
ocupa toda la altura, ahora podemos solucionar este problema de muchas maneras diferentes,
una de las soluciones que usaría aquí es envolver este contenedor usando el contenedor de
pila o el widget de pila, así que lo haré córtalo ahora aquí yo pondría la pila ahora
la pila toma a los niños así que el primero child sería nuestro contenedor, por lo que el
contenedor secundario de este contenedor principal ahora envuelto alrededor del contenedor de pila ahora echemos
un vistazo como ve, ahora realmente está tomando 220. Entonces, si colocas un contenedor dentro del widget
de pila, este continuará tomando el tamaño o la altura. como se supone que debe ser ahora, descomentemoslo,
está bien, porque no mencionaste nada. tomará el tamaño del contenedor principal, que es
320. Entonces, si desea que un contenedor tome el tamaño específico dentro de un contenedor principal, entonces
debes envolver el contenedor secundario usando el widget de pila Está bien, lo guardaré así
y aún lo conservaré.

Este fondo rojo y durante algún tiempo De todos modos, bueno, otra cosa que deberías
ver es si elimino el margen de aquí. el margen desapareció, las imágenes están todas
adjuntas correctamente, por eso necesitábamos el margen Está bien, está bien, ahora si ves el diseño original
que teníamos antes aquí, entonces tenemos Esta parte de aquí, el contenedor blanco superpuesto,
está bien, eso es lo que vamos a hacer. Ahora bien, este es otro beneficio de usar contenedores
apilados porque podemos colocar dos contenedores en entre sí donde puedan superponerse, así que simplemente
lo que haré será seguir adelante y copiarlos. Así que lo pondré allí y lo guardaré
ahora si vuelves aquí. Vemos que no hay ningún cambio.

En realidad, hay dos
contenedores aquí en este momento. Están todos. tomando el mismo espacio y la misma cantidad podemos
probar que en lugar de cinco el segundo margen izquierdo y margen derecho puedes hacer diez
como ves que está apretado por dentro, vamos Véalo de nuevo, así que aquí puede ver la
diferencia, por lo que hay dos contenedores allí. pero ambos están ocupando la misma cantidad de espacio
ahora una vez más eso está sucediendo porque envuelves cosas alrededor del contenedor de pila,
lo siento, el widget de pila ahora es el del beneficio del contenedor que incluye el widget de pila es que
los elementos secundarios dentro de él se pueden usar uh, o puedes envolverlos alrededor de un widget de línea,
está bien y luego puedes decirle a los niños o al niño dónde quedarnos porque tenemos este espacio vacío
aquí, así que este contenedor queremos que baje Así, está bien, así podemos hacerlo fácilmente.

Entonces,
lo que haremos será envolver este contenedor. alrededor de un widget de línea, está bien, aquí seleccionaré
el widget y ahora aquí seleccionaría una línea. Vale, no está alineado. Lo siento, está alineado. Bueno,
ahora guardémoslo, pero parece que tiene un poco de alineación pero eso es más como centrar así que por defecto
esta alineación sea cual sea el contenedor que pongas alrededor de ese contenedor se coloca dentro del contenedor
principal y en el medio, así que ahora mismo aquí y aquí está el medio del contenedor
rojo, así que eso es lo que hace ahora aquí si podemos forzarlo a bajar al fondo del
contenedor principal para que podamos usar esto alineación de la propiedad, así que alineamos el punto en la parte inferior
central para que quede hacia abajo, como se puede ver aquí a la derecha. pero el segundo es demasiado grande, así que aquí podría
simplemente dejarlo así, bien, ahora lentamente.

Se parece más a esto, pero por supuesto todavía no. Estamos
lejos de eso, pero podemos solucionarlo fácilmente. Muy bien, entonces creo que podemos aumentar el
tamaño de este contenedor inferior a 240. luciendo mejor ahora también podemos ocuparnos de esto
izquierdo con margen izquierdo y margen derecho 40 40. Bueno, ahora esta vez es más como este. De hecho,
creo que podemos extenderlo un poco más. Vale, aquí hacemos 150 para que
suba, sube, está bien o aquí y lo que se ve no es que la altura
no sea tan grande pero aquí parece un poco más grande, entonces lo que podríamos hacer aquí
es adjuntar un margen inferior y podríamos decir 10. Ahora tenemos este bien, así que se ve mejor y
haremos 140. Está bien, ahora aquí lo tengo. Este espacio está bien y lo necesitamos porque queremos
tener algo de esta sombra. La sombra sería dentro del contenedor dentro de este contenedor
rojo, está bien, por eso mantenemos la sombra si es necesario también puedes hacer 15, está bien,
eso se ve mucho mejor ahora, por supuesto, estos Son las dos imágenes que se superponen
entre sí. Aquí no queremos la imagen.

Así que simplemente eliminaremos este y aquí usaremos
color para hacer colores con puntos blancos. Está bien, sí, ya se ve mejor. No te preocupes,
el color rojo lo quitaré una vez. Hemos terminado de construir esta parte porque este
color rojo en realidad nos ayuda a comprender el contenedor cuánto espacio ocupa y cuánto
espacio se supone que debe ocupar cosas así Bueno, otra cosa es que queremos que este segundo
control deslizante salga un poco. o cuando está ahí hay izquierda y derecha, esas izquierda
y derecha salen ambas que queremos lograr este y podemos hacerlo fácilmente, pero para hacerlo necesitamos
declarar la variable del controlador, lo cual haremos aquí, recuerde que estamos usando este pageview.builder
y la vista de página tiene un archivo relacionado.

Controlador que se llama pagecontroller, lo
usaremos y crearemos una instancia de un variable de él y lo llamaremos controlador de página
y aquí todo lo que tenemos que hacer es llamar controlador de página, ahora toma
un parámetro y ves que hay uno llamado fracción de la ventana gráfica, esta está bien, el valor
predeterminado es uno y podemos cambiarlo, ¿vale? entonces el valor predeterminado de la fracción de
vapor es 1,0, mantendremos este como está todo Muy bien, ahora veremos con uno qué sucede. De hecho,
ahora mismo está en el valor predeterminado. pero de todos modos, si vamos a usar este aquí
dentro de este, hay un parámetro llamado controlador, simplemente puede pasar el parámetro
que creó, ahora guárdelo y, por supuesto, No verías ningún cambio, pero ahora hay un beneficio
aquí en lugar de uno. Prueba 0.9, está bien. Bueno, parece que no es un gran cambio. Prueba 8.5 y
reinícialo. Sí, creo que tienes que reiniciarlo.

Ahora parece que nuestra izquierda y nuestra derecha
están apareciendo. Bien, ahora recuerda que esto es. Viniendo desde aquí temprano, configuramos en este contenedor
donde teníamos este margen para que lo elimines. Si dices que todo salió bien, este margen crea un espacio
vacío entre el siguiente control deslizante. y el control deslizante anterior, debes recordar ese y este controlador
de página, esta fracción de la ventana gráfica le indica si debe estar visible la siguiente diapositiva
o la siguiente diapositiva y la anterior Basado en este parámetro, está bien, tú controlas
eso. Ojalá tenga sentido, así que ahora ya está. se ve mejor y esto es lo que realmente queríamos lograr,
está bien, así que esto está funcionando. bastante bien, a continuación veremos cómo poner
nuestro texto aquí vale, bueno, así, vale y Antes de continuar, creo que tenemos demasiado espacio a la
izquierda y a la derecha para que podamos cambiar eso y Por ahora lo haremos manualmente, pero en el futuro usaremos
un archivo diferente para solucionar este problema. Vale, también puedes usar un 20. Depende de ti cómo lo
hagas.

En realidad, seguiría adelante con 20. o tal vez 30 es mejor sigamos adelante y veamos que sí, porque esas
otras dos partes de aquí no las quieres Véalos de esta manera, se ve mucho mejor, así que
ahora seguiremos adelante y crearemos esto. uh, envía un mensaje de texto aquí el que vemos temprano,
está bien, ahora esa parte es bastante fácil de hacer. Entonces, como ya estamos dentro del contenedor,
sabemos que ese contenedor lleva a un niño. eso es lo que necesitamos antes de continuar y comenzar
a escribir el código para esta sección. definitivamente entenderás bien la lógica si la miras
detenidamente mientras aparece el primer widget que debería envolver las cosas se llama widget de columna
porque están en columnas una encima de la otra entonces, dentro del widget de columna tendremos un texto aquí
y el siguiente elemento secundario en el widget de columna sería ser fila porque queremos poner estas cosas y
luego tendremos espacio y luego tendremos otra fila aquí está bien y dentro de cada fila tendremos también
otras filas como esta es parte de la fila esta es parte de la fila y esto es parte de la fila,
está bien, más o menos así, una vez más Hemos terminado con el fondo, por supuesto, no
hicimos la sombra todavía, lo haremos pronto.

Pero hemos terminado con el fondo, lo cual ya
hemos hecho aquí, está bien, está bien. Así que ahora tenemos que seguir adelante y empezar a
escribir el código para este, de modo que quede dentro. este contenedor cuando era niño, entonces lo que haré será
seguir adelante aquí y declarar un niño aquí y un niño debe ser un contenedor Bien, ¿por qué estoy usando un contenedor? Porque
si uso un contenedor, como puedes ver, tengo esto. relleno aquí arriba abajo y a la izquierda puedo
usar el relleno y luego puedo poner todo en una columna, está bien, por eso voy a usar
este contenedor porque el contenedor puede usar relleno está bien, eso es lo que haremos, así que hacemos
relleno ahora aquí por ahora inserciones de borde solo punto y perderemos el relleno superior entonces usaremos el encabezado superior para 10 y el 15 a
la izquierda, escribe 15, está bien, ahora usaremos otro niño y el niño sería la columna y dentro
de la columna tendremos niños Bien, ahora aquí debería haber un texto
y ya tenemos un widget de texto para esto.

Recuerde que antes creamos este gran texto, todo lo que tenemos
que hacer es seguir adelante y convocar esta gran prueba. con cierto texto está bien, eso es lo que hará, así
que vendremos aquí y simplemente llamaremos texto grande Está bien y se necesita un mensaje de texto aquí. Bueno,
por ahora solo diré lado chino, así que ese es el chino. nombre del plato nunca lo probé, aunque no sé cómo
sabe a pesar de que he estado en China durante Hace mucho que debería intentarlo, pero de todos
modos, eso es todo, es el primero y este es el vídeo del widget reutilizable, así que todo lo que necesitas
hacer es venir aquí y guardarlo mientras esté allí. cierto, sí, se ve un poco extraño, pero nos encargaremos
de eso muy pronto, no te preocupes, ¿vale? ¿Qué más veamos? Tenemos esta fila bien, así que eso
es lo que tenemos que hacer, pero antes de la fila. Tenemos este relleno, eso es lo que debemos cuidar, entonces,
¿qué hacemos? Hacemos una caja de tamaño aquí.

Entonces crearemos esta distancia en lugar de un
relleno directo, así que hacemos altura y aquí Solo diremos 10 y luego tendremos una fila y
dentro de la fila nuevamente tendremos hijos. Está bien, entonces aquí tendremos niños. Ahora en los niños
tenemos las estrellas, así que tenemos que dibujar. cinco estrellas y estas cinco estrellas tenemos que dibujarlas
horizontalmente y en una posición más plana hay un widget llamado ajuste. Está bien, puedes usar un widget de ajuste
para dibujar lo mismo una y otra vez horizontalmente.

Por supuesto, también puedes hacer algo un poco diferente,
pero me gusta el widget de rap que contiene. una propiedad que se llama niños ahora niños toma
una lista de niños ahora mismo en este caso vamos a use list dot generate para crear un niño dinámicamente
y aquí crearemos cinco niños, ¿vale? Ahora, como puedes ver, toma un índice para que
puedas pasar un índice y devuelve una función.

Entonces esta flecha significa que devuelve una función, por
lo que aquí podemos devolver una función pero, por supuesto, Necesitas devolver un widget si vienes aquí,
como ves, esta es la función aquí. Esta parte está bien, esta es la longitud, así
que devolveremos una función o devolveremos algo. eso devuelve un widget, así que eso es lo que queremos hacer
ahora aquí simplemente podemos hacer ícono porque ícono es un widget y aquí podríamos hacer íconos con puntos y estrellas,
está bien, este y la estrella deberían tener colores. Haremos color y ahora la aplicación colorea el color principal, por
lo que ya tenemos un color principal en nuestra aplicación y Tendremos talla, así que haz la talla 15.

Está
bien, guardémoslo y veamos el resultado. Así que aquí estamos bien, así que ya está mejorando
y mejorará a medida que trabajemos más. Muy bien, ahora aquí está la cosa, así que este
es el eje transversal y este es el eje principal. Bueno, en el eje transversal queremos que todo comience
desde el principio para esto. contenedor una vez más, este es el eje transversal, ahora
aquí hay un diseño de columna, así que esto debería ser el eje transversal y este debería ser el eje principal, así
que primero ocupémonos del eje transversal, así que aquí hacemos alineación del eje transversal alineación de acceso cruzado
inicio del punto está bien para que todo esté en el empezando bien ahora creo que podemos dejarlo
un poco está bien, veamos mucho mejor Mejor ahora, vale, ahora por aquí.

Una vez más, estamos usando
el widget de rap para colocar a los niños en posición horizontal. porque wrap coloca las cosas horizontalmente como
puedes ver, esta es la propiedad predeterminada pero también puedes usarlo verticalmente si quieres
y luego generamos una lista de niños Bueno, dondequiera que veas este soporte que acepta
niños, justo ahora teníamos este, está bien. y no solo se necesitan niños, se necesita una lista
de niños, está bien, puedes ponerlos dentro estos dos corchetes y coloque a sus hijos uno
por uno o puede usar un punto de lista para generar para crear una lista de niños, está
bien y para principiantes esta parte podría Puede ser confuso, si no entiendes qué es
esto, esto se llama función de flecha y devuelve una función, está bien y, en ese caso, debes
devolver la función en una línea, ¿vale? Bueno, si no quieres escribir así,
también puedes escribir así.

Puedes usar segundas llaves aquí, pero en ese caso
debes colocar la declaración de devolución. Aquí por qué necesitamos poner una declaración de devolución.
Una vez más, aprendimos que la lista degenera. toma una función que tiene que devolver algo, está
bien, por eso esto también funciona, lo guardamos y sigue igual, no hay error, funciona de la misma manera,
por supuesto, esta es la forma más tradicional. de escribir código, pero puedes hacerlo, realmente no importa,
así que ahora eso es sobre las estrellas, pero Ahora, justo después de las estrellas, tenemos este y este comentario
está bien, así que simplemente seguiremos adelante y lo haremos. Bueno, ahora definitivamente necesitamos un espacio aquí para que podamos usar
el cuadro de tamaño, así que hacemos el cuadro de tamaño y con 10 y ahora por aquí tenemos este Bueno, para este simplemente podemos usar un pequeño
widget de texto. Bueno, eso es lo que haría. llame aquí texto pequeño y simplemente podemos pasar
el texto cuál es nuestro texto 4.5, está bien Bien, ahora sigamos adelante, guárdelo
y veamos el resultado.

Bien, esto es exactamente lo que queríamos
y luego, una vez más, lo que tendremos. Tendremos el cuadro de tamaño una vez más y luego escribiremos
esta palabra, hay dos comentarios y este número Así que seguiré adelante y escribiré un segundo texto
pequeño y aquí hacemos uno, dos, ocho, siete. y luego una vez más en el cuadro
de tamaño y hacemos con, digamos, 10 y luego volvemos a escribir texto pequeño y
aquí haremos comentarios, ¿vale? Está bien, sigamos adelante y guárdelo.

Sí,
entonces este es exactamente igual a este. pero, por supuesto, creo que una cosa que debemos
cuidar de la altura de este es, creo, un poco. uh, un poco más, tiene un poco más de altura, así
que podemos simplemente venir aquí en lugar de hacerlo. 140 veamos 130 sí o 20. Está bien, creo que esto
es mejor, está bien, entonces esto es más así. ¿Y qué más? Creo que ahora
tenemos este espacio. Si ves aquí, tenemos más espacio a la derecha, por lo que no
tenemos suficiente espacio entre los controles deslizantes. Así que también podemos encargarnos de ese, así
que simplemente podemos cambiarlo aquí. Está bien, sí, se ve mejor. Está bien, está bien y veamos, entonces es incluso más
alto que nuestro suelo, entonces, ¿qué haremos aquí? En lugar de los últimos 15 aquí, hagamos 20 y veamos el resultado.
Está bien, sí, creo que podemos impulsarlo más.

Está bien, eso se ve mucho mejor. Está
bien. Está bien. Ahora está bien. ahora queremos poner este tres bueno si queremos
poner este tres simplemente lo que podríamos hacer uh, bueno, todavía tenemos que dentro de esta columna
corregir la columna grande aquí, así que todavía tenemos para insertar la columna y lo primero que podemos hacer
es crear una distancia, entonces haríamos tamaño caja del tamaño de una caja con una altura de 20 por ahora,
está bien, esta definitivamente es una fila, lo sabemos bien así que adelante y rema y también necesitamos niños
ahora aquí como ves esta sección en esta sección esta sección esto esto y esto y si siquiera
entras todavía tenemos lo mismo que dice nosotros una cosa, así que en lugar de escribirlos manualmente
una y otra vez, en realidad para esta sección o esta sección, no importa de dónde vayas, todavía
tienes esta sección en muchos lugares esto para que podamos crear un texto reutilizable
o un widget de texto, eso es lo que haremos Iremos aquí dentro del widget que crearemos
y el archivo dart y lo llamaremos icono y texto editar punto dardo bien ahora
si miras estos pocos elementos aquí Como queremos crear un widget de texto reutilizable,
en realidad solo queremos crear esta parte.

Y después de crear esto, todo lo que tenemos que hacer es pasar
el color del ícono y el texto, así que necesitamos crear un widget widget reutilizable donde podemos pasar esto y
esto significa donde pasaremos un icono y un color El color del icono y el color del texto, eso
es lo que queremos construir bien, lo primero. aquí crearemos una clase sin estado, así que st
significa sin estado y aquí hacemos icon y expulsar texto, está bien, aquí devolveremos nuestro importaremos
una biblioteca, está bien, eso es una cosa.

Pero ahora ves cuáles son las cosas que queremos que se pasen
aquí. Quiero decir, la clase llamará a esta clase. lo que esa clase debería enviar aquí definitivamente el nombre
del ícono color del ícono texto y color del texto así, está bien, eso es todo lo que queremos, así que ahora
seguiremos adelante y declararemos algunas variables. entonces quieres pasar el ícono pero realmente no puedes pasar
el ícono pero puedes pasar el ícono como datos del ícono Vale, no puedes pasar el ícono directamente.

Tienes que pasar
el ícono como datos del ícono y luego tendremos cadena final y ese es el texto y el
color final, así que coloreamos y el color final del ícono, que también es color, color
del ícono, está bien, ahora te pide que lo hagas. agregue el campo obligatorio para
todo esto, así que lo haremos Bien, todo lo que tenemos que hacer es
agregar la palabra clave que se llama Requerido, así que copiaré
este y lo pondré aquí. Está bien y creo que hasta ahora todo bien.
Vale, ahora echa un vistazo a este. aquí queremos devolver algo que devolverá
estas dos secciones correctamente devolverán este y estos dos juntos, por lo que
deben devolverse como una fila porque esta es una fila, dos cosas una al lado de la
otra, esa es la fila, así que lo primero que hacemos aquí tenemos que escribir niños ahora en la fila cuál
es el primer elemento el primer elemento es un icono Bien, definitivamente aquí queremos un ícono.

Bien,
este ícono se transmitirá desde aquí, así que Podemos usarlo directamente, está bien, y luego también tenemos
color para el ícono y usaremos el color del ícono. Está bien, entonces puedo colorear. Este es el color
que se proporciona desde la función de color. mientras que a continuación queremos crear un poco
de distancia, así que haremos un cuadro de tamaño está bien y podríamos decir con cinco ahora
mismo aquí este es un texto bueno, Ya tenemos un widget de texto para eso, así que
podemos simplemente usar ese texto pequeño.

Está bien, aquí pasaríamos el texto que es este y
también podemos pasar el color, así que ese es el color del texto ahora aquí está simplemente este color
bien, bien, estamos bien y con esto terminamos nuestra fila reutilizable está bien, entonces esto
es reutilizable lo siento, esto es reutilizable Widget de fila y hemos terminado con esto, todo lo que tenemos
que hacer, tenemos que venir aquí y llamar a este. y pase estos cuatro parámetros y eso es lo que
hará, aquí escribiremos el texto del icono y uh, ¿cuál era el nombre? No pude enviar mensajes de texto
con él. Lo siento, puedo finalizar el widget de texto. como puedes ver te da llenado automático Muy bien, el primer ícono aquí quiero pasarlo como
un círculo, así que usaré íconos punteados. uh, digamos círculo sostenido, usaría este
y luego para el texto aquí usaré normal porque este es el primer texto y el color ahora Aquí, creo que podemos usar el color predeterminado,
entonces, ¿qué podríamos hacer con el color en sí? El color podría ser opcional, así que por aquí.

O creo que no necesitamos pasar ningún color porque
el color siempre es el mismo, así que ya tenemos un color predeterminado configurado en nuestro texto pequeño aquí,
está bien, entonces no necesitamos pasar ningún color, lo siento. sobre eso, está bien, creo que sin color funcionaría
mucho mejor, este color ya está ahí porque si Si los miras, todos tienen el mismo color de
texto, así que no necesitamos cambiarlos. Entonces, si ves incluso aquí, el color siempre
es el mismo, por lo que no necesitamos pasar el color. De todos modos, eliminamos el color
del texto, no lo necesitamos. Así que aquí y definitivamente necesitamos pasar
el color del ícono. Bueno, primero veamos los colores. icono de punto color uno, así que este es el
primer tipo de color, así es como lo nombré Ahora sigamos adelante y verifiquemos nuestro
resultado.

Bien, este es el primero. para que podamos copiar este y hacer el segundo Así que aquí lo pondré dos veces porque
tenemos dos elementos más como este para este, así que tenemos un ícono. Creo que este ícono es el
ícono de ubicación, así que aquí haría ubicación. En este está bien y el texto está por ahora, está
codificado 1,7 km, ahora aquí el color del icono, creo.

Ese debería ser nuestro color principal, así que el color principal
está bien y ahora para este el texto es de 32 minutos y Aquí debería estar, creo, algo así como
un temporizador, creo que se llama acceso. Esta vez se redondeó y creo que el color también es color
porque en nuestra aplicación colorea este archivo. si vienes aquí tenemos diferentes colores
icono color uno puedo colorear dos color del texto color principal de todos modos así
que ahora sigamos adelante y guárdelo, ya se ve mejor Está bien, aquí estamos bien y ya se
ve mejor, pero claro, si ves el borde realmente no se ve bien aquí y nos encargaremos
de eso porque tenemos que hacerlo una refactorización de nuestras constantes como esta que
haremos más adelante pronto, está bien, pero con esto Ya está funcionando y lo que puedo hacer por
ahora es eliminar este color de fondo aquí.

Que es rojo porque realmente no se
ve bien, sí, no está mal, diría yo. Está bien, entonces ya está funcionando bien. A continuación
veremos cómo ampliarlo y reducirlo de esta manera. uno como ves mientras deslizo esta escala hacia arriba y hacia abajo, hago
zoom hacia arriba y hacia abajo, está bien, eso es lo que queremos Haga lo siguiente, comprendamos el principio básico de
escalar hacia arriba y hacia abajo, acercar o alejar. así, bueno, ahora podemos echar un vistazo
aquí. Lo primero que debes saber es que Cada diapositiva aquí tiene índice y valor
de página, así que si empiezas desde cero. aquí este índice es cero y este índice es uno,
está bien, pero tienen un valor de página de cero entonces el valor de página para este índice es cero. El valor de
página para este índice o esta diapositiva es cero. Ahora tome Otra mirada, aquí el valor de la página es 1 para este índice,
mientras que para este índice el valor de la página es 1 y para esta página de índice el valor es 1 pero,
curiosamente, el valor del índice aquí es 0.

Aquí hay un valor de índice, aquí hay dos, está bien,
así que aquí todos tienen el mismo valor de página dos valores de índice un valor de índice dos valores de
índice tres este de aquí está bien, así que espero tiene sentido, así que esto es lo primero que debes saber
o lo segundo a medida que vas hacia la izquierda. El valor del índice aumenta y el valor de la página aumenta,
mientras que la página realmente aumenta lentamente cada vez. pero el índice aumentará sólo casi cuando haya terminado
de deslizar; de lo contrario, no aumentará Entonces, una vez que comienzas a deslizarte, el valor de
la página inmediatamente aumenta lentamente mientras aumenta.

Por punto decimal, está bien y el valor del índice solo
aumenta una vez que casi has terminado, ahora es lo contrario. Bueno, lo contrario es que cuando vas hacia la derecha,
el valor del índice disminuye inmediatamente. digamos, por ejemplo, aquí el valor del índice es actualmente, el
valor del índice aquí es uno correcto, entonces, ¿qué hago si Si lo desplazo hacia la derecha, el valor
del índice sería inmediatamente cero. este es el seleccionado actualmente y el valor de la página
también disminuye, pero disminuye en un punto decimal No de repente, disminuye linealmente,
como por punto decimal, cada vez, ¿vale? Está bien, entonces eso es lo básico que tenemos que
saber.

Bueno, ahora hay otra cosa que tenemos que saber. Bueno, para esta o la diapositiva actual, para cualquier tipo
de diapositiva actual, el factor de escala es uno, está bien. para la diapositiva actual incluida esta y para
la anterior debe ser 0,8 y para la siguiente uno debería ser 0,8, así que en este caso este es uno,
este es 0,8 y este es 0,8 0,8 significa 80 por ciento 1 significa 100 por ciento bien, así que esas
son las cosas básicas que necesitábamos saber Muy bien con esto, hemos terminado
con la teoría. Ahora continuaremos y comenzaremos a codificar bien esta
parte de escala para esta primero que necesitamos.

Para declarar una variable, eso es lo que haremos, así que aquí
declararemos una variable y el nombre de la variable es Valor de la página curva y lo estableceremos en 0,0. Está
bien, entonces este es el valor de la página actual. ahora porque queremos acercar, alejar
o ampliar nuestra escala hacia abajo Si bien es por eso que estamos usando el controlador
de página, está bien, una de las cosas El control de página que ya tiene se muestra
aquí como el que ya tenemos.

Entonces, en nuestro caso estamos usando el 80 por ciento de la
pantalla o el 85 por ciento en este momento, sí, ahora la página El valor tiene un controlador de página y tiene otra propiedad que
se llama página, por lo que desde el controlador de página puedo acceder a la propiedad de la página y la propiedad de la página
es en realidad el valor de la página, está bien, así que aquí inicializaremos el valor de nuestra página y a medida que nos desplazamos hacia
la izquierda y hacia la derecha, nos movemos hacia la izquierda y hacia la derecha. queremos registrar el evento izquierdo y derecho
y desde entonces queremos desde ese que Quiero que el valor de la página esté bien, así
que para hacerlo primero debemos anularlo. método, entonces ese es el método de estado inicial,
está bien, eso es lo que queremos anular y aquí llamaremos a y el nombre del método es estado init y cualquier
estado es un método dentro de cualquier estado clase que puedes usar, pero si quieres usarla
debes anularla, recuerda nuestra La clase es una clase con estado, así que aquí primero
seguimos adelante, llamamos a esto y anulamos el instructor súper instructor para este método initstate,
está bien, ahora aquí podemos obtener el valor de la página actual a medida que avanzamos hacia la izquierda y hacia
la derecha, podemos obtenerlo, pero para hacerlo debemos adjuntarlo un oyente de este controlador de página está bien, entonces,
¿cómo lo llamo controlador de página? punto agregar oyente está bien, así que mientras
se necesita una función anónima aquí y dentro de él podemos obtener el valor de la página actual, así que
hacemos la página de puntos del controlador de página, ¿vale? y aquí obtenemos el valor y lo guardamos, así
que sigamos adelante y guárdelo bien.

Ahora aquí creo que necesitamos agregar un verificador
nulo donde decimos que no será nulo. Ahora, por supuesto, necesitamos ajustarlo al estado establecido,
así que eso es lo que haremos ahora que estamos. Haciendo esto porque queremos usar este valor tan pronto
como obtengamos un nuevo valor desde aquí y lo haremos. guárdelo aquí y nuestro sistema de gestión estatal
sabrá que hay un nuevo valor, ¿cómo lo haría? Lo sabemos porque lo pusimos en el estado establecido, así que tan pronto como
obtengamos el nuevo valor, se lo haremos saber a la interfaz de usuario.

Que tenemos un nuevo valor y vamos a actualizar la pantalla, está
bien, eso es lo que queremos decirle a la interfaz de usuario. y el sistema de gestión de estado, por eso estamos usando
set state, entonces, ¿qué está pasando aquí? entonces lo que está sucediendo aquí es que tenemos un
controlador de página y desde el controlador de página obtenemos el valor de la página y el valor de la página
es en realidad el valor de estas páginas ahora Lo que podríamos hacer es imprimir este valor y echarle
un vistazo. Está bien, entonces es un valor actual. aquí podemos simplemente imprimirlos, está
bien, el valor de la página actual, ahora veamos Creo que necesitamos convertirlo a cadena. Está bien,
así que seguiré adelante y lo ejecutaré aquí. Bien, ahora veamos, verás a medida que te desplazas hacia
la izquierda y hacia la derecha, actualmente esta fase El valor es uno si vamos allí actualmente para esta página.
El valor es cero y a medida que vas hacia la izquierda, Vea el registro aquí que se está imprimiendo, el valor
está aumentando a la derecha y cuando se detiene aquí es el valor completo de uno y los tres tienen
un valor, así que aquí en la pantalla todos de ellos tienen el mismo valor ahora hagámoslo una
vez más, vale, entonces se detendría en dos Así que la página realmente aumenta o disminuye lentamente,
como puedes ver en el registro, por lo que es útil.

Muy bien, ahora mientras lo inicializamos dentro de
este uh en su estado y también estamos escuchando está bien, ahora tenemos que hacer otra cosa, tenemos
que desecharlo, está bien, esta pose significa Cuando sales de la página, no queremos que esté activa; de
lo contrario, es posible que tengamos un enlace de memoria. Entonces hay un método dentro de una clase con estado
que se llama esta pose. Bien, entonces este es el método que vamos a utilizar como en cada estado,
cualquier estado inicializa lo necesario cosas que tu página debería necesitar y cuando
sales de esa página en general las desechas informarle al sistema de administración de memoria
que no necesito esto solo para eliminarlos de la memoria de esta manera mantienes la memoria
lo más pequeña posible.

Vale, no quieres usarla. mucha memoria, así que llamamos a este controlador de página
dot dispose, está bien, es un método integrado dentro Esa es la primera parte que hemos hecho bien, pero en
realidad ahora deberíamos volver a ampliarla y abajo, está bien, creo que deberíamos reiniciarlo ahora
que el registro desapareció. Bueno, el actual. El escalado ocurriría dentro de este método. Bueno, entonces
creamos un método que se llama página de compilación. y dentro queremos hacer el escalado correctamente, así
que hay mucho código de dardo aquí, nada que ver que ver con um flutter, aunque es mucho código de
dardos, está bien, aprenderás al final de esto. Por supuesto, dominarás el arte porque la mayor parte de esta
aplicación o este tutorial trata sobre el código Dart.

De todos modos, para escalar necesitamos usar
una API de Flatter que se llama Matrix4. Bien, eso es lo que queremos usar. Primero
continuaremos y lo inicializaremos. Llamaremos a metrics4 y crearemos una instancia a
partir de ella y aquí hacemos la matriz. Para ver, lo siento, identidad de matriz de cuatro puntos,
así que esta es la que queremos para inicializar un objeto. de la matriz identidad cuatro, bueno, lo que hace tiene
tres coordenadas x y y z, así que eso es lo que Estaríamos jugando con la matriz uh porque la identidad
devuelve una instancia donde tiene tres coordenadas x y y z, pero básicamente porque vamos
a ampliar y reducir la escala, veamos si establezca nuestro eje y y y para que este sea el eje
y. El eje x no cambia, por lo que todo sucederá.

Alrededor del eje y, por lo que se escala hasta el eje y y se
reduce al eje y, incluida la posición, como puede ver esta posición está bien, estas son las posiciones de las que también
nos ocuparíamos usando el eje y de todos modos Bueno, esa es la primera inicialización. Ahora aquí
tenemos que hacer una verificación y lo hacemos si indexar es igual al valor de la página actual, por
lo que tenemos el valor de la página actual El valor de la página actual, no cuatro. Mientras avanzamos, obtenemos
la cifra redonda alrededor del número, está bien y si es uh. Así que ahora, para este de aquí, el índice actual
es cero, así que a medida que avanzas lentamente el valor de la página aumenta, pero solo queremos obtener
el valor completo, ya sea cero o uno, por lo que esa es la verificación que estamos haciendo aquí,
está bien, entonces es una verificación forzada y ver si el valor del índice coincide con el actual
coincide con el valor de la página actual para que eso es lo que estamos haciendo aquí ahora declararemos
una variable que llamaremos escala de curva y aquí hacemos una escala de curva menos uh valor de la página actual menos el índice
y aquí tendremos 1 factor de escala menos Muy bien, ahora el factor de escala es una variable
que deberíamos definir y que aún no hemos hecho.

Así que iré allí arriba y lo definiré y haré
un factor de escala doble igual a 0,8. Ahora aquí el factor de escala es como dije
antes, así que este es el ochenta por ciento. que solo quiero que tenga el ochenta por ciento
de su tamaño original, cosas así, ¿vale? Ahora que tenemos el factor de escala,
¿qué te dice? Veamos. entonces queremos obtener un factor de escala y a medida que
nos desplazamos hacia la izquierda y hacia la derecha de este queremos guardar el factor de escala bueno
ahora echemos un vistazo bien a esta ecuación Actualmente devuelve uno, por ejemplo, sabemos que aquí
el factor de escala del valor de la página actual es El índice cero es cero, por lo que esto se convierte en cero, así
que cero multiplicado por lo que sea que sea cero, entonces terminamos teniendo uno bien ahora
aquí la ecuación es la misma aquí sabemos que el valor de la página actual es uno y el
índice es uno, por lo que uno menos uno sigue siendo cero y terminamos teniendo uno, está bien, eso es lo que estamos
teniendo y mejorando.

Lo haré, tiene sentido, pero Esta ecuación solo es cierta para el índice actual,
no para este, no para aquel, está bien. Ahora, a continuación haremos otra comprobación y
diremos si no, si el índice es igual al actual. valor de página punto 4 más 1 ahora aquí
y escribiremos una nueva ecuación aquí Entonces hacemos la escala de curva var y aquí hacemos
el factor de escala más el valor de la página actual. Lo siento por eso índice más menos lo siento, debería
ser índice menos y te voy a decir por qué. y más uno multiplicado por uno menos el factor de escala Muy bien, ahora déjame explicarte bien, primero
esta sección, esta condición en realidad. Se referiría a la siguiente diapositiva, por lo que esta
es la diapositiva actual que pertenece a esta condición. y como estamos haciendo más uno con el
valor de la página actual, iría allí De hecho, intentará localizar este de aquí.
Bueno, más uno de aquí queremos 80.

Por ciento de este lado original, eso significa 0,8
y este devuelve 0,8, entonces, ¿cómo devuelve? Bueno, como ves, sabemos que para todas las diapositivas
aquí el valor de la página actual es cero. correcto, bien o en este caso el valor de la página actual
es uno, aquí el valor de la página actual es cero Y aquí el valor de la página actual es uno que
debes recordar, pero aquí este es el índice. e indexar dos bien, entonces si nos
vamos a referir a este como dije Esta condición ahora debería ser cero punto
ocho por ciento, cierto, lo siento, 0,8.

El factor de escala o 80 por ciento, así que aquí
tendremos 0 um 0,8 y cómo funciona ahora aquí este índice es dos, pero el valor de nuestra página actual
es uno, así que uno menos dos, es decir, menos uno. menos uno más uno que se convierte en cero,
entonces aquí ya tenemos cero cero multiplicado cualquier factor de escala es
0,8 porque este es el valor predeterminado, sí Bien, ahora con esto ya podemos empezar a ver cómo
escalamos bien las cosas antes de continuar. avance y vea la escala real que necesitamos para
pasar este valor actual a esta escala actual valor a matriz, está bien, eso es lo que haremos, así
que aquí escribiremos métricas, ¿cómo funcionan? lo pasas bien antes de pasarlo necesitas llamar a
otra función o API para que la matriz sea punto diagonal tres valores que toma el valor de x  y
y z bien en su caso el valor x es un valor y está bien, ahora lo siento, el valor z es uno
y el valor y, este es el valor real que queremos para jugar y aquí pasaremos su escala, está
bien, eso es todo, copiaremos esta y Ponlo aquí, está bien, la idea es la misma, así que ahora puedes
seguir adelante y guardarlo, definitivamente no hay nada.

Esto sucederá si intentas desplazarte, no veremos este,
quiero decir, nada está cambiando, eso se debe a que aquí necesitas envolver tu widget de pila alrededor del widget
de transformación, está bien, entonces, ¿qué haré? contraerlo y aquí ingresaría la opción enter
y widget y aquí escribiré transformar Bien, ahora la transferencia tiene una propiedad que se llama transformar
y requiere una métrica, así que la pasaremos. esta matriz la matriz que ya tenemos aquí está
bien y eso es todo, ahora sigamos adelante y reinícialo ya, tenemos un pequeño cambio aquí como
ves, está bien, comienza desde el principio. Sí, está bien, cambia, pero están sucediendo
algunas cosas raras, nos ocuparemos de eso, pero Ya estamos haciendo bien esto de escalar. Ojalá tenga
sentido. Entonces, ¿por qué está sucediendo? así, bueno, esto se refiere al actual y esto
se refiere a este, está bien, y nosotros se que este es 0.8 porque aquí obtenemos 0.8
ok bueno otra cosa al mismo tiempo queremos tener cuidado, eso se llama posición porque queremos
que esté un poco abajo arriba, está bien, así que Sé que creo que esto era 220, así que queremos omitir,
digamos, otros 10 aquí y dejar 10 allí abajo, así Vamos a ponerlo en esta posición,
tal vez 10 o 20 píxeles así.

Está bien, eso es lo que queremos hacer ahora, podemos hacerlo
aquí mismo, ahora, este también debería ser, bueno. ya que es porque ves que cambia pero vuelve hacia atrás,
no queremos que esto nos guste, así que vamos a la izquierda o derecha la posición debería cambiar
al mismo tiempo, quiero decir, así vamos a la mira este, lo siento, este o actualmente
este y mira este si vamos al a la izquierda queremos que baje
un poco baje un poco así verás que está bajando, el seleccionado actual, bajando
y cambiando de posición hacia la derecha bajar y cambiar de posición, por lo que queríamos
que se cambiara la altura, pero la altura también es factor y entonces necesitamos cambiar eso bueno no
necesitamos cambiar eso necesitamos codificar eso aquí lo llamaremos uh, crearemos
otra variable y la llamaremos cur trans entonces es una transformación que significa
cambiar de posición y aquí lo hacemos uh Entonces, ¿cuál es nuestro tamaño actual de este?
El tamaño actual de este es 220, creo.

Uh, si vemos el original aquí, sí, 220. Está bien, entonces
el tamaño actual es tan bueno que podemos declararlo en una variable aquí también, así que no hay problema
con esa, así que aquí hacemos doble altura igual a cero, está bien, ahora debemos ocuparnos de este problema
de altura, así que para hacerlo debemos usarlo para que multiplica la altura por 1 menos la escala
actual y divide por 2. y aquí lo mismo ocurre con veamos este Bien, ahora aquí lo que está sucediendo, así que veamos,
actualmente es 220. Está bien, pero nuestra escala actual La escala actual termina aquí es uno, por lo que uno
menos uno aquí para esta condición para esta condición obtenemos uno correcto, entonces uno menos la escala
actual uno, entonces cero, entonces actualmente para el actual estaría en la parte superior, así que cuál
es este, pero para el siguiente, este queremos que baje y esta ecuación funciona, cómo
funciona, ves bien, actualmente aquí el el factor de escala es 0,8, así que 1 menos 0,8 es 0,2  dos
por dos, bueno, fuimos uno y terminamos teniendo uno décimo así, un décimo multiplicado por la altura,
entonces, ¿cuál es nuestra altura aquí? nuestra altura es dos a cero, así que terminamos
teniendo veinte, así que veremos eso.

Una vez que guardamos esto en una matriz, baja a 20
píxeles, está bien, eso es lo que veremos, pero Antes de continuar y reiniciarlo aquí, debemos llamar después
de que se haya establecido este valor después Esta escala de transferencia se ha realizado después
de eso, llamaremos a otra función que se llama set. fila de transición ésta está bien, esta es una que en realidad
la mueve hacia arriba y hacia abajo, está bien, no la escala simplemente se mueve hacia arriba y hacia abajo y aquí
para la actual, esta es una que quiero poner a cero, así que por eso escribo en cero y el valor z quiero
cero pero el valor y que es la altura queremos cambiar este y este es el valor que enviaremos
aquí desde aquí, así que lo copiaremos y simplemente lo pondremos allí, está bien, entonces,
¿qué sucede aquí? Entonces, primero, primero están obteniendo la escala actual y se basan en ese
factor de escala después de que se realice la escala entonces lo cambiamos, está bien, cambiamos la posición,
está bien, ojalá tenga sentido, lo siento.

Está bien, mientras que lo que haré ahora, simplemente seguiremos
adelante, copiaremos este y lo pondremos aquí. Bien, ahora seguiremos adelante, lo
guardaremos y veremos que baja. Automáticamente está bien, así que
funciona ahora como ves que funciona. así que comencemos desde cero para que el izquierdo
ya esté funcionando, lo siento, el derecho Como ves, lo muevo hacia la izquierda
y se escala al mismo tiempo mientras esto estaba aquí pero de repente se redujo a allí ahora
hay otro problema, está bien, pero actualmente la posición funciona justo después de la transición o
el movimiento se hace bien, así que eso es un problema uh y nos encargaremos de ello pronto.

Sé que
tenemos otro problema aunque venga aquí. pero esto no cambia mientras esto no cambia nada
porque actualmente en nuestra lógica aquí actualmente no nos referimos a esta diapositiva,
nos referimos a esta diapositiva, que es esta condición y esta condición se refiere a esta diapositiva, está
bien, entonces de alguna manera debemos referirnos bien a esta Ya hicimos la mitad del trabajo o diría la mayor
parte del trabajo, entonces, ¿qué haré? por aquí seguiré adelante, copia
esta sección, copia esta por completo y ponlo ahí, bien y necesitamos hacer
algunos cambios, así que haz menos uno. Entonces, cualquiera que sea el valor de la página
actual menos uno, se referirá a este, ¿vale? Y nosotros, pero necesitamos cambiar esta opción aquí,
está bien, entonces volveremos a esta condición. así que lo pondré ahí, bien, ahora esta
condición esta condición no funciona esto uno no funciona para esta diapositiva, pero la primera
condición funciona para esta diapositiva y cómo funciona déjame decirte que está bien para que
sepamos que aquí en este caso decimos que esto es el valor de la página es uno, por lo que para todos ellos el valor
de la página es uno aquí el valor del índice es un valor del índice es cero, pero todos tienen valor de página uno ahora
aquí si dices que la fase actual será 1 pero aquí este índice es 0, entonces 1 menos 0, por lo que
se convierte en 1.

Ahora aquí tenemos el factor de escala. una vez que vas a 1 menos 0,8, esto es 0,2, entonces
1 multiplicado 0,2 obtenemos 0,2 1 menos 0,2 0,8 Entonces terminamos teniendo aquí un factor de escala de 0,8 o eso
significa 80 por ciento. Ahora seguimos adelante y ahorramos. hágalo y veremos el resultado inmediatamente. Vale,
sí, eso está funcionando ahora mismo. Vale. Ahora mismo esto está funcionando y
todavía tenemos algunos problemas. Está bien, entonces cuando vayas hacia la izquierda
desde esta posición hacia la derecha la escala funciona perfectamente,
pero cuando vas al Quiero decir, cuando vas hacia
la izquierda, ves aquí este.

Los cambios de repente primero se vuelven grandes y
luego se vuelven lentos, eso significa esta ecuación no funciona directamente, necesitamos otra condición, pero aquí
te explicamos por qué no funciona. Déjame decirte Vale, déjame decirte por qué no funciona. Este es
el estado predeterminado de nuestro estado actual. y obtenemos un factor de escaneo uno y un factor de escala
0,8 correctamente, pero ahora que empiezo a moverme este iría ahí y este encajaría en el
medio y ahí está el otro un tercio uno que aparecería aquí está bien, ahora para el
tercero en realidad no tenemos ninguna condición ese tercero pertenece al resto de la
condición es como sea lo que sea Le aplicaré otra condición, está bien, así
que aquí lo que haría es la var.

Escala de curva 0.8 creo que ya tenemos
la escala actual uh no, declaremos aquí escala de curva, esta es fija, por lo que cualquiera
que sea la tercera o muy alejada de la pantalla, siempre se aplica a la ventana de escaneo 0.8, eso
significa que cuando me gusta esto aparece como ves eso va a aparecer pronto, sí, pero es grande, cierto,
pero queremos cuando aparezca, tan pronto como aparezca. inmediatamente 0.8 no queremos escalar de grande
a pequeño cuando ya aparece, eso debería ser 0.8 eso es lo que queremos, está bien, entonces para
este primero copiaré esta condición aquí Bien, entonces necesitamos configurar esta cosa de transición
aquí para que establezcas la fila de transición. y una vez más x y y z mientras que el valor x
aquí es cero y el valor z es cero y el valor y es veamos la altura multiplicado por uno menos el factor de escala a las dos, bueno, en realidad estamos aplicando
esto, vale, así que solo estás haciendo directamente dentro de él ahora vamos a devolverlo
ahora vamos a guardarlo está bien, ahora vamos Continúe y reinicie desde cero y verá que
tenemos un deslizamiento bastante suave.

Perfecto, ya está funcionando y esto es lo que queríamos.
Es exactamente igual a este. Está bien. Sí, está bien, eso es genial. Ahora hemos terminado
con esta ampliación y esta transición. a continuación veremos cómo cuidar una sombra
porque si ves aquí sí tenemos un poco de sombra, así que necesitamos configurar la sombra aquí,
está bien, eso es lo que queremos a continuación Bueno, queremos aplicar una sombra alrededor de este contenedor,
así que necesitamos encontrar este contenedor. Bueno, sabemos que este contenedor está
por aquí, este es el contenedor. Entonces aquí es donde queremos aplicar
la sombra.

Ahora para aplicarla, veamos. Bueno, déjame cerrar este primero por aquí,
está bien, justo debajo, por aquí, niño. Así que aquí haremos la decoración. ver Ya tenemos decoraciones. Lo siento, ya tenemos decoraciones,
así que podemos trabajar en ellas. directamente vale, déjame ver si cambiamos el radio
del borde a 20, en realidad parece mucho Mejor de todos modos, ahora usaremos la propiedad que
se llama sombra de cuadro, ahora necesita una lista.

Te dije que dondequiera que veas en plano tienes
más plano, tienes estos dos corchetes Eso significa que toman una lista de niños,
eso es todo, pero niños, por supuesto. es la propiedad basada en, así que aquí necesitamos la sombra
del cuadro, así que primero haremos la sombra del cuadro. así que bloquee la sombra aquí y ahora aquí tenemos
que configurar el color de la sombra, bien, eso es lo que queremos hacer es color y color, tendremos
un color personalizado para este y haremos ff e8 e8 e8 está bien, ahora sigamos adelante y
guárdelo mientras no veamos muchos cambios. No es lo suficientemente bueno. Necesitamos configurar
otras propiedades 0.5 y compensar.

Cero cinco ahora sigamos adelante y guardémoslo
y vemos que tenemos un poco de sombra aquí Así que para ver la sombra real necesitas configurar propiedades,
muchas de las propiedades ahora están borrosas. la propiedad desapareció, se ve un poco feo, simplemente están
compensados, ahora este desplazamiento cero y cinco significa en el eje x no tenemos ningún cambio pero en el
eje y debemos bajar 5 píxeles, así que esto es Más o menos 5 píxeles, está bien, puedes hacer lo contrario
que nosotros. 5, puedes hacerlo en ambas direcciones. Está bien, entonces aquí, más cinco significa
aquí más o eje x positivo, que es este. bien y más este más 5 significa eje
y positivo, que es este, por eso ves los valores aquí y aquí, ahora podemos cambiarlos,
puedes cambiar la dirección y guárdelo para que aquí veamos que cambiamos la dirección
pero podemos restablecer nuestro radio de desenfoque ahora parece que hay una sombra bueno, por qué te estoy
explicando esto déjame decirte por qué porque aquí como ven hay un poco de sombra también
pero no queremos esa sombra que solo queríamos esta sombra la sombra es como aquí ves, solo tienen
una sombra hasta aquí y después de eso No tenemos la sombra bien, así que necesitamos
entender este eje y el radio de desenfoque.

Bueno, sin radio de desenfoque, es solo
un color allí, este es un color gris. el radio de desenfoque lo hace borroso, eso es todo lo que significa
si su radio de desenfoque es uno al que está más cerca el collar, si su radio de desenfoque es mayor, eso significa
que es más, quiero decir, menos borroso, ¿vale? Si el radio de desenfoque es muy, muy borroso,
está bien, espero que tenga sentido. solo por el nombre, está bien, ahora aquí, en realidad
no tenemos ninguna sombra en la parte superior y tenemos un poco de sombra aquí y aquí y
aquí, así que necesitamos aplicar otra sombra, para hacer eso aplicaremos otra sombra porque el
sombreador de cuadros toma una lista de elementos secundarios Así que aquí hacemos sombra de cuadro, está
bien y aquí tendremos color, esta vez lo haremos. Colors.white usaremos el color blanco para aplicar
la sombra porque ya tenemos un color blanco como nuestro color de primer plano, el color de la sombra es
blanco, pero, por supuesto, el color está en el fondo entonces parte de la sombra se cortaría,
¿vale? La sombra se aplica desde el fondo.

Recuerda que entonces debes aplicar aplicando
otra sombra para que vaya al fondo y al pero la sombra del fondo sería una sombra blanca,
eso significa que va a coincidir con esto. color blanco en primer plano, está bien, entonces
el color se verá igual, pero aquí este es un un poco de color gris para que ese color quede cubierto,
vale, déjame, déjame decirte, vamos. En realidad, te muestro cómo funciona, así
que aquí establecemos menos cinco y cero. Parece que ha aumentado un poco, así que
parece que lo hemos aumentado, por eso Parece que la sombra está por aquí y no se apaga.
Aquí tenemos muchas sombras, ¿verdad? Sí, así es como funciona, es más como si lo estuvieras
cubriendo bien o aplicando otra capa. Entonces hacemos eso, veamos, espera, hacemos
lo mismo con otra sombra de este lado. y aquí simplemente hacemos más uh, veamos más cinco,
está bien, así parece que la sombra está a la altura.

Aquí y este es el resultado que queríamos lograr,
bien, con esto terminamos con la sombra. y a continuación veremos cómo trabajar con estos puntos, uh,
estos puntos de aquí, está bien, eso es lo que hacemos. Está bien hacer eso. Necesitamos continuar con nuestro
archivo de especificaciones pop aquí. y aquí necesitamos instalar nuestro Paquete de control deslizante que se llama indicador de
puntos. Bueno, ahora necesitamos obtener la versión. así que sigamos adelante y verifiquemos la última versión,
eso es lo que usaremos, así que soy su versión oficial. sitio web aquí en pub.dab y parece que su última
versión es esta, así que sigamos adelante y sigue esta versión conmigo si quieres
seguirme uh si no me sigues Es posible que recibas una sorpresa en el futuro o que
tenga errores, así que mantengamos nuestra versión.

Aquí, entonces esta es la versión actual que queremos usar
y luego queremos que aparezca la versión emergente. entonces incluirá el paquete al mismo
tiempo, veamos cómo lo vas a usar Todo es bastante sencillo, así que queremos usar este
efecto, así que lo que haremos será simplemente Continúe y copie este. Puede usar muchos otros
efectos según sus preferencias, pero lo haré. solo sigue adelante con este, parece que está hecho,
bueno, ahora cerraré este, no lo necesitamos. y cerraré este también aquí y aquí
mismo, está bien, cerramos este ahora veamos, esta es la función en la que trabajamos hace un momento,
está bien y este es el generador de vistas de página. y veamos, ahora aquí en esta página
tenemos otro problema, así que si ves página principal de alimentos aquí tenemos este contenedor
y este contenedor muestra el encabezado a la derecha mostrando el encabezado y este muestra el cuerpo
que se muestra en el cuerpo, así que este archivo llama a este correctamente, así que
aquí solo tenemos un solo contenedor, pero ahora queremos poner nuestros puntos aquí, puntos, está bien, así
que debería estar en una columna a la derecha, por eso Voy a seguir adelante y envolver este contenedor usando
el widget de columna.

Bien, entonces ya diré lo que haré. Lo colapsaré y por aquí diría bueno, creo que
debería cortar este primero en realidad. Así que lo cortaré por aquí y haré la columna
y luego tendremos hijos y el primer hijo. es este contenedor y guardémoslo, está bien,
tenemos un pequeño problema aquí vamos a ver lo guardaré una vez más Bueno, eso puede deberse probablemente a cambios
repentinos en el estado de todos modos.

Así que ahora continuaremos y copiaremos este desde
aquí, está bien y lo pondremos justo debajo. Está bien, está bien, por supuesto que necesitamos importar
el paquete. Está bien, y ahora aquí está la cuenta. Por ahora usaremos cinco y posición. Ahora
esta posición tiene que ser dinámica. Ahora esta posición vendría del valor de nuestra página actual.
Recuerde que a medida que nos desplazamos hacia la izquierda y Bien, el valor cambia, está bien, así que podemos usarlo directamente,
así que aquí hacemos el valor de la página curva. Bien y estamos listos para continuar ahora, sigamos
adelante, guárdelo y ejecútelo, veamos el resultado, ya estamos aquí con esto y nuestra
aplicación ya se ve muy bien, aunque ahora Aquí los colores para que puedas cambiar el color.
No queremos este color.

Este es nuestro principal. color, eso es lo que queremos usar, así que usaremos
otra propiedad que se llama color activo y aquí tendremos los colores de la aplicación, el color principal de
puntos, está bien, eso es lo que queremos, está bien, perfecto, está bien. Entonces nuestra interfaz de usuario coincide bien,
así que ya se ve genial y otra cosa más. Antes de continuar y comenzar a dibujar el resto de
la página, debemos ocuparnos de otras cuestiones. Esto se ve bien en este iPhone 12, pero su
dispositivo podría ser más pequeño. Así que tenemos muchos factores codificados aquí
en nuestra aplicación, por ejemplo, si vienes aquí. hay una sección de encabezado como arriba, abajo, cosas
así, está bien, no deberían estar codificadas. Creo que deberían ser dinámicos cuando lees la aplicación
cuando la instalas en un dispositivo diferente. debemos contar este valor según la altura o el ancho de ese
dispositivo. Bien, podemos usar cualquiera de los factores. pero definitivamente esto no debería estar codificado, por lo que los
márgenes de izquierda a derecha porque en un dispositivo más pequeño El margen de 20 de izquierda a derecha o el relleno se verían
muy grandes, no queremos eso al mismo tiempo.

Aquí tenemos una altura de aproximadamente 320, que
es bastante fija y esto también es lo que no queremos. queremos cambiar la altura según la altura
del dispositivo y cosas así, ¿vale? Así que esto es lo que tomaremos a continuación antes de continuar,
de lo contrario tendremos que repetir muchas cosas. Las cosas que no queremos están bien, así que con suerte,
en la próxima parte nos ocuparemos de ese problema. Está bien, pero lo siento, antes de continuar,
creo que falta algo aquí, como puedes ver. Olvidé esto por completo, así que debemos cuidar
esta interfaz de usuario ahora que viene de aquí aquí dentro de este widget de alineación y widget secundario
aquí veamos el contenedor secundario, está bien por aquí uh, creo que por aquí, así que aquí
tenemos esta fila, esta fila los muestra y queremos De hecho, configure una propiedad aquí para el acceso principal.
Está bien, muchos accesos usarán el acceso principal.

Acceda bien al punto si lo centra, todo está en
el centro y podría funcionar o podría hacerlo espacio entre ok, entonces esto funciona mucho mejor
ok, ahora seguiremos adelante y nos ocuparemos de esto Los vectores fijos codificados están bien, así que tener este
tipo diferente de valor según el tamaño de la pantalla. y cosas así queremos declarar un nuevo archivo, así que
iremos aquí dentro de esta carpeta de utilidades.

Y aquí declararemos una nueva clase de dardo y
la llamaremos dimensiones punto dardo, ¿vale? Muy bien, aquí crearemos una clase y le llamaremos
dimensiones y dentro de la clase Quiero crear algún miembro estático. Bueno, lo
primero que tenemos que hacer es obtener acceso. a la pantalla o dispositivo dentro de la altura, bueno,
en general, puedes hacerlo en cualquier tipo de clase con estado donde tienes el método de compilación
y dentro del método de compilación haces así, uh La altura actual es así, entonces haces una consulta
de medios. Usamos la consulta de medios para obtener acceso a diferentes tipos de cosas, una
de ellas es el contexto, está bien, está bien entonces obtenemos el contexto y luego obtenemos el tamaño
del objeto y luego obtenemos la altura y si se pudiera Haz eso, luego lo convertimos en una cadena y luego
podremos imprimirlo, imprimámoslo y lo hará.

Imprima el tamaño aquí para que la altura actual del dispositivo
sea 844, lo que significa que aquí está bien. Así que esta longitud aquí, bueno, por supuesto, esta
consulta de medios siempre está vinculada con un contexto. eso significa con una clase con estado, pero muchas
de nuestras clases aquí en este proyecto serían clase sin estado pero queremos poder acceder a ella
desde nuestra aplicación desde cualquier lugar Bueno, para hacer eso podemos usar un paquete
especial de soporte que ya lo tenemos. en nuestro archivo pub uh spec dot eml aquí, obtenga el paquete
x, mientras que el paquete galaxy es el que usa principalmente Se usa para enrutamiento y administración de estado,
pero hay muchas otras propiedades que puedes usar. Así que lo que se espera te ayuda con muchas
cosas, eso es lo que es la belleza.

Lo hermoso de get x ahora aquí podemos acceder
a nuestro paquete get x, así que para hacerlo importamos una clase aquí obtenemos el dardo, así
que con esto tenemos acceso al paquete get x Ahora, como tenemos acceso al paquete get x, podemos
acceder a algunas propiedades subyacentes aquí. Declararé una variable estática y la llamaremos
doble y el nombre de la variable es altura verde y aquí primero obtendremos el contexto del punto y la altura
del punto, está bien, altura y necesitamos poner un valor nulo. El verificador de aquí dice que esto no
va a ser nulo, así es como accedes al propiedad de altura también podemos hacer nuestro ancho
aquí, así que en lugar de altura escribiré aquí ancho y ahora aquí hacemos idh con está bien ahora,
vamos a hacerlo debido a este contexto aquí y pero esos contextos se encuentran dentro del
paquete get x, por lo que obtener escaneo Mantén el contexto prácticamente en todas partes, de modo
que todo lo que necesitas hacer es acceder al contexto. y luego obtienes la altura y el ancho, así que ahora
con esto tenemos acceso a la altura y el ancho.

Ahora podemos usar este, así que aquí declararíamos
otra variable y la llamaremos vista de página. contenedor bien ahora este es el contenedor que se
usaría para esta altura bien de aquí de aquí a Aquí está bien, ahora primero necesitamos obtener la
altura de la pantalla y la dividiremos por un cierto factor bien aquí factor x ahora ¿qué es esto?
x ahora x sería así hace un momento vimos eso Aquí, en nuestro caso, el dispositivo actual tiene ocho cuatro
cuatro la altura correcta, entonces, ¿qué podríamos hacer? podríamos dividir ocho cuatro cuatro entre dos elevado
a cero porque sabemos que esto es dos elevado a cero bueno, sea cual sea el dispositivo, queremos que esta altura
sea de aproximadamente dos a cero, ya sea dos a cero o un poco más de dos a cero un poco menos
que dos cuatro cero o dos uno cero o dos cero cero, pero eso debería basarse en un factor,
ahora no existe un estándar para esto, así que Puedo hacer un factor como este, entonces ocho cuatro
cuatro dividido por dos dos cero, eso es 3,84.

Entonces este es nuestro factor de altura o factor de perdón
en nuestro caso, así que lo dividiré por esto. ahora cualquiera que sea el tamaño de la pantalla que se dividiría
por este, según el tamaño de la pantalla, este valor es ya sea mayor que 2 a 0 o menor que 2 a
0 o 2 a 0. Creo que entiendes la idea. cuanto más larga o mayor sea la altura, esto también
sería más grande. Bueno, espero que tenga sentido. pero puedes usar cualquier tipo de factor
de escala, no tiene que ser este Bien, eso es para el contenedor de vista de página.
Bueno, esto es más o menos para la imagen.

Bueno, ahora podemos seguir adelante y copiarlo. Tendremos
un contenedor de texto de vista de página. tendremos para texto, bien ahora, anteriormente este contenedor
de texto es uno dos cero, lo recordamos bien entonces ocho cuatro cuatro por uno dos cero
eso es 703 entonces aquí hacemos 7.03 Muy bien, ahora podemos seguir adelante y usarlos,
porque hemos terminado con esto. Tamaño dinámico, por lo que cada vez que cargas esta aplicación
en un tamaño de pantalla diferente según ese tamaño de pantalla. Obtendrá un cierto ancho como este aquí. Está
bien, ahora sigamos adelante y comprobemos. Bueno, entonces vendremos aquí y creo que tenemos
un valor codificado, así que haría Ctrl F220. cuál es este así que aquí puedo cambiarlo para poder
acceder a él qué haría haría dimensiones dimensiones punto dimensiones de la pantalla
punto que debería ser vista de página uh, déjame ver que el nombre de la variable es vista de
página.

Uh, lo siento, debería ser este, sí, porque Anteriormente era de dos a cero, así que simplemente lo estamos
reemplazando y necesitamos importar el paquete, ¿vale? Está bien y creo que tenemos otros dos a cero,
así que aquí tenemos que hacer lo mismo. entonces, contenedor de vista de página, porque el contenedor
de vista de página este y el que usamos para escalar el tamaño es el mismo, por lo que estás usando la misma
variable desde aquí, pero como son estáticas, puedes acceda a ellos simplemente usando el nombre de la clase y
aquí tenemos uno a cero, así que hacemos dimensiones punto Contenedor de texto de vista de página, bien, ejecútelo
y veremos algunos problemas, ¿vale? Ahora esto sucede porque estamos intentando usar el
paquete get ex pero get x no pudo obtener acceso. Según el contexto, ahora en este tipo de situación necesitas
empaquetar tu aplicación de material usando el paquete get x. o de otra manera se llama obtener aplicación
de material en lugar de usar obtener, puedes usar la aplicación obtener material, ¿vale?
Ahora, ¿qué hizo esto? obtener la aplicación material obtendría el contexto constante cuando la aplicación
se inicialice por primera vez, ¿vale? Por supuesto, tenemos que seguir adelante e importar
el paquete, así que eso es lo que haría.

Ahora el error debería desaparecer. Ahora sigamos adelante,
ejecútelo y veremos que volvemos, ¿está bien? ahora estamos usando muy bien la altura y el ancho de la pantalla
calculados dinámicamente para demostrar que podemos ir Adelante y crea un nuevo simulador, digamos un iPhone
8, que debería ser un poco más pequeño. Está bien, ahora por aquí, en lugar del iPhone 12
Pro, usaré el iPhone 12 Pro, está bien y vamos. adelante y corre dentro de él y veremos el tamaño de
la pantalla, ya sea dinámico o no, está bien. Está bien, bueno, déjalo cargar. Se necesitaría.
Este se ve bien, pero ahora. Aquí tenemos este problema aquí, así que también
debemos ocuparnos de este problema. Ahora, ¿de dónde viene este problema?
Ahora echemos un vistazo a uh. esto veamos sigamos adelante y ejecútelo una vez más Bueno, ahora el problema está sucediendo y se debe al contenedor
principal que está aquí.

Bien, ahora esto. es tres dos cero, así que esto no es dinámico, por lo
que este es el tamaño completo del contenedor, ¿vale? Así que también tenemos que hacerlo dinámico. Entonces,
¿qué vamos?, ¿qué haremos?, vendremos aquí. y declare otra variable, está bien, ahora la
llamaremos uh aquí vista de página solo vista de página eso es todo y ahora recuerde
que queremos dividir la altura de nuestra pantalla por 320, que es este para obtener el factor correcto,
y si haces eso, es 2,64, así que en su lugar de escribir este escribiremos 2.64, está bien ahora,
está bien con el factor, ya terminamos, todo lo que Necesito venir aquí y cambiarlo para que podamos hacer la
vista de página de puntos de dimensiones, está bien.

Veamos, sí, ahora sigamos adelante y ejecútelo
una vez más y veremos bien, ahora la mayor parte el problema se ha resuelto pero todavía tenemos este
desbordamiento. Bien, ya hemos solucionado este error. Aquí y dice que tenemos un desbordamiento de 12 píxeles.
Definitivamente podemos ver si comparamos estos dos. uh pantallas por aquí bueno ahora aquí tenemos
este espacio en blanco y este pero aquí Tenemos este, pero esto es lo que está causando este problema
de desbordamiento.

Ahora definitivamente tenemos este espacio aquí es de 20 píxeles y aquí creo
que tenemos 10 píxeles para que podamos calcular ellos dinámicamente en realidad todo el espacio aquí
todos podemos calcularlos dinámicamente para que no causar cualquier desbordamiento así que sigamos adelante y lo encontremos
primero ahora este es nuestro widget de texto envuelto en un contenedor, así que sigamos adelante y lo encontremos.
Creo que debería estar aquí abajo en algún lugar. veamos aquí, recuerden que esta es la sección
que muestra esta área blanca, ¿vale? aquí tenemos este tiempo y distancia que es uh
esta sección está bien, tiempo y distancia y esta es la sección de comentarios, está bien, aquí
tenemos este comentario y estrellas así, está bien y si lo cojo se podría ver que aquí tengo
esta altura 10 y aquí tengo esta 20. Así que ahora definitivamente este
20 está aquí en esta sección y Este 10 es esta sección, está bien, así que
veamos si podemos optimizarlos bien ahora. El primero de este 10 queremos hacerlo dinámico, especialmente
si tenemos una pantalla de menor altura. así, está bien, entonces lo que haremos, iremos
aquí y aquí crearemos una nueva variable.

Así que aquí crearemos una nueva variable y la llamaremos
estática doble y altura 10. Ahora vamos a esto. dale la vuelta primero, ahora obtendremos la altura de la
pantalla. Recuerda que esta vez estamos tratando con esto. tamaño de altura del cuadro 10, por lo que en nuestra
aplicación toda la altura usaría este valor, ¿vale? Necesitamos calcular el primer factor de escaneo, ahora
844 por 10, por lo que el factor de escaneo es 84,4. Bien, ese sería nuestro factor de escala, así que aquí hacemos
84,4. Está bien, entonces ocho cuatro cuatro u ocho. ciento cuatro cuatro dividido por ochenta y cuatro coma cuatro
es diez, pero según la altura de la pantalla sería ser más que diez menos que diez o igual a diez ahora
podemos seguir adelante y crear otro para que cópielo y lo llamaremos altura 10.

Está bien, en este
caso, creo que nuestro factor de escaneo es 42,2. Está bien, perfecto, ahora qué haremos,
vendremos aquí y aquí llamaremos. dimensiones altura de punto 10 está bien y
para este usaremos dimensiones altura de punto 20 Bien, ahora continuaremos, lo guardaremos y veremos
el resultado y ya podemos ver que tenemos esto. El error de 5,8 píxeles está bien, así que algunos de los errores,
es decir, desbordados, se han reducido, pero todavía tenemos un poco más ahora, echemos un vistazo a dónde podemos
optimizar de manera más dinámica, definitivamente aquí Puedo ver un relleno que tenemos relleno 15. Así que
este es el que podemos tomar aquí ahora pasaremos aquí crearé una nueva altura y la llamaré altura
15 y 8 4 4 dividido por 15 obtenemos 56,27 correcto y entonces aquí escribiría aquí, digo dimensiones,
altura del punto 15, sigamos adelante y guárdelo y ejecútelo, parece que todavía tenemos
un pequeño error aquí que ronda por 2,7, ¿vale? Bueno, vamos a tener eso ahora. Una cosa que podríamos hacer:
también seguiríamos adelante y nos encargaríamos de ello. este tamaño de fuente porque es un dispositivo más pequeño,
por lo que esperaríamos que el tamaño de fuente fuera un poco más pequeño, está bien, entonces podemos optimizarlo.
Ahora, para optimizar el tamaño de fuente, vendría aquí y aquí crearíamos una variable
y la llamaremos doble estática fuente 20 y el tamaño de la pantalla, altura de la pantalla,
a estas alturas en general querríamos 20 y dividir a las 20 aprendimos eso, entonces debería ser
42.2 bien, ahora esa debería ser la fuente Bueno, ahora para el tamaño de fuente, tenemos
que pasar aquí a este, así que este es el El texto grande aquí vendría aquí y tenemos este
tamaño de fuente predeterminado aquí, ¿vale? Ahora, una cosa que podríamos hacer: podríamos
venir aquí y, de hecho, veamos.

Entonces aquí podríamos hacer dimensiones dimensiones de diamante dot, en ese caso creo que primero
debemos importar la biblioteca Bueno, y dot phone 20, bueno, sigamos adelante, guárdelo y
veamos el resultado. Parece que el error ha desaparecido. desapareció porque se redujo mucho y la fuente
se vuelve más pequeña, incluida esta entonces en una pantalla más grande se ve más grande y en una
pantalla más pequeña se ve más pequeño, está bien, ahora Por supuesto, si hacemos esto, no podremos usar este tamaño
de fuente dado, así que eso es cierto, ¿vale? Bueno, pero también podríamos encargarnos de este,
así que esto es lo que podríamos llevar aquí.

Si el tamaño de fuente dado es cero, digamos, por ejemplo, entonces
podemos hacer una prueba aquí, así que si el tamaño, lo siento. si el tamaño es igual a cero, significa que no queremos
dárselo a nadie, en ese caso usaremos la fuente 20 de lo contrario, usaremos el tamaño que se haya dado
porque el valor predeterminado es cero, así que si no pases ningún tamaño aquí para que el tamaño sea igual
a cero, si es cierto, entonces usaremos 120, está bien.

O si envías uno nuevo desde fuera, definitivamente el
valor predeterminado es cero, pero si envías algo diferente del mundo exterior, por lo que no serán
20, así que en ese caso recurriremos a lo que sea envíalo bien, de esta manera nuestra condición se mantiene verdadera.
Muy bien, ahora sigamos adelante y ejecútelo para que esto está en el iPhone 8 y veamos si tenemos algún problema
en el iPhone 12 u otros dispositivos, así que aquí Iré aquí y creo que esto es para iPhone 12.

Simplemente
presionaré actualizar y estará cargado y Estamos bien, así que al final lo hicimos, así que
en diferentes dispositivos se ven exactamente iguales. todavía no tenemos ningún desbordamiento pero, por supuesto,
si quieres ser más preciso, también puedes tomar Cuida esta fuente aquí, está bien y eso necesita
más trabajo, aunque bueno, con esto se ve El tamaño del texto ya es bastante bueno, es más pequeño
y tenemos más distancia proporcional, ¿vale? Bueno, podríamos ser más precisos, pero en ese caso
necesitamos trabajar más y antes de terminar esto. sección donde nos ocupamos dinámicamente del
tamaño y cosas así queremos hacer otra cosa este problema del radio está bien, ahora este radio aquí
y el dispositivo más pequeño también se ven iguales pero No deberían verse iguales, vale, quiero decir que el ángulo
está prácticamente aquí, sea cual sea el radio que tenga.

30 sigue siendo 30 pero sería proporcional. Debería
ser proporcional según mi dispositivo. altura correcta, así que para eso podemos configurar otra dimensión
para el radio, está bien, aquí lo haría radio doble estático bueno, tendremos dos en el radio 20 y el
radio 30 está bien, entonces la altura de la pantalla es Bueno, para un factor como 20 ya tenemos uno correcto,
así que si queremos obtener algo como 20 Entonces el factor es 42,2. Ya lo sabemos.
Ahora lo que haremos será copiarlo. ahora haremos otros 30. ahora en ese
caso tenemos que encontrarlo así ocho cuatro cuatro ocho cuatro cuatro dividido por 30,
es decir, 28,13, así que aquí el factor es 28,13 Está bien, ahora seguiremos adelante y encontraremos
nuestros radios en diferentes lugares que tenemos. Bueno, el primero aquí, así que aquí tenemos radio
20. Entonces hacemos dimensiones de radio 20 y Veamos si qué tenemos aquí. Creo que debería ser
30 por aquí. Bien, ahora dimensiones del radio. 30 Bien, ahora estamos en el iPhone 12 Pro, que
es este, lo guardaremos, por supuesto, no hay.

Cambie este ahora iremos al iphone 8 y lo guardaremos
ahora echaremos un vistazo al iphone 8 Sí, ahora parece más profesión, uh, proporcional,
ambas cosas, ambos radios, uh, el radio. para ambas secciones, cierto, sí, y así es como
trabajas, realmente haces las cosas, uh uh, dinámicamente proporcional, bueno, espero que entiendas
la lógica, así que con esto en realidad uh hemos recorrido un largo camino uh otra
cosa creo que todavía nos falta por aquí como diez a la izquierda diez a la derecha para hacer eso,
simplemente podemos seguir adelante y copiar este y en lugar de altura escribiría aquí con ok,
está bien, hagamos algún comentario aquí. uh altura dinámica y aquí tendremos ancho dinámico
bueno, ahora esta altura es principalmente para relleno y margen, bueno, esto es lo mismo
pero también es relleno y margen Así que ahora aquí en lugar de
altura queremos hacerlo con ancho. y simplemente lo copiaremos y lo pondremos ahí Bien, ahora con esto tendremos acceso al ancho
dinámico para el relleno y el margen.

Ahora que decimos que venimos aquí, solo tenemos
que reemplazarlos, así que aquí lo hacemos. las dimensiones tienen un punto con 10 y aquí es lo mismo las dimensiones
tienen un punto con 10, está bien y en realidad mucho de otros lugares podemos seguir adelante y cambiar
aquí uh, aquí tenemos un 30 pero veamos Si tenemos 30 o no, no tenemos uh con el tipo 30.
Así que seguiré adelante y copiaré aquí. entonces queremos obtener 30
y en este caso sería 28,13 Así, está bien, 10 15. Bueno, ahora vendremos
aquí y haremos muchas dimensiones.

Con 30 está bien y podemos simplemente
copiar esto y ponerlo aquí y la parte de abajo digamos bueno en este caso
necesitamos altura 30 cierto ya tenemos altura 30 Creo que no lo tenemos, pero en ese caso seguiremos
adelante y crearemos uno, ¿vale? Creo que tenemos que seguir adelante y crear uno,
así que para crearlo simplemente copiaré esto. Ponlo aquí y en lugar de ancho lo llamaremos
alto, pero el factor realmente no cambia. Y ahora la flecha debería desaparecer, veamos
qué más tenemos. Creo que es bonito. mucho aquí y veamos dónde más tenemos, podríamos
tener una opción aquí como está bien este relleno es para la sección superior en nuestro caso, veamos
si la aplicación está en la sección superior, está bien.

Este es el relleno que estamos aplicando aquí, pero
actualmente vemos que están tomando exactamente el Los mismos píxeles de este relleno, pero debería ser proporcional.
Lo aprendimos, así que déjame seguir adelante. Y lo siento, sigue adelante y cámbialo para que hagas las
dimensiones y luego tenga la oportunidad de hacerlo. aquí creo que lo estamos haciendo bien, así que lo hacemos con
20 y aquí están las mismas dimensiones punteadas con 20. Y veamos por aquí, creo que también debemos
hacer que esto sea dinámico y por aquí.

Este es el radio del borde y veamos si
tenemos un radio o tenemos un radio 20 y 30, pero no tenemos un radio de 15, así que seguiremos
adelante y crearemos uno aquí y veamos. aquí, así que coméntelo aquí radio, está
bien, ahora simplemente copiaremos este ahora aquí queremos hacer 15. Entonces
844 por 15 el factor da 56,27 56,27 Está bien, ya estás aquí, sigamos adelante y reiniciémoslo
para asegurarnos de que todo esté bien. Ahora tenemos este radio aquí que es 15 bueno, también
es 15, pero aquí está el número de píxeles. es mucho menor porque es un dispositivo más pequeño,
está bien, genial y ¿qué más podemos llevar aquí? Tengo esta sección inferior ahora, esta es la parte superior
e inferior, está bien, esa es la altura tan vertical.

Distancia, entonces, ¿qué hacemos para seguir adelante y
llegar aquí? dimensiones punto altura 15, está bien y uh Aquí 45, así que llegaremos a este archivo de dimensiones
y crearemos una altura para 45. bien y 844 por 45 la proporción es 18,76 18,76 Está bien, entonces simplemente podríamos seguir adelante, déjame solo. cierre este y aquí podríamos llamar dimensiones
altura 45 dimensiones altura 45 ok ahora vamos a abrirlo y ponerlo ahí
a ver si no tenemos cambios o no veamos, tengo un error aquí. Me falta punto y coma.
Ahora sigamos adelante y comencemos. Sí, verás que subió un poco. Ahora haremos lo mismo,
reiniciaremos y probaremos en el iPhone 12.

Así que vendré aquí y seleccionaré iPhone
12 y haré cómo reiniciar, ¿cuál es este? por aquí está bien, así que no hay otros cambios
porque encaja perfectamente y justo ahora vimos Tuvimos cambios aquí porque es un dispositivo más
pequeño. Está bien, hasta ahora todo bien. Ahora aquí, uh, ocupémonos de otro tema que
creo que deberíamos porque queremos ser lo más lo más perfecto posible, así que debería ser, veamos, está bien,
esto está dentro de la altura 45, está bien ahora, uh Por aquí, está bien este iPhone 12, pero
en el iPhone 8, si lo ves, ven aquí. Este y este se ven exactamente iguales, está
bien, entonces debería ser más pequeño. Cuidé el borde, pero el tamaño es el mismo, por lo que,
según el dispositivo, debería ser más pequeño. Entonces, pero ya tenemos la altura, entonces, ¿qué podríamos
hacer? Podrías hacer las dimensiones, punto, uh. altura 45. Ahora mira, esta altura debe ser
la misma, la misma cantidad aquí, así que podemos simplemente copiar este y ponerlo y ahora
quiero reiniciar cuando lo reinicio verás que tenemos los cambios están bien, sí, se hicieron mucho más pequeños,
está bien ahora, al decir eso surgió otro problema ahora El ícono del botón de búsqueda es demasiado grande, así que queremos
hacerlo más pequeño también, así que veamos la búsqueda.

El botón del ícono debería estar bien, así que creo que el ícono
de búsqueda debería estar en algún lugar por aquí, vale este. Bien, este es un ícono de búsqueda. Ahora en Flutter, el tamaño
predeterminado del ícono es 24 y podemos demostrarlo. simplemente escribimos aquí 24, está bien y si reiniciamos
nuestro teléfono y lo guardamos, no veremos nada. pero si es un 20 cambia bien, se vuelve más
pequeño y si vamos al iphone 12 por aquí y veamos, este es nuestro iPhone 12 ahora, si reinicio
aquí, se vuelve más pequeño, así que es Es cierto que está bien 24, así que ahora, aunque
definitivamente usaremos este 24 como nuestro parámetro uh aquí para encontrar factores uh, así
que aquí escribiríamos el tamaño del icono Está bien, y para esto simplemente crearíamos una
nueva variable que llamamos estática doble. tamaño del icono de 24 en este caso y usaremos la altura
de la pantalla por 844 dividido por 24 para obtener 35.17 así que aquí escribimos 35.7. Está
bien, ahora llegaremos a nuestro uh página principal de pie de página aquí y como queríamos
dinámica, aquí escribiríamos dimensiones dimensiones punto icono tamaño 24 bien, ahora estamos
en el iPhone 12 por aquí, bien, veamos qué más podemos Tenemos un problema.

Aquí debemos mencionar el nombre del
parámetro de tamaño. Guardémoslo, pero por ello. Definitivamente no hay cambios, pero si pasas al iPhone
12 iPhone 8 aquí, ahora reiniciémoslo, ya veremos. Sí, se vuelve más pequeño donde se ven
muy proporcionales, y es hermoso, ¿vale? ahora digo que uno al mismo tiempo podemos
encargarnos de esto esto y este ícono ahora aquí se ve bastante bien pero aquí no
se ve bien porque casi toca el fondo correcto, que es lo que no queremos, ahora podemos porque
ahora tenemos este tamaño de icono, por lo que Podemos seguir adelante y encargarnos de eso. Ahora sabemos
que estos tres íconos provienen de este archivo. Así que seguiré adelante y aplicaré estos parámetros
para que las dimensiones del ícono de puntos sean 24 ahora.

Veamos, estamos en el iPhone 8, así que estamos en el iPhone
8, así que lo que haré será seguir adelante y guardarlo y se vuelve automáticamente más pequeño y ahora se
ven maravillosamente similares, ojalá tenga sentido y estoy en el iPhone 12 en este momento, pero no hay cambios,
bueno, hemos recorrido un largo camino porque Aunque ya han pasado 2,5 horas, aprendimos
mucho, aprendimos cómo hacer un creador de vistas de página cómo desplazarse
y acercar y alejar, y también aprendimos cómo usar el indicador de puntos aprendimos
cómo usar el widget de pila en el contenedor widget y también dentro del widget de contenedor
aprendimos cómo usar dos contenedores diferentes Muy bien, también aprendimos cómo hacer que nuestra
aplicación responda según diferentes pantallas.

Y a lo largo del camino construimos algunos widgets ícono
y widget de texto widget de texto pequeño y texto grande El widget está bien, así que, a la larga,
crear esta aplicación nos ahorrará mucho. De todos modos, a continuación veremos cómo crear
esta sección y también esta lista aquí, ¿vale? Bueno, para hacer eso tenemos que
venir aquí y ver si tenemos esto. Cuerpo de la página de comida, vendríamos aquí
y luego colapsaremos y organizaremos un poco. Bien, estamos aquí. Bien, básicamente, lo que tenemos
aquí ahora mismo para nuestro simulador. aquí, entonces esta es esta sección del control deslizante,
a la derecha, la sección del control deslizante y estos son los puntos Muy bien, ahora aquí tendremos un texto popular.
Texto popular. Con esto me refiero a este. Esta sección está bien, así que aquí eso
es lo que queremos hacer, bien hacerlo primero.

Definitivamente necesitamos crear un espacio aquí,
como puedes ver, eso es lo que haremos ahora aquí. haga el cuadro de tamaño y necesitamos crear una altura correcta, está
bien en el cuadro de tamaño lateral, así que haremos las dimensiones. altura del punto 30. ya lo tenemos bien, eso
es lo hermoso de esto, el único trabajo bueno, eso es lo hermoso de trabajar en
estos pequeños detalles que ayudan De todos modos, te llevará mucho tiempo en el futuro, así
que ahora queremos ponerlos primero en un contenedor. Bien, vamos a hacer un contenedor porque
queremos aplicar un margen aquí. y usando el contenedor podemos hacerlo bien, así que
aquí tendremos el margen correcto y el margen tendrá uh, inserciones de borde, mientras que solo ahora queremos aplicar
en el margen izquierdo, que en nuestro caso mide el punto ancho y 30 está bien porque aquí se aplica el margen para la sección
izquierda del lado izquierdo horizontalmente, por lo que queremos trabajar con el ancho ahora dentro de él, tendremos
un hijo y tendremos una fila ahora que tenemos una fila porque queremos juntar estas tres cosas populares,
esta pequeña combinación de punto y pie Está bien, está bien, entonces eso estaría en una línea,
así que definitivamente ahora para este texto popular.

Todo lo que pudimos hacer lo pudimos hacer muy rápido
porque ya tenemos el texto reutilizable entonces harías gran tecnología, lo siento, ahora hacemos texto
grande aquí, todo lo que tenemos que hacer es pasar el texto. Está bien, sí, ahora si queremos ver el resultado,
veamos, por aquí, así que lo pondré aquí. Está bien y veamos cuál ha sido seleccionado.
Este es el iPhone 12. Así que ahora vayamos al iPhone 8, está
bien, así es como se ve aquí.

Está bien, está bien, entonces el siguiente
es que tenemos que poner este punto aquí. Bueno, para el punto también necesitamos crear un
poco de distancia, como ves aquí y aquí, etc. ambos lados tenemos distancia, así que hacemos el tamaño del cuadro
y en este caso haríamos el ancho y las dimensiones del punto con 10 está bien y copiaré
este porque necesitamos dos veces antes del punto y después del
punto bueno ahora vamos a seguir adelante y dibuja el punto, así que para el punto en sí usaremos
un contenedor, está bien, y ¿por qué voy a hacerlo? usa un contenedor, te lo diré, así que aquí podemos
aplicar margen.

Bueno, aplicaremos margen. Más tarde, veamos primero, tenemos un niño
aquí, una vez más aplicaremos texto grande. ahora se necesita un parámetro de texto y dentro de él
pondremos este punto y luego tendremos color para que hacer color colores punto negro veamos 26 yo usaría
este bien, ahora déjame guardar esto y vamos vemos esta cosa en nuestro simulador, así que está allí,
es muy pequeña, está bien, ahora tendremos Nuestro otro texto que se llama maridaje está
bien, así que eso es lo que queremos tener.

Entonces, lo que vamos a hacer aquí es crear
otro contenedor y aquí tendremos un hijo. y dentro del niño tendremos texto pequeño porque este texto
pertenece al texto pequeño, texto grande que usamos este widget el que ya tenemos texto grande para este
tipo de texto gris claro usamos nuestro pequeño widget de texto, está bien, eso es lo que usaremos,
así que llamaremos texto pequeño aquí, ahora aquí Usa texto como parámetro y necesitamos pasar esta palabra para emparejar
los pies para que hagas el emparejamiento de alimentos. Está bien, está bien y ahora continuaremos,
lo guardaremos y veremos el resultado. Vale, esto es lo que tenemos y
ahora lo ves originalmente. en el diseño original, el par de pies debe estar un
poco por debajo de la línea superior, pero aquí Están usando la línea superior, así que ese es uno de
los problemas que estamos encontrando aquí, ¿vale? Ahora una cosa que podríamos hacer, aunque podríamos ponerlos
todos en la parte inferior, está bien porque estamos dentro.

Una fila, eso es lo que haremos, aquí usaremos una
propiedad que se llama alineación de acceso cruzado así que la alineación del acceso cruzado termina, así
que con esto todo se reduciría al resultado final, ¿vale? así que sigamos adelante y verifiquemos bien, déjame
guardar esto, está bien, ya se bajó. aquí para el punto queremos que esté un poco hacia
arriba, está bien, si ves aquí, está un poco arriba no exactamente en la línea inferior. Vale, estos dos textos
están en la línea inferior, pero este texto es así. El punto no es así para ese porque usamos este punto dentro
de un texto aquí, vale, entonces, dentro, uh.

Inserte una prueba grande y un contenedor ahora porque, dado
que este texto grande está dentro del contenedor, podremos para aplicarle margen, está bien, eso es lo que hacemos
ahora aquí, básicamente usaremos margen constante Está bien, haremos los tres de abajo, lo siento, los tres
de abajo, así que lo subiremos un poco, ¿vale? Sí, aunque en realidad bajó un poco de alguna
manera, pero alcanzó el propósito, ¿vale? Está bien, así es como funciona ahora aquí.
Para este par de pies también queremos Para aplicar otro margen aquí queremos subirlo
un poco hacia arriba, así que aquí tal vez haremos dos, está bien, ahora esto es lo que parece
aquí ahora, sigamos adelante y comprobemos En nuestro otro simulador, en el que estamos trabajando,
vendremos aquí y lo actualizaremos. Y sí, esto es lo que queríamos y es exactamente
igual que el diseño original.

Está bien, entonces con esta sección aquí, bueno,
terminamos con esto y ahora seguiremos adelante. y trabaja en este bien, entonces esta sería
una lista de imágenes y su título. y cosas así, está bien, así que usaremos la
vista de lista aquí para mostrar esta lista. Está bien, bueno, para eso, um, veamos,
vendría aquí, así que este es el contenedor que mostraba texto popular y
cosas así ahora aquí mostraría una lista de comida e imágenes como esa, está bien,
ahora lo primero es porque queremos usar creador de vistas de lista, así que eso es lo que necesitamos para
seguir adelante y llamar para que lo hagas listview.builder Como dije antes, todos los constructores en Flutter
aceptan una función en su generador de elementos. y el primer parámetro es el contexto y el segundo es el índice.
Bueno, el índice es el número de elementos que quieres en esta vista de lista o en esta lista, está
bien, por ahora lo configuraremos en 10 y podemos hacer usa el recuento de elementos, así que lo hacemos como 10, está
bien y ahora, por supuesto, quiere que devuelvas una función.

Entonces o devolver un widget en realidad o una función que devuelve
un widget, funciona de cualquier manera, así que aquí Devolveremos un contenedor. Está bien, ahora el error
debería desaparecer porque estamos regresando. Necesitamos usar punto y coma aquí, así que si bien este
es un contexto, este contexto no es realmente así. contexto, aunque podría ser un poco diferente, pero
de todos modos puedes pasar un nombre aquí y ahora este es el índice, por lo que este índice estaría conectado
a este, por lo que comenzará desde cero, así que Mientras queremos construir cosas como esta aquí,
definitivamente lo primero que debemos hacer Vemos que tenemos aquí un poco de espacio para que podamos aplicarle
el margen correcto para que usted haga margen.

Y aquí conjuntos de bordes y solo establece inserciones, está bien, ahora aquí
queremos margen para el lado izquierdo y derecho y ya trabajamos para esas cosas, así que hacemos
izquierda y dimensiones uh con 20 y queremos usar los 20 píxeles y la derecha es la misma
y aquí las dimensiones puntean con 20 también Bueno, después de eso queremos devolver algo llamado
fila porque queremos poner esta sección y esta sección en una fila, por lo que esta es una fila
grande y el primer hijo es esta imagen y el segundo hijo Estaría esta información aquí, pero dentro del segundo
elemento secundario tendremos un diseño de columnas.

Y dentro de la columna tendrá el primer hijo, el segundo
hijo y un tercer hijo, pero el tercer hijo dentro Tendrá un diseño de roles que es muy parecido
a este. Está bien, de todos modos, ahora aquí. continuaremos y declararemos un niño y ahora dentro de
niño tendremos una fila y sabemos que la fila toma niños, así que aquí estamos ahora y después de eso
queremos dibujar esto bien, definitivamente eso es dibujando una imagen y una imagen con borde, entonces
en ese caso tenemos que usar un contenedor Así que seguiré adelante y declararé el contenedor
aquí y dentro del contenedor usaré decoración.

Y haremos decoración de caja y
aquí tendremos radio de borde Bueno, el radio del borde es circular y ahora ya
tenemos un radio para ese radio de respuesta. Entonces haz un radio de 20. Está bien, y bueno, también
podemos usar un color aquí si así lo deseas. Los colores son blancos y esto es útil
porque en el futuro los cargaremos. de la red si la imagen aún no está cargada,
se mostrará en blanco o, por ejemplo, blanco con un color como este,
está bien, así es mejor ahora queremos mostrar la imagen así que aquí haríamos
imagen y haríamos imagen de decoración y dentro de él se necesita otra propiedad de imagen y aquí
hacemos la imagen del recurso, está bien. y ahora con una imagen de activo aquí haremos nuestra
ruta de imagen que está en la carpeta de activos y con una carpeta de imágenes y comida cero uno
punto cero punto png así que esa es la imagen que Quiero dibujar, está bien, ahora, en este momento, lo que haré.
Seguiré adelante y lo reiniciaré, bueno, digamos, iPhone 8.

Vale, lo guardaré y veremos qué pasa. Bien,
ahora tenemos algunos problemas aquí. con respecto al tamaño, como si a la ventana gráfica vertical se le hubiera
dado una altura independiente, bueno, esta ventana gráfica vertical uh, altura ilimitada, hay algunas formas de
resolver esto, pero tenemos que entender algo bueno en general cuando tienes el generador
de vistas de lista, espera un tamaño de su padre uh, contenedor principal ahora para este generador de vistas
de lista, el contenedor del controlador principal es el columna a la derecha, pero la columna no tiene ningún tamaño, así
que puedo cortarla por aquí y podría hacer un contenedor Está bien, puedo darle un poco de altura, digamos
700, y luego puedo ponerlo aquí como niño. lista para ser un constructor, está bien, ahora sigamos
adelante y guárdela y parecerá parte de la El problema se vendió bien y ahora tengo
estos dos contenedores, este y este.

Bueno, el segundo aquí, que espero que sea
del tamaño de mi imagen, como lo ves aquí. Así que sigamos adelante y apliquémoslo y veamos
qué pasa. Entonces lo hacemos con 120 y altura. 120 está bien, sigamos adelante y guárdelo y Parece que todavía tenemos este error, pero las imágenes
se muestran bien, sí, ahora se puede desplazar. Vale, sí, parte del problema se ha resuelto. Lo
que aprendimos aquí, si tienes una lista. ver el constructor, entonces necesita que el contenedor principal
de la lista sea el constructor y debe tener una altura determinada Está bien, puedes hacer lo que quiero decir, lo más
alto posible, incluso 900 1000, realmente no importa. Bueno, por supuesto, al final puede que salga vacío,
pero de todos modos este contenedor está responsable de mostrar esta imagen y que le dimos
dentro de la altura, bueno, ahora todavía Tengo este desbordamiento aquí porque
se puede desplazar pero no es así.

Sabes cuánto tiempo debería ser desplazable, ¿vale?
aquí hay algunos parámetros que podemos configurar Aquí arriba podemos hacer un envoltorio retráctil para
que quede bien, veamos bien y todavía tenemos este. Está bien y ahí configuraremos otros parámetros
como la física. Está bien, veamos qué pasa y uh. física siempre desplazable, sigamos adelante
y configuremos bien, se parece a nuestro uh La solución no funciona, pero necesitamos configurar esto
también bien, pero el problema principal es en realidad Viniendo de aquí donde tengo el cuerpo de esta página
de alimentos, esta es la sección que llama Toda esta página principal aquí, aparte de este encabezado,
está bien, así que para resolver este problema aquí, ¿qué tenemos que hacer. Voy a ir aquí y debemos envolverlo
en un solo elemento desplazable para niños. uh widget está bien y entonces el problema se
resolvería. Lo pondré allí ahora porque este andamio que tiene una columna, esta columna tiene un
encabezado y esta sección del cuerpo, está bien, ahora quiero que toda esta sección sea desplazable,
no solo esta, todo está bien, por eso Lo envolvemos alrededor del desplazamiento de un solo niño, pero
podrías preguntarte por qué no envuelves esta sección.

Alrededor de un solo niño desplazable, bueno, te lo diré más tarde
por qué no, está bien de todos modos, ahora sigamos adelante y guárdelo y veremos que el problema se ha resuelto
y ahora se puede desplazar, está bien, ahora aquí toda la página se puede desplazar, está bien en este
momento y eso es lo hermoso de esto, así que todo La página se puede desplazar. Verás, puedo desplazarme.
Está bien, pero ahora existe este problema. Puedo desplazarme hacia arriba, pero si el encabezado es, quiero decir que la
sección superior desapareció, realmente no puedo desplazarme hacia abajo.

Entonces tenemos este problema. Ahora sabré cómo resolverlo.
Ahora este problema se resuelve desde aquí. Así que no quiero que se pueda desplazar por
sí solo. Quiero que sea parte de la página. Déjame actualizarlo. Quería que esto fuera parte
de la página y que se pudiera desplazar. no solo esta sección, está bien, si hacemos que esta
sesión sea desplazable, está bien, está bien. pero esta parte es demasiado pequeña, así que no somos
muy fáciles de usar, eso es lo que dirías correctamente. Entonces quieres que toda la página sea desplazable. Lo siento,
¿quieres que toda la página sea desplazable? página desplazable y eso es lo que vamos a hacer,
así que desea detener esta sección para que desplazable por sí solo, desea que se pueda desplazar con
toda la página, por lo que aquí nunca se aplicará el propiedad que se llama nunca, veamos qué es, nunca
es física desplazable, está bien, esta ahora reiniciemos o no lo hicimos, sí, lo hicimos.
Ahora ves que toda la página se puede crear.

Eso es lo que queremos, está bien y, si no tenemos
este, es posible que aún tengamos un error. mira, ejecutémoslo desde el principio, está bien, sí,
está bien, entonces no necesitamos este parámetro. Lo necesitábamos antes, creo que con
física siempre desplazable pero con Física nunca desplazable, no necesitamos esto,
por lo que está funcionando como esperábamos. pero si simplemente hacemos que esta sección sea desplazable,
esta no es una página fácil de usar, entonces eso es lo que No lo somos, por eso no incluimos este generador de vistas de
página en este elemento desplazable para un solo niño. Está bien, de todos modos, así que ahora vendremos aquí
y nos ocuparemos de algunos pequeños problemas. Aquí tenemos un radio de 20, pero no parece un radio
de 20 porque nos estamos perdiendo la propiedad. queremos hacer la propiedad de ajuste aquí, así que haremos
la cobertura de puntos de boxfit, está bien, ahora parece como 20, está bien, y por aquí, cada uno de este
contenedor tiene relleno izquierdo y derecho y podemos margen izquierdo y derecho, de hecho
también podemos aplicar otro margen aquí que es abajo y haremos las dimensiones de altura 10.

Veamos,
sí, ahora se ve mucho mejor, está bien, sí, genial. Bueno, aquí estamos bien con esta sección desplazable,
así que este es el primer contenedor. Entonces eso muestra la imagen en la fila derecha,
sección de imagen. Bien, ahora aquí. Aquí queremos mostrar nuestra sección de texto, nuestro contenedor
de texto. Bien, por cierto, debemos seguir adelante y compruébalo en nuestro dispositivo móvil aquí, que es
el iPhone 12, así que sigamos adelante y reiniciémoslo.

Y el iphone 12 ya está aquí, sí, está
bien, pero ya encontramos otro problema Si ves el tamaño de esta imagen y esta imagen, son
iguales ahora, eso es porque aquí, está bien, Ocúpate de ello pronto porque necesitamos hacer que esta
sección sea dinámica tal como lo hicimos antes aquí. Configura los parámetros, está bien, de todos modos, ahora
primero seguiremos adelante y dibujaremos el texto aquí. Bueno, ahora para ese, necesitamos
otro contenedor. y dentro del contenedor veamos qué necesitamos, bueno,
definitivamente, aquí ves que tenemos un poco de Relleno aquí, sí, y eso es una cosa, y ves
que el contenedor en sí se ha curvado. Aquí o en el radio, por eso necesitaríamos decoración
de caja. Está bien, así que seguiremos adelante y Hazlo muy rápido, así que hacemos la decoración y la decoración
de la caja y el radio del borde hacemos el radio del borde. punto circular y dimensiones de ese radio de 20, está
bien y también necesitamos usar un color aquí y entonces podemos usar el color blanco como color de fondo
para que puedas colorear y hacer colores.blanco Está bien y si sigues adelante y lo guardas definitivamente
no verás nada, veamos en nuestro caso.

Iphone 12 no tenemos nada porque el contenedor
no tiene altura de cruz, así que Solo usaremos algunos datos ficticios, por lo que 100 y digamos
200, está bien, ahora veamos, sí, parece que ya está. sale bien, ahora puedes verlo aquí. Hay
algunos problemas con esto primero. uh, este radio aquí no queremos ningún radio fronterizo
aquí, así que debemos separarnos. esto, así que realmente no podemos usar esta propiedad aquí,
así que solo lo hacemos bien y luego lo siento solo para radio está bien, entonces se necesitan uh aquí hay algunas
propiedades, entonces usaríamos la parte superior derecha y aquí use radio punto circular y ahora aquí tendremos dimensiones
y el radio 20, bien arriba a la derecha y abajo a la derecha eso es lo que hará dimensiones circulares radio de punto 20, bien, ahora ves aquí, este radio
del borde ha desaparecido, acabamos de irnos esta sección está bien, está bien, pero ahora
hay otro problema, aunque no quiero hacer Esto está codificado, así que quiero hacerlo dinámico,
lo que significa que debería residir solo.

Basado en el tamaño del contenedor, está bien, realmente no
puedes codificar este ancho, puedes hacer la altura que es Está bien, porque no sabes exactamente dónde debes
detenerte. Está bien, por eso queremos tomar sácalo, pero si lo sacas, uh, veamos, sí, salió
bien, así que ahora este es el problema, pero Ahora aquí podemos hacerlo natural, lo que significa
que quiero que este contenedor tome todos los espacio disponible posible, está bien, por eso lo incluiremos
en el widget expandido, ¿vale? ahora sigamos adelante y guárdelo ahora ocupa todo
el espacio disponible ahora no tomó esto espacio porque tenemos aquí tenemos este margen
izquierdo como puedes ver, es un 20 píxeles y a la derecha había 20.

Así que este es
el margen derecho, lo siento, aquí este. entonces estos son los 20 píxeles, está bien, si
colocas un contenedor dentro del widget expandido Por lo tanto, el widget ampliado obligará al
contenedor a ocupar todo el espacio disponible. Ahora, si seguimos adelante y lo comprobamos
en el iPhone 8, veremos lo mismo. Aquí vemos más o menos lo mismo, está
bien, eso está funcionando.

Bien, ahora es el momento de ocuparnos de esta
columna aquí, esta sección de columnas. Muy bien, ahora la columna en sí debería estar
dentro de otro widget. Yo diría que es un widget de relleno porque aquí queremos aplicar un
poco de relleno, así que primero tendré un hijo Mira, tenemos que insertar el contenedor para eso, así
que aquí tendremos un niño y usaré un relleno. Está bien y dentro de él tendremos relleno.

Está bien, entonces usaremos las inserciones de borde,
solo veamos, está bien, ahora aquí solo Quiero aplicar relleno a la izquierda, está bien, entonces
hacemos dimensiones con un ancho de 10, está bien. Ahora aquí podemos usar child y usaremos una columna
y los niños están bien, hasta ahora todo bien, uh. ahora definitivamente podríamos para este una comida nutritiva
de frutas, sea lo que sea, déjame comprobarlo. uh, en el medio de China, bueno, eso es lo que escribiría aquí,
así que de todos modos, aquí llamaría reutilizar nuestro widget de texto grande, que es este. Simplemente seguiré
adelante y lo llamaré widget de texto grande y aquí Necesitamos aplicar un parámetro que se llama
texto y aquí escribiré un nuevo pre solo harina de frutas en China, está bien,
ahora seguiré adelante y la guardaré. Ahora abriré mi simulador. Este es el iPhone
8. Parece que está ocupando todo el espacio. si vamos al iphone 12 actualicémoslo ¿Cuál es este? Bien, aquí arriba tenemos
este punto punto punto automáticamente. tenemos este punto punto porque creo que anteriormente
hemos usado desbordamiento, ¿vale? Entonces, si cierto texto es
más largo que el contenedor.

Luego usamos punto punto punto pero también podemos usar
desvanecer, realmente no importa, déjame cambiarlo a desvanecerlo, actualizarlo, sí, así que simplemente se desvaneció, está
bien, pero no me gusta, así que usaremos puntos suspensivos. Yo lo haría. Ven aquí, vendría aquí, está bien, así que ahora seguiré
adelante y haré la siguiente sección. Este está bien, sí, pero ahora aquí
ves el diseño original, está cortado. Desde aquí realmente no es mucho hasta el
final, eso es porque podemos postularnos. otro relleno derecho, está bien y haremos dimensiones
punteadas con 10, está bien, ahora lo guardaré y Lo veré en el iPhone 12, ahora se
ve mejor, está bien, genial. A continuación queremos encargarnos de esta cosa
con características chinas, eso es lo que dice. ahora aquí haré un texto pequeño para
este texto pequeño y aquí con chino Sí, eso es todo y luego lo que haremos, seguiremos
adelante y usaremos este, pero creo que Anteriormente lo hemos usado en algún lugar de esta misma
página, así que podemos seguir adelante y copiarlo. así que déjame buscarlo, así que creo que la palabra
se llama normal normal, está bien, aquí, así que esto sección qué podemos hacer, podríamos seguir adelante
y copiar eso, así copiaremos toda la sección y solo sé donde estábamos Está bien, estamos aquí, así que
lo copié y lo pondré allí, ¿vale? Lo guardaré y lo ejecutaré ahora.

Intentaré
verlo en el iPhone 12, así que veamos. Así que esto es lo que tenemos aquí y parece bastante
desordenado, pero no te preocupes, lo tomaremos. Cuida esto bien, lo primero es lo primero,
aquí queremos empezar todo desde esto, uh. El lado izquierdo está bien, entonces podemos
usar esta propiedad de columna aquí. entonces haces la alineación del eje transversal alineación
del eje transversal y usaremos esta propiedad, ¿vale? Sí, ya se ve mejor. Ahora queremos centrar
todo, así que lo usaremos aquí. alineación sobrante principal que es la vertical
y verticalmente queremos centrar toda están bien, entonces alineamos el eje principal con el centro
del punto, está bien, ahora todos estos son más o menos centrados pero todavía están congestionados, está
bien, esa parte debe solucionarse fácilmente, puedes solo usa el cuadro de tamaño para eso, está bien, aquí usaríamos
el ancho, creo que el alto y aquí las dimensiones.

La altura 10 podemos usar esta, así que simplemente
la copiaré y la pondré justo debajo, ¿vale? Ahora lo guardaré y ya se ve genial, ¿no está
bien? Ahora comprobaremos lo mismo en iPhone 8, veamos, este es el iPhone 8, así
que mi simulador de iPhone 8 está aquí. guárdelo, ejecútelo.
Sí, ya se ve muy bien. Ahora el otro problema que aún no hemos resuelto es el problema del
tamaño de la imagen. Bien, ahora se acabó el tamaño de la imagen. Aquí, dos secciones, tenemos este tamaño de imagen
y este tamaño de contenedor.

Ahora, si ves eso. Este contenedor se ve muy bien aquí, pero esta sección
blanca del contenedor no lo hace realmente. Mira que bien, hay demasiado espacio en la parte superior derecha,
pero no lo tiene, es perfecto de todos modos, así que para este, esta altura es 100, correcto, está codificado
y aquí dentro de la altura para este La imagen también es difícil de cortar, así que lo que podríamos
hacer es venir aquí y declararemos aquí, digamos. coloque el tamaño de la vista, está bien, ahora aquí primero
declararemos una vista de lista doble estática variable img Bueno, en nuestro caso todos
serán de tamaño cuadrado. Así que usaré el tamaño cuadrado, así que usaré solo
uno, está bien, por eso la vista de lista img tamaño creo que ahora tiene más sentido aquí, en
este caso voy a seguir adelante con la pantalla ancho está bien, entonces puedes ir con la altura
de la pantalla, realmente no importa, ¿vale? El iPhone 8 tiene un ancho de pantalla más pequeño y una altura de pantalla
más pequeña que el iPhone 12.

De todos modos, aquí tengo esto. El tamaño de la imagen del contenedor aquí es 120, por lo
que 390 dividido por 120 es 3,25, por lo que nuestra fábrica es 3,25. Recuerda que en iPhone 8, iPhone, lo siento,
iPhone 12, la imagen tiene el ancho de esta pantalla. 390. Está bien, puedes seguir adelante
con la altura, realmente no importa. ahora aquí usaremos static uh double y para este contenedor
de texto de vista de lista está bien, veamos Tamaño actual del texto.

Está bien, hacemos pantalla.
La pantalla ahora tiene un ancho de pantalla de tres. nueve nueve tres nueve cero entonces queremos dividirlo por
100, por lo que debería ser 3,9, está bien, ya vendremos aquí y simplemente los reemplazaremos, así que aquí llamaremos
a las dimensiones vista de lista de puntos mg tamaño lo pondremos aquí igual
seamos tamaño img y aquí Ponlo pero necesitamos hacer una vista de lista. tamaño del contenedor de texto, bien, ahora sigamos adelante
y guárdelo, veamos el resultado y se ve exactamente Igual que este pero muy proporcional, no demasiado grande. Ahora
este es nuestro iPhone 12. Está bien, ahora lo haré. Continúe y ejecútelo en el iPhone 12 y asegúrese
de que todo esté bien como esperábamos. Bueno, estamos a la mitad de nuestros proyectos. Parte de la interfaz
de usuario. Está bien, todo está funcionando. bueno Bueno, un problema es que antes a este contenedor
le di una altura de 900. Puedo eliminarlo. pero si lo elimino tendré un problema, está bien, desapareció
y aquí, en ese caso, puedo simplemente elimine completamente este contenedor.

No necesito
este y este. Bien, ahora sigamos adelante y guárdelo y todavía tenemos problemas porque si
quita el contenedor necesita envoltura retráctil Vale, ahora ha vuelto. ¿Recuerdas que ese 900 que
usé antes para depurar? Vale, de todos modos. Eliminé ese y con esto terminamos con nuestra
página de inicio. Bueno, ha pasado mucho tiempo. horas con la página de inicio, pero aprendimos
muchas cosas, pero ahora seguiremos adelante y construye esta página, aquí tenemos estas páginas y puedes
hacer clic en cualquiera de ellas para ir a una nueva página.

A medida que accedes a una nueva página, tienes esta información
relacionada, así como esta imagen de nombre y cosas así, está bien, entonces esto es lo que vamos a construir,
está bien, así que antes de seguir adelante y construir Verás que tendremos una imagen de fondo, vale,
y aquí tenemos esta superposición blanca. Así que la imagen de fondo se superpone en blanco
y estos íconos aquí se deben a estos problemas. Tenemos que usar el widget de pila para esta pantalla. La pantalla
que vamos a seguir adelante y construir está bien. Entonces, si usamos el widget de pila, podemos colocar
un elemento sobre otros elementos o una imagen o texto sobre otros elementos o imágenes están bien, por lo que
esto se creará usando el widget de pila, y ahora vendría a nuestra carpeta de proyectos aquí bueno,
ahora creo que es hora de refractar nuestro estructura del proyecto un poco ahora aquí en la carpeta
lib, crearé una nueva carpeta y la llamaré Las pantallas están bien, o creo que me quedaría con las
páginas, eso es lo que me gusta, está bien ahora.

Arrastraré y soltaré el directorio de inicio dentro del
directorio de la página y en Android Studio te preguntará si vamos a refactorizar esto, todo
con esto si hago clic en sí También hará la corrección para la importación de la biblioteca,
está bien, eso es todo si estás usando vs code. Debería tener cosas como esta también, pero si
no es así, entonces debes trabajar en ello. Así que aquí, debido a que cambiamos la ruta, debemos volver
a importarla y debemos ir a la parte superior aquí. veamos, está bien, entonces puedo seguir adelante
y quitarlo, está bien, y con esto podemos son buenos ahora si abres nuestra carpeta de páginas ahora
tenemos la carpeta de inicio y dentro de ella tenemos esto Cuerpo de la página de comida y página principal de
comida. Bien, para esta crearemos otra carpeta. y aquí lo llamaremos comida. Ahora dentro
de comida crearemos un nuevo directorio. y lo llamaremos detalle de comida popular punto punto. Bueno,
esta sería una clase de dardos sin estado, así que Hacemos st y elegiremos apátrida
ahora aquí hacemos popular Los detalles de la comida están bien, y
creo que necesitamos importar algunos de los bibliotecas desde aquí, está bien, en lugar de
devolver un contenedor aquí, regresaremos andamio bien si solo devolvemos un contenedor
en general la pantalla es negra podemos probarlo, así que vendremos aquí y en lugar
de la página principal de comida llamaremos aquí popular detalle esta clase y la guardaremos
y la guardaremos una vez más y Ahora, si llegamos a nuestro iPhone 12 aquí, decimos
que es negro de todos modos, así que no queremos para devolver un contenedor negro queremos devolver
un andamio el andamio nos dará un fondo blanco color como este, si lo guardas, verás que ahora aquí devolveremos
el cuerpo y dentro del cuerpo habrá una pila y dentro de la pila tendremos hijos y los hijos
toman el widget de posición, sabemos que y se utilizan para posicionar elementos
o widgets en la pantalla entre sí Bien, ahora, si echamos un vistazo, primero
queremos dibujar esta imagen de fondo.

Ahora lo primero que tenemos que mencionar es la posición
del contenedor, así que eso es lo que hará. haga primero el cero a la izquierda y el cero a la derecha
para que comience desde aquí y termine aquí ahora aquí También queremos definir su ancho y alto para que
sea el doble del máximo finito, así que con esto tomará todo el ancho disponible y luego
tendremos alto y haremos 350 por ahora y luego haremos una decoración para mostrar la imagen,
usaremos decoración de cuadro y tiene propiedad de imagen que tiene una imagen de decoración y luego una
imagen también y luego una imagen de activo Así que ahora, con una imagen de recurso, debemos mencionar la ruta
de la imagen para que nuestra imagen sea comida cero un punto png. Muy bien, ahora continuaremos, lo guardaremos y echemos un vistazo,
así que aquí estamos en el iPhone 8, que se ve Así que aquí estamos en el iPhone iPhone
12.

Ahora vendremos aquí y lo reiniciaremos. Ahora vemos que este es el iPhone 8. Por supuesto,
se ven un poco raros, como si aquí no lo fuera. cubierto completamente pero aquí porque el dispositivo
pequeño está cubierto pero podemos forzarlos a ser cubierto en cualquier lugar y en cualquier dispositivo,
por lo que aquí usaremos una propiedad llamada ajuste que tiene una propiedad llamada boxfit.cover esta
bien ahora tan pronto como la guarde y la guarde para el iphone 12 ves que desapareció uh, sigue
igual para el iphone uh ocho, vale, ahora otro El problema es que este problema de altura debería tener una altura
menor porque es un dispositivo más pequeño, por lo que Necesitamos cambiar aquí para este de aquí.

Necesito
crear una nueva variable para que seas popular. comida aquí ahora aquí declararemos una nueva
variable y la llamaremos estática doble uh comida popular, tengo el tamaño así, está bien y hacemos
la altura de la pantalla y la dividimos por 350 Entonces obtenemos 2,41, así que este es nuestro factor.
Ahora vendremos aquí y haremos las dimensiones. aquí popular y este está bien,
ahora guardémoslo y mirémoslo y Vamos al iPhone 8, reinícialo. Sí, ahora se
ve mucho más pequeño y mejor. Está bien. Ahora aquí está la cuestión, así que
hemos terminado con esta primera sección. Ahora continuaremos y veremos cómo dibujar estos íconos.
Ahora definitivamente dibujaremos los íconos aquí. una vez más como un widget de posición, está bien,
aquí tendremos un hijo ahora si lo ves desde En este diseño sabemos que tienen que estar en una
fila, así que aquí tendremos un widget de fila.

Y luego tenemos que especificar izquierda
y derecha, así que hacemos left left 20 y a la derecha 20. Pero queremos que sea dinámico, así
que hacemos dimensiones punteadas con 20 que ya tenemos. y aquí es lo mismo, así que con 20, muy bien, aquí
dentro de esta fila se necesitarán niños pero una cosa es que este ícono debería ser reutilizable
porque estos íconos se usarán en muchos otros lugares. Por eso seguiremos adelante y crearemos un nuevo ícono, una
clase de ícono reutilizable, así que aquí lo llamaremos um app icon.dart está bien, ahora esta sería una clase
sin estado y la llamaremos ícono de aplicación Ahora sigamos adelante e importemos algunas
de las dependencias de los paquetes. Bueno, ahora pensemos en ello,
este ícono debería ser uh utilizable, reutilizable y cuáles
son los parámetros que debemos pasar Definitivamente tendremos este color de fondo, el ícono
y el color del ícono, el tamaño del fondo.

Y el tamaño del icono, con suerte, así que primero seguiremos
adelante y comenzaremos con los datos del icono. y aquí lo llamaré icono y luego declararemos
otra variable a la que llamaremos color y seria el color de fondo y luego tendremos otra variable para el color,
debería ser el color del icono. y una vez más tendremos otra variable, la
llamaremos doble y será tamaño, ¿vale? Muy bien, ahora por aquí, iremos por aquí, aunque en
este caso el único parámetro obligatorio es el icono. eliminemos este, está bien, ahora los demás
son todos colores de fondo opcionales. uh, este color del icono de punto y este tamaño de punto
ahora el tamaño predeterminado es 40 en nuestro caso Está bien, o en realidad podemos usar 45,
así que en nuestro caso son dimensiones. entonces en nuestro caso es 40. ahora el color del ícono en sí Bien, entonces necesitamos pasar un color constante porque es un
color predeterminado, así que aquí lo hacemos ox ff756d54 Entonces ese es el color del ícono y para el
color de fondo hacemos la misma constante.

Color buey ffc f4 e4 vale, entonces
estos son los colores, vale ahora No mencionamos esto en los colores de nuestra aplicación porque
aprendimos que realmente no podemos usar dígitos dinámicos. o números aquí tiene que ser un color constante como valor
predeterminado, está bien, es por eso que no podemos importa aquí cualquier cosa desde los colores de la aplicación,
ya lo aprendimos antes, así que ahora vendré aquí Ahora lo primero es lo primero, así que aquí tendremos
el ancho, por lo que es el tamaño y luego tendremos la altura. eso es tamaño dos y ahora por aquí tendremos
decoración haremos decoración de caja y luego radio del borde radio del borde punto circular y tendrá
un tamaño de dos, por lo que sea cual sea el tamaño que tengamos pasarlo dividido por dos entonces eso lo convertiría
en un círculo correcto y luego tendremos color y el color debe ser el color de fondo.

Bien, después de
esto continuaremos e intentaremos dibujar nuestro ícono. Ahora el ícono debería ser un
niño aquí dentro del contenedor. ahora llamamos a este constructor de íconos y todo lo que necesitamos
hacer es pasar este parámetro de ícono que ya Lo tenemos aquí y luego tenemos que pasar el color
ahora que es el color del icono y luego el tamaño. Bueno, por ahora el tamaño es 16. Está bien, con esto hemos terminado
de crear nuestro ícono de aplicación reutilizable para que todos tienes que venir aquí y llamarlo para que lo hagas  ícono de
aplicación ahora aquí todo lo que necesita y solo un ícono Otros son todos opcionales, así que hacemos íconos con flechas
de puntos hacia atrás en iOS, así que lo guardaremos y Si uso el iPhone 8, ¿cuál
es este? Lo veo aquí.

Pero ahora aquí está este problema principal para que
puedas encargarte de eso, ahora podemos hacer el top 45 bajaría pero creo que también tenemos
una variable que es la altura 45 Así que podemos usar ese para que se haga según la altura
del dispositivo ahora mismo. Está bien, definitivamente. Podemos reutilizar este una vez más aquí,
esta vez el icono es diferente. Debería ser el ícono de compras, está bien,
sigamos adelante y dibújelo para guardarlo allí.

Pero ahora estos dos están juntos
y no queremos que estén juntos para que puedas separarlos para que puedas acceder a la alineación
principal acceso principal alineación espacio de puntos entre Entonces, debido a que esta es una fila, este es el espacio
del eje principal entre ellos, sepárelos demasiado, ¿vale? Muy bien, ahora ya se ve mejor, ahora
parece que no está en el centro, sino este es el estado predeterminado de este icono, está bastante
centrado, así que sí, si seguimos adelante Y revisa nuestro iPhone 12 aquí,
cuál es este y ya se ve genial. pero ahora tenemos un pequeño problema. Ahora el
tamaño debería ser más adecuado y para eso. uno usaremos el mismo enfoque que hemos usado en
toda nuestra aplicación, así que ahora aquí, Defina un nuevo tamaño de ícono para que este tamaño de ícono sea 16, por
lo que obtenemos un factor de 52,75, por lo que aquí hacemos 52,75.

Muy bien, este es el tamaño del
ícono y ahora vendremos aquí. y en lugar de 16 haríamos dimensiones,
lo siento, dimensiones. tamaño del icono de punto 16 está bien, ahora guardémoslo,
estamos aquí y ahora comprobémoslo en el iPhone iphone 8 así que aquí estamos iphone 8 bien,
ahora en el iphone 8 es un poco más pequeño y el iPhone 12 es un poco más grande, está bien, eso
es perfecto. Ahora hemos terminado con esa sección. Ahora seguiremos adelante y dibujaremos este con
fondo blanco. Bueno, bueno, para dibujar este. fondo blanco primero tenemos que venir aquí y
aquí tendremos otro widget de posición así que sigamos adelante y creemos un widget
de posición y ahora aquí tendremos hijo y niño como contenedor Bueno, cada vez que usamos un contenedor hay una gran
razón por la que podemos aplicar relleno y margen. Bueno, ahora aquí, en realidad, esta parte está un
poco por encima de esta imagen. Bueno, entonces. Eso es algo que debemos tomar aquí, pero
aparte de eso, comienza desde cero y El lado derecho también está en cero, entonces debes
hacer de izquierda a cero y de derecha a cero.

Bien, está bien, ahora vamos a la parte superior. Lo que
haremos será obtener estas dimensiones primero. punto uh, veamos la imagen del tamaño de alimento
popular y comenzaremos desde allí al principio. y luego vemos qué podemos hacer y para el niño de aquí
puedes aplicar un poco de relleno para que Dentro del contenedor creamos un espacio vacío aquí para que
puedas hacer inserciones de borde y solo ahora queda aquí. ahora siempre usamos dimensiones 20. así que eso
es lo que haría con Tony y justo con el las dimensiones puntean con el pequeño y la parte superior
es la misma ahora ese es el punto de dimensiones altura 20. ok bueno ahora otra cosa vemos que necesitamos esto El borde está bien, por eso usaríamos la
decoración y la decoración de la caja.

Y aquí radio del borde radio del borde punto circular
y aquí usaríamos dimensiones radio del punto 20 y aquí tendremos color y usaremos
colores punto blanco Bien, hasta ahora todo bien y ahora continuaremos
y reiniciaremos nuestra aplicación. Ahora estamos en el iPhone 8, así que seguiremos
adelante y veremos cómo se ve en el iPhone. 8. Entonces el iPhone 8 debería estar en algún lugar
aquí. Sí, está ahí, pero todavía no lo vemos. la curva y cosas así, eso se debe a que
comenzó justo en ese lugar, está bien y Bueno, si dices disminuir un poco la altura,
la sección superior verás que va.

Arriba, sí, de lo contrario, comienza abajo. Ahora,
por supuesto, no tenemos ningún contenido. entonces no es visible, pero comenzó justo ahí,
sí, eso es una cosa porque no lo hacemos. tener contenido para que no veamos nada bien, lo primero
que podemos hacer es obtener algo de contenido para esto y, por supuesto, el contenido viene de acuerdo con
este diseño, pero para este diseño en realidad He hecho este trabajo en nuestro otro archivo dart y creo
que fue para nuestra sección de inicio aquí. página principal de comida así que aquí tenemos esto Creo que el nombre del archivo es cuerpo de la página de
comida aquí y ahora aquí tenemos esta sección, creo.

Eso está dentro de esto y por aquí Esta sección de columna está bien, entonces esta es la sección
que podríamos seguir adelante, copiar y poner allí. Así que copiaré este y luego
vendremos aquí. Vale y dentro de este recipiente justo después
de la decoración lo pondremos de niño. Está bien, lo pondremos allí, lo abriremos y necesitamos
importar algunas de las bibliotecas. Está bien y veamos por aquí también. Bueno, todos los errores desaparecieron. Ahora sigamos
adelante, guárdelo y veamos el resultado. Aquí este es el iPhone 8, está bien
ahora, aunque tenemos este color blanco. eso es porque tenemos fondo blanco uh, que viene aquí pero ahora porque queremos
lograr este resultado así, así que En este momento estamos comenzando justo después de esta altura,
pero queremos subir un poco, así que ahora lo hacemos. digamos menos 20. Ahora, a medida que subes, verás que
tu borde es obvio, está bien, de eso estaba hablando.

Bueno, por supuesto, no se está tomando esto completo. altura pero podemos forzarlo porque estamos
dentro de este widget de posición Así que aquí podríamos llegar al fondo
y podríamos llegar al fondo cero. Sí, ahora tomó toda la altura, ¿vale? Dentro de él, de hecho, podemos establecer un color diferente
aquí en lugar de blanco. Veamos, hacemos rojo. Ahora puedes ver que tomó el
color completo, ¿vale? Está bien, pero ahora aquí, en lugar de
ser circular, circular en todas direcciones. Necesitamos estar solo en dos direcciones, solo
lo hacemos ahora aquí, arriba a la derecha. radio del borde punto circular dimensiones
radio del punto 20 vamos a ver Ok, eso es solo radio. Bien, entonces tendremos la parte superior izquierda y el radio
del punto circular aquí. Dimensiones del radio del punto.

20 Está bien, ahora si seguimos adelante y cambiamos
el color, veamos ahora si son perfectos estos dos tamaños. Estos dos bordes están bien, eso significa que está funcionando,
pero de todos modos volveremos al color blanco. Está bien, ahora digo esta sección,
um, después de esto, en realidad. Podríamos hacer una cosa: podemos seguir adelante
y crear esta sección como reutilizable, ¿vale? esta sección la estamos usando aquí y creo
que también la usamos aquí, así que Podemos convertirlo en una sección reutilizable, así que aquí crearemos
una nueva clase de dardo y le llamaremos columna. aplicación columna punto punto está bien y aquí primero
crearemos una clase sin estado y la llamaremos columna de la aplicación, está bien, ahora necesitamos
importar algunas de las bibliotecas, lo haremos Ahora vendríamos aquí y cortaremos este.

Y luego, dentro de este archivo de columna de
aplicación, lo colocaremos allí y por supuesto necesitamos las dependencias aquí Ahora vendría aquí y simplemente llamaría
a la columna de la aplicación. Está bien ahora mientras lo guardamos
y veremos que funciona. Ahora lo mismo sucedería aquí en el cuerpo de nuestra
página de alimentos, así que aquí abriremos la columna. y lo tenemos bien, así que ahora de esta manera
se volvió más simple y legible.

Ahora bien, algo como este texto tiene que ser
dinámico, por lo que debemos transmitirlo. al menos el nombre lo podemos cambiar
dinámicamente según lo que pases basado en ese, por eso aquí crearemos
una variable y la llamaremos cadena final texto y aquí requerimos este this.text y en lugar de codificar1 aquí, enviamos mensajes
de texto con todo lo que transmitimos Y por ahora todo lo demás podría seguir igual. Bueno, si hicimos cambios aquí ahora tenemos que
venir aquí y hacer cambios, de lo contrario De lo contrario, obtendremos un error, así que aquí
lo guardaremos en el lado chino y aquí es lo mismo.

Bueno Bien, necesitamos la propiedad que se llama texto.
Guardémosla y todo funcionará. Refinar. Ahora hay un problema, aunque si ves aquí este
es el texto del título, ahora este título. El texto es un poco más grande y la fuente es más grande, está
bien, pero ahora aquí si vemos la columna de nuestra aplicación. ahora dentro de la columna f tenemos este texto grande en
el texto grande que en realidad se usa más o menos tamaño fijo aquí porque si no pasamos nada entonces
usamos el tamaño de fuente 20 correcto pero en realidad para este queremos pasar un texto pero
también queremos pasar un texto que sea dinámico Está bien, entonces queremos aprobar, por
esta razón vendremos aquí y Encontraremos nuestro archivo de dimensiones y aquí
crearemos un nuevo tamaño de fuente de texto, que es este tamaño de fuente, así que continuaré y simplemente
lo copiaré y crearé un tamaño de fuente 26.

Para el tamaño de fuente 26 usamos la altura
de la pantalla, por lo que el factor es 32,4 bien ahora por aquí Vayamos ahora a este widget para ver el texto grande. Desde aquí podemos pasar un tamaño de fuente o un tamaño hacia abajo.
Entonces, ¿qué hacemos? Dimensiones, puntos, fuente 26. Bien, ahora mira nuestro teléfono, que es iPhone 8.
Ahora parece un poco más grande y lo ejecutaremos. En el iPhone 12 en este momento desde 12 no actualicé
nada, así que este es el iPhone 12. actualicémoslo y vemos que es un poco más grande aquí,
así que esperamos que se vea mucho mejor, ¿vale? Así que recuerda que el tamaño es un parámetro
opcional que hemos visto anteriormente.

Me gusta aquí, así que cualquier cosa que
pases, si pasas esa, se usaría, ¿vale? de lo contrario, usamos el valor predeterminado, que es 20.
De todos modos, esta sección se ha realizado bastante bien. ahora tenemos que seguir adelante y trabajar en
este y este bueno, por supuesto, trabajando en Esto sería muy fácil, así que lo
que haremos será venir aquí y aquí ahora el problema es que dentro de este contenedor
tenemos este niño pero está tardando Esta columna de aplicación ahora está envuelta dentro de una
columna, por lo que no podemos introducirla directamente. aquí lo que tenemos que hacer es cortar
este y crear otra columna aquí y Póngalo aquí como niño, está bien y luego queremos
poner esto para presentarlo, está bien.

Ahora, para este lo que haré, simplemente
llamaré texto grande y por aquí escribiré. preséntalo, está bien y continuaré y lo guardaré, así que
ahora sigamos adelante y verifiquemos nuestro dispositivo. Entonces sí, está bien, pero ahora aquí
podemos cambiar algunas de las propiedades. Así que aquí lo haremos, usaremos la propiedad de alineación de acceso
cruzado y el inicio del punto de alineación de acceso cruzado. Así que empezó desde el principio. Ahora aquí,
entre estos dos queremos crear un cierto distancia y usaremos el cuadro de tamaño y aquí usaremos
la altura y las dimensiones de la altura 20. Oh, ahora seguiremos adelante y dibujaremos esta barra inferior
o esta sección inferior para hacerlo realmente. Podemos usar nuestro widget de pila, que ya tenemos
uno aquí. Lo siento, no apilar el andamio. Deberíamos usar nuestro andamio, pero ahora sabemos
que el andamio tiene un cuerpo de propiedad. y la barra de navegación inferior, así que eso es lo
que usaremos en la barra de navegación inferior y envolver todo dentro de un contenedor porque
vamos a aplicar este margen superior margen inferior y relleno izquierdo y derecho o margen
así, está bien y lo primero que tendrá una altura, así que eso es lo que definiremos, así que
hagas 120 y después de eso queremos aplicar relleno a nuestro contenedor está bien y el relleno debe ser
solo porque poner todo en el medio, está bien Sí, aquí hacemos inserciones de borde solo puntos, está
bien y ahora aquí usaremos la parte superior superior.

Uh dimensiones.altura veamos qué tenemos, entonces tenemos
30 y para la parte inferior usaremos el mismo dimensiones altura del punto 30. y para la
izquierda usaremos 20, así que lo hacemos dimensiones que tienen un ancho de 20 y para la derecha
usaremos las mismas dimensiones con un punto de 20. está bien, está bien y ahora también podemos usar un color pero para
poder usar un color necesitamos usar decoración porque ves que tenemos un borde, está bien, así que ahora seguiremos adelante
y usaremos la decoración que haces con la decoración de la caja. y aquí usaremos el radio del borde, ahora
solo el punto del radio del borde porque no todas las secciones, solo las secciones superiores,
aplicarán bordes, así que aquí lo hacemos radio superior izquierdo punto circular ahora aquí dimensiones radio de punto 20 pero en realidad quiero usar
40, así que lo multiplicamos por 2 y la parte superior derecha aquí es
el mismo radio.

Vale, tengo un error. radio de punto circular y dimensiones
multiplicado por dos ahora podemos usar el color, así que usaremos un color
aquí dentro de esta decoración y hacemos colores colores de la aplicación punto color de fondo del
botón bueno, este es un color que tenemos en nuestro archivo de colores de la aplicación, ahora lo guardaremos,
vendremos aquí y veremos nuestro iPhone 12 Pro, que es por aquí y vemos que esta es nuestra frontera y
ya está apareciendo prácticamente por allí Está bien, pero vemos un pequeño problema porque
tenemos estos bordes aquí y el color es un poco diferente ahora porque nuestro fondo puede
tener un color diferente para el andamio andamio Puede que tenga un color de fondo diferente, pero
podemos anularlo para configurarlo en blanco. Ahora ves que está más claro. Está bien,
entonces el problema desapareció. Bien, ahora si vemos aquí, estos dos deberían
estar en fila.

Bien, entonces, dentro. En este contenedor queremos tener un hijo, eso es lo
que haremos y luego tendremos una sección de fila. Muy bien, ahora dentro de la fila, este es nuestro primer
hijo y este es nuestro segundo hijo, pero por supuesto. El primer hijo también es un contenedor, como puedes
ver, tiene este borde, así que tenemos que aplicarlo. un contenedor está bien, así que hacemos hijos y dentro
de él llamaríamos al widget de contenedor Está bien, ahora continúa con el widget,
aquí podríamos aplicarle color.

Bueno, en ese caso primero debemos usar
decoración y decoración de caja. y radio del borde radio del borde
punto circular ahora aquí usaríamos dimensiones punto radio 20 eso es lo que queremos
usar y luego usaremos un color para ello y hacemos colores punto blanco está bien, ahora aquí queremos
usar otra fila porque tenemos este menos más y menos lo siento menos cero y más bien, ahora aquí
en la sección infantil lo usaremos como una fila y aquí serían niños, está bien,
ahora aquí usaremos el ícono entonces los elementos puntúan primero uno es eliminar,
está bien, ahora podemos usar un color para esto, usamos uh colores punto signo colores bien, entonces tenemos
este color en nuestro archivo de aplicación archivo de colores de la aplicación y luego usaremos
uh aquí, esto es como un texto grande Ok, texto por ahora es un cero.

Entonces usaremos otro ícono y los iconos añaden puntos eso es lo que usaremos y el color es el
mismo y los colores de la aplicación El color del diseño está bien, ahora continuaremos, lo guardaremos
y veremos el resultado, por lo que deberíamos estar en el iPhone 12. Así que vamos a comprobarlo y aquí estamos. No es
lo que esperábamos, pero podemos hacerlo mucho mejor. Ahora aquí podemos ver este contenedor, por lo
que podemos aplicar relleno a este contenedor. Bien, eso es lo que haremos: agregar
relleno solo en conjuntos y veamos bien, definitivamente podríamos hacer la parte superior y ahora
las dimensiones de altura dicen 20, está bien y la parte inferior Lo mismo haría las dimensiones de la altura del punto 20 y la izquierda. dimensiones punto con 20 a la derecha
es el mismo punto dimensiones con 20. Está bien, ahora sigamos adelante y guárdelo
y veamos, sí, ahora se ve mucho mejor. Bueno, por supuesto, aquí podemos
crear un poco de distancia. Entonces aquí hacemos el tamaño del cuadro y
aquí hacemos con y tenemos dimensiones. punto con 10 tenemos con el 10 bueno, tenemos con el 10 pero no queremos aplicar
el 10, queremos aplicar el cinco, entonces multiplicado por dividido por dos y vamos acá
haremos el tamaño del cuadro lo mismo entonces con dimensiones que ancho por dos Está bien, ahora guardémoslo y se verá mucho
mejor.

Bueno, espero que tenga sentido. así funciona bien, así que ese es el primer
contenedor y cuál muestra este y cuál es exactamente igual que este, está bien, sigamos adelante
y comparemos, sí, son exactamente iguales, ¿verdad? ahora aquí seguiremos adelante y dibujaremos
la otra sección que es esta entonces para eso una vez más usaríamos un contenedor widget de contenedor y aquí Bueno, definitivamente tendremos color. pero para poder aplicar color necesitamos usar decoración,
hacemos decoración de caja y radio de borde radio 20 y luego color, hacemos colores de la aplicación,
punto, color principal, está bien, está bien y también queremos usar un niño aquí y por
ahora el niño es un texto grande y aquí digamos diez dólares y diría eso al carrito
así y necesitamos este texto propiedad, de lo contrario obtendremos un error. Sigamos
adelante, guárdelo y veamos el resultado.

Y aquí, por supuesto, esto no es lo que queremos, lo
primero que podemos cambiar el color es que usaríamos colores.blanco porque sabemos que en
texto grande podemos enviar el color Muy bien, aquí lo mismo que este,
tenemos que aplicar esto. relleno para que podamos seguir adelante,
copiar este y lo pondremos allí y se ve mucho mejor ahora que están demasiado
cerca uno del otro estos dos contenedores Está bien, mientras hacemos eso, podemos empujarlo hacia
el lado izquierdo y derecho, entonces, ¿qué hacemos aquí? Usaremos la propiedad de alineación del eje principal y accederemos
al espacio de puntos de alineación principal entre Ok, perfecto, se ve perfectamente bien, así
que con esto ya casi terminamos aquí y al lado de uh, tenemos que marcar esto en
el iPhone 8.

Vale, este es nuestro iPhone 8. Sí, es iPhone 8 y lo reiniciaremos. Sigamos
adelante y veamos mientras Esta sección está bastante bien aquí, pero
ahora esta altura no es tan proporcionada. Bien, entonces queremos encargarnos de eso ahora,
una vez más, esta altura venía de aquí. que es 120, así que iríamos a nuestro archivo de
dimensiones aquí. Aquí crearé una nueva sección.

Ahora llámalo altura inferior y aquí
crea una nueva variable estática doble barra de altura inferior y luego haremos la altura de la
pantalla, ahora aquí tenemos que obtener el factor entonces 844 dividido por 120 entonces 703 entonces nuestro factor
es 7.03  está bien, entonces vendremos aquí y reemplazaremos eso una dimensión daña la barra de altura inferior, guardémosla,
sí, se ve mucho mejor, ¿vale? veamos qué más um creo que eso es todo Hasta ahora se ve bien. A continuación veremos
cómo poner el texto aquí. Está bien, primero dibujemos el texto aquí.
Entendemos el componente de texto aquí. Bien, este es nuestro componente de texto y
podemos contraerlo y desplazarnos por él. y podemos descomprimirlo para que aquí no parezca
tan simple, simplemente no es un texto, es un texto desplegable y plegable, está bien, eso
es lo que queremos hacer ahora primero aquí entonces tendremos un texto, pasaremos un texto a un widget
de texto, lo que significa que tendremos que construir un widget de texto está bien y después de crear el
widget de texto pasará un texto al widget de texto y ese widget de texto sería responsable de contar cuánto
mide este texto y si es demasiado largo.

Luego ocultaremos parte de ello y, si no es demasiado
largo, lo mostraremos completamente. Lo que haremos será establecer una restricción sobre
cuántos textos deben ser visibles en la primera tiempo, está bien, entonces tendremos una cierta longitud
o altura, de hecho tomaremos la altura de la pantalla. y cuando supera esa determinada longitud, digamos,
por ejemplo, 200 si la altura es superior a 200 luego simplemente ocultaremos el texto y el resto del
texto, así que aquí usaremos la altura de la pantalla. cierta altura en la longitud del texto estos
dos son estas dos cosas que vamos a comparar Si la longitud del texto es mayor que la altura de
la pantalla, entonces parte del texto de la pila sería oculto y luego, una vez que hagamos clic en eso,
se abrirá, por lo que tendremos dos condiciones El texto es demasiado largo o demasiado corto.

Si es demasiado
corto, solo lo mostraremos si es demasiado largo. Primero mostraremos la mitad y luego mostraremos el resto.
Bien, para mostrar el resto tendremos un botón. una llamada seguida, vale, aquí tenemos este programa
mostrar más y aquí tenemos este botón, así que es Se puede hacer clic y aquí ves que también cambia su
dirección, ¿vale? Entonces digo que este tipo de El texto también estaría en formato de columna.

En la
columna, la primera sección sería la sección de texto. y el siguiente elemento secundario sería esta sección
del botón uh, pero el botón en sí debería estar en una fila también, está bien, entonces estas dos
porque verás en el botón que tendremos nuestra El texto y el ícono también están bien, así que lo primero
que debemos hacer es seguir adelante y construir nuestro widget de texto, bueno, para hacer eso
iré aquí y dentro de este widget aquí aquí crearé un nuevo archivo y lo
llamaré expandible x expandible widget de texto, está bien así y aquí crearemos
un archivo dart, cerraré este y aquí, uh porque vamos a hacer clic en un botón para que se pueda
hacer clic correctamente para que la interfaz de usuario se puede volver a dibujar en esta página, por
eso vamos a crear una clase con estado, ¿vale? en lugar de una clase sin estado porque
si creamos una clase con estado podemos usar nuestra función de estado establecida, está bien,
dicha función de estado solo funciona en una clase con estado De todos modos, aquí lo llamaremos uh nombre de
clase expandible expandir lo siento x y texto doble Está bien, entonces sigamos adelante e importemos algunas
de las bibliotecas.

Está bien, ahora por aquí. uh, queremos pasar un texto de esta clase aquí, está
bien, en realidad ahí mismo, así que ahora mismo Tengo estas tres secciones aquí. ¿Recuerdas
que la primera es la imagen de fondo? y el segundo aquí muestra estos
dos íconos, así que Puedo rechazar aquí y aquí tenemos esta uh  más
o menos como una introducción sobre la comida. introducción de comida como esa, está bien, así que aquí
expandiremos el texto expandible, está bien, eso es lo que Lo hará aquí, así que aquí lo llamaremos, así que una vez
que lo llamemos le pasaremos un mensaje de texto, ¿vale? Pasaremos un texto largo, así que vendremos aquí,
así que queremos pasar un texto para hacer eso.

Primero declare una variable, luego haga el texto de
cadena final aquí y ahora esto sería obligatorio. Está bien, sigamos adelante y agreguemos
esta palabra clave. Está bien, estamos bien. después de eso tenemos que venir aquí
y aquí crearemos dos nuevas variables y los definiremos como tardíos para que el primero
sea del tipo cadena y ese sería el primera mitad del texto y crearemos una variable
de cadena tardía para que la llame segunda medio bien, ahora vamos a usar late porque
los inicializaremos más tarde, vale Cualquiera que sea el texto que obtengamos en base a
eso, lo inicializará como texto, por eso lo marcarás.

Tarde si no lo marcas tarde tendrás que
inicializarlos inmediatamente Vale, está bien, ahora después de eso también tendremos
una variable booleana, así que ahora la llamaremos toro. su nombre es un texto oculto, por lo que generalmente lo
estableceremos como verdadero porque la primera vez que tener un texto largo, parte del texto estaría oculto y usaremos
un valor booleano como verdadero para eso, ¿vale? Entonces, al mismo tiempo, también
necesitamos inicializar aquí. uh, inicializa ciertas condiciones, está
bien, para eso, inicializaremos y el variable y la llamaremos uh altura del texto.

Está
bien, haremos doble altura del texto y derecha. aquí lo inicializaremos, así que aquí hacemos dimensiones,
está bien, dimensiones punto, digamos pantalla Altura de la pantalla y usaremos un factor 5,63.
Bueno, aquí es más bien un poco más de 100. es un poco más de 100, por lo que esto devolverá un poco
más de 100, por lo que esta es la altura a la que estamos. voy a usar, así que si la longitud total del
texto es superior a 200 o algo así, entonces Ocultaremos el resto del texto, por lo que ahora se llama
altura del texto con respecto a esta solución. Hay muchas formas diferentes de hacerlo, pero
la que voy a usar es la más sencilla. De lo contrario, la codificación sería muy larga y habría
demasiada lógica, por lo que esta es la opción más sencilla.

Enfoque que estoy usando usando el número de texto número
de letras que tengo con la altura del texto esto es No, no diría que esta es la mejor solución, pero funciona
bien de todos modos, así que esta es la variable que He creado y luego quiero crear un método de estado
en su método de estado, así que sobrescribimos y aquí tendremos el estado de inicio vacío, está bien, y ahora
aquí tenemos que hacer el estado de inicio de superpunto, ¿está bien? Muy bien, ahora haremos algunas comprobaciones condicionales.
Vale, recuerda que este texto se publicará.

Se pasará de esta clase o de cualquier otra clase
y después de eso se inicializará aquí y luego Lo veo en su estado aquí y puedo hacer algunas
cosas interesantes, así puedo comprobar el Longitud de este texto, eso es lo que vamos a hacer, así que
aquí configuraré una condición y haré un widget dot. texto ahora aquí tomaremos su longitud, por lo
que si la longitud es mayor que esta longitud que es un widget de texto que significa que cualquier texto
que se proporcione superará esta altura, ¿vale? Muy bien, en ese caso dividiremos el texto en dos secciones,
la primera mitad y la segunda mitad, ¿por qué? la primera mitad se mostrará en la pantalla inmediatamente
y la segunda se ocultará para que Es por eso que necesitamos separar este texto en dos secciones.
Bien, ahora aquí hacemos la primera mitad.

Bien, todo. ahora mismo aquí hacemos subcadena de puntos de texto de punto de widget,
así que aquí comenzaremos desde cero y aquí la altura del texto Para terminar, está bien, entonces esa es la
primera sección y sigamos con la segunda sección. aquí una vez más widget de la subcadena de
puntos de texto ahora aquí comenzaremos desde altura del texto a cadena hasta el final lo siento más uno
ahora aquí obtenemos la longitud del punto del texto Bueno, ahora tenemos demasiada información y déjame
explicarte lo que está pasando aquí. Entonces verificamos la longitud del texto para ver si
es más de esta cantidad, que es alrededor de 100.

O 200 realmente no importa, así que ahora intentaré
tomar lo que haré con todo el texto. cierta cantidad, por lo que la longitud y la altura del texto,
por lo que comenzará desde cero, digamos, por ejemplo, tener un texto como me encanta flutter laravel y golem bien
ahora aquí queremos establecer una condición que Si la longitud de este texto es superior a 30, en
nuestro caso, si es más de 30, lo haré aquí. establezca la altura del texto en 30 para que esta longitud
sea superior a 30, está bien, es así para que que esos 30 primeros 30 los pondré aquí y luego,
en ese caso, comenzaré desde cero, así que esto debería ser cero, digamos, por ejemplo, 30 hasta aquí. Está
bien, tomaré esta cantidad, por lo que la subcadena significa toma el texto y corta cierta parte de él, está bien,
y aquí comenzaremos desde cero y terminaremos Ahora bien, una vez más, esta es la longitud que viene
desde aquí, por lo que se basa en el cálculo.

Así que solo es un ejemplo, espero que tenga sentido.
Está bien, lo devolveré ahora en la segunda mitad. Con suerte, comenzaremos desde aquí, bien, desde
el próximo, por eso tomaremos más uno. Aquí y luego iremos a la longitud completa del texto para
que el texto pueda tener una longitud de, digamos, 50. Así que los primeros 30 los pondré en la primera mitad
y los segundos 20 los pondré en la segunda mitad, ¿vale? Ojalá tenga sentido si el texto no es tan largo,
eso significa que es un texto corto, así que Lo que haré, seguiré adelante y lo pondré en la primera mitad,
está bien, la primera mitad es igual, sea cual sea el texto.

Se le dio widget.text, está bien, pero ahora,
como dije, es una variable tardía, por lo que tienen que inicializarse antes de usarlos, así que ahora aquí
estoy, de cualquier manera se inicializa la primera mitad pero para el segundo podríamos hacer la segunda mitad,
lo llamamos vacío, está bien, entonces no es nada pero si sigues así es totalmente nulo y
en tiempo de ejecución tendrá error y con este está vacío, no nulo, así que una vez
que declaras una variable usando late en dart tienes que inicializarlo antes de usarlo, ya
sea que esté vacío o lo que sea, pero tiene para ser inicializado de alguna manera, está bien, ojalá tenga
sentido, así que ahora estamos aquí en el contenedor.

Bien, lo primero que haremos será crear un niño
aquí y simplemente pasaremos el texto. y ¿cómo podrías hacerlo bien? Antes de seguir adelante
y usar el texto de aquí, podemos hacer un condicional. comprobaremos que haremos en función de la segunda mitad la segunda
mitad está vacía, si está vacía significa que el texto está Realmente no es tan largo, vale, sí, en ese caso seguiremos
adelante y usaremos el texto, vale, así que aquí pasaremos el texto en nuestro widget de texto pequeño, está bien,
que ya tenemos, así que aquí hacemos texto pequeño. Está bien, este y aquí usaremos el texto cualquiera que sea el texto que
se proporcionó, así que aquí hacemos la primera mitad. Está bien, de lo contrario haremos algo diferente
aquí. Está bien, por ahora solo pondré Aquí el contenedor está bien, ¿qué está pasando aquí? Entonces,
si la segunda mitad está vacía, significa que el texto No es tan largo así que estoy usando la primera mitad
porque la segunda mitad no tiene nada, así que todo ha puesto en la primera mitad bien, entonces si el texto es demasiado
pequeño me refiero a la longitud, así que usamos por aquí, ven aquí y usa el texto; de lo
contrario, recurriremos a esta condición Por supuesto, no puedes usar el contenedor.

El contenedor
está vacío, así que no podemos usarlo. Así que aquí usaremos un widget de columna. Recuerda,
como dije antes, si el texto es demasiado largo. tenemos que usar una columna y la columna la primera
sección mostrará este texto y en la segunda sección mostraremos este botón aquí en una fila,
está bien, eso es lo que vamos a hacer ahora así que aquí tendremos hijos Está bien, ahora tenemos que hacer otra verificación
condicional dentro de este texto. Bien, entonces lo que haré será copiar
este aquí y lo pondré allí. Así que aquí necesitamos usar una declaración condicional.
Bueno, mostraremos el texto bien, pero en función de lo que Basado en este valor booleano, bueno, dijimos que inicialmente
la primera vez sería cierto, ¿verdad? De todos modos, aquí escribiría texto oculto.
Si es cierto, mostraré este texto.

Por aquí y con estos tres puntos, está bien,
entonces aquí escribiré la primera mitad más punto punto punto está bien, aquí estoy conectando dos mensajes de texto
juntos, recuerda que en la primera mitad tendremos un mensaje de texto y Luego agregamos estos tres puntos usando más para que
en Dart puedas conectarte a la cuerda usando más. De lo contrario, lo que haré, vendré aquí
y mostraré la primera mitad. Además, la segunda mitad está bien, ojalá tenga sentido. Entonces, ¿qué está pasando una vez más? Entonces, usaremos
texto pequeño. Si el texto es demasiado largo, Recurrir a estas categorías no aquí, pero incluso
si estamos en la segunda condición, pero uh.

Como configuración predeterminada, solo mostraremos
la primera mitad más los tres puntos. porque en ese momento, el primer texto oculto es verdadero,
está bien, de todos modos, eso es lo que sucede y a continuación vamos a crear un
botón aquí, justo debajo de este texto. independientemente de que sea el primer texto o el primer texto
más la segunda mitad, está bien, realmente no importa Así que aquí crearemos un botón y
para el botón usaré tintero.

Vale, ahora codifica las tomas en la pestaña
correctamente por ahora, la mantendré vacía y dentro de él tendré un niño y
dentro del niño tendré un papel Está bien, y luego también tendré hijos. Está bien, ahora
el primero es un mensaje de texto aquí. Está bien. aquí simplemente escribiré un texto pequeño, está
bien y pasaré por aquí, mostraré más, está bien está bien Entonces ese es uno y al mismo tiempo creo
que también podemos usar color aquí. entonces usamos f colores punto color principal
está bien, y luego usaremos este ícono aquí Vale, está bien, así que seguiremos adelante y simplemente
llamaremos al icono iconos punto, creo que este y luego también podemos especificar el color, así que usaremos
los colores de la aplicación, el color principal del punto, ¿vale? Bueno, espero que tenga sentido, está bien, así que ahora
continuaremos y llegaremos a nuestra sección popular.

Aquí e intentaremos ponerlo aquí, pero antes creo
que cometí un error, no está fuera de esto. widget de posición en realidad debería estar dentro de
este widget de posición, está bien desde aquí porque Ya tengo una columna dentro porque todo lo que hay
aquí pertenece a este widget de posición. Muy bien, pondremos el widget de texto expandible
de esa sección aquí para escribir aquí. Widget de texto expandible y le pasaremos un texto.
Lo siento, junto a él y lo copiaré varias veces. Bien, ahora continuaré y reiniciaré nuestra aplicación, así
que estoy en el iPhone 8 ahora mismo, así es como se ve.

Está bien, pero por supuesto, no funciona así,
pero lo que podría hacer es eliminar parte de y veremos si quiero decir que estos botones están visibles
o no, así que es un tiempo bastante largo. Envía un mensaje de texto aquí, así que lo cortaré y guardaré
este. En ese caso, veamos, está bien una vez más. Estamos en el iPhone 8 y verifiquemos la condición
aquí. Entonces, ¿cuál es la condición? medio vacío, bueno, ahora reiniciemos nuestra aplicación y
veamos, está bien, porque esto está dentro del estado inicial. Así que es la primera vez que se inicia, a menos que
reinicies la aplicación no se mostrará así, ¿vale? ahora vendré aquí y lo pondré de nuevo
y lo reiniciaré pero claro porque uh este texto el texto de este widget se ha calculado
en su estado correcto, por lo que debemos reiniciarlo Diré que está ahí de todos modos, así
que espero que entendamos cómo funciona. ahora aquí queremos cambiar esta bandera una vez que
hagamos clic en ella queremos que se expanda con el el texto está bien, entonces necesitamos alternar este valor de
texto oculto, está bien, así que aquí lo haremos, está bien.

Así que aquí establecemos el estado. Este estado establecido se
usa para activar el redibujado en función de cierta variable. El cambio de valor está bien, así que aquí hacemos texto
oculto y cada vez que lo activamos haremos lo contrario. Está bien, antes, si era cierto, entonces veamos. Está
bien, uh, porque recuerda que la primera vez es cierto. una vez que hagas clic en este botón, que es este
de aquí, se volverá falso, bueno, si es falso entonces recuerde que volveremos a esta condición
aquí, si es falsa, mostraremos la segunda medio bien, entonces lo guardaré. Hagamos clic
en esto. Sí, ahora parece que tenemos un Hay un poco de desbordamiento por aquí y nos ocuparemos
de eso pronto, pero no te preocupes ahora. Bueno, creo que podemos encargarnos de eso primero,
así que para hacerlo, este widget está aquí.

Porque queremos que se pueda desplazar, así que debemos
envolverlo alrededor de un determinado widget que es Llamada vista de desplazamiento de un solo niño, eso es lo que hacemos, así
que aquí nuestra vista de desplazamiento de un solo niño a la derecha. Vale, ahora la vista de desplazamiento de un solo niño
no funciona sola dentro de una columna, debes ajustarla Otro widget, um, que se llama widget expandido. Está bien,
lo envolveré alrededor del widget expandido. expándalo bien, así que si quieres que una determinada
sección de tu columna sea desplazable, necesitas vista de desplazamiento expandida y de carga única juntas,
está bien, la guardaré y diremos que ya desapareció Ahora vamos a abrirlo. Puedes desplazarlo. Sin esta herramienta,
el desplazamiento no es posible ahora. entonces está funcionando y haces clic
en esto, se colapsará, ¿vale? Así es como funciona ahora. Hay algunas
otras cosas que podríamos tomar aquí. Definitivamente lo primero es el ícono en
sí, así que queremos cambiar el ícono.

Bueno, ahora aquí el ícono, lo cortaré y haré una verificación
condicional. Si está oculto, es verdadero, entonces esto uno, entonces, ¿cuál es la condición inicial? De lo contrario,
queremos soltar la flecha, creo que vamos a ver si tenemos un ícono como este ahora no lo tenemos, así que busque
un ícono aquí flecha hacia arriba, veamos hacia arriba Um, sí, tenemos un menú desplegable, está bien, así que
a medida que el estado cambie, queremos cambiar el ícono.

Uh dirección también está bien, entonces verás que
ya ha cambiado automáticamente ahora cambia aquí como Bueno, está bien, está bien, ahora otro problema que
está demasiado cerca, así que queremos crear un Un poco de distancia ahora por aquí. Simplemente seguiríamos
adelante y sostendríamos esta caja de tamaño único 20. Está bien, está bien, se ve mejor y algunas
otras cuestiones que tenemos aquí. mirando ahora mismo, por lo que este texto es demasiado pequeño,
así que eso es algo de lo que queremos ocuparnos Bueno, anteriormente creo que veamos
dónde estamos ahora.

Este widget de texto expandible aquí ahora dentro tenemos
el texto pequeño, está bien, ahora aquí en realidad podemos pasar, veamos si pasamos el cursor sobre él, como
puede ver, podemos pasarle un cierto tamaño a la derecha Eso es lo que queremos hacer para que el tamaño predeterminado
sea 12. Ahora sigamos adelante y verifiquémoslo. Entonces el tamaño predeterminado es 12. Desde
aquí podemos enviar un tamaño de texto. Digamos, por ejemplo, que queremos que tenga
18 píxeles correctamente para poder cambiarlo. y bueno, si venimos aquí nuestro
archivo de dimensiones, que es este Ahora aquí tenemos un cierto tamaño de fuente,
así que tenemos 20 o 26, pero parece que No puedo usar ninguno de ellos, así que si vamos a usar
uno nuevo, tenemos que crear uno nuevo aquí.

Entonces, lo que haré será seguir adelante y crear uno
nuevo aquí, aquí mismo, para que hagamos estático. fuente doble 16 y luego tendríamos la altura
de la pantalla ahora calculemos el factor Entonces 844 dividido por 16 y eso es
52,7. Bueno, aquí hacemos 52,75. Está bien, ahora vendremos
aquí, um, veamos. No necesitamos este. Podemos
cerrar este también. Bien, aquí pasaremos un tamaño de texto, así que haremos
tamaño y haremos dimensiones, dimensiones, punto. fuente 16. Veamos, está bien,
ahora es un poco más grande.

Y aquí tenemos que hacer lo mismo,
así que aquí hacemos el tamaño dimensiones fuente de puntos 16. Bien, ahora sabemos que también podemos especificar. el color, así que no queremos este color para
el texto, queremos un color un poco diferente Bueno, veamos, comenzaremos desde aquí por
aquí, así que usaremos un color por aquí. y luego usaríamos el punto de colores de la aplicación, veamos
el color del texto, así que sigamos adelante con este. o tenemos otro que se llama
color de párrafo sí, este, entonces esto es lo que queríamos, está
bien, entonces debemos pasar el mismo a nuestro Texto pequeño aquí, está bien, está bien, y otro problema
que también podemos resolver es un poco denso. densamente por aquí, así que también podemos enviar la altura aquí,
así que hacemos una altura de 1,8. Está bien, ahora parece mucho. mejor y más legible, espero que tenga sentido,
así que ya está funcionando y He creado una hermosa página aquí, así que terminamos
con dos páginas y a continuación veremos cómo para crear otra página que venga de aquí,
sería más como esta, está bien, entonces Muchos de los elementos que construimos antes son como
este, estas ideas, muchas de ellas podemos copiarlas.

De las páginas anteriores, bien, ahora esta página se
vería así, así que es mejor que se pueda desplazar. Ahora aquí veremos cómo lograr este resultado y este resultado
se logra usando la vista de desplazamiento personalizada. y la vista de desplazamiento personalizada tiene efectos especiales
como este o como cierta parte en la que te desplazas o una sección de encabezado expandible como esa, está
bien, para hacerlo vendremos aquí y dentro de nuestro carpeta de alimentos crearemos un nuevo
archivo y lo llamaremos recomendar detalle de comida muerta Bien, aquí crearemos una clase sin estado
y la llamaremos recomendado recomendado.

Detalles de comida, está bien, ahora necesitamos
importar las bibliotecas necesarias. ok bueno ahora aquí regresaremos andamio y dentro del andamio tendremos el cuerpo dentro del cuerpo devolverá
la vista de desplazamiento personalizada de los moldes, ¿vale? Bueno, ahora la vista de desplazamiento personalizada requiere palancas,
así que seguiremos adelante y declararemos fragmentos. ¿Y ahora qué? Son astillas, bueno, las astillas son un widget especial que
tiene efectos especiales. Está bien, puedes entenderlo. Esto como esto es una astilla aquí porque es un
efecto especial, como puedes ver, desaparece. lentamente y es un color, sea cual sea el color que quieras
definir y, de hecho, esto también es plateado aquí Esta sección del cuerpo está bien porque se puede desplazar
pero, por supuesto, podemos hacer mucho más. Muy bien, sí, aquí tenemos dos componentes
plateados, uno es este y el otro es este. entonces, la propiedad de fragmentos aquí se necesita una lista
de fragmentos, está bien, así que vamos al primer fragmento usar eso se llama barra envolvente plateada, entonces, una barra
plateada, está bien, ahora la parte superior plateada tiene una propiedad llamada espacio flexible flexible, así que
esa es la que vamos a usar, así que flex ver flexley espaciador flexible ahora a dónde vamos por qué
vamos a usar esto porque queremos tener esto imagen de fondo, bien, ahora queremos tener esta imagen
de fondo y desaparecerla lentamente y mostrarla.

Un determinado color, eso es lo que queremos, está bien,
ahí es donde usaremos la barra espaciadora flexible ahora tiene una propiedad llamada fondo. Bueno, el
fondo toma en realidad la imagen, así que aquí Haga image.asset ahora aquí debemos mencionar la ruta de
la imagen, así que aquí hacemos todas nuestras imágenes. están en la carpeta de activos dentro de esa carpeta de imágenes
y dentro de ella para el punto cero png, por lo que este es el imagen que vamos a usar para que puedas usar la
imagen que quieras y asegúrate de escribir el ruta de la imagen correctamente, por lo que aquí usaríamos
nuestras propiedades adicionales, todas las propiedades ancho ahora aquí queremos que la imagen tome el ancho completo,
por lo que es finito como máximo y después de eso lo que haremos, iremos a nuestro archivo
principal aquí en lugar de popular Escribiremos aquí recomendado, sí,
y nos aseguraremos de importarlo.

Creo que podría tener un tipo aquí, veamos, Reiku
Min, bueno, creo que debería ser Ed, lo siento. así que simplemente copiaré este, lo pondré
allí y aquí pondré lo mismo, está bien. De todos modos, vendré aquí y ahora lo guardaré
y lo ejecutaré en, digamos, un iPhone 12. así que veamos dónde está mi iPhone 12. Este es
mi iPhone 12 por aquí y definitivamente este es No es lo que esperábamos, está bien, pero al menos podemos
ver las cosas, así que queremos que ocupe todo el espacio. Vale, el ancho está bien, pero no lo es porque
falta una propiedad llamada ajuste de caja. así que la caja se ajusta a la cubierta de puntos ahora lo obligará
a ser como un contenedor, bueno, ya vimos eso antes queremos lograr este resultado esta altura bien,
ahora esto se llama altura expandible que podría expandirse, sí, eso es lo que queremos lograr,
así que aquí hay una propiedad llamada altura ampliada y por ahora le pongo 300
y nos acercamos para acá ya vemos eso se expande bien, así que cuando se expande
se expande hasta 350.

Por eso se llama La altura expandida está bien y ya puedes ver
que puedes apretarla o desplazarla, pero si vamos a lograr este resultado ahora necesitamos
tener algunas astillas más dentro esta lista de cuchillas está bien y luego todas se desplazarán
juntas, está bien y este efecto especial entonces queremos usar otra astilla, pero esa astilla
se colocará dentro de la sección del cuerpo de la pantalla dentro del cuerpo de la vista de desplazamiento
personalizada y ese tipo de fragmento que es uno de ellos Se entrega en caja con adaptador, como puedes ver
esta palanca se adapta dentro de una caja. bien o dentro de la vista de desplazamiento personalizada, bien, ahora
aquí se necesita un niño y ahora, en nuestro caso, el niño podría tomar cualquier tipo de texto aquí y ahora
para este texto en sí, qué haré, vendré aquí y copia este texto largo, vale, lo
copiaré desde aquí y veamos Lo pondré allí.

Creo que necesito ponerlo dentro
de esta cosa y lo pondré varias veces para que Es un texto realmente largo, como puedes ver desde
aquí, aunque seguiré adelante y lo copiaré. y lo comprobaré en mi teléfono. Ahora ya está
allí, como puedes ver, es un elemento desplazable. Bien, ahora con esto ya estamos mejorando, algunas
otras cosas de las que podemos encargarnos. Ahora queremos que quede pegado aquí, entonces
hay una propiedad que se llama fijada ahora aquí. Lo usaré como un verdadero bien, ahora se puede
expandir después de 300 y cuando se fija tenemos Esta cierta altura está bien y al mismo tiempo
podemos usar esta otra propiedad que se llama color de fondo y para el color de fondo usaré un
color personalizado, puedes usar el color que quieras entonces los colores de la aplicación son puntos de color amarillo.
Bueno, ahora es amarillo porque quiero ceñirme a mi diseño.

Ahora hay otra cosa que quiero lograr, lograr
como esta de aquí, como puedes ver. Bien, entonces quiero lograr este tipo de barra aquí
independientemente de que quieras esto con este fondo. Me refiero a este borde o no, pero quiero lograr este resultado.
Está bien, ahora para hacer eso, tenemos que usar. otra propiedad que se llama tamaño preferido está bien
dentro de la propiedad inferior, por lo que es inferior toma el widget de tamaño preferido, así que eso es lo que
vamos a usar. Bien, ahora tiene una propiedad, veamos. otro tamaño preferido dentro del tamaño preferido,
así que aquí prácticamente mencionaste el tamaño que desea, entonces usaría un punto de tamaño
desde la altura y usaremos 20 aquí y creo que Toma a otro niño aquí y, como niño, por ahora simplemente
pasaré un texto aleatorio por aquí y Lo llamaré barra de aplicaciones uh sliver, está bien,
ahora iré a mi teléfono de aquí, que es este.

Vale, ahora lo guardaré y veré el resultado.
Vale, tomó algo de espacio aquí. Vale. Bueno, quiero decir que en realidad no ocupó espacio, simplemente
apareció aquí. Está bien, ahora, por supuesto que puedes. haz cero, está bien ahora todavía está ahí, bien,
podemos hacer mucho más que esto porque esto es solo un texto aquí, pero queremos que tenga
un color de fondo para ese en realidad qué haré, usaré un contenedor, está bien, ahora usaré
un contenedor, digamos color, hacemos colores.blanco Está bien, está bien y parece que se ha ido.
Bien, sí, ahora, por supuesto, porque No tenemos nada de niño aquí, así que
pasaremos un texto aquí y ahora diré.

Barra de la aplicación Slaver hace un momento no teníamos
ningún contenido así que desapareció y ahora apareció una vez más ahora aquí veamos que podemos usar otra propiedad
que se llama ancho, así que usaremos doble punto max finito por lo que ocupará todo el
espacio aquí y ya se ve mejor y además de aquí, dentro del contenedor, podemos
usar otra propiedad que se llama relleno y aquí solo hacemos inserciones de borde.
Ahora aquí haré los cinco primeros y diré abajo. Los 10 últimos están bien, entonces
parece que ya se ve mejor. Y aquí queremos centrar esto, así que lo envolveré
alrededor del widget central. entonces estaría centrado entonces ya está
centrado, está bien, y ya se ve genial ahora Por supuesto, no quiero usar este texto aquí. Quiero usar
nuestro texto personalizado, que es un texto grande.

Está bien, aquí tendremos un nombre
diferente. Diré lado chino y Está bien, sí, ahora para este puedo usar
una fuente diferente y un tamaño diferente. Está bien, porque creo que es demasiado pequeño. Puedes usar
el tamaño que quieras. Está bien, aquí lo hacemos. dimensiones fuente 26 porque sabemos que en nuestro archivo
de dimensiones tenemos todo el tamaño de fuente guardado Vale, vale, entonces ya se ve más grande. Muy bien, ahora para el contenedor en sí, también
podemos aplicar un poco de margen. así que aquí hacemos margen, está bien, ahora para el margen haríamos
inserciones de borde, solo que ahora aquí nos quedará y para la izquierda tendremos las dimensiones
punto con 20 y las dimensiones derecha punto con 20.

Está bien, tienes razón. Lo siento, esto
no debería aplicarse aquí, pero es un error. córtalo y lo guardaré. De hecho, quería
aplicarlo aquí ahora para poder aplicarlo. aquí tenemos que envolver las cosas alrededor de
un contenedor está bien, lo haremos, veamos, sí De todos modos, ahora vendré para acá. Así que hay un pequeño problema, aunque ahora, como
ves, no es tan grande como antes, así que aquí veamos, intentemos con 20, así que bajó un poco, y
esto es lo que realmente queremos lograr, ¿vale? Ese es el tamaño preferido, así que puedes usar un
tamaño extra si crees que no estás satisfecho. Si lo sacas aumenta 20 píxeles, si lo vuelves
a colocar, supongo que baja muchos píxeles.

De todos modos, ahora lo siguiente que queremos lograr es
este resultado, estos dos íconos están bien, eso es lo que queremos lograr aquí ahora para eso podemos usar otra
propiedad dentro de la aplicación sliver que se llama título y el título en realidad toma cualquier tipo
de widget, por lo que dentro de él usaremos nuestro niños ahora aquí podría seguir adelante y simplemente
poner cualquier ícono para poder comenzar, puedo decir Cualquiera que sea el ícono que desees y que definitivamente
aparecerá, sigamos adelante y verifíquelo. Es iPhone 12 y como puedes
ver ya está ahí.

Vale, sí, claro que este no es el icono
que queremos, ya tenemos nuestro ícono personalizado, así que eso es lo que usará, ¿vale? ícono de la aplicación, veamos este, está bien, ahora aquí, todo lo que tenemos
que hacer es pasar el nombre del ícono para que los íconos punteen, uh Bueno, tenemos esto claro. Vale,
esto es lo que usaremos. y aparecerá aquí y es una especie de ícono y luego usaremos
otro ícono, el ícono de la aplicación aquí los íconos puntean la compra, veamos qué aparece, así
que usaremos este, está bien, el correcto. Bien, entonces estos dos íconos están juntos,
así que usaremos una propiedad de fila que se llama alineación del acceso principal, entonces
hacemos la alineación del acceso principal punto y espacio entre ellos para que veamos que
llegan lejos hasta este final, ¿sí? Bien, ahora hay un problema. Lo ves como cortado.
Bien, ahora para deshacerte de este problema. tenemos que usar otra propiedad que se llama altura de la barra
de herramientas, ahora la configuraremos en 60, está bien y ha mejorado un poco, está bien, o podríamos
usar más, así que usa 80.

Vale, sí, ahora está mejor, pero
en mi caso seguiré adelante. Y quédate con 70 y veremos
cómo queda bien. Así que ya se ve mejor, sí, estamos
casi muy cerca del resultado. queríamos lograr cuál es este y también tenemos
que lograr este resultado correctamente Bien, ahora este resultado se realiza dentro de este
contenedor. Bien, aquí ves que esto es un borde a la derecha así que todo lo que pudimos hacer pudimos venir
aquí y aquí hacemos decoración y decoración de cajas y aquí hacemos el radio del borde y el radio del borde, solo que ahora
aquí con la parte superior izquierda y hacemos el radio punto circular y puedes seguir adelante y usar
20 o el que hemos guardado en nuestro archivo ese radio 20 está bien, ahora lo que haré, seguiré adelante
y lo copiaré y en lugar de arriba a la izquierda usaremos la parte superior derecha, está bien, y veamos y por supuesto, este es el color, así que como estamos usando la
decoración, el color tiene que estar dentro de la decoración.

Ahora continuaremos, lo guardaremos y veremos
cómo se ve. Sí, ya se ve mejor. Está bien, ahora creo que en lugar de los cinco primeros,
bueno, sí, se ve bien, está bien, entonces el siguiente. Lo que queremos lograr es esto de aquí
y queremos que sea desplazable, ¿vale? bien, para hacerlo desplazable definitivamente uh
desplazable como quiero decir así este este tipo de desplazable, bien o plegable, yo diría que sí,
esto es lo que queremos lograr, vale hacer eso. Aquí tendremos este texto. Tenemos este niño
justo, así que aquí usaremos la columna. y dentro de la columna usaremos niños y dentro de
niños usaremos un contenedor, vale, contenedor y dentro del contenedor tendré un niño, bien,
ahora dentro del niño usaré este expandible widget de texto y toma el texto correctamente
ahora aquí lo pondré El texto que teníamos antes, así que lo copiaré
unas cuantas veces más desde aquí.

Y lo pondré aquí unas cuantas veces
más. Sería un texto largo, ¿vale? Muy bien, si guardo esto, veré este resultado
aquí. Está bien, ya puedo desplazarme. y colapsar este, está bien, como si viniera
aquí, está bien, está bien, ahora uh Otra cosa es por qué uso el contenedor porque queremos
aplicarle margen o relleno correctamente. para que el contenedor de afuera pueda usar un margen,
así que haría un margen aquí, está bien y un borde déjame seguir adelante y hacerlo justo después, así que ahora
hacemos márgenes aquí solo insertamos puntos en los bordes. ahora aquí quedan todos los que quedan, así que las dimensiones puntúan
con 20 a la derecha dimensiones puntúan con 20, está bien, está bien ahora vamos a guardarlo y ya se ve mejor
pero ahora tenemos este color de fondo problema, por lo que queremos usar el color de fondo del
andamio aquí y usamos colores con puntos blancos y ahora se ve mucho mejor, está bien, este
es el resultado que queríamos lograr y aquí estamos ahora seguiremos adelante y lograremos este
resultado está bien, hacerlo aún estaría en nuestro archivo de detalles de alimentos recomendados y
aquí ya tenemos este cuerpo porque estamos usando scaffold scaffold tiene otra propiedad que se llama
barra de navegación inferior, que es la que usaremos Bien, ahora usaremos la columna.

Ahora tienes que
entender por qué usamos la columna porque aquí. Tenemos estas dos secciones, esta y ésta,
bien, están una encima de la otra. y también dentro del primer hijo usaremos esta fila
y en ese segundo hijo también usaremos la fila Está bien, ahora seguiremos adelante y aquí escribiremos
niños correctamente y luego haremos fila y ahora dentro de la fila uh, tendré hijos, está bien
ahora para este ícono y el fondo que ya tenemos ícono f, cuál es este, así que lo que haré, seguiré
adelante y simplemente lo llamaré, así lo haré. ícono de la aplicación, está bien, ahora aquí se necesita el nombre del ícono,
así que aquí pasaría el punto de íconos para eliminar, está bien. Muy bien, copiaré este y lo pondré allí
y usaré agregar.

Este es otro ícono. Bien, continuaré, lo guardaré e intentaré ejecutarlo
en mi dispositivo y esto es lo que vemos. Ahora esto sucede porque estamos usando la columna. El
primer problema es que esta columna no está ajustada. cualquier andamio de contenedor principal no es realmente un buen
contenedor como padre, por lo que es un error dónde Si envuelve la columna dentro de un contenedor,
ocuparía ese espacio en el contenedor, pero Definitivamente no tenemos un contenedor,
pero hay otra propiedad que se llama uh. ejercicio principal podemos usar ese ejercicio principal punto mínimo
para que encuentre el eje principal del ejercicio principal cuál es este y usar el espacio mínimo, está
bien, ahora aquí vemos eso al mismo tiempo.

Tiempo creo que se coloca en el fondo, está bien,
así que ahora este problema se ha vendido aquí Estos dos elementos no deberían estar juntos, así que
aquí lo que haremos será usar otra propiedad que se llama alineación de acceso principal este y acceso principal en
el centro de puntos de man, vale, lo siento, espacio entre Bueno, ahora se ha llevado demasiado lejos hasta este
punto, ahora también hay otros problemas aquí. el color de fondo que queremos, no queremos este, así
que podemos establecer nuestro color de fondo aquí y usaremos el color de fondo que tenemos en nuestra aplicación
para que los colores de la aplicación punteen el color principal. Sí, y además del ícono, el color del
ícono, usamos color y aquí lo hacemos.

Colores punto blanco vale, está bien, eh, veamos,
creo que aquí se llama color del icono Vale, está bien, por ahora, veamos para que sepamos
qué está pasando. Lo diré simplemente. así, está bien, vamos a guardarlo. El ícono es blanco,
pero ahora el ícono es demasiado pequeño. aquí, así que no queremos un ícono tan pequeño. Ahora
el ícono es demasiado pequeño porque, para el icono en sí hay una propiedad que se llama
propiedad de tamaño, está bien, entonces Ahora el tamaño en sí es solo 16, por eso parece demasiado
pequeño, pero podemos usar uno más grande. tamaño, pero aquí vemos que el tamaño está codificado
aquí para que podamos crear otro parámetro opcional por aquí y lo llamaremos tamaño de icono final.

Uh,
lo siento, tamaño de icono doble final, está bien. En este momento, este sería un parámetro opcional, así
que aquí ajustamos el tamaño del ícono, ¿vale? así que el tamaño del ícono está aquí, lo que haremos,
lo haremos aquí este 16. Está bien. aunque dice que tiene que ser
constante recuerden que es por eso que lo ponemos aquí 40, así
que aquí usaremos 16, está bien. Bueno, ahora hay otro problema, entonces, ¿cómo
lo cambiamos? Bien, entonces voy a usar un 16. o voy a usar lo que sea correcto, así que en ese caso
aquí simplemente escribiré el tamaño del ícono Está bien, cualquier cosa que envíes desde
aquí, la usaré si no me envías nada. nuevo, entonces usaré 16. Está bien, espero que
tenga sentido, así que para eso necesitamos pero en este caso queremos usar un 24, por lo que debes
pasarle 24, por lo que para ese necesitamos para ir a nuestro archivo donde dice dimensiones de la aplicación
o dimensiones, creo que esto ya terminó aquí aquí tenemos este tamaño para el ícono, vale, que
es 24, así que puedes seguir adelante y usar este.

Bien, una vez que estemos aquí, podemos agregar una nueva propiedad
y el nombre de la propiedad es del tamaño del icono. y pasaremos desde aquí dimensiones
punto icono tamaño 24 Bien, ahora se ve mejor y más grande
y parece que tenemos un error. Está bien, porque tenemos cambios de muchas
cosas aquí, muy probablemente para esa. Tuvimos este error antes pero ahora el
error desapareció como puedes ver. Está bien, entonces estamos bien, ahora
vendremos aquí y regresaremos a nuestro El código aquí está bien, entonces está funcionando correctamente,
así que lo que haré será copiar este y eliminarlo.

Esta sección está aquí y todo lo que hago es cambiar el nombre
del ícono, así que en lugar de eliminarlo, lo agrego. Así que guárdelo y veremos que hay otro ícono nuevo.
Esta sección está funcionando muy bien, pero aquí. Los problemas de relleno y margen que debemos tener en cuenta,
así que lo envolveremos alrededor de un contenedor. y lo estamos haciendo porque podemos aplicar relleno o
margen si tenemos un contenedor, así que aquí Usaremos un relleno y haremos inserciones de borde ahora solo
que ahora hacemos izquierda, derecha, arriba y abajo. todos ellos, así que aquí vamos a la izquierda y
tenemos este archivo aquí dimensiones ancho de punto Ahora aquí queremos aplicar 2,5 veces, así que sea
lo que sea, en realidad quería aplicar algo como 50 pero no tengo 58, así que lo que tengo aquí
lo tomo y lo multiplico por 2,5 para que me da 50.

Está bien, espero que tenga sentido aquí
es lo mismo pero en lugar de a la izquierda. Lo usaremos ahora y veremos que ya tenemos cambios
aquí y también en la parte superior e inferior. entonces, para la parte superior usaremos las dimensiones de altura de punto 10
y la parte inferior son las mismas dimensiones de altura de punto 10. Vale, ya se ve genial. Bien, ya está todo bien. Aquí tenemos que
poner en el medio, tenemos que poner algo. Entonces, lo que también significa justo aquí, vale,
sí, ¿qué necesitas poner como vimos antes? Tenemos que tener esta sección correcta, así que necesitamos encontrar
un espacio aquí que realmente esté bien entre ellos. Ahora aquí veamos, podemos usar el
texto. Simplemente ya tenemos uno. eso se llama texto grande a la derecha y muestra
este texto aquí ahora aquí hacemos texto grande Vale, todo lo que hace, se necesita texto
ahora mismo aquí porque estoy usando dólares. signos, así que necesito tener esta barra, entonces
haría 12, está bien, punto 88, está bien y uh Bueno, aquí tiene que ser una cadena diferente, por
eso, lo que haré, seguiré adelante y lo haré.

Como este y más cero ahora en el futuro funcionarían
de forma independiente como sería esta sección dinámica esta sección también sería dinámica,
está bien, veamos qué más tenemos. Creo que necesitamos usar el signo de dólar; de lo
contrario, dirá que no es necesario. Está bien. No, así que seguiremos adelante, lo guardaremos y veremos
el resultado. Sí, eso es lo que tenemos aquí. Bueno, ahora el color no coincide. entonces el color no coincide realmente,
entonces ves que el color es más oscuro aquí pero no lo tenemos, así que
creo que para este texto podemos usar un color Creo que podemos pasar el color, así que hacemos
los colores de la aplicación, el color principal negro ojalá debería haber cambiado y también el tamaño de fuente, así que usemos un tamaño de fuente
más grande aquí, así que aquí usamos el tamaño, uh Sí, podemos poner el tamaño, así que hacemos dimensiones, puntos, fuente,
26, está bien, sí, ahora ven a nuestra aplicación aquí.

Está bien, ahora se ven, sí, mejores y más
grandes. Está bien, creo que por aquí. Necesitamos tener algo de espacio porque están todos congestionados,
supongo, así que aquí, aquí, aquí y aquí. Así que ahora vamos a comprobarlo en nuestro simulador. Está bien, eso es genial y ahora debemos
centrarnos en esta sección. Vale, esta barra inferior y esta parte inferior en realidad
queremos colocarla justo debajo de este contenedor. Bien, ahora recuerda que anteriormente trabajamos
en nuestra otra página, que es ¿Cuál es este de aquí? Bien, ahora
tenía una sección como esta. para que podamos seguir adelante y usar esa sección vamos a ver creo que esa
sección era esta de aquí y asi como veamos En realidad, diría que todo el contenedor,
así que seguiré adelante y lo copiaré. y vendré aquí y lo pondré justo debajo
y veremos cómo se ve bien ahora.

Consigamos mi simulador, lo pondré ahí
y lo reiniciaré. Sí, ya casi está ahí. Así que nos salvó de mucho trabajo. Ahora
tenemos que hacer algunos cambios. uh veamos bien dentro de este
contenedor um no queremos así Así que definitivamente necesitamos cambiar este
y casi todo lo que hay aquí para que no Queremos que este niño sea una fila, está bien y en lugar de querer
un ícono, está bien, para el ícono, uh, lo haríamos.

Ven aquí y pasaremos a un niño por aquí y simplemente
pasaremos el ícono, está bien, está bien Veamos y el ícono debería ser No
puedo tomar, veamos por qué muestra un error, no necesitamos ese ahora, ahora aquí
usaremos los íconos uh punto uh favorito este está bien y usaremos un color para esto hacemos
colores de aplicación punto color principal Está bien, ¿y qué más creo que sea? Guardémoslo y
veamos el resultado. Sigamos adelante y comprobemos. este es nuestro dispositivo a menudo 12
y ya está allí y ya se ve genial Entonces, si podemos, por supuesto, podemos cambiar el
tamaño, podríamos hacer un tamaño diferente, veamos. El tamaño dice 45, parecerá más grande, pero no queremos
que sea cual sea el tamaño que se indica allí. 24 usamos ese, está bien, así que mientras terminamos
con esto, hasta ahora hemos creado algunas páginas. uh, hemos creado la página de inicio aquí y
luego hemos creado esta página de foodman página principal de comida, página popular
y página recomendada, está bien, está bien En la siguiente parte del tutorial combinaremos estas
pocas páginas y haremos la navegación y después que veremos cómo usar cómo crear un repositorio
de cliente API porque queremos leer datos de nuestro servidor y eso es muy emocionante, gracias a
todos, mientras que en esta sección aprenderemos cómo crear repositorios y controladores de clientes de API
y cómo se conectan en nuestra aplicación así que te guiaré a través del proceso completo, así
que quédate hasta el final, así que para este primero Eche un vistazo a nuestro ejemplo de aplicación básica
y entonces entenderemos por qué necesitamos nuestra repositorios y controladores del cliente API y
cómo deberían conectarse, bien ahora para Para ese propósito, ya tengo una demostración aquí.

Haré
clic en esto y esta es una aplicación en vivo y Esta aplicación está realmente en el servidor. Ahora, aquí.
Si hago clic en ella, puedo ir a una nueva página. si hago clic en esto, voy a una página diferente y
ahora aquí puedo agregar cosas y puedo sumar más Aquí y luego puedo dirigirme al carrito. Vale, si tengo que
ir al carrito, hay una respuesta aquí, entonces puedo. Cierro este una vez más, pero si vuelvo hacia atrás
puedo ver mi tarjeta anterior que ha sido guardado temprano y aquí puedo agregar más cosas si
quiero, está bien, entonces puedo venir aquí, podré para ver mi carrito y aquí también puedo reducir o obtener
más, está bien ahora, incluso después de eso puedo Regreso a mi página de inicio y puedo venir aquí.
Este es mi centro personal y aquí tengo mi dirección guardada y puedo guardar una nueva dirección
desde aquí, está bien, luego vendré aquí y la guardaré.

Vale, está bien y luego, si vengo aquí, veré
que no tengo ningún historial de tarjeta. Está bien, así, pero este historial proviene de nuestra base
de datos. Está bien, y este es el orden de ejecución. Y aquí no tengo ninguna información de todos modos,
así que puedo volver a mi página de inicio. uh y si vuelvo otra vez puedo desplazarme por ellos
y puedo agregar más cosas y luego puedo agregar Lo agrego al carrito después de eso veré que tengo
más información aquí, ahora puedo continuar.

Y mira, haz clic aquí, está bien y eso es todo, así
que lo hice. Ahora, si vengo aquí, lo haré. Veo que tengo un nuevo pedido generado, vale, lo
siento, vale, y este es mi historial local. de mi carrito está bien, así que puedo hacer mucha más información,
por supuesto, aquí puedo cerrar sesión y luego puedo inicia sesión una vez más y eso es lo que haría uno tres
siete seis uno ocho cuatro nueve cero uno seis ahora puedo iniciar sesión ahora, una vez que inicio sesión,
veo mi información aquí, la que guardé aumenta una vez más, puedo seguir adelante y cambiar mi dirección
si quiero, está bien para que entiendas la idea básica.

Aplicación como esta, por lo que se trata de una aplicación de comercio electrónico
sencilla donde puedes realizar publicaciones desde el servidor y flutter framework lo obtiene y procesa
los datos y puedes hacer lo que quieras Por lo tanto, para una aplicación como esta necesitas tener
tu arquitectura lista para mantenerla en funcionamiento. porque aquí estamos haciendo muchas cosas,
bien, ahora tu arquitectura debería ser uh listo desde el principio y debe ser de la manera
correcta, de la manera correcta, para que sea No es una aplicación sencilla en la que simplemente vas
y haces todo juntos, por lo que tienes que separar tus Lógica, tu interfaz de usuario y dependencias, por eso
necesitamos aprender a trabajar con el cliente API. repositorios, así que para ese vendré
aquí y echaré un vistazo a esto. Estructura básica y aquí primero explicaré qué
son estas cosas y cómo están conectadas.

Seguiremos adelante y construiremos estas cosas una por una,
está bien, de todos modos, este es nuestro aleteo básico. aplicación aquí y dentro de la aplicación tenemos esta función
principal, ahora dentro de la función principal vamos a llamar a una función que se llama init pero, por supuesto,
esta función init la tenemos que crear nosotros mismos en general, quiero decir que no está en la función
principal en sí, tenemos que crearla correctamente. así que continuaremos y lo crearemos ahora. El objetivo
principal de esta función de inicio es cargando dependencias como puedes ver, las escribí aquí
para que carguemos las dependencias que puedas tener muchas dependencias, pero aquí acabo de enumerar
tres. De hecho, ahora puedes hacer más, una de las Las dependencias más importantes son el cliente API, por lo
que la función init cargaría el cliente API ahora aquí. El nombre es api porque puedes entender que desde aquí vamos
a llamar a una API relajante para que sea aplicación. Como este, el que les mostré, debería comunicarse
con el backend para enviar y recibir datos.

Ahora este es un lado del cliente, por lo que ahora iría al
servidor desde aquí para realizar la solicitud u obtener. datos, por eso decimos que este es un cliente, entonces
el servidor es el que servirá a nuestro cliente. Pero de todos modos puede parecer muy alto para
principiantes, pero no es más que un dardo. archivo aquí en nuestro caso, la aplicación flutter está
bien y en este cliente API interno tendremos get y cuerpo de la solicitud de publicación, está bien, el cuerpo real
de esta solicitud de entrada se ubicaría dentro del cliente API Entonces, en la aplicación en general, solo desea tener una sola solicitud
de obtención, así que obtenga el método de obtención y un método de publicación y usando esos dos métodos hablarás
con el servidor para obtener datos y publicar para publicar datos, pero su aplicación puede ser compleja,
pero en realidad no importa qué tan compleja sea En general, solo tendrás una solicitud de obtención, un
método de obtención y un método de publicación.

Espero que ahora tenga sentido, así que obtener y publicar
el cuerpo de la solicitud están en el cliente API. así que ahora necesitamos llamar a ese cuerpo o al
método para que el método real esté dentro este cliente API ahora necesitamos llamar al método
ahora, en general, los métodos se llaman desde repositorio pero, una vez más, el repositorio es solo una clase
de dardo aquí porque estamos en la aplicación flutter Bueno, de todos modos crearemos una clase de dardos
y puedes nombrarla como quieras, no importa.

Pero el concepto que llamamos a este tipo de clases
de dardos son repositorios porque llama al get y el método de publicación, recuerde que en el cliente API tendremos
el método de solicitud de obtención y publicación, así como su cuerpos correctos y desde aquí dentro del repositorio simplemente
los llamamos directamente, está bien, con suerte tiene sentido, entonces el cuerpo está ahí y llamas al cuerpo
desde el repositorio, por lo que el propósito principal del repositorio es simplemente llamar a los métodos, qué
métodos obtienen o publican solicitudes, eso es todo. esa es la forma más sencilla de entender y, de
hecho, en la vida real, cuando codificas, usas Los repositorios de las clases oscuras son bastante
simples y en general son muy pequeños, ¿vale? El cliente API es un poco más grande que los repositorios.
Bueno, ahora el próximo hablaremos de los controladores. Bien, ahora los controladores procesan los
datos. ¿De dónde provienen estos datos? Los repositorios obtienen datos del cliente API. Recuerde
si tenemos datos si usamos la solicitud Get Get. eso significa que estamos obteniendo datos del servidor.

Ahora los
clientes de API obtienen los datos del servidor porque es el El cuerpo habla con el servidor y el servidor envía algunos
datos y, por supuesto, lo llamamos método get. desde el repositorio ahora a cambio tanto del cliente API como
del repositorio, los datos devueltos están bien, esos datos son pasado a los controladores, está bien, sí, ahora los controladores
procesan los datos y cualesquiera que sean los datos. que vamos a procesar y luego de procesarlo lo
enviamos a la ui y tú redibujamos la ui Así funciona, pero de todos modos, ahora
echa otro vistazo, así que si vas a por ejemplo, haga una solicitud de obtención para que desde
la interfaz de usuario recopile algunos datos suyos desde la interfaz de usuario llamará al controlador porque desea
obtener algunos datos, lo siento, no recopilar datos para un obtenga la solicitud de la interfaz de usuario, llamará a los controladores.
Bien, ahora los controladores llamarán al repositorio.

Y el repositorio llamará al método get en el
cliente api y luego el cliente api hablará con el servidor está bien y lo contrario para la solicitud de publicación,
bueno, definitivamente para la solicitud de publicación, uh Por cierto, creo que necesito hablar un poco más
sobre este tema, así que olvídalo una vez más. uh ui desde ui llegamos a controladores y desde
controladores vamos al repositorio repositorio a api cliente y desde el cliente api hablamos con el servidor y el
servidor procesa la solicitud de obtención y envía datos Volver al cliente API porque es una solicitud de obtención,
por lo que obtenemos datos y luego esos datos se pasan a Los repositorios y el repositorio pasan los datos a
los controladores y desde los controladores ponemos los datos a la interfaz de usuario y luego se vuelve a dibujar,
así que este es el ciclo completo de los controladores uh repositorios y cliente API para una solicitud de obtención, está bien,
ahora lo contrario si tiene una solicitud de publicación, por lo que en general de la interfaz de usuario recopilará algunos datos
y esos datos se enviarán a los controladores y controladores Primero procesará los datos, luego llegará al repositorio
y luego encontrará los datos relacionados.

Obtener o publicar solicitud, en este caso encontraremos la solicitud de
publicación, por lo que llamaremos a la solicitud de publicación y Esa publicación simplemente se encuentra dentro del cliente
API, por supuesto, al mismo tiempo que pasamos los datos. A lo largo de este proceso, ahora el cliente API encontrará el cuerpo
de la solicitud de publicación o el método y enviará los datos.

Al servidor ahora, después de enviar los datos al servidor,
el servidor procesa los datos y envía una respuesta Vuelva a contactarnos ahora una vez que envíe una respuesta una
vez más, primero llega al cliente API y luego al repositorio. luego a los controladores y luego a la interfaz de usuario, así
que esta es la estructura básica de cómo funciona bien. Espero que tenga sentido, así que ahora tenemos claro
qué son los repositorios de clientes API y controladores ahora continuaremos y veremos de
primera mano cómo construir esto en realidad ahora vamos a construir el representante y los controladores
del cliente API del método init y usted puede simplemente Sígueme y, si estás siguiendo algún
otro tutorial, intenta intentarlo.

Para entender este concepto, aún puedes seguir,
solo sígueme, pero te seguiré. mi proyecto el que estoy haciendo aquí pero si no
estás siguiendo este proyecto puedes simplemente simplemente crea una aplicación de flutter simple, me refiero solo a la
aplicación para principiantes, la predeterminada que creamos en flutter aplicación, sigue adelante con esa y
sígueme y estarás listo, ¿vale? Aquí es donde lo dejamos la última vez,
pero esta vez vamos a construir. repositorio de cliente y controladores de
API, por eso necesitamos crear algunos carpetas nuevas la primera carpeta la llamaré aquí
la llamaré ayudante, está bien, está bien entonces esta es una carpeta y dentro del asistente
crearé un nuevo archivo y lo llamaré dependencias, está bien, dependencias, punto, dardo,
está bien, está bien, eso es todo, aquí crearemos una clase, bueno, realmente no necesitamos crear una
clase, simplemente llamamos a crear un método aquí y el tipo de método sería futuro pero no devolverá
nada y el método está en él y entonces simplemente tendremos estas llaves,
está bien ahora porque tiene futuro el tipo de retorno, por lo que necesitamos usar una sincronización
y todo está bien y este es el método init de lo que estaba hablando antes, está bien, es tan simple como
eso, está bien, una vez que hayamos terminado con esto.

Pero una vez que hayamos terminado con esto, debemos seguir
adelante y crear una clase para el cliente API. y una vez que creamos la clase para el cliente API,
llamaremos a esa clase dentro del método init y luego podemos llamar al método init desde nuestra función principal,
está bien, por eso ahora seguiremos adelante y crearemos un nueva carpeta, así que aquí crearé una nueva carpeta
y la llamaré datos y dentro de los datos crearé otra otra carpeta nueva y aquí la llamaré api, está
bien y dentro de api crearé una nueva clase y lo llamaré cliente api dot dart, está bien,
crearé una clase y lo llamaremos cliente api y en nuestro caso, vamos a usar getx para administrar
nuestros controladores de cliente API y repositorios, por eso necesitamos extender
get  connect y luego implementar otro interfaz que se llama get x service, está bien,
después de eso necesitamos crear algunos datos uh variables para la inicialización la primera que hacemos
uh token de cadena tardío porque en general cuando Cuando hablas con el servidor, deberías tener un token
y ese token debería inicializarse dentro de tu El cliente API está bien, por eso tenemos un token
aquí.

Ahora crearé otra variable que es también tipo cadena y lo llamaremos url bayes. Ahora esta
es la URL de nuestra aplicación, la aplicación que Hablaría con el servidor para que la URL del servidor esté
bien, eso es lo que tendremos aquí ahora, por supuesto. Pasaremos esto desde otro lugar donde llama al
cliente API desde allí. Lo pasaremos aquí. ahora crearemos el constructor para el
cliente api y aquí tenemos un requisito variable o parámetros, así que registre este punto y URL base y luego continuaremos y crearemos
un cuerpo constructor aquí.

Ahora usaremos la URL base igual a la URL base de la aplicación.
Ahora también usaremos otro parámetro que se llama variable aquí necesitamos inicializarla, se llama tiempo
de espera, ahora le daremos una duración segundos 30. Está bien, ahora déjame preguntarte cuáles
son estas dos cosas si pasas el cursor sobre Si ves que vienen de get get connect y se conectan
a dart, entonces esto tiene que ver con get x uh, sistema de administración de paquetes, estas dos variables, por lo
que el sistema de administración de paquetes get x debería saberlo. ¿Cuál es tu URL base para que se la pases
a esa y cada vez que hagas una solicitud? Entonces, ¿cuánto tiempo debe intentarse la
solicitud y después de eso si debe continuar o no? Así que aquí intentas realizar una solicitud o intentar obtener datos
del servidor durante 30 segundos. Está bien, sigue enviando. la solicitud y después de eso, si falla, la detendrá,
así que este es el tiempo de espera y Crearemos otra variable aquí y habrá
un tipo de mapa y así será.

También será de tipo tardío, ahora la variable en sí
es de tipo tardío, ahora aquí tendremos una cadena y una cadena, está bien, y aquí tendremos una variable privada
que la llamaremos encabezados principales, está bien. Ahora, ¿qué es un mapa? El mapa sirve para almacenar datos localmente
o convertir datos en mapas. También podemos hacerlo. ahora tiene un valor de par de claves, por lo que en nuestro
caso esperamos una cadena como clave y el valor es también cadena, pero esto es solo para esta variable.
Está bien, aquí vamos a crear un mapa y El mapa tendrá una clave y un valor de par.

Escriba la cadena de
mayúsculas y minúsculas y el valor también es una cadena. y pronto veremos cuáles son los encabezados. Está
bien, voy a hacer eso ahora, aquí lo tengo. Lo marqué como tarde, lo que significa que antes de seguir
adelante e intentar usar este debo inicializarlo. Así que lo inicializaré dentro del constructor con
this y aquí llamaré a los encabezados principales. Ahora, una vez más, los mapas tienen llaves. Está
bien, en general, en el archivo Dart, algo que entre llaves, la mayoría de las veces
es un mapa y, por otro lado, una lista están envueltos alrededor de estas llaves o corchetes, así
es como se diferencia, así que de todos modos aquí tenemos tendrá una clave y un valor, por lo que en nuestro caso la clave
es el tipo de contenido y aquí escribiremos la aplicación json y juego de caracteres utf aquel y autorización autorización
autorización y portador simbólico así que veamos y necesitamos este.

Bien,
ahora encabezados por qué tenemos esto. cliente API y estos encabezados ahora, una vez más, dije
que si su cliente se usa para hablar con el servidor ahora aquí vamos a hablar con el servidor pero
cada vez que hablas con el servidor debes mencionar el encabezado en tu URL
y ahí es donde inicializaremos este. Independientemente de que se trate de una solicitud de obtención o de publicación,
debes tener tus encabezados básicos listos para que cuando Quiero obtener una respuesta del servidor.

Le dices al servidor.
Oye, mira, esta es una solicitud de obtención, pero quiero. Debes enviarme datos json. Está bien, todo está bien. Esto
también es para la solicitud de publicación, así que si envías datos al servidor, el servidor sabe por el
encabezado que, oh, el json, los datos provienen desde el cliente, lo que significa nuestra aplicación o desde
este cliente api que tiene formato json, está bien, por eso debes mencionar el tipo de contenido aquí y esta es la
sección de decodificación o codificación que cómo debería decodificar y codificar mucho tiempo. Esto
no es tan importante, pero es mejor si lo tienes. Ahora aquí, si realizas muchas solicitudes de
publicación, en ese caso deberías enviarlas. un token desde su dispositivo al servidor, por
eso aquí mencionamos nuestro token, ¿vale? y es por eso que tenemos esta variable
aquí, ojalá tenga sentido Ahora veamos, sí, y ahora esto del portador,
muchas veces el tipo de token es portador. Así que debes mencionar el tipo aquí.
Ahora se usa para autenticación.

Y este tipo de clave se llama autorización
porque queremos autorización del servidor y el token que enviamos es de tipo portador,
está bien, se trata de nuestro cliente API. Ahora tenemos que seguir adelante y crear una clase para nuestros
repositorios. Bien, ahora en nuestro caso. Una vez. De nuevo aquí crearemos una nueva clase y dentro la
llamaremos "lo siento", primero crearemos una nueva El directorio y el nombre del directorio son repositorio.
Está bien, todos los repositorios estarían habitados. vivirían en esta carpeta ahora
aquí seguiré adelante y cree un nuevo repositorio que sería una clase
de dardo y lo llamaré producto popular repositorio, está bien y dardo, puedes nombrarlo
como quieras, pero en general un Muchas veces al final ponen esta palabra llamada
rapple, vale, eso significa repositorio eso es todo ahora que estamos aquí y como dije
antes los repositorios son bastante simples, ¿vale? ahora crearé una clase basada en el nombre de mi repositorio,
así que la llamaré repositorio de producto popular, ¿vale? y aquí ampliaremos obtener un servicio ahora el paquete se ha importado automáticamente, ahora
los repositorios hablaron con el cliente API de Appoi y eso tiene que ver con la conexión a Internet, por
eso muchas veces cuando cargas datos desde el Internet, debes extender este servicio get x, así que
simplemente recuerda cuando cargas datos desde el Internet, si usas el paquete get x, deberías ex, tu
clase debería extender el servicio get x, ¿vale? Sí, está bien.

Ahora necesitamos crear una
variable y la llamaremos final y API. el tipo es final y esa variable será tipo api uh
cliente y lo llamaremos cliente api, ¿vale? Muy bien, aquí pasaremos el cliente API al producto
a nuestros repositorios como vimos antes. por aquí está bien, entonces están conectados de alguna manera, está
bien, entonces el repositorio debería tener acceso al cliente API porque si es así, desde dentro del repositorio podemos llamar
a un método que está activo dentro del cliente API Está bien, entonces el repositorio de API debería tener una
instancia de cliente de API, por eso estamos creando este. aquí espero que tenga sentido, porque si tenemos
este ahora podemos seguir adelante y llama a cualquier tipo de método que salga de aquí,
está bien, entonces esta es la instancia ahora por aquí uh seguiré adelante y crearé El método vacío y el tipo de método serían futuros
y me enviarían una respuesta del servidor.

Y lo llamaré hacerse popular el nombre del
método lista de productos populares Bien, aquí tendría que mencionar el tipo
que debería ser de sincronización. Está bien, porque regresa en el futuro. Ahora aquí necesitamos tener
una sección de devolución, de lo contrario, está de mal humor. Está bien, ahora nos ocuparemos de eso. Ahora olvidé
una cosa, aunque aquí tenemos que crear el constructor está bien, así que hacemos un repositorio de productos
populares. Ahora este es obligatorio, así que es necesario esto. cliente dot api, así que cada vez que llames por primera
vez a este repositorio debes pasar el cliente api, ¿vale? Está bien, espero que tenga sentido ahora aquí tenemos
que devolver algo.

Está bien, devolver lo que, bueno. Como dije antes desde el repositorio, llamarías a un
método dentro del cliente API pero no tenemos la método todavía, así que necesitamos seguir adelante
y crear un método. Bueno, por ahora solo cree un método de publicación y después de crear el método de publicación
llamaremos al método de publicación desde aquí, ¿vale? Ahora iremos a nuestro cliente API aquí, así que continuaremos
y crearemos una solicitud de obtención. significa que el método get en realidad no es una solicitud, por lo
que sería un tipo futuro y aquí tendremos una respuesta. Por cierto, si te preguntas cuál es esta
respuesta, en realidad esta sería la respuesta.

Del paquete get x, está bien porque en lugar del
cliente http aquí usaremos el cliente getx para obtener datos del servidor y obtener x le devuelve
una respuesta, pero, por supuesto, dentro del respuesta tienes tus datos así que el tipo es respuesta
aquí ahora aquí llamaremos obtener datos Bueno, ahora obtener datos debe tener el uri correcto
porque necesitas especificar el uri o la URL de tu servidor, me refiero a la solicitud, el punto final está
bien, entonces aquí el tipo es uri, está bien, y después de eso deberías haber uh bueno,
podemos tener muchas más cosas aquí. Piensa que por ahora lo mantendré simple,
¿vale? y luego tendré estas llaves y después de eso tenemos que devolver algo como usted dijo,
como ve aquí, el tipo es respuesta futura, ¿verdad? Bien, ahora aquí primero, definitivamente tenemos que usar una
clase de prueba. Esta está bien, así que dentro del intento.

Llamaremos a algo desde el servidor y,
si falla, detectaremos el error. en nuestra cláusula de captura, está bien, aquí
te devolveremos una respuesta, está bien. Muy bien ahora aquí, bueno, hay muchas cosas que
debemos cuidar ahora mismo, bueno, la primera. Lo que queremos es crear un método de obtención aquí o una
solicitud de obtención, por lo que sería una espera y luego Pasaremos, llamaremos a get y no recibimos, te enviaremos,
está bien, sí, eso es tan simple como eso.

Vale, ahora veamos que te pide que añadas
un modificador asíncrono. Está bien. Ahora obtendrá los datos y, por supuesto,
primero esperará a recibirlos. y una vez que devuelva los datos, los guardaremos
en un objeto que se llama respuesta Vale, está bien, y después de eso simplemente
devolveremos la respuesta. Está bien, sí, eso es tan simple como eso.
Está bien, pero si hay una respuesta. Está bien, si hay algún problema aquí,
vamos a devolver algo interesante. Entonces aquí veamos que esta es una respuesta ahora,
como ves aquí, toma el código de estado y Texto de estado de algunos de ellos, está bien, así que seguiremos
adelante y usaremos dos de ellos ahora mismo, así que si es así. falla, enviaremos un código de estado igual a uno y luego
el texto de estado. Bueno, ahora el texto sería proviene de nuestro error, así que escribe un punto a una cadena.
Bueno, espero que tenga sentido ahora con esto.

Estamos listos, así que esta es una solicitud muy simple
para obtener datos de nuestro servidor y, por supuesto, en nuestro caso estamos usando el método get de getx. No estoy
usando el cliente http, está bien, pero por supuesto. obtener x dentro usa http, está bien, así que de todos modos
todo lo que hace es intentar obtener los datos que espera. los datos cuando se devuelven los datos, los guarda en un
objeto de tipo de respuesta y luego los devolvemos, pero Si falla, devolveremos el mensaje de relleno y de
error, cosas así, con suerte se solucionará.

Sentido, ahora estamos aquí dentro de esto, está bien,
como dijiste que debería devolver algo ahora lo que debería devolver, mucho antes de que regrese,
debe llamar a la API desde el cliente de API Bien, aquí podemos simplemente seguir adelante y llamarlo,
así que aquí regresaremos y esperaremos al cliente API. punto obtener datos está bien, todo está bien,
ahora aquí pasaremos un punto final de URL url, está bien, URL, eso es tan simple como ese, está bien,
ahora estamos hablando de lo que vimos al principio.

Ahora nos estamos dando cuenta de esto, como dije antes, por lo
que el repositorio llamaría a un método desde el cliente API. entonces el repositorio es simplemente responsable
de llamarlo y eso es lo que hace aquí Vale, por supuesto, esta no es una URL correcta. Tenemos
que crear esa URL de alguna manera, por ejemplo. http.www.stack.com lista de productos API. Está bien,
debería ser algo así, pero tenemos que crear esto. uno está bien, eso es lo que aprendimos y
al mismo tiempo aprendimos que una vez que obtener los datos para obtener la solicitud del primer repositorio
llama a los datos de la API API devuelve el datos al repositorio y luego el repositorio enviaría
los datos de vuelta al controlador, ¿vale? así que ahora tenemos que seguir adelante y crear
un controlador y una vez que tengamos el controlador podemos obtener estos datos porque aquí ves que devuelve
tu respuesta, está bien, así que dentro del El controlador obtendrá esa respuesta y la procesará,
así que para este seguiré adelante y crearé una Nueva carpeta dentro y la llamaré controladores.

Y dentro de este controlador crearé un nuevo
archivo y lo llamaré popular Dardo de punto controlador de producto popular Bueno, eso es tan simple como eso. Ahora crearé
una clase y la llamaré producto popular. controlador bien ahora aquí se extenderá get x controladores bien, no hay servicio, servicios obteniendo
servicios en general, están en rappos Vale, o dentro del cliente API. Lo siento,
creo que podemos cerrarlo. y este también así que de
todos modos aquí tenemos este uh producto de controlador popular uh controlador de producto
popular ahora aquí necesitamos crear un variable, eso es lo que haremos y lo llamaremos repositorio
de productos populares y ahora aquí diríamos El repositorio del producto pelador de patas está bien, espero que
ahora tenga sentido aquí antes de seguir adelante y inicializarlo. Así que necesito pasarle el registro como el representante
aquí antes de continuar e inicializar.

El repositorio que necesita para pasar el cliente API está bien,
por lo que todos dependen entre sí, así que ahora aquí producto popular cuando continuamos y lo inicializamos,
necesito tener una instancia de este repositorio porque Si tengo una instancia dentro de este controlador de este
repositorio, entonces puedo llamar a esta función. es por eso que necesito seguir adelante y crear esta instancia,
pero de todos modos ahora aquí crearé la uh, constructor por aquí, está bien, ahora aquí, se requiere
este repositorio de productos populares de punto Está bien, esto es algo que tienes que proporcionar.
Está bien, y después de eso. aquí crearé una lista por ahora, está bien, y el tipo
de lista lo crearía como una dinámica dinámica Y aquí tendré una lista dentro y el nombre
de la lista es producto popular. la lista está bien y la inicializaremos
a nula, está bien. Ahora bien, ¿por qué estamos
haciendo esto? Porque, como dije antes.

Desde aquí llamaré a esto rappo y ahora el rapero
devolvería los datos, por lo que devolvería datos. por aquí y luego guardaré los datos en esta
lista. Bueno, espero que tenga sentido. Ahora, seguiría adelante y crearía un método y
el tipo de retorno del método es futuro nulo y Llamaré al nombre del método para obtener
la lista de productos populares, está bien. y eso es todo y aquí creo que necesito crear esto
y tener este modificador asíncrono porque el tipo de devolución es futuro. Ahora vendré
aquí, así que ahora tengo esto. instancia de ajuste aquí para que pueda simplemente
seguir adelante y usar esa y llama a un método dentro de él ahora sabemos que dentro
hay un método, por lo que el nombre del método es Obtener una lista de productos populares.
Creo que es este. Déjame comprobarlo. obtener una lista de productos populares, sí, este es
el indicado, así que desde aquí llamo a este y este Continúe y busque los datos. Encuentre este método dentro
del cliente API. Ahora el cliente API devolvería un respuesta, entonces el repositorio tendrá la respuesta aquí
ahora el repositorio me devolverá la respuesta, está bien y Puedo verlo aquí.

Vale, puedo guardarlo. De todos
modos, primero guardaré la respuesta. como respuesta aquí respuesta respuesta ahora por
qué escribo aquí respuesta lo siento ahora por qué estoy escribiendo aquí respuesta porque recuerda rappo devuelve una respuesta, por lo que aquí
la variable debe guardarse en una respuesta objeto y ahora aquí me está gritando
porque uh por aquí necesito poner un peso ahora el error debería estar cometido por qué estamos
poniendo un peso porque por aquí eso devuelve un futuro escriba OK, así que debemos esperar hasta que obtengamos
los datos correctos una vez que estén listos. una vez que los datos estén listos entonces, bueno, de alguna
manera devolvería una respuesta, ya sea la correcta respuesta o una respuesta fallida, ya sea que necesitemos verificarla
para obtener el estado del punto de respuesta Lo siento, código de estado del punto de respuesta si ahora es
200 en general, la mayoría del cliente http del cliente API Devuelven un código de estado de 200 si se realiza
correctamente.

Bueno, la mayoría de ellos devuelven este. Entonces, en nuestro caso, get x también devuelve
el status quo 200 si la respuesta es exitosa. eso significa que si la respuesta va de aquí a aquí
y luego a aquí y luego a este, no a este uno cuando regresa desde aquí el código de estado es
solo ves que es diferente, vale, sí, de lo contrario cuando regrese de aquí, regresará a nosotros 200,
está bien, así que de todos modos vendremos aquí Entonces, si devuelve la respuesta correcta, guardaremos
los datos en esta lista antes de continuar. una vez más lo inicializaré a nulo porque puedes
llamarlo muchas veces a este método Entonces, si no lo inicializas en nulo, es posible
que tus datos se repitan, así que primero Lo inicializaremos a nulo, está bien y luego llamaré
a la lista de productos populares y agregaré todo. Bien, ahora aquí necesitas
poner tus datos en orden. Sí, eso es tan simple como ese,
pero ahora pon los datos aquí. No es tan fácil, hay que tener algo, mucho tiempo, necesitamos
seguir adelante y construir un modelo, ¿vale? y el modelo obtendría la respuesta, recuerda porque
del servidor obtenemos una respuesta y el la respuesta es parte de los datos dentro de la respuesta tendremos
parte de los datos y nuestros datos son de tipo json Así que aquí dentro tendremos datos de tipo JSON,
pero necesitamos convertir esos datos de tipo JSON.

A un modelo, está bien, entonces tenemos que seguir adelante
y crear un modelo, pero aún no tenemos ese modelo, ¿vale? Realmente no podemos seguir adelante y usarlo, pero te
da una idea, así que por ahora lo mantendré vacío. pero, por supuesto, te mostrará un error, ya está bien,
una vez que tengas este aquí la mayor parte del tiempo. solo quieres actualizar porque si llamas a este método
significa que los datos se han actualizado y nuestra interfaz de usuario lo sabría, por lo que esta actualización
es más como establecer estado, está bien, esta está bien ahora si falla aquí, vale, entonces querrías
devolver algo diferente, vale Y esa es la idea de cómo conectar los repositorios
de controladores y el cliente API. Ahora, si esto tiene éxito, está bien, ahora puedes acceder a esta
lista desde cualquier lugar de tu interfaz de usuario, está bien.

Pero para hacer eso simplemente necesitas hacer una cosa
aquí, debes hacer como esta lista dinámica producto popular lista de productos puros obtener creo que get debería estar aquí y aquí la lista de productos populares. Bien, ¿por qué no quieres
llamar a este directamente desde la interfaz de usuario? porque esta es una variable privada que tiene
un guión bajo en flutter en dart si tienes subraye lo marcado como una variable privada para que
una vez que los datos se hayan guardado aquí y luego Puedes simplemente llamar a este desde tu interfaz de usuario y esta es
una lista simple, por lo que dentro de la lista tus datos estarían diga así a b cualesquiera que sean los datos que
tenga, así puede seguir adelante y leerlos Bien, ahora antes de querer ver qué sucede realmente,
debemos seguir adelante y construir un modelo.

De lo contrario, esto no funcionará bien, pero ya
entiendes la idea, así que la idea más básica. Así funciona bien, así que tienes este método
init dentro de este, tendrá un repositorio API. Obtener publicaciones y controladores, cosas así,
está bien, pero ahora falta otra cosa. El rompecabezas es que nuestro método init está bien, así que ahora seguimos
adelante y colocamos los datos o las dependencias dentro de nuestro método init está bien, por ahora lo comentaré
porque de lo contrario tendré un error. Ven aquí y este es nuestro método de edición.
Ahora aquí necesitas cargar las dependencias. está bien para uh flutter get x, simplemente
necesitas obtener dot lazy put y luego simplemente llamas a tus dependencias desde
aquí. Bien, en nuestro caso la dependencia es cliente api el primero en general en
las dependencias que desea cargar El cliente API primero está bien, creo que
necesitamos importar la biblioteca, sí. Ahora recuerda que tiene un constructor y requiere datos, por lo
que en nuestro caso requiere la URL base de la aplicación.

Bien, ahora tenemos que pasar por un mundo ajetreado.
Podría ser algo así como http www.debate.com. Está bien, veamos aquí. Creo que podemos
importar el paquete completo. Ahora sigamos adelante e importemos la biblioteca. y el error debería desaparecer, así que,
como dije antes, primero debes cargar cliente api y eso es lo que hicimos aquí, está bien,
así que recuerde que el cliente api toma una constructor por aquí y estamos pasando el URL base y luego la guardará para obtener
x internamente, así que ese es el primeras dependencias que cargamos ahora en
general después de cargar el cliente API Quiero cargar los repositorios, así que esto
es lo que hacemos. Te vuelves perezoso. ahora aquí necesitamos llamar a nuestros repositorios
para que el nombre de nuestros repositorios Aquí hay un producto popular, así que
seguiré adelante y lo copiaré. ahora aquí solo usaré este
y ahora dentro de este Deberías pasar el cliente API. Recuerda que aquí
se necesita el cliente API correcto, así que ya inicialicé el cliente api aquí, así que ahora podríamos
seguir adelante y pasarle el cliente api, ¿vale? cliente api Sí, y ahora aquí obtenemos dot find y necesitamos
importar los paquetes, está bien, ahora aquí.

Así que inicializamos, creamos una instancia de api client
ahora, por supuesto, no está aquí directamente, pero porque estamos dentro del paquete get x, así que una vez
que escribas api client get dot find get x lo encontrará para ti, pero, por supuesto, este nombre tiene que ser el
mismo que el nombre que mencionaste aquí si tu nombre es un poco diferente aquí o cualquiera que sea el nombre
que uses aquí, tienes que usar exactamente el mismo nombre, está bien, ahora estos dos nombres son todos iguales, por lo que
ahora gatex puede encontrar la clase relacionada, está bien, así que en En nuestro caso, esta es la clase de cliente API. Ojalá
tenga sentido, así que esto queda para que conste. o repositorios y este es nuestro cliente API, está
bien y a continuación aquí tendremos nuestro controladores, está bien, sí, ahora de la misma manera tenemos
que seguir adelante y cargar nuestros controladores en nuestro caso. Copiaré este ahora en lugar del popular repositorio de
productos.

Llamaré a la clase el nombre de la clase. es un controlador de producto popular, así que este
y yo vendré aquí y lo reemplazaré ahora aquí. Primero necesitamos importar el paquete y ahora
vemos que este controlador toma el producto. ajuste bien, por lo que debemos pasarle el contenedor y
ya hemos inicializado aquí el repositorio, por lo que y la variable que creamos que es un envoltorio
de producto popular copiará este y lo haré simplemente reemplace esto, está bien y desaparecerá, así
es como carga correctamente sus repositorios en un funciona bien, primero el cliente API, luego todos los repositorios
y todos los controladores, por lo que es posible que tengas muchos informes para que todas las ondas intenten cargarse juntas
y luego es posible que tengas muchos controladores y Todos los controladores que cargas juntos aquí, uno
por uno, uno tras otro, espero que tenga sentido.

Bueno, entonces tendremos que ir a
nuestro archivo principal aquí. main.class ahora, como dije antes, este init se
llama desde main, así que esto es lo que haremos Ahora aquí tenemos que importar nuestro paquete de
dependencias uh, que está dentro del método init. Así que sigamos adelante e importémoslo, así que
aquí importamos ahora aquí el paquete. bueno, creo que está dentro de una carpeta auxiliar y el nombre de
la clase era uh, la dependencia es el nombre del archivo que estoy Lo siento, lo importaremos como departamento. ¿Tiene
sentido? Puedes nombrarlo como quieras. ahora aquí antes de comenzar a cargar su aplicación principal
o antes de comenzar a ejecutar la aplicación, intente para cargar sus dependencias aquí y esa es la
convención general, así que aquí debemos hacer un peso y haríamos dab dot init ok  y
así es como se cargan tus dependencias está bien antes de que la aplicación comience a ejecutarse,
pero para asegurarse de que las dependencias estén cargadas y espera, aquí dentro de flutter usamos
otra función que se llama we we jets El punto de enlace de aleteo garantiza que esté inicializado,
por lo que con este método aquí se inicializará.

Se asegurará de que sus dependencias estén cargadas correctamente
y esperará hasta que se carguen. Bien, sí. Así que ahora con esto ya hemos terminado con
esta sección, pero lo único que falta aquí es este modelo como dije si no seguimos
adelante y creamos un modelo Realmente no podemos obtener, quiero decir, podemos
obtener datos del servidor, pero no podremos.

Mostrar los datos en la interfaz de usuario ahora,
otra cosa que también debemos resolver aquí uh, si llegamos a nuestro repositorio ahora, este está
codificado, tiene que ser dinámico, está bien. o este enlace debe guardarse en otro lugar, así
que eso es lo que haremos a continuación. y luego tenemos que ir a nuestro punto final que es el lado
del servidor y tenemos que tener un método llamado una lista, está bien, esa lista devolvería los datos, así que
quedan dos cosas por hacer, dos cosas por hacer bien, la primera Lo siguiente que haremos es seguir adelante y construir
un modelo y una vez hecho esto, seguiremos adelante y Cree este punto final en el servidor y luego podremos
mostrar los datos dentro de nuestros controladores.

Y luego desde la interfaz de usuario simplemente
llamaremos a este método o este campo aquí Anteriormente en este tutorial les dije que
más adelante nos centraremos en Dart. y, de hecho, más adelante, la mayor parte de
la codificación se centraría en Dart, no en más plano de todos modos, así que antes de seguir adelante
y construir nuestros modelos tenemos que aclarar algunas conceptos sobre json y modelos y cómo están
conectados y también veremos qué es json anidado y cómo podemos construir un modelo, así que
nos centraremos en cómo trabajar con este pozo para Para trabajar con esto, tienes que venir aquí y
este es un ejemplo básico de json anidado aquí. por supuesto, solo un diagrama y lo guiaré muy rápidamente
ahora aquí en general, eh de Jason anidado o cualquier tipo de json primero tendrá llaves
y dentro de las llaves tendrá una clave y valorar este tipo de sección o parte como
aquí tengo estas dos llaves y eso hace es json y ahora dentro de json tenemos una clave y tenemos
un valor, está bien y aquí tengo otra clave, pero Dentro de esta clave, bueno, tengo aquí otro json
que puedes entender como esta sección bien, entonces ese es otro json, entonces json dentro de
json se llama json anidado y eso también significa que afuera tienes llaves y dentro tienes
otras llaves y dentro del interior llaves, tiene más valores de pares de claves para que sepamos
cuál es la primera condición para que se ejecute un formato.

Ser json tiene que tener una clave y un valor, así que tenemos
aquí, así que ese es el primer json y dentro de él También tenemos otra clave y valores entre
llaves, lo que la convierte en la otra Jason o el Jason anidado, está bien, por lo que en general
el nido adyacente se vería así fuera de las llaves. e internamente también tendrá llaves,
está bien, esa es la idea más básica. Esa es toda nuestra teoría. Ahora vendremos aquí
y aquí puedes escribirlo en dartpad.deb y Te llevará este tipo de página y aquí aclararemos
algunas ideas ahora definitivamente. Hemos visto lo que se llama nido adyacente pero
antes de continuar porque tenemos que aclarar otra idea que se llama mapa y más adelante veremos
cómo se conectan el mapa y los jsons y Veremos cómo se conectan los jsons y modelos de mapas. Está
bien, entonces todos están conectados, así que aquí veremos Aclararé parte de la idea sobre el mapa, así que seguiré
adelante y declararé una variable de mapa y llamaré.

Barra y lo llamaré mi mapa, está bien ahora en
dardo si declaras una variable y variables sección del cuerpo si tiene llaves, eso lo convierte en
un mapa, está bien ahora, tal como Jason que vimos aquí Aquí el mapa de valores clave también tiene un valor clave.
Está bien, eso es lo que vamos a hacer aquí. primero haremos el básico, haré el nombre
y te diría que ese es mi nombre y ahora aquí escribiría edad aquí escribiría
34 y aquí haría ciudad haría shanghai Está bien, está bien, entonces eso es lo que lo convirtió en
un mapa básico. Está bien, entonces cualquier cosa entre llaves. y dentro tienes esta clave y valor como json que
lo convierte en un mapa, por supuesto, en dart Hay otras formas diferentes de declarar el mapa ahora.
Para aquellos que entiendan, deben venir aquí. Este es otro artículo que creé. Hay algunas
formas diferentes en las que puedes crear. Un mapa como este es la primera forma que acabamos de hacer
y es la segunda forma en la que puedes tener la primera crea una instancia de mapa usando este constructor
y crea el caso y pone el valor directamente y está la otra tercera vía.

Bueno, aquí
mencionaste el tipo de clave y el valor. Entonces, en nuestro caso aquí estamos diciendo
que nuestras claves deben ser cadenas. y los valores son dinámicos, lo que significa que
podrían ser cadenas o serían números enteros o cualquier otro tipo está bien, eso es lo que lo
hace dinámico. Vendré aquí y básicamente en esta sección nos apegamos a este formato de mapa, pero
aquí en realidad acabamos de ver lo que vimos y aquí la idea básica es la misma porque aquí
tenemos esto: estas cosas se llaman claves y todos son cadenas, ahora el valor es una cadena
o un número entero, como puedes ver aquí. Así que aquí vemos que así es como declaramos un
mapa y creamos valores para ellos en un par dentro usando claves, está bien, ahora veremos cómo acceder a ellas.
Está bien, ahora aquí y, en general, irías y Te gusta mi mapa y si estás aquí, escribe el nombre de
tus claves como nombre, entonces el nombre es mi clave. Vengo aquí para ver el primero y presionaré Ejecutar
y veremos que imprime los valores, está bien.

Eso tiene sentido, así es como accedes a los
elementos dentro de un mapa usando las teclas. Bueno, hay otras formas diferentes, pero
aquí nos limitaremos a esta. Está bien. Ese es el mapa más básico, pero justo ahora vimos
un mapa que se parece más a Jason. ¿Qué vimos? por aquí, está bien, sí, entre llaves, clave y clave
y valor, clave y valor en este formato, ¿verdad? Entonces se podría decir que son parientes o primos.
Ahora veremos qué es un anidado. uh mapa está bien o mapa anidado o lo mismo aquí qué
es json anidado está bien ahora mientras estoy aquí Ya tengo este. Ahora crearé otro
campo y, por aquí, llamaría. di dirección, está bien, después de eso la
pondré así, pondré estos corchetes aquí Bueno, ahora para la dirección crearé un mapa
dentro de todo ahora aquí diré país.

Y aquí diría china, está bien y aquí
ciudad y aquí escribo decir shanghai Muy bien, ahora copiaré este
y pondré una coma aquí. Y lo repetiré una vez más. Aquí escribiré,
por ejemplo, Bangladesh y CD Daca. Vale, aquí este es un mapa, pero aunque esta sección
tiene un valor de par de claves, ¿verdad? Está bien, pero ¿qué es esto ahora aquí en dardo cada
vez que ves algo envuelto alrededor de este tipo? de llaves que se llama lista, entonces, ¿qué es lo que tenemos
aquí? Aquí tenemos una lista de mapas, así que esto es una lista de mapas, tenemos dos mapas, puedes tener
más mapas, está bien, eso es lo que vimos antes si Regrese a nuestro archivo json. Recuerde que aquí está
el formato json, pero la parte más sorprendente es este json y el mapa son bastante similares, sí,
diría que muchas veces 99 similares, sí. Sí, cuando entiendas qué es json, colocar
tu encabezado en el mapa será bastante fácil.

Bien, ahora aquí tengo esta clave y, aunque en este
caso, esta también es la clave, pero esta clave contiene una lista y una lista contiene un mapa, bien,
aquí tengo una lista de mapas, bien ahora para este. Más o menos cómo quieres acceder a este, pero aquí
hace un momento vimos que podíamos hacer mi mapa. y aquí puedo imprimir el nombre, ahora puedo
ejecutarlo y veré este, mi nombre aquí. imprímelo pero, por supuesto, si intentas hacer
este, mi mapa y veamos, veamos el resultado. Vale, entonces imprime lo que sea que esté dentro de esto.
Bien, sí, ahora hay otra forma de acceder a esto. No es así, solo quiero obtener un valor particular,
como el país del primer mapa.

Vale, solo quiero obtener el nombre
del país o de la ciudad. Lo que quieras, creo que escribiría aquí,
aunque está bien de todos modos. puedes, podemos hacer eso, pero cómo lo hacemos
ahora aquí. Lo escribiré aquí ahora lo sé. Puedo acceder a este directamente, así que lo que
haré será crear una nueva variable y la llamaré lista de direcciones y aquí lo haríamos, guardaremos
esta lista que proviene de nuestro mapa, la guardaremos en una nueva variable y lo llamaré mapa de direcciones.
Está bien, veamos, oh, ese es mi mapa, no. maymap está bien, entonces tomé esta lista, esta
lista definitivamente viene de aquí y eso es la clave de mapas, así que tomé la clave de mapas, una de
las claves y, curiosamente, esta clave contiene una lista En este momento, esta es una lista, así que si es una lista,
puedo acceder a ella.

Bien, acceda a las variables internas o Los elementos internos están bien, no las variables, los elementos
internos y cómo lo haría bien. Aquí haría la dirección. lista como lista, necesitamos convertirla en lista
y luego usaríamos 4h, está bien, y se necesita elementos y cada uno de los elementos lo llamaremos
v o podemos llamarlo e esta es la convención Bien, ahora aquí podemos hacer una impresión,
así que aquí hacemos el país. y ahora lo imprimiremos por aquí
a ver y a ver cómo va la cosa Muy bien, entonces el primer país es China,
el segundo país es Bangladesh. Entonces, cuando lo conviertas en una lista, cada
vez tomará uno de ellos y después de tomarlo. que intentará tomar la clave cualquiera
que hayas mencionado aquí y formar esa Imprimiría los valores, así que aquí podríamos hacer
ciudad y veremos resultados diferentes. Bien, tenemos Shanghai Daka, así que ahora
sabemos qué es el mapa anidado y entonces, que es bastante similar a nuestro json anidado,
bueno, ahora una vez más voy a volver a esto.

Uno una y otra vez porque en general estás
en tu aplicación en tu aplicación flutter tendrás tu json, este tipo de json en realidad
proviene del servidor y una vez que lo tomas de el servidor se parece a esto, así que en realidad
una vez que lo tomas del servidor Lo llamaría mapa en lugar de json aunque la
convención dice que es todo json, pero el formato que le proporciona la mayor parte del lado del
servidor cuando devuelve datos para la API Restful Los datos son prácticamente una respuesta json y
la mayoría de ellos tienen este tipo de formato. y veremos que la API Restful que vamos a construir
y usar también devuelve este tipo de json y que es bastante similar a map y si es similar
a map podemos hacer esto muchas veces cosas porque se convierte en un mapa, está bien, esa
es la idea básica sobre el mapa y el mapa anidado. mapa y json anidado. Bueno, ahora cómo seguir adelante
y crear un modelo para este, eso es lo que veremos.

Ahora está bien, ahora seguiremos adelante y construiremos un modelo ahora. ¿Por
qué deberías construir bien un modelo una vez que lo hayas construido? un modelo hay toneladas de beneficios bueno,
realmente no quieres trabajar en tu plano proyecto o aplicación usando el mapa y acceda a ellos de esta
manera, como lo hicimos antes, por ejemplo, mi mapa nombre como este, está bien, no querrás hacer
eso porque a medida que tu proyecto crezca sería Es difícil de mantener, especialmente el tema del
nombre, si quieres cambiarlo, es muy difícil porque Tienes que nombrar muchos lugares, pero una vez que
creas un modelo, simplemente cambias en un lugar y Eso te hace la vida más fácil, está bien y hay muchos
otros beneficios y esta también es una buena práctica.

Así que te recomiendo encarecidamente que siempre que tengas un
archivo json o un mapa en tu aplicación uh flutter y si vas a para hacer algo, construir una clase o realizar alguna operación
en ellos, así que intenta construir un modelo basado en tu mapa. y le hará la vida mucho más fácil y la idea de la clase de
modelo de construcción de modelos es la misma en todo momento. otros marcos o lenguajes están bien, así que una vez
que domines cómo construir un modelo basado en un mapa, Verás que cuando intentas aprender otro idioma, se
vuelve bastante fácil.

Vale, la idea siempre es Lo mismo, tal como vimos que json y map son similares,
por lo que todas las ideas son transferibles. Está bien, de todos modos, para construir un modelo primero crearemos
una clase aquí y declararé el nombre de la clase. persona ahora por qué estoy haciendo eso porque aquí
en este mapa tengo la información de la persona, ¿vale? Por eso, pero puedes nombrarlo como quieras, aquí primero
seguiré adelante y escribiré el nombre de la cadena. h y string city bien por ahora no voy a poner
este lo haremos más tarde por ahora estoy voy a cortarlo, sácalo, bueno, ahora aquí verás,
esta es una clase pequeña donde tengo esto Los miembros y los nombres de los miembros son los mismos
que las claves en mi mapa, así que en general cuando construyes un modelo y debes tener campos y esos
campos deben relacionarse con tu archivo json o mapear los nombres de las claves, entonces estos son
los nombres de las claves, por eso debes hacerlo ahora.

Es un mapa pequeño y para el mapa pequeño construimos
una clase pequeña que es un modelo, por supuesto. todavía tenemos constructor, así que seguiremos adelante
y haremos constructor aquí, haremos persona este nombre de punto y este punto h y este punto
ciudad, está bien, ahora se convierte en un Clase bastante completa aquí basada en este mapa, por
lo que también decimos que este es un modelo, ¿vale? Ahora, para un mapa tan simple, tenemos un modelo
simple. Vale, todos los campos de aquí están aquí. Ahora eche un vistazo, tenemos este, entonces,
¿qué nos dice? Ahora nos dice que esto es. otro mapa justo mientras se repiten
pero el formato es el mismo entonces dentro de este valor dentro de esta clave dentro
de esta clave hay otro mapa, está bien, para que significa que aquí tenemos que seguir adelante y declarar un
mapa, no una cadena o un final, tenemos algo más como algo eso está basado en este mapa en realidad no declarar
un mapa basado en este mapa ahora que vimos antes que obtenemos esto para esto ahora mismo, eso también
significa que para esta sección construimos un modelo Bien, aquí dentro de esta sección tenemos que construir
otro modelo.

Ahora tendremos dos modelos. Eso nos dice que hay una lista de modelos aquí,
lo que significa que para esta sección tengo para crear un modelo y para el campo relacionado dentro de
este modelo tengo que crear una lista en esa lista Pondré bien estos modelos porque es una lista de mapas
de cada mapa que hacemos un modelo, así que aquí A partir de la lista de mapas creamos una lista de modelos.
Está bien, entonces las ideas son bastante similares.

Muy bien, ahora aquí, lo que haré. Seguiré adelante
y copiaré este primero y lo pondré. está aquí y la llamaré dirección. Vale, sí, ahora, aquí
solo piensa en esta dirección como un mapa independiente. ahora son dos campos, país y ciudad, está bien, así
que aquí haría país y bueno, ya tenemos ciudad. así que simplemente lo pondremos allí. Ahora, todo
lo que tenemos que hacer es eliminar este. y aquí tenemos que escribir país, está bien,
recuerda, deberían ser similares, ¿vale? ahora aquí en lugar de persona escribiríamos
dirección, ¿vale? Bien, ahora tengo un mapa grande y para ese mapa tenemos
un modelo, pero, por supuesto, este modelo no es completo dentro de ese mapa tenemos otro mapa
y para ese mapa construimos otro modelo Ahora, debido a que este es un mapa grande, tiene otro
mapa, así que dentro de este modelo crearemos un lista de modelos, está bien, eso es lo que vamos
a hacer, por eso aquí escribiremos la lista dirección y aquí llamamos dirección,
está bien, ojalá tenga sentido Ahora, una vez que hagas esto aquí, también
tendrás que hacer algunos cambios.

Esta dirección y sí, estamos listos, eso es todo, así
es como se crean modelos a partir de un mapa anidado. o desde json anidado creas un modelo donde hay modelos anidados,
por lo que este es un modelo en lugar de este. tenemos otro modelo y ese es un modelo anidado, está
bien, ahora antes de continuar y terminar esto. sección tenemos que construir otra tenemos que
aprender otro concepto importante mucho tiempo dentro de ti, en esta clase tendrás otro método
que se llama desde el método json, este es el convención, pero creo que puedes llamarlo como quieras.
Ahora se necesitan parámetros para que el El tipo de parámetro es mapa y sabemos que el mapa se
parece más a una cadena y a un tipo dinámico. Así que la mayoría de las veces, cuando sigues adelante y construyes
un modelo, dentro de este modelo, modelo significa clase. Bien, dentro de esta clase tendrás un
método y ese método se llama json.

Entonces, ¿qué haces realmente con base en este método?
En realidad, creas el objeto bien una vez que crear objeto si sabes, di que creo un objeto a partir
de una persona, por lo que el nombre del objeto es Persona ahora podré usar una persona para acceder
a los campos que tiene, como por ejemplo la edad. o un nombre así, por supuesto, aquí no podemos.
De todos modos, hay otros pasos que seguir. entonces este método toma un parámetro
y ese parámetro es un mapa, está bien y El mapa es una cadena y es dinámico.

Antes aprendimos
que el mapa podría ser una cadena. la clave podría ser una cadena y el valor podría ser
dinámico. Bueno, eso es lo que aprendimos al principio. y esto es lo que estamos haciendo ahora de todos modos,
así que aquí estamos, qué significa que en algún lugar de mi aplicación llamaré a esta
función o llamaré a este método y luego Tengo que dárselo a un mapa, así que tengo que dárselo
a un mapa como este. Está bien, y una vez que le doy el mapa, los valores se almacenarían en json aquí
para que pueda usar este valor esta variable para recuperar esos valores e inicializarlos aquí
en este campo, está bien y en base a eso podemos crear un objeto, está bien, ojalá tenga sentido,
por eso él vendría aquí y aquí lo hacemos uh, Jason, ahora Jason debería tener el
nombre como un campo dentro y luego aquí. haces h y json una vez más. Recuerda lo que estamos
intentando para que este tenga acceso al mapa. dale a tu método de Jason uh, está bien,
como dije antes, enviará algo como esto a esto aquí, lo que significa que esto se completa y
debe usarlo aquí para crear y asignar el valor a este campo y crear objeto así que aquí estamos ahora
y aquí tenemos esta ciudad y hacemos json city Ahora bien, la siguiente parte es bastante interesante.

Aquí
verá que tenemos una lista a la derecha y esta lista. toma un modelo, así que cómo trabajar con este,
pero sabemos que esta es una lista, ¿vale? ahora aquí dice que podría ser nulo, así que podemos
seguir adelante y verificar si es nulo o no si es no, no haremos nada si no es nulo, lo que haremos,
seguiremos adelante y trabajaremos en esto. así que si no es nulo así, está bien, entonces aquí hago
la dirección ahora aquí hacemos la dirección y uh escribiremos esta declaración que significa
crear una lista, está bien, crear una lista y eso es uh dirección vacía está bien, entonces aquí estamos
creando una lista, pero como ves aquí eso significa vacío y lo asignamos a este, por supuesto, este es
este, está bien, pero al mismo tiempo este es significa lista vacía, correcto y el tipo es dirección,
está bien porque la lista tiene un tipo que podría tener tipo, lo sabemos, está bien, por eso estamos
inicializando esta lista vacía en esta, ¿vale? Ojalá tenga sentido ahora.

Esta es una lista
aquí, así que esta es una lista, ¿vale? ahora mismo sabemos que nuestra dirección esta sección
también es una lista porque recuerda que este apunta a esta sección y al comienzo de esta sección
anterior aprendimos que esta es una lista lista de mapas está bien, entonces esta es una lista ahora aquí
lo que podríamos hacer, podríamos usar esta, lo siento Aquí podríamos usar este y luego cada
lista tiene un método que se llama forraje.

Está bien, eso es lo que vamos a hacer, aquí
hacemos 4 horas o tal vez podría tener un error que es una cuestión de seguridad nula, entonces, lo
que podríamos hacer, podríamos venir aquí y lo hacemos. Este es una lista, como vimos antes y luego
podemos acceder a cada método. Ahora, si hacemos eso, puedes acceder a ellos
uno por uno usando cualquier variable que desees. y luego pondremos las llaves y luego estamos
aquí, bien, ¿qué está pasando aquí? a pesar de que es una lista, la forzamos a que sea una lista pura
o la lista en realidad, si a la suciedad le gusta, está bien. así que lo estamos transmitiendo asegurándonos porque, después de todo,
esto proviene de un mapa o un archivo json, está bien, así fue. no es puramente una lista, así que lo transmití a una pura lista.
Bueno, ahora después de eso, esta e porque es un bucle. este bucle se ejecutaría aquí dos veces, por
lo que la primera e se referiría a este La segunda e se referiría a este.

Vale, recuerda
que este es un mapa que aprendimos para el mapa. Podemos crear un modelo y ya lo hicimos,
está bien, ahora mismo, como dije antes. Pasaremos este valor y crearemos un objeto. Bueno,
ahora, por supuesto, podremos usar este. por aquí uh nosotros nosotros necesitamos crear
otro método aquí y el método es una vez más Más o menos como este, está bien, entonces, lo
que haré será seguir adelante y copiar este.

Y lo pondré aquí. Simplemente cambiaré el nombre de
la persona a la dirección ahora aquí no lo hacemos. Necesitamos esta sección porque no tenemos para
esta sección, no tenemos ningún mapa anidado o json, está bien, ahora eliminaré esto y listo,
aquí debemos escribir el país. Entonces, ¿qué tenemos aquí? Aquí podemos simplemente
pasar un mapa y basarnos en ese mapa. podemos crear un objeto correctamente, por lo que este es un método,
lo que también significa que podemos llamar a este método desde en otro lugar de otras clases, está bien, eso
es lo que vamos a hacer ahora, recuerda Esta sección en realidad es más o menos igual que esta,
la única diferencia es que tiene una lista anidada. que no tiene, tiene una lista anidada porque
de todos modos tiene un mapa anidado Así que ahora vendremos aquí. Lo que podrías hacer, llamaremos
a este método. Está bien, así que aquí lo hacemos. agregar dirección recuerde que esta es la lista vacía,
así que podemos poner cosas dentro de ella y Vamos a crear objetos y colocarlos dentro
de esta lista.

Bien, aquí lo hacemos. dirección punto de json bien, ahora todo
lo que tenemos que hacer es pasar este, bien así que pasa e bien y eso es todo,
veamos que tenemos un error. Así que aquí puedes decir que no es nulo. Sí,
hablaré del error un poco más tarde. ahora echemos un vistazo a este, así que aquí estoy
mirando esta dirección, esta lista aquí y cada vez que miro tengo acceso
a este: este es un mapa ahora estoy pasando este mapa a este método
y procesa la información y me obtiene me consigue un objeto y lo pongo en esta lista, está
bien y el tipo de objeto es lista porque dijimos Lo siento, el tipo de objeto es dirección, está bien, así
que los pondremos todos en una lista, así que con suerte. Tiene sentido, ahora podemos seguir adelante y crear un
objeto basado en este modelo. Bien, volveremos atrás. y veré cómo crear objetos basados ​​en estos
modelos. Está bien, así que aquí primero adelante y crea una nueva variable, la llamaré
var y la llamaré obj y aquí llamaría persona punto de Jason, vale, ahora recuerda que antes vimos
que deberíamos pasarle un mapa a Jason, vale.

Y ya tenemos un json aquí y cuál es nuestro
json entonces nuestro json es mi mapa, ¿vale? o mapear, sí, eso es todo lo que se necesita,
así que ahora acabamos de crear un objeto. usando nuestra clase o modelo y lo proporcionamos
a un mapa o un json como este, ¿vale? Ahora, curiosamente, podría hacer muchas cosas interesantes
con eso. Podría hacer VJ Dot Name. Está bien y me imprimirá el nombre aquí.
Lo hizo y podría hacer la edad bien. imprime la h por mí, también podría hacer la dirección,
está bien y, por supuesto, aquí imprimirá esta porque aquí estamos creando un objeto y llamando a este método,
así que en esta lista esta es la lista que estoy llamando aquí que se relaciona con este, por lo que
ahora se almacena debido a este dentro de esta lista Aquí almacena la instancia una vez que se crean los objetos.
Está bien, por supuesto, podemos acceder a eso.

Ahora, para poder acceder a él aquí, debemos
hacer obj en el mapa, vale, mapa, mapa. Bueno, lo siento, no es así. Primero creemos
una nueva variable y la llamaremos. mi dirección y aquí hacemos la dirección de punto obj,
así que ahora solo estoy tomando esta parte de aquí Quiero acceder a cada uno de los elementos que contiene
y para ese haría mi mapa de puntos de dirección. veamos, vale, ahora aquí puedo crear un instante
y puedo acceder a cada uno de ellos. entonces esta e se referiría a cada uno de ellos como
un verificador nulo, asegúrese de que no sea nulo Bien, ahora aquí podría imprimir e punto,
ya que verás que estos campos ya están ahí. debido a que es un objeto, ya no es un json,
está bien, una vez que lo hayas hecho objeto y usas el operador de punto, ves los campos inmediatamente,
está bien, espero que tenga sentido Muy bien, veamos.

Ahora tenemos que convertirlo
en una lista porque el mapa no es una lista. así que ahora veremos por aquí veamos ahora e país ¿estamos
cometiendo algún error por aquí? Oh, lo siento, lo etiqueté mal aquí. Necesito tomar
el país para que no pueda encontrarlo. De todos modos, ahora vendremos aquí y veremos
los nombres de los países. ¿Están ahí? También así es como construyes una clase o un modelo basado
en tu mapa o json, está bien, y así es como creas Modelos u objetos anidados basados ​​en tu mapa anidado.
Bueno, espero que ahora tenga sentido, como ves. aquí tenía este y en base a esto tuve que crear
este modelo y este modelo está bien, bueno En realidad, hay mucho escrito en la aplicación Flutter cuando
vas a desarrollar incluso una aplicación pequeña. Tendrás muchos modelos y para cada modelo tendrás
que escribirlos manualmente, lo cual es doloroso. Afortunadamente, hay una herramienta que puedes
usar. Aquí te recomendaré esta herramienta. aquí puedes usar esta herramienta, creo que es muy
útil, todo lo que necesitas hacer es tomar tu mapear y dárselo, recuerda aunque dice json, pero
sabemos que aprendimos temprano que esto No hay nada más que adyacente, está bien, así que tómalo
y ponlo.

Lo siento, ponlo aquí, en realidad no aquí. Y luego puedes nombrarlo como quieras. Lo llamaré
persona y generaré un dardo para ti. Verás, este es un modelo que creó aquí para nosotros,
está bien, y también creó el modelo interno que La dirección está bien, así que es algo hermoso
y es una herramienta muy útil, pero sugeriría primero Continúe y hágalo algunas veces por su cuenta escribiendo
porque así comprenderá mucho mejor. ¿Qué es el mapa? ¿Qué es json y qué es la clase?
y cómo inicializar cosas dentro de ellos. Está bien, entonces puedes usar este. Está
bien, eso es mucha charla y mucha comprensión. Espero que lo hayas entendido bien. A continuación veremos
cómo podemos usar nuestro archivo json desde el servidor.

Y crear modelos y luego usaremos ese en
nuestra aplicación aquí, ¿vale? recuerda que aquí estamos esperando para usar
un modelo y a partir de ese modelo crearemos objetos y guárdelos dentro de este,
está bien ahora, por supuesto. aquí, como dije, para nuestra aplicación también tenemos
un punto final, así que este es nuestro punto final, así que Este es popular, así que lo que haremos será seguir adelante
y copiar este. Creo que en realidad está copiado.

Aquí ya tiene la misma URL y es una solicitud de
obtención. Ahora lo siento, soy un cartero. herramienta que debe utilizar, es muy conveniente para
que las solicitudes de publicaciones se eliminen Hay muchos otros aquí cuando haces una publicación
o recibes solicitudes, obtienes una respuesta. la mayoría de las veces la respuesta es tipo json, está
bien, ahora podemos presionarlo una vez más y Veremos que estos son los datos que obtuvimos de
nuestro servidor y estos datos son exactamente los El mismo formato que este que vimos antes. Vale,
por supuesto. Aquí hay muchos datos, pero. Puedes ver que tiene llaves, luego algunos
rellenos dentro y luego estas llaves y Hay mucha otra información dentro, está bien,
como esta de aquí, entre llaves, um esta. Creo que la tercera llave y la segunda llave están
bien, ahora vimos que las escribimos manualmente. creamos nuestro manual de clase pero esta vez no
queremos porque ya tenemos el archivo json aquí o el mapa sin importar cómo lo entiendas, así
que todo lo que pudimos hacer fue tomar este y Cópialo y pasaremos aquí a este
y lo pondré ahí mismo, ¿vale? y luego crearé un nuevo uh bueno, limitaré algo nuevo porque vamos
a mostrar nuestros productos en nuestro aplicación flutter, así que la llamaré aquí producto
producto, todo está bien, ahora creará una nueva modelo para nosotros y que ya funcionó bien aquí,
ahora imaginamos que hay todas estas cosas vas a crear por tu cuenta para escribir manualmente,
puedes crear errores, ¿vale? puede tener errores, por lo que le recomiendo encarecidamente
que lo utilice, pero primero debe familiarizarse con este archivo json y modelo y practícalo
más y luego regresa aquí, está bien.

Bien, copiaré este y ahora volveré
a nuestro proyecto Flutter aquí. y dentro de ella crearé una nueva carpeta dentro
del directorio lib y ahora aquí la llamaré modelos bien, ahora en este directorio tendremos
nuestro primer modelo, así que lo llamaré producto uh modelo de productos o en realidad
lo llamaré modelo de productos populares En realidad, todos los productos usarán el mismo,
por lo que son productos populares y recomendados. productos, todos usarán el mismo modelo de
producto. Ahora aquí pondré todo aquí y para ese lo copiaré, vendré aquí y
los copiaré después lo pondré aquí Está bien y aunque aquí hay otro método para Jason,
lo donamos ahora y lo eliminaremos en el futuro. Si lo necesitas, generaremos otro más adelante
y ahora también eliminaré este. y está bien, ahora esto es exactamente lo mismo que la persona
y la dirección así, está bien, entonces esto es más como la persona que creamos temprano lo siento, sí, creamos
temprano y esta es exactamente igual que la clase de dirección que creamos anteriormente pero, por supuesto,
esta vez tiene más información, no como esa solo dos campos, está bien, ahora lo que haré lo
revisaré rápidamente y lo explicaré un poco.

De las cosas y cámbialas, bueno, lo primero
que haces aquí es ver los nombres que son. no es del todo correcto, así que seguiré adelante
y cambiaré el nombre aquí en lugar de productos. Llámalo modelo de producto, está bien porque cambio el
nombre y también tengo que nombrarlo en este constructor. y para esta clase también y ahora aquí
también tendré que cambiar esta y aquí es lo mismo y aquí es lo mismo y puedo
eliminar la nueva palabra clave, no lo es necesario y haríamos algunos cambios, pero en general
estos serían los campos privados y para En los campos privados usamos guión bajo, así que seguiré
adelante y etiquetaré guión bajo para cada uno de ellos.

Ahora diré que esto se inicializará más tarde
en lugar de ser nulo, por lo que ahora le estoy diciendo al compilador que
esta lista se inicializará más tarde Bien y ahora aquí también necesitamos hacer
algunos cambios aquí en lugar de esto lo escribiré aquí requerido Vale, ahora eliminaré el contenido
de aquí y lo pondré allí. quitar por aquí ponerlo allí y quitar por aquí Muy bien, ahora necesito cambiar el tipo a privado
porque quiero que todos mis campos sean privado a menos que los especifique de otra manera, ahora
los errores han desaparecido, especialmente este Bien, ahora puedes preguntar por qué estoy haciendo
esto. Bueno, eso es porque quiero crear algunos. uh campos públicos ahora todos estos son privados bien
ahora quiero crear un nuevo campo y uh bien También necesito hacerlo privado aquí.

Está bien,
entonces necesito cambiarlo aquí también y cámbielo aquí también, está bien, y ahora por aquí,
haría este tamaño total de puntos igual al tamaño total Por supuesto, no necesitamos este guión bajo, así
que pasaré estos tres valores del mapa por aquí y que los valores correspondientes como este se asignarán
a este, está bien, así es como estamos Funcionará porque en Dart puedes inicializar el constructor
de muchas maneras diferentes hace un momento. no teníamos este, así que había un tipo de
inicialización, pero como voy a crear campos públicos, por lo que separaría los campos
públicos y los campos privados usando nombres diferentes de todos modos, ahora aquí escribiría
id igual al tipo id este punto compensado igual compensar ahora aquí este producto punto Está bien, entonces lo que haré, seguiré adelante
y crearé un objeto y mientras creo un objeto. aquí los valores se pasarían bien, recuerda
que mientras que aquí también crea un objeto pero, como lo hace, en realidad
está conectado a este de aquí, ¿vale? entonces están conectados internamente
porque este es el constructor Cuando creamos un objeto primero tenemos que pasar
valor a nuestro constructor y luego desde allí.

Podría usar este y este también.
Bien, ahora voy a crear un campo público privado y lo llamaré modelo de producto
de lista y aquí el nombre del campo público es productos y aquí tenemos que usar una propiedad,
una palabra clave realmente llamada get eso pertenece a dart aquí quiero obtener toda esta
lista aquí los objetos que están guardados en esta lista y puedo obtenerlo a través de esta
y este es un campo, así que si vienes de En otro lenguaje de programación verás que hay
getter y setter, así que este es el getter. pero la única diferencia es que no toman ningún método,
solo toman un campo, así que la mayoría de las veces quieres usar la función de flecha así, está
bien, puedes escribir como un método, pero Esta es una convención, por lo que si tiene un
captador o si tiene una variable pública, sería se accede desde fuera de esta clase, entonces antes
de esa variable puedes usar get ok, así que ahora fuera de esta clase si llamo productos eso significa
que obtendré toda la lista por aquí desde aquí está bien, entonces con esto,
este es el primer cambio que hicimos y Lo repasaremos rápidamente aquí.

También
tengo de Jason, tal como practicamos. antes ahora aquí una vez que pasamos el mapa para
que el mapa les asigne el valor correspondiente Bien, ahora, a medida que revisa los valores uno
por uno, llegará a los productos de aquí. Ahora los productos tienen una lista de mapas, como vimos anteriormente
aquí, por lo que el producto tiene una lista de mapas. Por aquí, primero estamos inicializando
esta lista de productos, que es esta.

Para vaciar la matriz, la lista vacía está
bien y luego, lo que tengamos aquí, lo revisamos usando la función forraje y lo agregamos a la lista.
Recuerde que esta es una lista, pero es una lista. una lista privada pertenece a esta clase ahora usamos un modelo
de producto, está bien desde json, pasamos cada elemento parcheamos, pasamos cada uno de ellos así dentro de
estas llaves, supongo que lo siento, es un poco molesto hasta aquí así pasamos cada uno de
ellos y luego por aquí este se enfría y a medida que se enfría, crea y devuelve un objeto. De hecho,
está bien, por lo que ese objeto se devuelve aquí. y luego se guarda en esta lista. Ahora recorre
toda la lista que tiene dentro. esto está bien, en nuestro caso tenemos seis elementos porque
ves que el tamaño total es seis, así que tenemos seis mapa dentro de ellos, así que este bucle se ejecuta
seis veces y luego todo se guarda aquí y después de eso podemos acceder a la lista de objetos
usando este desde fuera de esta clase, ¿vale? Ahora bien, hemos terminado con la construcción del modelo,
está bien y las clases del modelo, cosas así.

Así que ahora iremos a nuestro controlador
y aquí agregaremos este. Vale, recuerda. primero tenemos que llamar a este um lo siento, tenemos
que llamar a este para que llamemos a este le pasamos un mapa. Bien, ahora tenemos que pasarle
un mapa, pero tenemos este objeto de respuesta. Recuerde que el objeto de respuesta tiene un cuerpo,
así que copiaré este y lo pondré aquí. Está bien, entonces el objeto de respuesta tiene un cuerpo que ves, sí. pero, por supuesto, no podemos simplemente
pasarle el cuerpo a este uh en absoluto uh iterable que mantiene una gran cantidad
de listas dentro, no podemos hacer eso, tenemos que conviértalo en una lista de objetos usando este método de modelo,
este está bien, así que aquí lo llamaremos productos productos, veamos los productos
de Jason y pasaremos este, ¿vale? se necesita una lista de objetos, así que recuerda
que aquí tenemos uh aquí Podemos acceder a este usando este aquí,
así que podemos simplemente llamarlo.

Así que aquí hacemos productos, ahora devolverá
una lista de objetos, está bien y así es como funciona y con esto básicamente hemos terminado
con nuestro primer método exitoso para obtener la lista de productos del servidor,
está bien, aquí estamos obteniendo cada información usando cartero pero ahora veremos cómo
obtenemos esta información dentro de nuestra aplicación Bueno, ahora seguiré adelante y primero iniciaré
un simulador que ya tengo y vendré. por aquí y me aseguraré de que todo esté bien.
Ahora tenemos un pequeño aviso, veamos. Está bien, por ahora nos saltaremos esta advertencia
y seguiremos adelante y veremos. si funciona, si funciona o no, porque es
solo una advertencia, está bien, entonces ahora tenemos que asegurarnos de que este método se enfría y la información se actualiza
aquí, lo que significa que la información del servidor se guarda aquí, está bien, ahora cómo hacerlo.
Recuerde que estamos en Flutter Organics, así que Este es un método de controlador, por lo que todos nuestros
controladores se inicializan aquí como es popular.

Repositorio de productos y controlador de productos de
hélice, al usar este, todos se inicializan, me refiero al controlador por lo que necesitamos encontrar este controlador
y después de encontrar el controlador podemos llamar este método por ahora para fines de prueba,
vendré aquí en el método principal y por aquí intentaré llamarlo, está
bien, así que aquí llamaría obtener punto buscar y aquí haría producto
producto popular en realidad controlador de producto popular y luego lo obtendremos,
podemos acceder al método, está bien, así que en flutter get ex si quieres encontrar un controlador
en general, usarás esta sección y el controlador si tiene algún campo o método al que
desea acceder, simplemente llámelo, está bien Ahora primero seguiremos adelante y lo ejecutaremos para asegurarnos de que se inicializó y creó, sí,
lo hizo, aquí dice que repositorio de productos y controlador de productos, pero
bueno, ahora no vemos ninguna información aquí, haremos Asegúrese de que se inicialice, así que intentaremos
venir aquí dentro de esto, aquí imprimimos.

Tengo productos bien ahora. Lo
actualizaremos y veremos. así que lo llamaremos una vez más. Vale, ahora parece
que no funcionó. Bien, entonces no entró. Este método es correcto, ¿por qué podemos seguir adelante y
mirar nuestro cliente API aquí? Ahora se necesita el momento. primero se inicializa y obtiene la URL base ahora mismo,
en realidad estamos pasando la URL base desde aquí Bien, esa parte es correcta ahora
si vemos el método get aquí. El método get toma uri ahora veamos dónde
está este método get llamado getdata Bueno, se llama desde aquí, pero ahora aquí
en realidad porque estamos usando getx. y este getdata llama internamente o veamos llama
a esta función get pero esta función get proviene de get x.

Ahora esta función get en
sí misma no quiere recordar el uri completo. no quiere la uri completa, solo quiere el
punto final, vale, eso es todo lo que quiere porque recuerde que cuando inicializamos este cliente
API por primera vez ya estamos pasando el URL base, así que aquí todo lo que tenemos que hacer es pasar
el punto final, así que en nuestro caso veamos La URL base es ésta, así que todo lo
que tenemos que hacer es pasarla.

Esta sección está bien, así que cortaré esta
por aquí, está bien y pasaré a esto. Veamos, entonces, en realidad eliminaré ese. Me quedaré
con este y me dejaré ver nuestro cliente API. y dependencias, así que creo que
podemos poner una barra aquí Está bien, o podemos poner una barra, ya tenemos una barra, así que
en realidad no necesitamos poner una barra en ningún lado. así que ahora se ha proporcionado la
URL base en la inicialización y cuando llamamos a getdata simplemente estamos pasando el punto
final, por lo que este es el punto final de aquí, así que en el método get aquí, primero
encontrará la URL base y luego Este uri se conectarán y luego obtendrán
los datos.

Ahora reiniciemos una vez más. Bien, y esta vez vemos que podemos imprimir
este, lo que también significa que tiene datos dentro, está bien, debería haber datos,
está bien, ahora, ¿qué podríamos hacer? venga aquí y simplemente imprimiremos aquí
imprimiremos la lista de productos populares Está bien, sí, aquí parece que se está
imprimiendo el modelo del producto y el La información relacionada está bien, eso significa
que podemos obtener los datos con éxito. y después de obtener los datos, podemos guardarlos
dentro de esto y podemos imprimir en ellos. Bueno, ese es un muy buen avance. Ahora tenemos
que seguir adelante y analizar este producto. modelo, a lo que me refiero con uh, necesitamos recuperarlos.
Bueno, ya está en la aplicación, pero necesitamos para encontrar un lugar donde realmente sigamos adelante
y los usemos definitivamente los vamos a usar en nuestra página de productos populares porque la página
de alimentos populares porque anteriormente hemos creado esta dos interfaces de usuario para un producto popular y un producto
recomendado, pero ahora estamos obteniendo el producto Información para productos populares, por lo que debemos mostrar
esta información en la interfaz de usuario del producto popular.

Página, así como las imágenes, ahora mismo,
antes de continuar y hacer eso, debemos uh, reestructura algunas de las cosas y reorganízalas
bien ahora, por ejemplo, aquí esta URL base, ¿vale? En realidad no debería estar aquí, así que queremos
guardarlo en otro lugar y usarlo aquí. llámalo directamente, está bien, entonces esta es una constante para
nuestra aplicación, por lo que la URL base siempre es una constante Ahora, por aquí, si llegamos al repositorio de productos
populares, esto también es una constante, pero esto es una constante para los derechos de producto populares
y si acudimos a nuestro cliente API aquí vemos que debería tener un token, pero por ahora estamos pasando
un token vacío, así que todas estas cosas deberíamos organizar y deberíamos ponerlos en un archivo separado
y para ese crearemos un nuevo archivo, ¿vale? ahora aquí dentro de la carpeta utils ya tenemos
colores y dimensiones, ahora crearé Otra carpeta nueva y lo siento por el nuevo archivo.
Aquí lo llamaré constantes de aplicación.

Dot dart, así que aquí pondré todas las constantes para nuestra
aplicación y crearemos una nueva clase para esto. y llamaremos a las constantes de la aplicación de clase, está
bien, y eso es tan simple como eso ahora aquí. Podemos definir algunas variables primero, una de
ellas haremos una cadena constante estática. ahora aquí definiremos una variable que es
el nombre de la aplicación y aquí fname es dv comida que significa la mejor comida wow
si me sigues y en el futuro quieres Para cambiar el nombre de la aplicación, simplemente póngale un nombre
aquí pero, por supuesto, debemos guardarlo en algún lugar.

Necesitamos usarlo en algún lugar, lo haremos,
pero en tu caso necesitas cambiar el nombre. aquí con el nombre que quieras y luego aquí tendremos la
constante estática y la versión de la aplicación. Por ahora es solo uno y luego haremos
una constante estática. URL base de cadena, así que aquí escribiremos https mvs dot mi nombre de dominio no estoy usando la mejor etiqueta,
en este caso la estoy tomando de mi servidor de prueba y esta es la URL base y luego tendremos
otras dos URL por ahora y hacemos cadena constante ahora aquí popular producto que estás aquí, este es el punto final. Nuestro
punto final son los productos API v1 y Aquí es popular, está bien, está
bien y crearemos otro punto final. y simplemente copiaré este y
aquí lo llamaré recomendar Uri del producto muerto y por aquí lo cambiaré. Recomendado, está bien, así que
tenemos estas cosas, veamos. Tampoco te preocupes por eso, solo es una cuestión
de convención, pero en general las constantes son en letras mayúsculas, pero Android Studio podría tener
una convención diferente.

Bueno, ahora tenemos que ir a esos archivos y cámbielos, está bien, ahora aquí
en lugar de uh uh, déjame seguir adelante y Cambie aquí primero, por lo que no desea enviar
esta aplicación que desea enviar. tab constantes.baseurl está bien y necesitamos importar
la biblioteca de archivos, así es como funciona Muy bien, solo tienes un método de obtención y
cada vez que quieras obtener un método diferente. Mismo método de obtención pero uri diferente,
simplemente pásalo y llegarías a qué más. A ver, sabes que las dependencias aquí pasarán la URL base,
por lo que la aplicación contiene puntos base.

Creo que aquí no deberíamos pasar el uri
base, debería ser el uri de producto popular. Está bien, porque estamos pasando el uri base por aquí.
Está bien, está bien, ahora, um, si creo. Necesitamos crear otra constante y eso es para alimentar un
token, por lo que el token de cadena constante está bien. Sería un token aleatorio en este momento, así que simplemente
lo llamaremos token db. En tu caso, puedes tenerlo. cualquier cosa que quieras, pero más adelante
generaremos el token en el servidor.

Uno y esto sería reemplazado por ese token ahora cliente
api aquí, así que vendríamos aquí y Por ahora solo diremos enviar constantes de aplicación. El token está bien, pero en el futuro todavía tendremos
que cambiarlo, pero por ahora está bien. Muy bien, con esto ahora, todas las constantes están prácticamente
guardadas aquí, así que si necesitas cambia algo, simplemente cambia aquí, no tienes que
revisar los otros archivos, está bien, está bien Bueno, después de esto, ahora es el momento de mostrar los datos
obtenidos de la red, es hora de mostrarlos en nuestro página principal, está bien, entonces iremos a nuestra página principal
y mientras ahora la página principal debería ser el punto de entrada estar en el archivo main.dart pero definitivamente no en este, así
que recuerdo que nuestra página principal es um, veamos dónde Ok, comida, cuerpo de la página de comida, aquí es
donde mostramos todo, así que esta es la página que Quiero llamar primero, así que copiaré este
aquí, lo cerraré y luego pasaré a página principal de comida y la pondré allí,
está bien, importemos la biblioteca, ¿vale? Esto sucederá cuando cargues el anuncio por primera vez en la aplicación,
por lo que llamará al método y recordará estos métodos.

Realiza una solicitud de obtención al servidor y, si
obtiene los datos, los guarda dentro de esta lista Está bien, cuando esta llamada haya finalizado y se
hayan devuelto los datos, se guardará todo en este lista aquí, está bien de todos modos, así que descomentaré
que por ahora mantendré esta de todos modos, así que ahora se cargarían los datos y si los datos están cargados,
sabemos que mientras podemos usar este u otras formas de acceder a esta lista y trabajar con
ellos, está bien, así que vendremos aquí ahora aquí veamos qué tenemos, así que tenemos
una sección de control deslizante de contenedor y los puntos y otro contenedor y el creador de vistas
de lista para alimentos, así que lo ampliaré ahora Estas son las secciones comunes que tenemos ahora porque en la aplicación
principal veamos dónde está nuestro archivo main.dart.

Por aquí, así que ya cambiamos la ruta de inicio, así que
si reinicio, nos cargará la página de inicio, pero Ahora esto sucede cuando ciertamente cambias el estado
de la aplicación porque tenemos muchos cambios desde Comida recomendada a los cuerpos de las páginas de comida,
por lo que debemos reiniciarla manualmente. y luego la flecha debería desaparecer, bueno, veamos
por qué sucede esto, así que vendremos aquí. y está bien, se supone que no debemos llamarlo directamente,
se supone que debemos llamarlo a través uh página principal de comida, está bien, no el cuerpo
de la página de comida, por eso no tiene ninguna En el andamio recordamos que aprendimos temprano, así que
en lugar del cuerpo de la página de comida llamaremos este archivo dart que se llama página principal de comida, está
bien, está aquí y este es el nombre de la clase, así que Abriremos nuestro punto principal, aparecerá
aquí y simplemente lo reemplazaremos. y restaurarlo y antes de eso
necesitamos importarlo Bien, esta es nuestra página de inicio
y de esto es de lo que estamos hablando.

Bien, por ahora estamos obteniendo datos
del servidor y queremos mostrarlos aquí. y la página principal de comida haremos
clic en ella y la ampliaremos. son estas pocas secciones aquí esta y esto se llama cuerpo de
la página de alimentos, está bien y página de alimentos El cuerpo en realidad muestra todo esto como vimos al
principio y la primera parte es este contenedor que es mostrando este correctamente, así que aquí es donde queremos
mostrar el producto popular ahora, mientras que este déjame encontrar nuestro controlador y déjame cerrar esto, algunos
de ellos tal vez sean constantes de la aplicación cliente API Y veamos ahora mismo, necesitamos trabajar
con un controlador de producto popular aquí. Así que una vez más se guardan aquí ahora mismo, necesitamos
encontrar este controlador en nuestra interfaz de usuario.

Y luego tenemos que llegar a este, si
podemos, entonces podremos acceder al datos correctos, por esta razón vendremos
aquí y obtendremos los datos de inmediato que se ha pasado que se ha pasado desde el servidor
necesitamos envolver este contenedor alrededor de get constructor, está bien, ahora seguiré adelante y cortaré
este comando x y luego obtendré el constructor y dentro de get builder debemos mencionar
nuestro tipo de controlador nuestro controlador es un controlador de producto popular,
está bien y dentro de él se necesita un parámetro que se llama constructor y dentro del constructor puedes
crear una instancia, bueno, instancia de esto controlador y puedes llamarlo como quieras,
lo llamaremos productos populares vale y luego regresamos vale, necesitamos poner
una coma aquí ahora aquí regresaremos y el uno que copiamos temprano está bien ahora porque es una declaración
de devolución, por lo que debemos poner punto y coma Ahora esto debería venir de nuestro paquete
gatex, así que aquí lo importaríamos.

Obtener el paquete está bien, ahora el error debería desaparecer,
así que ahora este generador de obtención se conecta con el popular Controlador del producto con la interfaz de usuario, pase
lo que pase o cualquier tipo de datos si se actualiza. Lo sabríamos para esta interfaz de usuario usando este generador de obtención.
Está bien, así que si desea obtener datos actualizados y Si desea volver a dibujar la interfaz de usuario, entonces debe ajustar
su interfaz de usuario usando get builder y el controlador relacionado. y, por supuesto, la mayoría de las veces también deseas
crear una instancia de este controlador. Ahora lo haremos. Ven aquí, así como lo hicimos allí, ahora podemos
seguir adelante y cambiar algunas de las cosas.

En este momento, lo primero que hacemos aquí
es cambiar la longitud, sabemos que regresa. ciertos artículos, por ejemplo, si acudimos a nuestro
cartero y sabemos que nos devuelve un total de seis, ¿vale? De todos modos, quiero saber la cantidad de artículos que
se devuelven. Aquí aprendimos que los productos populares es una instancia de este controlador, así que puedo
ponerlo aquí y luego puedo acceder a cualquier tipo de campo público dentro de este controlador dentro de este, así
que recuerde la lista de productos populares de este es un campo público que es este en este momento, vendremos
aquí y haremos la extensión, está bien. Ahora esta debería ser la longitud.
Bien, ahora se aplica la misma lógica. nuestro indicador de puntos por qué, porque la cantidad de puntos
debe coincidir con la cantidad de elementos que tenemos aquí y por esta razón lo que haré será cortarlo y luego
envolverlo para que el constructor esté bien. Entonces, para llegar al constructor, aquí mencionaríamos
el tipo de controlador, que es producto controlador de producto popular
controlador de producto popular y aquí, al igual que antes aquí, mencionaremos
que el popular creará una instancia de un Oponerse a estos productos, productos populares,
está bien y luego regresamos así, así.

Y luego volvemos y ponemos lo que
cortamos temprano y ahora tenemos que Pon este punto y coma y además este, está bien,
ahora no creo que necesitemos este más nuevo. palabra clave nueva, por eso estaba gritando y veamos
reemplazada, vale, podemos ignorarla primero ahora aquí ocurre lo mismo, así que aquí productos populares punto
lista de productos populares longitud del punto bien Muy bien, sigamos adelante y reiniciemos,
veamos qué pasa. Está bien, tenemos seis, sí, y con suerte
tendremos seis controles deslizantes uno. dos tres 4 5 6. significa que cargamos correctamente los
datos del servidor y también los contrarrestamos y mostrarlos en el lado de la aplicación del servidor,
pero ahora hay un error como se ve aquí decía que el recuento de puntos
debería ser mayor que cero Ahora el problema es que lleva tiempo cargar.
Vale, sí, porque lleva tiempo cargar.

Entonces, cuando la interfaz de usuario dibuja
los datos, no devuelve nada, ¿está bien? Por eso está creando un problema aquí. Ahora podemos
resolverlo. Si es así, aquí podemos resolverlo. menor o igual a cero, está bien, si es menor o
igual a cero, entonces usamos uno en caso contrario Usamos cualquier longitud dada, vale, lo siento,
copiar y pegar, por supuesto, creo. Mira esto, no, este, está bien y
veamos el lugar, está vacío. Vale, es una buena sugerencia si no hay nada que
signifique vacío. Bueno, si está vacío, entonces. usaremos un 1, de lo contrario usaremos lo que sea que esté
ahí, bueno, eso también significa que cuando los datos tengan Si se ha cargado, esta parte se actualizará y veremos actualizaciones
aquí también, así que sigamos adelante. y reinícielo y, como puede ver, primero había uno y
luego desapareció y mostraba seis elementos más Aquí ahora no tenemos ese error. Esta es la advertencia.
Nos ocuparemos de la advertencia más tarde.

Porque queremos emocionarnos ya han pasado
casi siete horas y esta es la primera vez que vemos que estamos obteniendo datos del servidor
y gracias a todos por seguir conmigo pero de todos modos ahora significa que nuestra aplicación
uh y nuestros controladores están funcionando. ahora es el momento de cambiar los datos ahora mismo, aquí
está la cosa, bueno, aquí tenemos que pasar un objeto. uh de esta lista de productos y luego, según ese objeto,
podremos acceder al nombre de la imagen. Elementos y cosas así están bien, así
que necesitamos hacer algunos cambios. Si bien haremos cambios en dos lugares, aquí
debemos aprobar un elemento del producto. y lo capturaremos aquí y una vez que lo hagamos
podremos acceder al valor de ese objeto. Aquí, especialmente este ícono de imagen, podemos.
Necesitamos cambiar bien las imágenes para hacerlo.

Primero necesitamos pasar una imagen, es decir, necesitamos
pasar un objeto. Recuerda que antes aprendimos. que esta lista es una lista de objetos esta es una
lista contiene objetos aquí aprendimos este Bien, una vez que creamos un modelo, uh y desde el modelo, creamos
un objeto, guardamos el objeto, el producto, el objeto. aquí a la derecha, entonces esta es una lista de objetos ahora,
esta es una lista que también significa que podemos acceder ellos por índice, está bien, índice significa
cero uno dos tres cuatro así, por eso vendríamos aquí y crear pasará un nuevo argumento aquí
y lo pasaremos así productos populares y nuestro índice, entonces, ¿cuál es nuestro índice?
En este caso, el índice está en la posición.

Pondremos el índice aquí cuando el índice sea
cero, esto es cero y necesitamos agregar un uh, se requiere un argumento posicional aquí, está
bien, y ahora todo está bien, realmente no lo haría. llámelo lista de productos populares, lo llamaré producto popular,
está bien, aquí estoy enviando un determinado objeto de la lista y estoy captando ese objeto aquí ahora el
tipo de objeto es lista de productos lo siento producto modelo si vienes aquí nuestro tipo de objeto
es este, no este, recuerda que tenemos Hay dos clases aquí, así que esta clase contiene
esta de todos modos, así que ahora iremos aquí. Así que ahora tengo el objeto y como lo tenía antes,
aprendimos que en nuestro dardo en línea herramienta que podemos usar el operador de punto para
acceder al objeto y sus parámetros y cosas así, así Lo primero cambiará aquí en lugar de la imagen
del recurso. Aquí usaremos la imagen de red. Está bien, entonces hacemos la imagen de red ahora aquí,
definitivamente necesitamos cambiar la ruta.

Ahora, ¿cómo se cambia el camino aquí ahora? Para cambiar la ruta, primero debemos acceder a nuestro
objeto, entonces, ¿cuál es el nombre de nuestro objeto? nuestro nombre de objeto es producto popular producto popular
puedes hacer un punto ahora aquí ves Android Studio lo suficientemente inteligente como para saber el nombre del objeto, por
lo que podríamos hacer simplemente img ahora, ¿qué es esta img, veamos? Bien, ahora aquí estamos diciendo que quiere
ser nulo. Esto se llama operador bang y dice el compilador esto no va a ser nulo, de lo contrario
el compilador realmente no lo sabe sobre qué tipo de valor viene aquí, ya sea
nulo o no, después de todo, esto es Viene de la red de todos modos, así que ahora,
si vemos aquí qué es img mg, ¿está bien? Entonces, por supuesto, si intentas escribir esta
información aquí, nuestro aleteo tendrá No tengo idea de qué es este enlace, porque no contiene
ninguna URL base, por lo que debemos ponerlo.

La URL base aquí está bien y aquí lo que haría escribiré
aquí las constantes de la aplicación URL base de puntos Bueno, además, pero todavía no funciona, porque, bueno,
lo sé porque la parte posterior es la imagen. guardado en la carpeta de cargas de pub, está
bien, entonces necesito agregar ese Veremos nuestro backend muy pronto, pero veamos los datos
en el frente y primero cómo se ve, está bien. Ahora las imágenes con esto tendrán una
ruta completa. Ahora, ¿qué haremos? Continúe, cárguelo y veremos si las imágenes
estáticas se han cambiado o no. Está bien, entonces continuaremos y las cargaremos.
Verás, nuestras imágenes se están cargando. uh, se están cargando lentamente, pero todas estas son imágenes
nuevas, todas provienen del servidor, felicitaciones. gracias por quedarte conmigo y has hecho un gran
trabajo hasta ahora, quédate conmigo aquí y Aprendimos muchas cosas y trabajamos mucho.

Ahora las imágenes
son todas diferentes, entonces, ¿qué podrías hacer? A continuación podemos seguir adelante y cambiar el nombre también
aquí, así que necesitamos encontrar dónde está. Así que aquí este está codificado, así
que aquí hacemos una lista de productos. Lo siento, producto popular, nombre del
punto, está bien, ahora guardémoslo. Bueno, creo que debemos decirle al compilador que el nombre
no está vacío y que el nombre cambió inmediatamente. Perfecto, ahora estamos hablando con el servidor. Hermoso,
¿no está bien hasta ahora? Todo bien. Bueno, antes de seguir adelante y hacer algo más,
debemos trabajar en el ícono de carga, ¿vale? La primera vez puede que se cargue lentamente, ahora mi servidor
es rápido, por eso, pero si su servidor es lento, es posible que se cargue lentamente, por lo que desea cargar
el ícono de carga. A continuación, veremos cómo cargar la carga.

Para trabajar con este ícono de carga, primero
debemos acceder a nuestro controlador y Vamos a encontrar nuestro controlador. Con suerte,
este de aquí no está realmente bien, así que Abriré la carpeta y aquí tengo este controlador
de producto popular y comida popular. y aquí necesitamos configurar un booleano, está
bien, aquí configuraremos un booleano y Lo diremos como si el toro estuviera cargado, está
bien y lo configuraremos en falso, está bien. Por supuesto, esta es una variable privada y ahora
crearemos una variable pública basada en esa y eso también sería un toro y
lo llamaremos está cargado Bien, ahora queremos crear un get
get getter para esto. Entonces, cuando uses get, podrás acceder
a este desde fuera de este alcance.

Y aquí queremos cargarlo, está bien, así que
ahora debemos realizar un seguimiento de esto. uno y cualquier cambio que hagamos en
este, estaremos disponibles para este y luego podremos usar este afuera y luego podremos
configurar nuestro ícono de carga, ¿vale? Bien, aquí cuando tengamos un código de estado
de 200. Muy bien, sí, aquí podríamos hacerlo. cárgalo, así que aquí lo hacemos, creo que aquí, la derecha
está cargada igual que cierto, está bien, está bien De lo contrario, el valor predeterminado sería falso, así
que aquí es donde estamos bien ahora, por supuesto. Podemos hacer incluso cosas mucho más avanzadas,
pero habrá mucha codificación, pero por ahora Cíñete a este y después de eso tenemos que ir al
cuerpo de la página de comida "Veamos aquí".

Y aquí tenemos esta sección, uh, generador de vista de
lista de contenedores y obtener el generador, está bien. Así que aquí, para el primero, tenemos que
convertirnos en constructor ahora. Dentro de este, en realidad tenemos un contenedor,
así que este es el contenedor que se muestra. esta sección, así que primero cortaré esta
y luego revisaré aquí y haré popular productos y recuerde que acabamos
de crear un campo cargado. si se carga verdadero, entonces haré algo; de lo contrario,
haré otra cosa, así que aquí está la parte que quieres hacer algo aquí esta parte es si
es falsa haz aquí algo diferente vale Así que aquí mostraré el contenedor, si está
cargado, es verdadero. Está bien, parece que lo corté pero
no funcionó, así que volveré. Lo cortaré desde aquí, está bien y
luego comprobaré uno más popular.

El producto está cargado si es cierto,
entonces le mostraremos este lo que sea que yo Llegué desde allí, está bien, de lo contrario mostraré un contenedor
vacío por ahora, está bien, ahora veamos. necesitamos este bien ahora con esto
esta declaración está completa Bien, una vez más, esto se llama operador ternario. Se
necesita una condición y esta condición es verdadera. entonces esta parte se ejecuta si es falsa entonces
esta parte se ejecuta bien pero simplemente no queremos un contenedor como este para que podamos dibujar algo
así llamado indicador de progreso circular, ¿vale? Este y, por supuesto, aquí podrías tenerlo. Creo que eso también
está bien, así que usamos colores para la aplicación. punto color principal está bien, ahora sigamos adelante
e intentemos ejecutarlo y veamos el resultado, está bien Sí, verás, eso se estaba cargando correctamente
una vez más, comprobaremos esto.

Sí, entonces viste ese ícono de carga. Está bien, y
por aquí creo que somos geniales, no es necesario. cambiar algo aquí uh, esta sección está funcionando muy
bien, mientras que la siguiente seguiría adelante y Cargue nuestros productos aquí, lo cual
es recomendable, en lugar de popular. Creo que seguiría adelante y cambiaría la palabra,
por lo que deberían ser productos recomendados. De todos modos, esta sección terminó aquí, déjame
buscar el control de etiquetas y lo haré popular. déjame encontrarlo en cuántos lugares puedo encontrarlo.
Está bien, aquí, así que aquí lo recomendaría.

Recomendado, está bien, guárdelo,
sí, cambió, está bien. Ahora, aquí hay un contenedor que muestra
este trabajo. Ahora este es el listviewbuilder. y dentro del listviewbuilder tenemos esta sección
que debería ser un alimento recomendado Ahora, para los alimentos recomendados, vamos
a seguir adelante y crear un nuevo controlador. Así que aquí crearemos el controlador Dot Dart del
producto recomendado ahora mismo para esto. sección también necesitamos crear un repositorio porque
cada controlador debe tener su propia relación, ¿vale? Así que ahora seguiré adelante y crearé una relación
que diríamos retirar el producto reparado. bueno ahora aquí abriré este y este también
y por ahora cierro bueno están todos Cerrada Creo que la sección de modelos podemos cerrar ahora.
Este es el controlador de productos popular para todos ustedes. podrías hacer, puedes seguir adelante y copiar
todo esto y venir aquí y lo pondré Ahora necesitamos hacer algunos cambios, así que
en lugar de popular aquí, usaremos recomendado.

Muy bien, copiaré este y lo pondré
como siempre aquí. ese debería ser un repositorio de producto
recomendado, tenemos que crearlo Entonces la primera parte se está cambiando en todas partes.
Bueno, aquí ahora también necesitamos los cambios. Por supuesto, es una lista de productos recomendados con letra
minúscula r, así que sigue adelante y cámbialos todos. porque no necesitamos reescribir todo
el código y lo mismo aquí Creo que debería ser un poco más ligero,
déjame cambiarlos ahora, de lo contrario obtendremos un error, por lo que el error desaparecerá
una vez que creemos este contenedor y cosas así Bueno, este controlador ya está bastante listo.
Aquí vamos a utilizar el mismo producto. El modelo y otra información siguen siendo los mismos
y aquí tendremos un método diferente, por lo que aquí llámalo recomendado obtener lista de productos reparados
por Draco, está bien, y aquí también necesitamos para cambiar porque nuestro contenedor debería tener un
método como este para obtener la recomendación recomendada. Ahora nos mostrará un error. Bueno, aún
no lo ha hecho, pero seguiremos adelante. y crear uno ahora si venimos aquí necesitamos
copiar todo de esta onda Así que lo pondremos aquí y en lugar de popular
lo llamaremos recomendado.

Está bien. Ahora copiaré este y lo pondré aquí también y aquí
el nombre del método debe ser seguimiento. hombres muertos, está bien y todo lo demás sigue igual
ahora aquí en lugar de popular, tenemos que usar Se recomienda que ya tengamos un uri para este porque solo
nosotros creamos la clase de constantes de esta aplicación. Ahora el repositorio de productos
cerrará este, no lo necesitamos. Controlador recomendado, veamos, necesitamos importar
el paquete y los errores desaparecieron. Muy bien, estos dos controladores se ven iguales
pero pronto serán muy diferentes.

Ah, entonces tenemos estos dos sorteos listos y, por
supuesto, este es el controlador de producto. Necesitamos cargarlos como dependencias en nuestro
archivo de proyecto para que las dependencias sean cargado aquí, está bien, así que vamos a seguir adelante
y cargarlos, así que primero copiaré este y Lo pondré allí y haré un ligero cambio
en el nombre. Aquí lo recomendamos. Vale, está bien, por lo que se recomienda este repositorio
de productos y un controlador de productos popular. y aquí tenemos que pasar recomendado Muy bien, ahora continuaremos e importaremos. Parece
que las bibliotecas no fueron reconocidas. veamos el repositorio de productos recomendados, pero está
bien, lo estoy haciendo. Tengo un tipo aquí. Ahora podemos seguir adelante e importarlo
y aquí es lo mismo. Está bien, sigamos adelante e importémoslo. Está
bien, están todos cargados, quiero decir, están. Ya estamos listos para cargar las cosas, así que
ahora aquí veremos si tenemos un error o no.

Ah, aquí está el problema porque se suponía
que era un controlador de producto popular. Acabo de cambiar el nombre, así que de todos modos
copiaré este y el primero es un producto popular. pop puro controlador de producto bien
y aquí debería ser popular Bien, ahora continuaremos y reiniciaremos la aplicación
y todo debería funcionar perfectamente. Al igual que antes, trabajamos con el
controlador de producto recomendado como carga los datos y los coloca en una lista, por lo que
para obtener el producto recomendado sería lo mismo pero ahora aquí hay una cosa, aunque aquí tenemos
un punto final diferente, así que seleccionemos y en Mac haré el comando b, así que vendré aquí,
así que esta es la recomendación recomendada. muerto, creo que tengo un error tipográfico, está bien, ahora está
bien, pero una cosa que harías sería seguir adelante y verificar este si funciona en cartero o no Voy a poner a mi cartero y después de eso
continuaré y probaré la API en el cartero primero, muchos de ustedes no tienen acceso
a la API todavía, solo síganme, lo haré Pronto te abriré la parte trasera y tendrás una
mejor idea de lo que está pasando aquí.

Anteriormente hicimos esta práctica para productos populares,
ahora aquí lo hacemos para los recomendados. Esta sería una solicitud de obtención, así que simplemente cambiamos
el punto final y todo lo demás permanece igual. Ahora presionaré el botón Enviar y parece que sí, tenemos
un tamaño total de cinco, así que, por supuesto, esto. está obteniendo información diferente a la popular,
por qué porque con popular teníamos total tamaño de 6 y tipo de identificación 2, pero aquí vemos el tipo de identificación
3 y un tamaño total de 5.

Entonces, esto es lo que haré. simplemente haz popular una vez más y veremos que
nuestra información es bastante diferente, ¿vale? Eso significa que nuestro punto final está funcionando
bien si su punto final funciona en Postman en general. Eso también debería funcionar en tu aplicación.
Bueno, ahora pasaré a esta sección. y este es el creador de vistas de lista, así
que, como este de aquí, seguiremos adelante y terminemos con esto y obtengamos el generador de vistas. Está bien, eso
es lo que haremos, así que aquí obtenemos el generador de vistas y Aquí debemos mencionar el
tipo de controlador. En nuestro caso, este es el controlador de producto recomendado.
Vale, el controlador de producto recomendado es este. Bien, ahora aquí crearemos una instancia
y la llamaremos recomendada. producto ahora aquí presionaremos el botón
de retorno y dentro deberíamos tener nuestro listviewbuilder está bien, pero antes de seguir
adelante y poner nuestro generador de vistas de lista Así, deberíamos tener este icono de carga correctamente,
porque recuerda que en realidad no lo hicimos.

Cambiar cualquier cosa en este controlador así que exactamente
haremos el mismo proceso así que aquí hacemos uh El producto recomendado se carga, si es verdadero, mostraremos
nuestro creador de vistas de lista; de lo contrario, Haga un indicador de progreso circular y aquí ponemos color, por lo que el
color son los colores de la aplicación, el color principal, está bien. Sí, está bien y debido a que es una declaración
de devolución, debemos usar punto y coma, bien, ahora continuaremos e iniciaremos
nuestra aplicación desde cero y veremos cómo funciona como ves todavía se está cargando aquí
se está cargando cargando cargando bien ahora si La carga está tardando demasiado.

Puede que
haya el problema que recomienda esta sección. Lista de productos aquí, tenemos algunos problemas.
Bien, ahora veamos si lo que se imprime está bien. Obtener producto recomendado. Pondré un registro
aquí, copiaré este y lo pondré aquí. escribiría aquí no pude conseguir Entonces lo más probable es que tengamos
algún problema allí, ¿vale? Está bien, no tiene nada que ver con
el problema de aquí, el problema es aquí en nuestra función principal porque no los estoy cargando
en absoluto, pero tú tienes que hacerlo, quiero decir.

No los llamaré para que lo carguen, está bien,
así que aquí recuerda en la función principal. Estamos llamando a este método para cargar todos los
datos. Cuando estén cargados, listos, aquí. Podemos mostrarlos correctamente, pero aquí no llamé
al método. Recuerda que tenemos un método similar. en el controlador de producto recomendado, así que aquí todo lo que tenemos
que hacer es seguir adelante y cambiar el producto recomendado. controlador de producto y está bien y aquí debería
ser una lista de productos recomendados veamos ahora, seguiremos adelante y lo ejecutaremos bien
y veamos, sí, bueno, por supuesto, se cargó, pero No actualizamos estas páginas. Bueno, verás que el
icono ha desaparecido.

Aquí vendríamos a esto. cuerpo de la página de comida ahora aquí hay lugares donde podemos
cambiar este ícono y las imágenes, está bien ahora aquí Definitivamente, esta es la imagen del recurso que necesitamos
cambiar, pero antes hicimos lo mismo con nuestra esta sección aquí ahora podemos simplemente
seguir adelante y copiarla Así que adelante, cópialos y
simplemente lo pondré aquí. Está bien, pero por supuesto aquí
no tenemos productos populares. entonces en nuestro caso la instancia
es un producto recomendado Así que aquí nuestra instancia es un producto recomendado,
así que copiaremos este y lo pondremos aquí.

Está bien, está bien y veamos un producto recomendado
aquí ahora, por supuesto, uh. Todos déjenme ampliar la pantalla y déjenme
explicarles lo que está pasando aquí. ahora veamos que el producto recomendado está aquí
ahora este aquí simplemente creamos una instancia de nuestro controlador, está bien, ahora usando el controlador
puedo tener acceso a la lista, así que sigamos adelante. y busque la lista entonces, ¿cuál es la lista? Esta es la
lista ahora mismo. Bien, ahora aquí tenemos que acceder. por índice, está bien, entonces, ¿cuál es nuestro índice ahora
aquí? Nuestro índice proviene de aquí. Este es el índice. del generador de vistas de lista, así que aquí es de
donde viene, por lo que debemos poner aquí el índice Entonces aquí hacemos un índice y ahora a partir de ese
índice obtenemos un modelo de producto en particular y de ahí modelo, ahora podemos seguir adelante y acceder a img. Está
bien, tiene sentido. Aquí hay otra cosa que necesitamos. para cambiar la longitud, está bien, así que ya no debería
estar codificado, así que lo pondré aquí y luego obtendremos la longitud del punto de la lista de productos recomendados.
Bueno, tal vez tengamos cinco productos para nuestro índice.

Iría de cero a cuatro y debido a que la vista de lista
es más como un bucle for, cada uno de los objetos puedes acceder aquí y hay información
relacionada, está bien, eso es casi Una vez hecho esto, debemos venir aquí en las restricciones
de la aplicación y crearemos nuevas constantes. eso es porque aquí no queremos codificarlo
así porque ya lo pusimos en dos lugares, así que queremos declararlo aquí, así
que aquí hacemos carga estática constante.

URL bien, ahora aquí solo cargamos,
está bien y listo. Entonces, lo que haría sería venir aquí y, en lugar
de estar codificado, haré constantes de aplicación. pero en vez de base lo haríamos sube la URL, está bien, y creo que tenemos
otro lugar donde podemos cambiarla. eso debería estar en la parte inferior aquí
el mismo así que haz constantes URL de carga de punto Está bien, ahora continuaremos y reiniciaremos nuestra aplicación
y, con suerte, veremos aquí nuevas imágenes. veamos y parece que tenemos un problema, vale,
nos falta una barra por aquí, vale Por eso no puede leer la ruta de la imagen o para
esa vendré aquí en las constantes de la aplicación.

Dentro de este pondré una barra, está bien, ahora continuaré
y reiniciaré la aplicación, con suerte ya veremos. las imágenes, bien, veamos, sí, estas son las imágenes
de las que estamos hablando, bien, estas son Todas las imágenes nuevas que obtuvimos del servidor están
bien, perfectas, ahora tenemos que hacer otro cambio. Ahora el nombre es correcto, así que queremos ocuparnos
del nombre aquí, uh, veamos, entonces tenemos que ven a la sección de aquí, como ves, esta
sección está bastante codificada y aquí hacemos esto hacemos una lista de puntos recomendados
de productos recomendados entraremos en el índice ahora aquí tienes el nombre, creo que está bien, ahora
guardémoslo, está bien, quiere que pongas el operador bang para decirle que no es nulo, por supuesto, lo pones solo
cuando estás seguro de que no es nulo, vale ahora reiniciemos como ves, tenemos
diferentes nombres aquí Y eso es hermoso, hemos hecho un gran trabajo hasta ahora
y lo siguiente que debemos hacer es cuidarlo. ¿Está bien esta advertencia? La próxima vez veremos
cómo seguir adelante y solucionar esta advertencia. Bueno, ahora seguiremos adelante y analizaremos este problema
aquí, bueno, dice que el operando de reconocimiento nulo La operación tiene la cual incluir excluye nulo, mientras
que esto significa que no puede ser nulo.

Este es el significado, está bien, este es un operador
con reconocimiento nulo y ¿de dónde viene? así que haré clic en esto y esto en realidad
apunta a este, les dice la línea 22 y la novena palabra o novena letra, así que esta es
de la que está hablando, bien, aquí una vez más. es el operando de nulo superior aleatorio nulo nuestra operación
tiene un tipo, está bien, entonces ya tiene un tipo y que excluye nulo ahora cuando usamos este
significa que esta determinada instancia o la variable no puede ser nula.

Bueno, aquí no
necesitamos esta porque ya la inicializamos para ser una matriz vacía o una lista vacía, diría que está
vacío vacío no significa nulo ninguno significa no apunta a ninguna parte de la memoria,
pero aquí no puede ser nulo porque es ya está vacío, entonces aquí ya dijimos que
ya está vacío, así que no necesitamos este. Esto es solo una vez más si no estás seguro de
si se está inicializando en tu aplicación o no. pero estás bastante seguro de que viene de otro
lugar y de allí no habrá ningún problema. En esa situación se utiliza este operador bang, por lo que
simplemente eliminaremos el operador bancario aquí. y reiniciamos nuestra aplicación y con suerte veremos que el
error desapareció. Está bien, sí, muy bien, con esto estamos. Muy bien y hasta ahora hemos recorrido un largo camino.

En la
siguiente sección veremos cómo hacer tapping en ellos y vaya a una nueva página y para esa crearemos nuestra
clase de ruta, una clase de ajuste que le ayudará a mantén tu proyecto y aprenderás cuando hagas un proyecto
mucho más grande cómo organizar tus rutas Bueno, antes de seguir adelante y trabajar en la clase de rutas,
primero comprendamos cómo funcionan las rutas básicas. funciona en flutter get x bueno, así que para este entendamos
una cosa, así que una vez que haga clic en este Quiero ir a la sección de detalles de alimentos populares
y, una vez que hago clic en este, quiero para ir a la sección de detalles de alimentos recomendados,
eso es lo que queremos hacer, pero en este momento están No se puede hacer clic en absoluto.

Bien, podríamos hacer
esto fácilmente primero. ¿Qué hacemos para venir aquí? y busque el cuerpo de nuestra página
de comida, que es este que ya tenemos y por ahora cerraré otros, no los necesitamos
ahora, está bien, entonces cerraré este. Cerraré este controlador de restricciones, está bien, y las dependencias
las mantendré populares para obtener más detalles. y también necesitamos que nos recomienden para obtener detalles, está bien,
no es el repositorio que queremos, la interfaz de usuario. Está bien, ahora desde aquí, una vez que
hagamos clic, debemos ir a algún lugar. Ahora busquemos dónde podemos hacer clic en él, por lo que esta es la
página principal de alimentos y el cuerpo de la página de alimentos. cuál es este de aquí está bien, déjame ampliar
la interfaz de usuario, la pantalla de aquí ahora este es el generador de obtención de alimentos recomendados
y este es el generador de obtención de nuestra comida popular Ahora aquí este es el creador de páginas, y en lugar
de eso, el creador de páginas de aquí.

De hecho, puedo hacer que se pueda hacer clic en él, ¿vale?
Porque este generador de puntos de vista de página requiere esto. cantidad de pantalla, está bien, entonces este es el
lugar donde podemos hacer clic en ella, y luego iremos a En otro lugar está bien, así que lo que haré será
uh  en Mac porque estoy en Android Studio. Pulsaría opción enter, me pedirá que ajuste un widget
y eso es lo que haré ahora aquí Lo llamaré detector de gestos, y dentro de él
usaré el botón de enderezar. Ahora, por aquí. dondequiera que haga clic quiero ir a una nueva
página, está bien, en flutter obtengo x uh, para el enrutamiento básico, generalmente obtienes un punto a algún
lugar correcto o un punto con un nombre, eso también está bien. Está bien, puedes usar cualquiera de ellos, así que aquí,
si ves que se necesita una página dinámicamente, está bien. Aquí llamaremos a una página determinada, desde aquí iremos a los
detalles de alimentos populares, por lo que hacemos Paw Popular.

Para más detalles, este está bien,
simplemente lo llamaremos Sí, está bien, ahora reiniciaré nuestra aplicación y nos aseguraremos
de que no haya errores. Sí, no hay errores. Ahora haré clic en ellos sí, me tomó una nueva página está bien,
eso es lo que esperábamos y eso es lo que pasó pero no podemos regresar bien porque en realidad primero
tenemos que regresar, está bien, así que iré aquí y sé que aquí tenemos este botón
para que podamos usarlo correctamente. al igual que antes, tenemos que hacer que se pueda hacer
clic en este botón, para que este botón se defina sobre Aquí y el primer ícono, este está bien, al igual que antes,
lo envolvemos alrededor del detector de gestos.

Y aquí escribiré detector de gestos, está bien y se necesita
el evento tap, así que lo pondré aquí, OK Así que aquí simplemente podríamos hacer, veamos cómo lograrlo. la página de inicio, bien, ahora cuál es tu página de inicio,
la página de inicio es, uh, creo que la comida principal hecho, veamos la página principal de comida.

Creo que esta es
nuestra página de inicio. Bueno, simplemente haremos esta. Así que lo reiniciaré y haré clic en esto. Ok,
me llevará a la página de inicio y veremos si haga clic en esto, me lleva a este, por supuesto, la información
aquí sigue siendo estática, ¿verdad? y lo mismo por aquí pero por aquí
si damos clic no pasa nada porque No registramos ningún evento ontap, solo lo hicimos
para estas cosas. Bien, ahora esto es simple. y está bien para aplicaciones como la lista de tareas pendientes, pero
aquí no estamos creando una aplicación de lista de tareas pendientes. De hecho, estamos intentando crear una aplicación del mundo
real. Bueno, ahora con este enfoque, el problema es. escribes manualmente el nombre de tu página, pero
queremos que sean más dinámicos, ¿vale? y es por eso que organizaremos todas nuestras rutas en
un nuevo archivo y usaremos un archivo diferente. enfoque, pero seguiremos usando el paquete x, pero
es un enfoque más profesional y escalable para ayudar con nuestras rutas está bien porque queremos
hacer muchas cosas cuando vamos a una nueva ruta por ejemplo, trabajando en los datos, procesamos algunos datos
y verificamos que los datos estén bien y obtenemos los dos que podría ser un problema y otra cosa es que quieras
mantener tu lógica de ruta en un archivo separado esa es la mejor manera de hacerlo y desde la interfaz de usuario simplemente
llamas a una ruta determinada, bien, ahora seguiremos adelante y inserte nuestra carpeta lib, crearemos una nueva carpeta
y la llamaremos rutas, está bien ahora aquí Crearé un nuevo archivo y lo llamaremos route
helper dot dart.

Está bien, aquí crearemos una nueva clase y la llamaremos ayudante de ruta, está
bien, y aquí tendremos miembros y funciones y todos son miembros estáticos y clases o funciones,
cosas así, está bien, aquí es donde Mantendremos toda nuestra lógica de ruta ahora,
porque para esta primero declararé una nueva ruta. y uh el tipo de transmisión y aquí lo llamaremos uh inicial,
vale, eso se refiere a nuestra página de inicio Bien, aquí es donde queremos ir ahora, de hecho,
ahora mismo podemos seguir adelante y usar esta ruta inicial y para usarla necesitamos hacer algunos
cambios dentro de nuestra aplicación para obtener material Bueno, creo que eliminaré este por ahora,
no usaremos ningún tipo de muestra azul.

Ahora aquí tendremos una sección que se llama ruta inicial.
Bien, ahora simplemente llamaremos ruta. inicial del punto auxiliar, está bien, entonces
con esto llegaremos a este archivo aquí, está bien y obtenga este ahora, reiniciemos nuestra aplicación
y asegurémonos de que esté funcionando Sí, está funcionando porque cargó bien nuestra página
de inicio. Bueno, ya empezamos a trabajar. Ahora la aplicación para obtener material ha finalizado
correctamente, llamada "Veamos dónde puedo encontrarla". hay mucha información, una lista que se llama obtener
páginas, ahora obtener páginas en realidad. Se necesitan páginas aquí, como puedes
ver, se refiere a páginas como detalle de comida recomendada popular para detalles
como ese, está bien y usaremos ese, está bien Ahora, como vi antes, se necesita una lista de páginas.

Está bien,
lista de páginas, entonces necesitamos crear una lista. y aplícalo aquí, está bien
o para este vendremos aquí y aquí haré simplemente haré variable estética uh, crearé una lista aquí, será
una lista y escribirá obtener página, ¿vale? así que obtener página es nuestro tipo ahora aquí
simplemente la llamaré rutas y aquí crearé una lista aquí está bien, sí, está bien y a medida
que creamos rutas ahora dentro, vimos temprano que aquí este toma una lista de páginas
vale una vez más veamos aquí Bien, ahora para eso necesitamos crear o llamar
a una función aquí que en realidad se llama obtener página, está bien, esta toma el nombre y tu página,
está bien, esta es una función a la que llamas o diría más como un constructor, como ves, tiene
un nuevo aquí, por lo que lleva el nombre de las rutas y dónde ir, así que podemos usar
esta de aquí para esta primero, ya Tienes aquí como ves la ruta inicial como una
barra, así que creo que podemos hacer esta. barra por aquí está bien y por aquí podemos menciona el nombre, vale, ¿cuál es el nombre? En nuestro
caso, el nombre es la página principal de comida.

Sí, ahora con esto, todo lo que tenemos que hacer, veamos,
oh, es una lista, por lo que debes poner una coma separada. Ahora con esto todo lo que necesitas hacer es venir aquí
y luego usar la propiedad que se llama obtener páginas. ahora aquí tienes las rutas de puntos de ayuda de ruta
porque devuelve una lista y ésta espera una lista, ¿vale? Seguiré adelante y lo reiniciaré. Está bien y todavía funciona,
pero, por supuesto, se necesita una lista de rutas.

Pero nuestra ruta inicial ha sido definida usando
esta ahora si la cancelas comenta, veamos lo que sucede está bien, parece que todavía funciona
bien, eso se debe a que va a la lista de aquí y lo encuentro y funciona así,
está bien, es tan simple como eso. y puedes navegar a diferentes páginas, ¿vale? pero ahora aquí el problema es ahora uh bueno esto
es una transición es un problema como puedes ver pero nos encargaremos de eso más adelante.
Si tienes muchas páginas, no funcionará así. Está bien, porque ahora solo encuentra uno y
llega allí.

Está bien, eso es lo que hace. De todos modos, volveremos a colocar nuestras rutas iniciales.
Ahora tenemos la ruta anterior a la que queremos ir. una página diferente una vez que hacemos clic en
esa, tenemos que definir una ruta para esa, ¿vale? Bueno, cómo hacer eso, primero crearemos una variable
estática una vez más, ahora hacemos estática. cadena constante aquí lo llamamos comida popular y aquí
hacemos bien la comida para pelar patas en general cadena de nombre de rutas si tienes dos palabras, deberían
tener una barra oblicua, está bien, ahora por aquí Tendríamos la página y el nombre aquí y aquí hacemos
una página de comida popular, esta está bien.

Y luego llamaremos a la página y a nuestras páginas,
la página relacionada debe ser popular Detalle de comida, este está bien, vendríamos aquí. bien ahora veamos Oh, me falta el argumento aquí
que se llama página. Bien, ahora la flecha debería desaparecer. Ahora el problema
es cómo sigo adelante y llamo a este. Realmente no puedo. Está bien, porque esta es una cadena. Entonces,
lo que haría sería seguir adelante y usar esta. y ponlo aquí, está bien, esto se refiere a ese
de allí, está bien, ahora desde mi archivo. Desde los lugares donde estoy intentando
hacer tapping, puedo llamar a este. Vale, este encontraría este aquí
y luego activaría este. Bien, sigamos adelante y probémoslo. Ahora estamos en la
página principal y perdón por el cuerpo de la página.

Entonces en lugar de usar este usaremos get  dot
digamos dos, está bien y aquí usamos ayudante de ruta y comida popular. Bien, ahora sigamos
adelante, guárdelo y veamos el resultado. y haremos clic en esto y los datos aún se
están cargando. Ahora tenemos un problema. uh bueno ahora porque realmente no estamos usando el nombre uh, dice que esa cadena inesperada usa dos nombres,
así que sigamos adelante y usemos ese. Bien, ahora sigamos adelante y reiniciémoslo. Está bien, hagamos clic en esto y funcionará
bien. Ahora puedes regresar nuevamente. Esto funciona, así que parece que esto funciona, uh,
cómo funciona bien, sigamos adelante y probémoslo.

Entonces, debido a que esta es una función de flecha,
en lugar de escribirla así, en realidad puedo hacerlo. una función anónima aquí y devolver esta
y luego puedo imprimir un registro aquí Yo diría que se llama comida popular,
está bien, ahora aquí la restauraré. y recuerda, haré clic en esto y veo que
funciona, así que lo llamo y viene aquí. y por supuesto hay un registro de ruta para ello
y luego va aquí, está bien, entonces eso está funcionando bien, pero ahora mantiene las cosas
simples y también tiene un pequeño problema, ¿vale? uh, déjame decirte ahora si quiero pasar el parámetro
y quiero procesar el parámetro funcionando como Esto es un poco difícil, vale, ahora dónde
pasar el parámetro, eso es un problema, vale.

Entonces, lo que haremos, vendremos aquí, vendremos
aquí, crearemos una función y la llamaremos. uh estático y aquí tendríamos un tipo que
es cadena y el nombre de la función es conseguir pop paw popular está bien y sería una
función que devuelve una cadena aquí, así que la cadena tiene una variable dentro de la variable
es un pie popular ahora esto devuelve una cadena entonces tenemos el tipo aquí cadena y esta
variable se refiere a esta, bien ahora aquí esto no cambia y está bien ahora
con este enfoque hay algo hermoso porque ahora en lugar de llamar a este directamente
llamaré a este pero como ves es una función Entonces, cuando lo llamo, puedo pasar el parámetro dentro
del argumento. Está bien, así que lo recibiré. ellos aquí como un parámetro como lo hago ahora
aquí puedo recibir esos parámetros Puedo procesarlos y puedo hacer una verificación
condicional y, en base a eso, puedo ir a esta ruta o a un tipo diferente de ruta, este es
el mejor enfoque para trabajar con rutas, ¿vale? Ahora, para demostrar que esto funciona también, seguiremos
adelante y usaremos este en lugar de este.

Vale, recuerda que cuando llames a este encontrará
esta variable en esta clase aquí y nosotros Ya lo tengo y verás que tiene un enrutador definido,
por lo que establecerá la ruta aquí. y luego, si pasa algún parámetro dentro
de ese parámetro, puede tomarlo aquí y Te mostraré cómo tomar los parámetros y trabajar
en ellos, bien ahora una vez más. esta vez llegaremos al cuerpo de nuestra página de imágenes,
en lugar de comida popular llamaremos a la función obtenga comida popular, está bien, ahora estamos llamando funciones,
está bien, ahora sigamos adelante y reiniciémoslo. y haces clic en ellos y todavía funciona bien,
pronto tendremos que pasar parámetros uh eso es porque cuando vas a una nueva página Necesito mostrar una nueva imagen y la nueva información,
pero ahora todo está estático.

Vale, y antes de continuar y hacer eso, déjame
cambiar parte de la clase de ayuda de ruta aquí. Ahora aquí verás que si pasas el cursor sobre
él, tiene una propiedad de transición. Ahora seguiremos adelante y los usaremos
correctamente ahora aquí, justo debajo, aquí. Usaré la propiedad que se llama transición. Hago una
transición y creo que es necesario cambiar el fundirse así que reiniciémoslo Verás, el efecto es bastante diferente.
Vale, eso es lo que nos encanta. Muy bien, cada vez que entras a una página nueva,
aquí se ve hermosa porque se desvanece. Ahora aquí también hay otras propiedades que puedes
usar como zoom circular, revelación que no he hecho. Los usé de izquierda a derecha. Bueno, voy a usar
este. Sigamos adelante y verifiquemos qué es ahora. Haré clic aquí. Bueno, en realidad no se veía muy
diferente de todos modos, así que me ceñiré al El viejo se desvaneció y estamos bien.
Ahora aquí, esto es lo que hicimos.

La comida popular haría lo mismo para nuestra ruta inicial,
así que aquí seguiremos adelante y declararemos cadena estática obtener inicial inicial creo que
simplemente lo llamaremos obtener inicial y aquí Creo que solo tendremos este y
todo está bien y por aquí. Oh, lo siento, no. Este tendrá algo. Esto se refiere
a este y esto se refiere a esta cadena. y aquí usaremos uh inicial, está bien, entonces cuando llames
a este, vendrá aquí y al mismo tiempo.

Coincide con este y este de aquí veamos si la ortografía es correcta, sí,
la ortografía es correcta y no, queremos usar una variable porque queremos
pasar variables más tarde, ¿vale? así que no te preocupes porque pasaremos
la variable, por eso está gritando nosotros de todos modos, así que ahora seguiremos adelante
y una vez más nos aseguraremos de que funciona y funciona. Bien, ahora continuaremos rápidamente y replicaremos este
y crearemos uno más para los alimentos recomendados. y aquí llamaremos recomendado recomendado Copiaré este, lo pondré aquí y haré el comando
d aquí, así que cópialo ahora aquí. registro rec y aquí está bien, lo recomiendo también. Entonces esta es la comida recomendada y ahora, para
la comida recomendada, crearemos un nuevo get. página, así que aquí seguiré adelante y pegaré
esta.

Bien, ahora aquí recomendamos la comida. y aquí comida recomendada Bien, creo que necesitamos importar el recomendado.
Veamos el nombre de la clase donde estamos. escribiendo la clase correcta para que se recomiende
rec m-m-e-n-d-d oh, parece que tenemos un tipo aquí en realidad no necesitamos el mismo aquí
y dentro de la clase de ayuda de ruta uh No simplemente dijimos que estaba bien, así que ahora
sigamos adelante y reiniciemos una vez más. y haz clic en esto, funciona, puedes
regresar, haz clic en esto. uh, no funciona bien porque no conectamos nuestra ruta
en el cuerpo de la página de alimentos con esta Bueno, antes hicimos esto para el control de productos
recomendados para los alimentos recomendados. ahora este, que antes lo hicimos para la comida popular, ahora
aquí lo haremos para la comida recomendada, ¿vale? ahora aquí tenemos este contenedor y este
contenedor envuelve todo correctamente y veamos ahora dentro de esto tengo este otro
contenedor y este es el contenedor de texto Entonces este es un constructor de vistas de lista, así que
sí, este es el candidato perfecto y podemos concluir esto. alrededor de un widget y se llama
obtener detector de gestos y ahora aquí usaremos on tap ahora aquí usaremos get dot para nombrar
y llamaremos al asistente de ruta dot get pop comida recomendada ok,
ahora hagamos clic en ellos Ahora haz clic en esto.

Sí, funciona, pero
parece que se estropeó con nuestro uh. ui aquí y no funciona, funciona, pero tienes
que hacer clic en este, está bien. A continuación veremos cómo seguir adelante
y resolver este problema primero. Para resolver este problema tenemos que venir
aquí y mirar esto y de dónde viene. Bueno, esto proviene del menú posterior. Bueno, ahora esta
es una página recomendada para obtener más detalles.

Bien, entonces ven aquí y si
vienes aquí verás que tenemos astilla superior y si pasas el cursor sobre él
verás que hay un booleano que se llama automáticamente implica que esto es lo que causa el
problema, por lo que todo lo que hace es crear este botón por tu cuenta, pero podemos desactivarlo, así que
lo haremos en falso, bien, ahora reiniciémoslo.

Está bien, ahora iremos allí y parece que está funcionando.
Podemos cancelarlo, pero, por supuesto. Todavía no tenemos este botón de cancelar aquí, vectores, así
que aquí lo colocaré alrededor del detector de gestos. Haré un detector de gestos y luego tendrá un evento
de toque y dentro del evento de toque tendremos nuestra ruta de obtención y luego aquí tendremos
un niño como un niño que pondremos allí Ahora funcionará y necesitamos poner una coma
aquí. Bien, ahora aquí tenemos un punto.

Cosas así están bien, pero antes de que necesitemos
importar el paquete, sigamos adelante y hagámoslo. Bien, ahora vendremos aquí y necesitamos llegar
al nombre aquí. Hacemos el punto de ayuda de ruta. Ahora, por supuesto, también necesitamos importar este.
Aquí obtenemos el ayudante de puntos. Ahora queremos regrese a la página inicial que es nuestra página principal,
ahora vamos a guardarla y podemos regresar a la página principal, después de esto, ahora continuaremos
y veremos cómo pasar parámetros mientras trabajamos con el ruta y llámala, bueno, para eso primero vendríamos
a nuestra comida popular aquí y por aquí tenemos veamos qué tenemos
en realidad vendríamos a este comida no popular y por aquí
vemos que tenemos dos secciones Controlador de producto muy popular, este de aquí
tengo un detector de gestos envuelto este generador de páginas vistas en realidad me gustaría
eliminarlo, no está realmente aquí, no está realmente un buen lugar.

Lo que haría, simplemente copiaría
este primero, porque quiero usarlo. y luego eliminaré aquí y eliminaré
esta sección, ¿vale? volverá a su estado original. Vale, sí, está
aquí y esto está dentro del contenedor. Entonces, para trabajar con esto, vendría
aquí y crearía una página aquí. Ahora pasaré a esta función y esta función
también tiene un contenedor. Así que aquí, este contenedor está bien, en realidad
quiero envolverlo, así que para este seleccionaré y luego lo envolveré alrededor de un widget y el
nombre del widget es detector de gestos, ¿vale? y ahora aquí acabo de copiarlo, evento
que pondré aquí, ¿vale? Ahora lo guardaré de todos modos.

Después de eso, vendré
aquí y me aseguraré de que funcione bien. Bien, ahora desde aquí queremos pasar nuestro parámetro.
Para hacerlo, necesitamos hacer algunos cambia bien, primero tenemos que obtener cierta identificación y, en
función de esa identificación, haremos las cosas ahora, recuerda Cada lista tiene una identificación en la lista
misma porque las listas son indexables, ¿vale? Así que podemos acceder a ese ahora. Recuerda que cuando pasas
por aquí, pasamos un índice y un modelo de producto. Bueno, por ahora solo obtendremos el índice e
iremos a una nueva página, así que aquí En realidad, simplemente pasaré el índice.

Está
bien, eso es todo lo que haré, pero ahora dirá. agreguemos este parámetro posicional ahora
porque recuerde que esto es una función Entonces esta es la función aquí, así que aquí necesito
hacer int, diría ID de página, ¿recuerdas que es? solo ID de página, no ID de producto, producto, es bastante
diferente, vale, ahora, después de eso, aquí, entonces, están pasando aquí la identificación de la página ahora
porque esta a cambio llama a esta ruta, esta ruta es aquí y esta ruta luego viene aquí para
que podamos transmitir esta información a este de aquí bueno para hacer eso todo lo que
tenemos que hacer aquí tenemos como si vienes de programación web ruta de programación web,
pasas parámetros como este, lo haces y luego nombre del parámetro está bien, aquí solo nombraré
la identificación de la página del parámetro y después de eso etiquetaré lo que sea que se haya dado, está bien,
entonces este, ahora veamos la identificación de la página.

Bien, ahora el ID de esta página es este porque ahora
es una variable si quieres poner una variable dentro. una cadena necesita usar signos de dólar, por
eso aquí usamos el signo de dólar ahora. este es el parámetro que queremos recuperar y sería
un valor, por lo que este valor se proporciona aquí a esta esta variable está bien o este parámetro ahora
este lo podemos capturar aquí está bien, sí Está bien, ahora lo atraparemos
y pasaremos a él. De bueno a bueno, simplemente podríamos hacer cosas
como esta ver página id igual ahora lo que sea Obtuviste desde allí, así que estamos pasando nuestra
variable o un parámetro para saber cómo obtenerlo. para obtener ese, obtienes los parámetros de punto de este
y dentro de cualquier variable que quieras capturarte. escribe eso bien y todo está bien y después de eso simplemente pasa
la identificación de la página aquí ID de la página Bien, ahora aquí te pedirá que sigas adelante y agregues
otro parámetro a los detalles de comida popular. Y eso es lo que tenemos que hacer.

Bueno, déjame explicarte
durante un segundo lo que está sucediendo aquí. desde aquí desde aquí estamos pasando un
índice, bueno, este es el índice del lista índice de lista y lo llamamos ID
de página, así que luego venimos aquí y debido a que es una función, puedo obtenerla aquí
porque la función en realidad está aquí la función del cuerpo y dentro del cuerpo,
sea cual sea el valor que se le haya dado desde aquí lo tomo aquí en esta variable
y luego tomo esa variable aquí usando esta función auxiliar especial que
se llama obtener parámetros, ¿vale? toma una cadena y la pasamos y luego la enviamos a nuestra
pantalla o interfaz de usuario ahora, por supuesto, es Pidiéndote que sigas adelante y agregues este, entonces,
lo que haré, iré aquí y en la parte superior.

Aquí crearé una variable y será de
tipo y la llamaré ID de página. Vale, ahora se requiere el ID de esta página. Debes enviarlo,
así que usaré el ID de página de puntos requerido. Muy bien, ahora veamos qué más creo que debemos
eliminar este. Está bien, ahora estamos bien. Ahora aquí tenemos esta ID de página. ¿Cuál es
el punto de enviar la ID de página a esta página? Bueno, ahora tengo el valor del índice correcto, por lo
que este es el índice real que se ha transmitido desde el desde este lugar ahora mismo, así que ahora podemos tomarlo,
si podemos tomar el índice, podemos tomar la lista y luego usamos este índice, cierto índice y luego podemos
obtener un objeto, así que ese era el punto, ¿vale? aquí simplemente podemos obtener un objeto, así que
aquí crearé una variable y la llamaré var y uh producto simplemente lo llamaré tal vez sí, simplemente
lo llamaré producto, está bien y aquí después de eso Necesitamos obtener acceso a la
lista, la lista que tenemos aquí.

Este está bien, recuerda uh no, no quiero abrir
el repositorio, quiero abrir el control controlador, así que recuerde que hay una lista,
así que quiero acceder a esta porque esta tiene acceso a esto y esto viene desde aquí,
ya lo sabemos, así que quiero tener acceso a este, así que para ese creo que está bien aquí, primero
necesito encontrar el controlador, así que tú lo haces. obtenga dot find y luego mencione su controlador, nombre el
controlador que desea encontrar para que sea controlador es popular para el controlador de alimentos popular,
se ha inicializado pero debido a que tenemos muchos controladores y así es como vas y encuentras
un determinado controlador y luego puedes obtener una determinada propiedad, por lo que las propiedades de esta lista
que queremos están bien, ahora esta es una lista, así que puedo acceder a los elementos internos, así que aquí simplemente pasaré
la identificación de la página, está bien, eso es todo. Ahora, si lo hice bien, esto me da una instancia de
esta lista. Recuerde que esta lista tiene todos los Instancia del modelo de producto.

Ahora, según
ese índice, tengo acceso al producto. modelo cierto modelo de producto está bien, así
que vendré aquí y haré algunas cosas aquí Yo diría que imprimir la identificación de la página. Haré la identificación
de la página en la cadena, está bien y aquí también lo haré. nuestro nombre de producto se debe a que se trata de una instancia
de producto, un modelo correcto, por lo que un objeto basado en el modelo para poder tener acceso a sus diferentes
propiedades como ves si pongo un punto puedo Ya accedí a él para que Android Studio sea lo suficientemente inteligente
como para informarnos, pero creo que ahora está aquí.

Bien, vamos a convertirlo en cadena. Ahora
continuaré y reiniciaré todo desde cero. y parece que tenemos un error, veamos de dónde
viene este error del asistente de ruta Bien, aquí necesito pasarlo como esta
ID de página ID de página y veamos conviértelo a uh bueno ahora lo pasamos como uh int así que necesitamos dividirlo, analizarlo
para terminar porque creo que aquí, eh, esto podría darnos algo diferente, más parecido a una
cadena, así que aquí haríamos uh parse dot y Este está bien, ahora pasaremos el ID
de la página aquí, veamos.

Bien, ahora sigamos adelante y restaurémoslo.
Bien, ahora si hago clic en esto, esperaría la identificación de la página y el nombre del producto, este sería
el nombre del producto correcto, así que esto es lo que haría Como se esperaba, haré clic aquí y el ID de la página
es cero y el nombre del producto es comida nutritiva en China. Bien, esto es exactamente lo que teníamos aquí.
Ahora vendré aquí y haré clic en este. y luego vería, intentaré ver el índice y este nombre,
por lo que la identificación de la página es 2 y este es exactamente el que teníamos al principio ahora
mismo, si tenemos este, eso también significa que Podría venir aquí.

Lo comentaré ahora mismo. No necesitamos
esto ahora para que podamos seguir adelante y Comience a cambiar estos nombres, así que esto estaba codificado correctamente,
así que aquí hacemos el nombre del punto del producto. Está bien, así que asegúrese de decirle al compilador
que no es nulo y eso es algo más. Ahora recuerda que este es el texto largo, así que no queremos
que el texto esté codificado, así que vendremos aquí. elimínelo y pondremos lo que hayamos obtenido, así que
aquí tenemos la descripción del punto del producto, creo.

También necesitamos el operador bang una vez más
uh y además de la imagen, bien, ahora aquí tenemos imagen sigamos adelante y veamos la imagen.
La imagen debería estar aquí porque esa es la imagen de fondo ahora aquí tenemos una imagen de activo, así
que cámbiala a imagen de red, está bien, imagen de red y aquí solo usaremos el nombre, así que primero hacemos constantes
de aplicación constantes punto base url más URL más producto punto estoy bien,
está bien y reiniciaremos todo. Y con suerte funcionará esta vez y vendremos
aquí y veremos el nombre y la introducción. es hermoso, verdad, y ya está funcionando.

Si
hago clic en este, vemos un nombre diferente y una introducción diferente, está bien, y ¿qué
más vendré aquí? Me gustaría ver esto. imagen y este texto y esto es exactamente lo que queríamos,
así que ya está funcionando y tenemos recorrido un largo camino, es bastante hermoso, ¿no está
bien? Pero, por supuesto, podemos optimizarlo más. Como si el precio aquí estuviera prácticamente fijo, aquí
10 RMB, así que déjame encontrar 10 aquí. 10 Bueno, podría hacer este, realmente no, veamos bien este Ahora aquí, primero creo que necesitamos
tener dos cadenas. Bien, ahora esta cadena sería una variable. aqui Bueno, para hacer eso primero tendremos el signo de dólar
y luego lo dividiremos dos veces y dentro de él. Accederemos al precio del producto y diremos que no
es nulo y veremos cómo eliminar lo innecesario. operador sí porque ya estamos usando
esta cadena, esta comilla doble y esto es una variable bien en flutter o en dart en realidad
si quieres usar una variable dentro de una cadena deberías usar este también y lo siento, uh, estos
corchetes está bien, ahora sigamos adelante y reinícialo ahora veremos si el precio cambia
o no ahora el precio es 12.

Antes era 10. ahora haga clic en este precio es 2153  eso
significa que ya está funcionando y revisaremos este aquí y hacemos clic en esto y vemos
que el precio es 18, lo que significa que nuestro El precio funciona y todo lo demás funciona
aquí y estamos bastante satisfechos y otro Quizás te preguntes por qué tengo estas llaves y este
signo de dólar, mientras que antes hemos visto eso en el asistente de ruta si tiene una variable y si la variable
está dentro de una cadena, lo que significa dentro comillas simples o dobles para esa variable
delante de la variable que usamos palabra que se llama uh en este signo de dólar, está
bien y eso es suficiente, pero si tu variable uh es uh, veamos cuál es aquí parte de un objeto, entonces
también necesitas llaves, está bien, ahora aquí esta inicial no es parte de un objeto porque esta inicial
anteriormente era solo una cadena o esta palabra comida popular es solo una cuerda, por lo que no
es parte del objeto, pero aquí el producto es un objeto correctamente, por lo que si desea obtener
una variable de un objeto, debe tener estas llaves Además de este signo de dólar, está bien, con suerte, tiene
sentido.

Ahora seguiremos adelante y lo comprobaremos. En este está bien porque ahora mismo todos muestran
lo mismo, así que seguiremos adelante. y trabaja en esto bien para eso una vez más, iremos
a nuestra página principal de comida aquí, eh. Este no lo siento, iremos a uh, cuerpo de la página de comida, este está bien, ahora como
este aquí para la comida popular que teníamos índice Así que también usaremos el mismo índice para
los alimentos recomendados, que está aquí. Bien, ahora creo que aquí también podemos hacer una pequeña
actualización. Aquí reparamos mapaches. pie está bien para que sepamos lo que está pasando
aquí ahora aquí una vez más pasaremos el índice Bien, ahora arrojará un error, así
que iremos a esta función.

Ahora aquí volvería a hacer la identificación de
la página, por lo que este índice está aquí aquí como ID de página. Vale, solo le vamos a poner el nombre
ID de página. Puedes ponerle el nombre que quieras. entonces tomaremos este parámetro en la URL. y lo llamaremos ID de página después de eso porque
es una variable que estamos pasando y usando así también tenemos este ahora tenemos que encontrarlo en
la lista, así que recuerda que esta es una lista, ¿vale? aquí vendría aquí y así
simplemente copiaremos este y lo pondré aquí y luego lo pasaré
y para ese simplemente copiaremos este Está bien, ahora arrojará un error,
así que vendremos aquí. y aquí como comida popular en la cima uh, comida popular, veamos dónde está esta, así
que en la parte superior tendremos esta así. solo hazlo aquí uh final ID de página final aquí, lo usaremos como registro
obligatorio. Este ID de página de puntos está bien. Bueno, creo que estamos bien, pero antes no teníamos
finales, así que no podíamos usar constantes.

Puedes usar final si quieres y luego tienes que
usar const, está bien, entonces estás listo Ahora estamos aquí y después de eso encontraremos
el controlador y lo pondremos en un variable el nombre de la variable es producto, puedes
nombrarlo como quieras, obtenemos un punto busque bien y luego encontraremos el controlador,
pero en ese caso se recomienda el controlador uh, comando raro, controlador de producto muerto, está
bien y luego encontraremos la lista cuyo nombre es lista de productos recomendados porque esta es una lista, tenemos
que pasar la identificación de la página, eso es lo que haremos Entonces esto nos dará el número de página del índice.

Bien,
una vez que tengamos este, obtendremos el relacionado. instancia y ahora bajaremos aquí y comenzaremos
a hacer cambios, el primer cambio Haremos aquí la imagen de la red de puntos, está bien
y luego imprimiremos la ruta completa aquí y esto. es la ruta completa para este, necesitamos importar la
biblioteca, está bien y solo pondremos una coma coma al final, está bien, estamos listos y después
de eso también debemos cambiar este texto. Así que primero copiaré este y luego lo borraré todo
porque el texto es demasiado largo, así que lo haré. aquí hijo y luego este es el widget que quiero usar
y es una propiedad de texto y una propiedad de texto quiere tomar una descripción, eso es lo que hará
y estamos listos para continuar, ¿y qué más? Creo que también necesitamos cambiar el precio
aquí, por lo que el precio en sí una vez más aquí tendré el signo de dólar y luego
las llaves porque estamos usando una propiedad de un objeto y hacemos el precio punto del
producto, está bien, asegúrese de que no sea nulo y aquí en realidad podemos eliminar
este primero, vale, no lo necesitamos y uh, además de este por ahora, está bien, todas estas son
cadenas, está bien, ahora lo guardaré y lo reiniciaré.

Y veremos cómo va ahora comencemos desde este
este lugar por aquí esta es la imagen y etiquetas esto es lo que tenemos y el precio ahora
vendremos aquí del lado chino y vemos que tienes Un poco de texto y este es el precio del producto.
Bueno, eso es demasiado, aunque ahora está aquí. Vemos el precio del producto y este texto es prácticamente
el mismo, pero este título no ha sido cambiado así que sigamos adelante y cambiemos
el título ahora creo que el título es uh veamos donde esta tenemos la descripción tenemos el carrito de compras, así que esta es la aplicación
sliver ahora aquí tenemos esta y lo hacemos tener la barra de navegación inferior bien para que esté
dentro de la aplicación Sliver, creo que veamos El contenedor por aquí está bien dentro del tamaño preferido,
así que por aquí simplemente haré el producto. El nombre del punto es un operador bang
y le indica que no será nulo. Está bien, ahora reiniciémoslo. Déjame hacer clic en
este. Sí, está bien, pero en este caso, por supuesto. Tenemos un texto muy corto y aquí el texto es
corto y aquí el texto es largo, supongo.

Y es como esperábamos antes de que trabajamos
bien, perfecto, hasta ahora todo está genial. Vale, todavía no estamos listos para ir a comprobar
el backend porque tenemos que aprender. y hacer algunas cosas más antes de continuar y verificar
el back-end en la siguiente parte de esto. tutorial veremos cómo trabajar en este botón y agregar
cosas al carrito y mostrarlo aquí, ¿vale? Eso es lo que queremos hacer en esta sección: aprenderemos los conceptos
básicos de una aplicación de compras o una aplicación de compras. carrito antes de continuar y aprender esta sección, primero
eche un vistazo a lo que hemos cubierto anteriormente Bueno, anteriormente aprendimos la arquitectura de nuestra aplicación
y aprendimos que desde el método principal llamaremos método init y luego cargaremos las dependencias y,
en general, nuestras dependencias son cliente API repositorios y controladores y así es como
toda la aplicación cobra vida y funciona bien y, en base a eso, más adelante aprendimos
cómo crear json anidado y cómo trabajar con Nestor.

Jason cómo codificar y decodificar json anidado y
también aprendimos cómo crear un modelo de producto. Seguiremos adelante y echaremos un vistazo a los conceptos básicos
de un carrito de compras o una aplicación de compras. En general, tendremos una interfaz de usuario y la interfaz de usuario interactuará
con el controlador del producto y el controlador del producto. interactuaría con el controlador del carrito y el controlador
de la tarjeta interactuaría con el almacenamiento local cómo ocurre la interacción aquí, así que en tu interfaz
de usuario tendrás una instancia de tu producto entonces tendremos una instancia de producto y usaremos esa instancia
de producto usando un operador de punto al que llamaremos los campos de propiedades y métodos de nuestro controlador
de producto ahora si necesita más información de un controlador de tarjeta para que pueda tener una instancia de controlador
de tarjeta dentro del controlador de producto, de esta manera Podrías llamar a la información del controlador del
carrito dentro del controlador del producto y luego La interfaz de usuario también obtendría una instancia del
controlador uh cart o de las propiedades, pero no directamente Esto sucederá a través del controlador de producto.
Por ejemplo, control de producto desde aquí la instancia.

Llamaríamos al controlador del carrito desde aquí llamaremos
a algunos campos o propiedades del controlador del producto y luego el controlador de producto seguirá adelante y llamará
a los métodos de campos relacionados del controlador de tarjeta Al usar una instancia de controlador de tarjeta dentro del
controlador de producto, ahora sucederá lo mismo para Almacenamiento local desde el controlador del carrito. Un controlador
de tarjeta tendrá una instancia de almacenamiento local. Entonces, si voy a obtener información del almacenamiento
local, ingresaré al controlador del carrito usando la instancia de almacenamiento local está bien, así es como funciona
el flujo básico en general para una aplicación de compras Realmente no seguirías adelante y llamarías a los métodos o campos del
controlador de tarjeta directamente dentro de la interfaz de usuario. Lo haces a través del controlador de producto, está bien y si
el controlador de producto desea obtener alguna información. desde el almacenamiento local no interactuará directamente
con el almacenamiento local a través del cual sucedería controlador de tarjeta y de esta manera nuestras lógicas
son todas lógicas de negocios separadas y su código se vuelve más limpio ahora, después de aprender esto,
seguiremos adelante y crearemos nuestro carrito de compras.

Mucho después de tener los conocimientos básicos del producto
controlador de tarjeta controladora de producto modelo y modelo de carrito, ahora sabemos cómo seguir adelante
y crear bien nuestra aplicación, primero llegaremos a nuestro controlador de producto y lo abriremos aquí Este es nuestro popular controlador de productos
y aquí primero configuraremos un método. justo debajo de este método, así que lo colapsaré.
Ahora ven aquí y lo llamaré. anular el tipo es el tipo de retorno es nulo y llamaré
al nombre del método establecer cantidad Bueno, en general, se necesitará
un tazón y un incremento. ahora, como vimos anteriormente en
nuestra comprensión básica de que Necesitamos pasarle un valor booleano para
que este método, en general, funcione sería responsable de aumentar o disminuir
los elementos según el clic de este botón así que ahora lo estableceremos en verdadero o falso cuando
llamemos a este, bueno, verdadero significa que vamos a aumentar el elemento en función de este clic falso significa
que vamos a disminuir el elemento en función de este clic en esto, haga clic en Aceptar, por eso necesitamos hacer
una verificación condicional y haremos un incremento.

Incrementa muy bien, si es cierto, veamos que me
falta una n, si es cierto, entonces aumentaremos algo está bien, de lo contrario disminuirá está bien,
está bien y aumentará lo que por supuesto aumentará uh, cantidad correcta, por lo que desea aumentar
la cantidad o disminuir bien la cantidad. Por esta razón, primero aquí necesitamos establecer
una variable y la llamaremos uh cantidad entera. Bueno, en general, cuando lo inicialicemos,
lo inicializaremos como cero ahora. por aquí uh, vamos a establecer este valor, bien, ahora
aquí podemos hacer la cantidad ahora mismo. Podría hacer una cantidad llamada cualquiera que sea la cantidad
dada más uno, bueno, inicialmente es cero, ¿verdad? y cero más uno es uno, así que cuando llamamos a este
método en función de este evento de paso aquí para que se llame y si el valor se ha
pasado verdadero entonces caería en este categoría, por lo que inicialmente la cantidad es cero, por lo
que cero más uno es uno y si haces clic en él la próxima vez ahora uno más uno es igual a, por lo que si haces un tercer
clic en esto, se convertirá en dos más uno igual tres, entonces la cantidad total es tres, así que esta
es la idea básica, así que ahora seguiremos adelante.

Y cópialo y ponlo aquí ahora esta vez en lugar
de hacer más haremos menos, vale, sí. Muy bien, con esto, en realidad esta es la función
más básica de aumentar o disminuir tu cantidad en el artículo del carrito, por este motivo, seguiremos
adelante y lo usaremos en nuestra interfaz de usuario, así que Seguiremos adelante y encontraremos nuestros detalles de comida popular
aquí y definitivamente aquí tenemos una interfaz de usuario, ¿vale? De todos modos, volveré a nuestra
página principal y haré clic en ésta. y aquí tenemos este uh, veamos, hay un
contenedor inferior y dentro de él tenemos este ícono, bien, ahora este ícono, este
es el ícono que queremos tocar y aumentar bien primero continuaremos y lo verificaremos con el ícono
que agrega el ícono ahora, para eso lo ajustaremos envuélvelo alrededor del widget, lo siento Entonces, si estás en Mac, lo seleccionarás
y la opción Enter y luego tendrá esto.

Opción para el widget, está bien, ahora lo seleccionaremos
y lo cambiaremos a detector de gestos. Bien, ahora ingresaré y presionaré Intro.
Iremos a una nueva línea nueva y aquí. Tendremos un evento on tap, bien, así que aquí
lo hacemos, on tap, bien, ahora desde este on tap. evento queremos llamar a este método el que acabamos
de crear, está bien, ahora veamos esto Bueno, para poder llamar a un determinado método desde
este controlador, necesitamos crear una instancia de Esto está bien, ahora generalmente podemos seguir adelante
y usar bit get builder para solucionarlo y luego podemos crear la instancia y así es como continuaremos
y lo haremos bien, así que vendremos aquí y envuélvalo alrededor de get builder
pero para ese primero cortaré este y aquí llamaré a get builder y se necesita producto
popular controlador de producto popular controlador de producto y luego
toma una función y así pero se necesita un objeto aquí, así que el objeto es este
en realidad, así que lo llamaremos popular popular, perdón por el error tipográfico, producto popular, vale,
ahora presionaremos Intro, así que creamos una nueva línea.

Entonces, para que puedas ver ahora aquí, regresaremos
y devolveremos lo que teníamos antes. ahora con esto creamos una instancia de este controlador,
está bien, así que obtener el constructor realmente toma uh Bueno, yo diría que es una función y es un tipo de controlador
de producto. Bueno, de todos modos, ahora por aquí. Podemos usar la instancia y hacer ciertas cosas,
así que aquí usaremos el producto. producto popular este y luego haremos
punto y luego tendremos acceso a Establecer cantidad creo que esto está bien ahora, por
ahora lo configuraremos como verdadero, está bien. este en realidad quiere pasar un valor booleano como un verdadero
visto bueno y ahora el error debería desaparecer Ahora, una vez más, si seguimos adelante e intentamos registrarlo
o imprimir un resultado, definitivamente se imprimirá.

Por aquí, está bien, diremos incremento, está bien,
ahora lo devolveré y lo pondré aquí ahora. Puedo hacer clic en esto y veo que dice incrementar. Está
bien, ahora para el siguiente, realmente queremos aumentar el resultado en función de esto, pero en este momento
no lo estamos haciendo bien, pero tenemos que hacerlo y Por esta razón, bueno, ¿cómo hacerlo aquí? En
realidad, necesitamos aumentar este valor, sí. entonces, ¿cómo podemos hacerlo bien para este?
En realidad, necesitamos poder acceder Esta en nuestra interfaz de usuario está
bien, pero es una variable privada.

Bien, entonces seguiremos adelante y crearemos un captador público
para este, así que iremos aquí en la parte superior. Al igual que antes, usted sugiere obtener cantidad
y él obtendrá la cantidad para nosotros. Está bien, ahora hay otra forma
de escribir esta si no lo sabes. Si te confundes, ¿qué es esto? También puedes hacer
lo mismo con esta cantidad de devolución. pero esta no es la forma habitual de hacerlo, a la mayoría
de las personas les gusta esto, así que nos atendremos a Este está bien, se llama función de flecha. La función
de flecha solo tiene una línea para regresar. por eso se llama función de flecha o algo
que algunas personas llaman flecha gorda Bien, entonces en la función de flecha solo devolvemos una
línea, por lo que devolverás el valor que sea este.

Así que ahora cerraré este, no necesitamos
este, ninguno de ellos por ahora. y aquí ahora este es el lugar uh veamos este
es el lugar donde deberíamos conseguir eso valor está bien, ahora aquí podemos obtener acceso
a esta instancia como esta, está bien y podremos para llamarlo así hacemos popular producto popular cantidad
de puntos está bien y creo que debemos configurar Está bien, ahora sigamos adelante y guárdelo. Está
bien, sí, ya tenemos tres ahora si haces cuatro. veamos, creo que eliminé este registro aquí, así que
lo volveré a colocar aquí y haré un incremento. Bien, ahora reiniciémoslo. Ahora tenemos
siete. Ahora hay un incremento, como ves. O puede establecer el valor. Imprima el valor
aquí para que hagamos la cantidad.

Necesitamos convertirlo a cadena, ¿vale? entonces ahora tenemos 10 tenemos 11 tenemos 12
así pero aquí no hay aumento eso es porque aunque se está incrementando, el estado del estado
todavía está dentro de este controlador Necesitamos decirle a nuestra interfaz de usuario que
sepa sobre esto y para eso simplemente podemos activar para su actualización, actualice una función incorporada para obtener
el paquete de administración extendido, por lo que, en general, simplemente continúe, llámelo y podrá saber
inmediatamente que hay un nuevo valor. Bueno, entonces vuelve a dibujar la interfaz de usuario. Aquí
verás que ahora aumenta inmediatamente, ojalá tenga sentido. Bien, ahora con esto ya podemos interactuar
con nuestra página y el controlador como que ahora vamos a seguir adelante y hacer lo contrario
ahora lo contrario significa que queremos disminuir Bien, para esta una vez más, esta sección, de
hecho, la copiaré y la eliminaré aquí. y lo ponemos allí y creo que necesitamos una
coma y en lugar de agregar eliminamos, ¿vale? ahora aquí en lugar de verdadero hacemos falso ahora
si es falso pertenecerá a esta sección, ¿vale? Muy bien, ahora imprimimos un registro aquí
y aquí imprimimos decremento, está bien y aquí haré más cantidad para encadenar, está bien, así que
cualquiera que sea la cantidad que haya allí, la tomará y hacer menos, está bien, ahora hagamos menos como dices es 17 18
19.

Así que si hago clic en hacer clic, todavía está ahí y también puedes aumentarlo. Es hermoso, así
que ya podemos incluirlo en nuestro carrito. en realidad y aquí ahora este es el problema,
se pone negativo y esto no es lo que quieres Bien, antes de seguir adelante, aumentar y
disminuir, devolver un valor y guardarlo. Necesitamos verificarlo. Bueno, por esta razón
continuaremos y crearemos una nueva función. Y ahora aquí crearemos una función y el nombre de
la función sería verificar la cantidad que hará. Verifique la cantidad y la cantidad vendría
de aquí, así que llamaremos a esta función. desde aquí y pasaremos este valor aquí para
que lo recibamos aquí como una cantidad Está bien, ahora queremos devolver algo. Está
bien, así que comprobaremos la cantidad. Comprobaremos si es inferior a cero o superior
a cierta cantidad o si es la correcta. Entonces, lo que sea que sea, regresará, así que primero
verificaremos si es menor que cero o no está bien. haz uno o dos menos que cero si es menor que cero aquí
lo hacemos, simplemente devolveremos cero, ¿vale? Ahora bien, si la cantidad cuantitativa es mayor
que ciertos números 20, entonces simplemente devuelve 20.

Está bien, este es un número aleatorio.
Para este artículo solo deseas tener el máximo. 20 pedidos de una persona, está bien, quieres aceptar,
por eso escribes aquí 20, pero se basa en según sus necesidades, puede hacer cualquier cosa, pero en realidad
estos datos deberían provenir del servidor, pero eso debería aumentar mucho la complejidad
total de cálculo y código Así que por ahora lo configuraré en un número aleatorio
para que puedas cambiarlo según tus necesidades. También podrías tomarlo desde el servidor,
pero en este tutorial no lo cubriré. ese, así que lo mantendré un poco codificado,
pero siéntete libre de cambiar el número según según sus necesidades, está bien, entonces si es menor que
cero, devolvemos cero, si es más de 20, devolvemos 20 de lo contrario, devolveremos el número que sea, así
que esa es la cantidad, está bien, 1 2 t ahora Una cosa que debes saber es que esta cantidad es
diferente de la cantidad que declaré aquí.

Entonces esta variable en el alcance global, esto está en el alcance
local, al igual que cualquier otro lenguaje de programación. el alcance local tiene prioridad sobre el alcance global, así
que aquí esta cantidad definitivamente está bien, así que ahora esto esto aquí todas estas condiciones están
devolviendo algo correcto así que eso es por qué necesito poner fin aquí está bien ahora como
lo hago está bien ahora todo lo que necesito hacer llama a esta función desde aquí, está bien, entonces la
pondré allí y le pondré un corchete alrededor, ¿vale? Copia este y lo pondré aquí también en
lugar de más o dos menos, está bien. Ahora continuaremos y lo guardaremos bien y veamos que
ahora tenemos dos elementos correctos e intentaremos Disminuye más y veremos qué pasa. menos uno cero ahora ya no disminuye, está
bien, porque solo estamos devolviendo cero desde aquí está bien porque es menos, verifica
este valor aquí oh, es menor que cero entonces la cantidad es cero, no puede ser menos ahora hagamos
20, está bien y veremos si podemos aumentar más de 20 o no, no, no puedes, como ves, si hago
clic en esto ya no funciona, así que ese es el único número que obtenemos el número más alto,
pero, por supuesto, esto es lo que se ve en el registro.

Bien, también debemos decirle a nuestro usuario que
estás realizando ciertas operaciones incorrectas. Bueno, podemos hacerlo fácilmente aquí si realmente
es menor que cero antes de regresar. podemos enviar un mensaje al usuario y eso es bastante fácil con
get x, así que todo lo que necesitas hacer es llamar a un función get.snack está bien porque recuerda que este es un
controlador y este controlador es del tipo gettex, está bien todo lo que se necesita es un título y el nombre de nuestro
título es el recuento de elementos y el mensaje.

No puedes reutilizar más, sí, ese es el
mensaje, pero podemos comprobarlo un poco. y estilo en esto, así que aquí podemos establecer
un color de fondo. Está bien, hacemos eso y aquí lo hacemos. Los colores de la aplicación aparecen bien ahora. Creo que primero debemos
importar este archivo; de lo contrario, no podremos acceder a él. propiedades estáticas y usarías el color principal, por
lo que el color de fondo es el color principal y el color texto para el color del texto hacemos colores
punto blanco está bien, ahora veamos aquí me falta una coma ahora el error debería ser  también
necesitamos importar esta biblioteca aquí Bien, ahora esto es para si es menor que cero, si es más
de 20, ahora aquí no puedes agregar más, ¿vale? Ahora haremos lo mismo, sí, así que ahora sigamos adelante,
guardémoslo y verifiquemos el resultado. Bueno, después de guardarlo, intentemos
agregar uno más y veremos qué pasa. No puedes agregar más, está bien, ahora vamos
a disminuirlo y veremos el resultado. No puedes reducir más. Vale, el mensaje
ya funciona. Bien. Ahora sigamos adelante.

Y agrega uno más ahora vendremos aquí ahora
regresaremos y se queda allí, está bien Ahora, si vengo aquí, todavía está aquí, pero
este elemento en realidad no lo agregué. así que todo lo que abras más adelante seguirá ahí.
Bueno, eso se debe a que esta sección tiene estado es que estamos tratando con un controlador de producto
popular controlador de producto y hay un campo cual es la cantidad, está bien, entonces este campo es global
para este archivo aquí, así que cualquier cosa que abras permanece en la memoria, está bien, no es un alcance local, permanece
en la memoria, así es como funciona cualquier archivo abres, todavía está allí, vale, definitivamente, esto
no es lo que queremos, vale, no quieres tener siete después de agregar tres, pero se convierte en siete, así
que esa es una forma incorrecta de lidiar con esto y esto no es lo que queremos, está bien, pero esta lógica
es realmente genial, no hay problema con esto.

Pero necesitamos agregar otra función para que cada vez que abramos
una nueva página, una nueva pantalla o un nuevo alimento Necesitamos inicializar algunos datos y verificar
los valores anteriores para evitar esto porque más Aquí estas dos funciones verifican la cantidad y establecen
la cantidad. Lógicamente, lo están haciendo perfectamente. Bien, ahora este es el problema de arquitectura del que
estamos hablando, así que aquí necesitamos crear un nueva función y esa función será responsable de
verificar las cosas actuales, ¿vale? Muy bien, entonces para esa función crearemos
una función para esa y tendrá un tipo vacío. queremos devolver cualquier cosa, simplemente verificamos las
variables locales y hacemos algunos cambios y eso es todo. Está bien, ahora lo llamaré datos de inicio. Está
bien, entonces aquí el producto unitario. Suena mejor. Bien, ahora esto tendrá un modelo de producto. Bueno,
creo que lo tendremos más tarde.

Más o menos primero. todo lo que tenemos que hacer es llamarlo desde algún
lugar y luego, una vez que lo llamemos, configuraremos La cantidad actual, esta que está en el alcance global,
la estableceremos en cero, siempre que llamemos. En este lo pondremos a cero y eso es todo lo que hacemos por
ahora. Está bien, cada vez que abrimos una página nueva. tenemos que llamar a este, está bien, ahora vendremos aquí
en un controlador de producto popular, así que aquí uh, podemos simplemente seguir adelante
y llamar a la función que creamos, ¿vale? Está bien, entonces eliminaré
este, ya no lo necesitamos.

Vale, aquí simplemente llamaré a get.find. Vale,
sí, get dot find popular popular. controlador de producto, este está bien,
lo encontrará y luego usaremos init producto, está bien, llamaremos a este. Necesito hacer la
inicialización. Ahora sigamos adelante, guárdelo y Ahora venimos aquí, abrimos esto, podemos agregarle
un elemento y reducirlo y el otro. Las lógicas no cambian, siguen igual. Ahora
vendremos aquí, veamos, vamos a un La nueva página ahora se establece en cero, pero en la nueva página
también podemos hacer la misma operación que estamos haciendo. temprano, está bien, pero con este enfoque, el problema
es que establece los datos en cero, ¿vale? Ahora, ese es un problema. Necesitamos superar este problema.
Para superar este problema, debemos superarlo. Necesito hacer más cosas en este controlador y en este
método, está bien, antes de ir a la nueva página. Si te gusta, quiero decir, si te gusta el producto, lo editas
y lo agregarías a esta tarjeta, ¿vale? una vez. agregas a esta tarjeta tienes que guardar los datos. Está
bien, ahora guarda los datos globalmente en una variable.

Está bien, y más adelante, cualquier cosa que agregues, está bien,
esos datos aumentarán, es decir, cuando guardes los datos. A nivel global, esos datos dicen que, por ejemplo, aquí agregaste
dos y confirmas estos tres elementos aquí. Se agregaron tres elementos y usted confirma aquí, está bien, agreguémoslo,
está bien, después de editarlo, después de agregarlo. Aparecerá aquí inmediatamente que agregaste
dos elementos y se guardará para agregar tres. artículos lo siento y se guardará globalmente aquí
en nuestra aplicación y luego cuando vengas aquí e intento trabajar en un nuevo producto y tal
vez agregué dos elementos y lo confirmo aquí anteriormente tenías un tres tres más
dos, inmediatamente cambiaría a cinco pero al mismo tiempo cuando vuelvo por
aquí porque anteriormente agregué Podré ver tres elementos.

No se están borrando los
datos. Está bien, pero actualmente se están borrando. aquí y también necesitamos este, por lo que debemos introducir
más variables para realizar un seguimiento de los datos están bien, entonces aquí crearemos
otra nueva variable y la llamaremos uh y aquí en los artículos del carrito, bien, estos son
los artículos en el carrito y se inicializarían como cero al principio y luego también podemos
hacerlo bien, ahora aquí lo haremos así y obtenga artículos difíciles, está bien aquí
y aquí lo haríamos en artículos del carrito más establezca la cantidad o la cantidad, esta está bien,
por lo que sería responsable del total de artículos agregado en nuestro carrito, está bien desde diferentes
páginas, incluso aquí, pero primero nos estamos enfocando solo en este, está bien, entonces sí, eso es lo que queremos,
así que cualquier cosa que agreguemos sería agregado aquí y esto sería responsable de realizar
un seguimiento global de nuestros productos o Los elementos que se agregan a esta lista están bien ahora,
por supuesto, esta función jugará un papel importante.

Rol aquí, está bien, cada vez que necesitemos los datos,
también configuraremos los datos aquí, este en el carrito. elementos es igual a cero, bueno, se podría decir cuál
es la diferencia, lo estás configurando con cero, sí Haremos eso y luego haremos una verificación condicional
si veremos si previamente hay datos guardados o No, si se guarda, tomaremos esos datos, de acuerdo,
para que los datos nuevos provengan de alguna parte. eso se ha guardado bien y nos aseguramos de que inicialmente
todo sea cero, pero porque lo haremos tenemos otra variable donde configuramos nuestro, quiero
decir, lo que sea que estemos guardando se guardará allí y desde allí lo tomaremos y lo pondremos aquí y
luego, si agrega más cosas, haga clic aquí entonces esto y esto se juntarían, así que aquí hacemos
como pseudopodría obtenerse desde el almacenamiento Está bien, entonces tendremos un sistema de almacenamiento y lo obtendrás
del almacenamiento y lo colocarás en los artículos del carrito, ¿vale? luego, si estás seguro, tal vez tengas que obtener
ciertos números del almacenamiento que tienes, tiene ciertos números porque los guardaste.

Una vez que
hagas clic en este botón, guardaremos todo en un el almacenamiento está bien y los sacaremos del almacenamiento, así que comprobaremos
e intentaremos que los elementos del almacenamiento estén bien y luego Digamos, por ejemplo, almacenamiento. Anteriormente agregué tres.
Está bien, después de presionar este botón, ahora aquí aparecerá. Tenemos tres pero, por supuesto, tenemos que comprobar si
este elemento ya existe en nuestro almacenamiento o no. si existe, obtendremos el elemento, así que aquí tendremos
si existe, está bien, si existe en alguna parte si existe, obtenga el elemento, por ejemplo, diga que
es un tres, está bien, todo está bien y si no existe luego continúa con lo que estás haciendo, ¿vale?
al final, cuando llames, di, por ejemplo en el almacenamiento ya tenemos tres, así que
tenemos tres aquí y luego agregas más, ¿vale? digamos, por ejemplo, uno, dos, tres, entonces
esto ya está en el almacenamiento. y tienes tres y luego quieres agregar
más cuando regreses a esta página Entonces aquí primero obtendremos estos tres y luego,
debido a que tenemos la cantidad correcta, este entonces esta cantidad establecida esta
cantidad se agregaría con esto junto y luego obtendremos la cantidad total aquí, así
que esta es la lógica.

Bueno, puede sonar un poco. Es complejo en este momento, pero a medida que trabajemos
más en ello, eventualmente lo superaremos. Bueno, como dije, tenemos que verificar si cierta
cantidad se ha guardado en cierto producto. se ha guardado bien, así que aquí primero debemos guardar bien
nuestro producto, ahora necesitamos guardar un producto en un controlador por eso sería un controlador de tarjeta
relacionado con este ícono aquí, está bien, para eso uno, debemos seguir adelante y crear primero crear y un
controlador, por lo que debemos seguir adelante y crear un controlador de tarjeta, pero antes de seguir adelante y crear
un controlador de tarjeta, primero debemos crear un contenedor para el controlador de tarjeta, recuerde que cada controlador
debe tener su propio repositorio dedicado, ¿vale? Bueno, en general, como dije antes, los repositorios
están dedicados a procesar datos.

O pedir perdón, los envoltorios están dedicados a obtener datos
o almacenar datos, eso es todo lo que hacen, así que De todos modos, aquí seguiremos adelante y crearemos
un nuevo archivo y lo llamaremos cartucho, vale, cartucho. por ahora lo llamaremos una clase como repositorio
de carrito y por ahora esto sería vacío no tendrá nada bien y a medida que crezcamos
le agregaremos más cosas y luego vendremos Para los controladores de aquí crearemos otro archivo
al que llamaremos controlador de tarjeta. punto punto entonces en toda nuestra aplicación solo tendremos
una tarjeta y esa es el controlador de la tarjeta y se ocupará de todo lo demás, está bien
con todos los controladores de productos. Ya sea que sea popular o recomendado, aquí crearemos
una clase y la llamaremos controlador de tarjeta. y extenderá el controlador get x ahora aquí porque cada controlador toma la relación
relacionada, así que aquí tenemos que llamar En nuestro repositorio de tarjetas de relación nuevamente crearemos una
instancia instantánea de una variable o un objeto basado en esto.

Bien, ahora necesitamos obtener el archivo. Bien, ahora
el error debería desaparecer. Veamos y necesitamos. ponerlo en nuestro constructor también para el controlador
de tarjeta y requerimos esta tarjeta de puntos, ¿vale? hardware y con esto ya casi terminamos con la inicialización
del controlador, ahora necesitamos hacer otra cosa porque todos los controladores
deben cargarse en las dependencias, ¿vale? Necesitamos cargar nuestras dependencias y nuestras
dependencias están aquí, ¿vale? Así que aquí cargaré el controlador de la tarjeta
Apple. Está bien, aquí haré el punto Lazy Lazy. coloque esto para cargar nuestras dependencias y aquí llamaremos
al repositorio de tarjetas, está bien y repositorio de tarjetas en general, por ahora
estaría vacío, vale, no aceptaría nada el constructor como te mostré aquí es una clase vacía,
no hay nada bien, así que no lo necesitamos para pasar cualquier parámetro ahora como los demás
controladores, debes cargarlo aquí de forma diferida. y aquí hacemos nuestro controlador ahora, por
supuesto, el controlador de tarjeta toma la tarjeta repositorio, obtenga puntos bien con esto, podrá
encontrar la onda de la tarjeta por nosotros Bien, ahora con esto nuestras dependencias están listas
para cargarse.

Bien, sí, ahora cargue la aplicación desde El rasguño, asegúrate de que todo esté bien.
Ahora aquí, creo que podría eliminarlo. Nuestras huellas, no las necesitamos ahora. Creo
que llegaron temprano, así que las eliminaré. Está bien, está bien, estamos geniales y hay
otro en el controlador de producto recomendado. Este también lo eliminaremos, pero lo mantendremos
activado si algo sale mal. Veremos que se ha impreso, así que por ahora
producto recomendado, lo cerraré.

Bueno, antes dije que si hacemos clic
en esto como productos, el aumento Pulsaremos este botón, tocaremos este botón y
luego lo guardaremos en una variable global. Ahora esa variable global en realidad es un mapa global, por
lo que queremos agregar un elemento a un mapa y ese mapa. vendría del controlador de la tarjeta. Ahora el controlador
de la tarjeta creará un mapa porque en El mapa cada vez que hagamos clic en esto, todo se
guardará en un mapa en clave y valor de par. Bueno, en general, las claves serían int como la identificación
y las entenderemos mejor a medida que trabajemos en ellas. y se necesitará un modelo, está bien, pero aún no
tenemos el modelo porque recuerda cuando lo proceses. datos en general cuando recibes datos del servidor
tienes un modelo cuando envías datos al servidor basado en ese modelo envías datos ahora
aquí estamos guardando mucha información globalmente No solo este número, tenemos que guardar el nombre del producto, la cantidad
del producto, el precio del producto y el ID del producto.

Pero ahora esto es un poco diferente a esto.
Esto sería un poco diferente al producto. modelo porque en el modelo de producto no tenemos
cantidad y cosas así están bien especialmente la palabra cantidad ahora en el controlador de la tarjeta necesitamos
guardar información sobre cuántas cantidades Se ha pedido cuál es el precio total y cuál es la
identificación del producto. Cosas así, ¿vale? Por eso tendremos que seguir adelante y crear
un nuevo modelo y lo llamaremos carrito. modelo, está bien, parte del modelo, pero, por supuesto, este
modelo aún no existe, por lo que nos arrojará un error.

Bien, crearemos elementos con un nombre variable. Bien,
crearé un mapa vacío ahora aquí en este carrito. El modelo arroja un error porque no tenemos este
modelo. Bien, cerraré esto por ahora y Por aquí seguiré adelante y copiaré parte del modelo
de producto. Ahora nuestro modelo de producto es aquí, así que no necesitamos reescribir todo, así
que solo copiaré parcialmente esta clase aquí. y luego iré a mi archivo de proyecto aquí
y aquí hay una carpeta de modelos Crearé un nuevo archivo y lo llamaré modelo
de carrito, vale, modelo de carrito de dardo.

Ahora aquí lo devolveré todo pero en lugar
de producto lo llamaremos carrito bueno y aqui esta lo mismo veamos, sí, eso es todo, ahora algunas
de las propiedades que no necesitamos modelo de carrito en realidad no queremos guardar ninguna
descripción uh y no queremos guardar ninguna estrella No queremos guardar ninguna ubicación.
No queremos guardar estas cosas también. Vale, tampoco queremos guardar este, así
que continuaremos y los eliminaremos. así que mantengámonos organizados elimínelos ahora aquí la sección de descripción no necesitamos la sección
de estrellas que no necesitamos y esta parte también Bien, este sería nuestro modelo
de carrito de productos muy simple. pero aquí también necesitamos agregar algunas otras cosas, así
que aquí agregaremos la cantidad para que el contenido finalice. llámalo cantidad y aquí también tendremos un toro
aquí y lo llamaremos existe, entonces significa ya sea que exista o esté en el carrito o no, y luego
tendremos una cadena ahora para ahorrarnos tiempo.

Esta vez es como cuando fue creado, ¿vale? así que mantendremos un seguimiento de ese, por
eso tenemos esta cantidad de tiempo antes cuántos elementos se han agregado, está bien y existen,
lo activará, guardaremos el valor si se ha agregado agregado en nuestro carrito aquí o no,
para eso usaremos este campo más aquí ahora aquí tenemos que venir aquí
y haremos esto, digamos cantidad, creo y este punto existe, creo que debería existir,
no es exacto y esta vez está bien, y aquí necesitamos agregar el campo relacionado a medida que creamos
un objeto basado en los datos json, así que aquí lo hacemos cantidad cantidad json y veamos error tipográfico una vez más y aquí ok, veamos q u a n oh, veamos, solo copiaré
la q-u-n-t-i-t-y somos buenos q-u-a-n Ok cantidad ahora aquí también deberíamos verificar
que este exista json exista ahora aquí time json está bien, veamos Ahora bien, todo esto es opcional.

Ahora iremos a nuestro
controlador de tarjeta y veremos todo lo que necesitamos. para importarlo, está bien, está bien, entonces
con esto podemos importar uh uh podemos crear una variable de artículos que se escribe ahora en
el carrito, crearemos un nuevo método y lo llamaremos foil agregar elemento ok, ahora este se llamará
desde aquí cuando hagas clic en este Se enfriaría pero, por supuesto, no recibiría llamadas
directamente desde la interfaz de usuario.

Ser llamado desde el controlador de producto, por lo que en
el controlador de producto crearemos otra función que deberíamos llamar a agregar elemento y desde
allí llamaremos a este y lo creará. el proceso de datos necesario y guárdelo, así que primero
seguiremos adelante y crearemos este método. y este método tomaría el modelo de producto como producto
y también debería tomar la cantidad para que debes pasar la cantidad porque queremos guardarla,
así que aquí la llamaremos cantidad completa. Justo después de eso, una vez que se haya llamado
a esta función, queremos guardarla en este mapa. Ahora, para guardarlo, no queremos guardar los elementos
duplicados. Por eso debemos verificarlos. Bueno, para ese primero revisaremos aquí
los elementos de este para obtener este. y luego pondremos si está ausente. Bien, aquí verás
que mi mapa tiene una clave que es de tipo final.

Y tiene un valor que es un tipo de objeto, así que llamo
a los elementos dot put si los envié mientras ahora cualquier tipo de mapa tiene esta función integrada,
así que así es como se llama aquí todo lo que hace es verificar si esta clave (cierta
clave) se ha insertado en este mapa o No, si no es así, seguirá adelante e insertará ese
objeto, sea cual sea el elemento que esté pasando. basado en esta clave, si no existe,
la pondrá aquí, si existe, no Vale, eso es lo que hace ahora. Esta clave, esta
clave y mi clave de aquí son las mismas. pero tengo que asegurarme de que todo lo que dé
sea único, pero también se verificará internamente porque es por eso que se llama poner si está ausente, vale,
ahora aquí necesito poner una clave única aquí, vale ahora único vendría de este producto objeto
recuerde que el producto proviene de nuestro backend y el backend cada producto tiene su identificación, la identificación
es el campo de identificación y podemos seguir adelante y verifique esto para que esta sea la identificación y esta es una identificación
única, porque esta es la identificación principal clave en nuestra base de datos, comprobaremos nuestra base de datos
más tarde, pero por ahora debes saber que esta identificación es una clave principal, por lo que no se puede duplicar, por lo que
a medida que agregue más elementos en el backend, más productos Habrá nuevas ideas y todas serán únicas.

Bien, entonces
sabemos que la identificación del producto. es único y también sabemos que cuando tomas datos
del servidor los convertimos en modelo de producto Entonces, al mismo tiempo que hemos guardado esta identificación,
podemos continuar y verificar que lo hicimos. Así que este es nuestro modelo de producto. Recuerde que hay un
campo de identificación para que cuando convierta los datos a un objeto modelo ya lo guardamos, tal vez no lo hayas
notado, pero lo creamos aquí y pasamos el id aquí y lo guardé en este campo, de acuerdo, así como
el objeto creado, la id se ha creado automáticamente guardado dentro de él, está bien, por esa razón, ahora qué
puede hacer: podemos obtener este objeto y podemos acceder a la identificación, la identificación del punto del producto que
ve, puede encontrarlo automáticamente porque el modelo del producto tiene un campo que se llama id, está bien, de todos
modos, veamos ahora aquí tenemos este error porque dice el argumento en tipo no se puede asignar al tipo
de parámetro final, bien ahora en el producto modelo dije que esto es opcional como ves aquí está
bien, está bien, ahora aquí estoy diciendo eso Cuando escribes así, estás diciendo: "Habrá un
valor y lo usarás, pero el compilador no".

Estoy seguro de si es opcional o no, porque aquí
lo pones como opcional. De hecho, podemos ir. adelante y elimínelo también, así que lo haremos.
Bien, ahora aquí para eso necesitamos usar otro. palabra clave que se llama requerida, está bien,
y luego debería desaparecer, veamos aquí ahora creó una instancia con conocimiento nulo que
debe inicializarse, por lo que tenemos que inicializarla antes de seguir adelante y usarlo ahora, eso es una gran
molestia, así que ahora dejaré lo que estaba haciendo Está bien, pero aquí puedo resolver este problema fácilmente
porque sé que siempre habrá una identificación.

No puede ser nulo pero necesito decirle al compilador
que no puede ser nulo cuando usas bang operador le decimos al compilador que no es nulo, está
bien, sí, eso es todo y ahora después de eso Todo lo que tenemos que hacer es poner un objeto. Recuerde que
esta identificación se refiere a este y a esta sección. aquí se refiere a este, está bien, entonces debemos darle
un modelo aquí, está bien, ¿qué modelo es? modelo de carrito, está bien, eso es lo que le estamos
dando ahora aquí, veamos, creo que necesitamos tenga el punto y coma también y nuestro modelo está bien, ahora,
por supuesto, el modelo del carrito si lo vemos aquí cuando creas un objeto, se necesitan estas cosas, está
bien, esta cosa, entonces debemos darles estas campos uno por uno, está bien, así que simplemente seguiremos
adelante, lo copiaremos y lo pondremos aquí. Está bien y en lugar de esta identificación lo hacemos. id y ahora aquí obtenemos la id del producto, está bien, entonces
esta id es la misma id que le estamos pasando, está bien.

Y lo guardaremos, pero, por supuesto, el modelo del producto
en sí no tiene idea de qué tipo de identificación. Lo siento, el modelo del carrito en sí no tiene idea
de qué tipo de idea es, pero sabemos que esto es una identificación única y esta es la identificación del
producto, en el futuro podremos recuperar esta y hacer más procesamiento de datos basado en eso, está bien, ahora aquí
lo guardaremos como nombre, está bien, ahora guárdalo páselo y el nombre también proviene de la identificación
del producto. Está bien, ahora todos porque Estoy tomando toda esta información del producto, por
eso simplemente haré el punto del producto.

Está bien, y aquí hacemos el precio y el precio del producto.
Aquí yo haría img y el producto punto mg. ahora aquí ahora estos tres son especiales ahora estos
tres por aquí la cantidad no existe en el producto modelo, solo puede existir en el carrito o en el controlador
del producto, está bien y esto es lo que estamos pasando Así que aquí hacemos la cantidad y guardaremos
cualquier cantidad que nos pases, ¿vale? Entonces esto se refiere a este y esto se refiere al modelo
de carrito. Éste está bien, así que no te confundas. Volveré por este, así que simplemente estableceremos
un booleano aquí, lo que hacemos es existir. y lo estableceremos como verdadero porque lo estás agregando correctamente,
por lo que verdadero significa que existe, ¿vale? ahora para este hacemos tiempo ahora aquí
necesitamos obtener un tiempo real porque el tiempo real es único, tiempo único, identificación única
y cosas únicas que podemos usar como referencia más adelante.

Por eso simplemente seguiremos adelante y usaremos
la fecha y hora. Está bien, aparecieron ahora. Cuando el artículo se agrega al carrito,
tomamos la hora actual y la guardamos. pero necesitamos guardarlo como una cadena, porque es
un tipo de cadena, por lo que esto en realidad sería poder agregar un elemento a nuestro controlador de tarjeta
y dentro de este, está bien, tienes razón para poder Para usar esta función en el artículo, todo lo que tenemos que
hacer es venir aquí como controlador de productos alimenticios. y dentro de ella crearemos una nueva función y la llamaremos
agregar elemento, el tipo de devolución es anular vale agregar artículo ahora este es un modelo de
producto como producto y desde aquí en realidad lo haremos llame a la función que escribimos aquí en el elemento.
Ahora deberíamos poder acceder a nuestro controlador de tarjeta desde aquí, está bien, este lo podemos hacer
fácilmente, está bien, ahora recuerda el producto inicial.

Uh, a este lo llaman desde cada página, por
ejemplo, esta la primera vez, uh, cuando lo construyes bien cuando creas por primera vez cualquier
tipo de página, se llama a esta función Entonces, en realidad, desde aquí podemos pasar un controlador
de tarjeta, así que aquí obtenemos dot find. y haremos el controlador de tarjeta y eso es todo, así
que este es el controlador de tarjeta que vamos a hacer. enviar bien, pero por supuesto este no tiene ningún parámetro
como controlador de tarjeta, así que agregaremos Está bien, lo siento, este de aquí lo agregaremos al
controlador de tarjeta y la tarjeta está bien así. y estamos bien, entonces el producto init tendrá una
instancia de controlador de tarjeta o producto init está pasando un controlador de tarjeta ahora en
nuestra aplicación en toda la aplicación, solo tener un controlador de tarjeta y una instancia
de ese, está bien, desde donde lo llames Desde donde llames al controlador de esta tarjeta podrás
acceder a todos los datos que hayan terminado.

Aquí está bien, entonces, en general, en una aplicación hay
un controlador de tarjeta y mantiene un seguimiento de su tarjeta. como agregar y eliminar el total de elementos, cosas así, está
bien, por eso ahora nuestro trabajo será mucho más fácil Ahora aquí inicializaremos el controlador de la
tarjeta. Bueno, aquí crearé una variable y sería el tipo de controlador de tarjeta, por lo que el controlador
de tarjeta y el carrito están bien y por aquí diré Lo inicializaremos más tarde. Vale, cuando utilices la
variable iluminada tendrás que inicializarlo antes.

Continúe y úselo, así que ahora, la primera vez,
lo inicializaremos aquí y haremos la tarjeta. tarjeta igual ok una vez que tengamos este ahora desde aquí podemos Así que ahora aquí se inicializa, está bien, entonces
si se inicializa el control de la tarjeta. La instancia está dentro de esta, por lo que podemos llamar
a esta función, que se llama elemento desde aquí. y al mismo tiempo podemos pasar el modelo del producto,
así que aquí lo llamaremos cart dot El artículo está bien, este y aquí estamos
pasando el producto y la cantidad. Bueno, ahora la cantidad en sí se guarda aquí,
pero pasaremos la variable privada, no la pública. entonces desde la interfaz de usuario llamaremos a este e internamente
llamará al controlador de la tarjeta y al relacionado las funciones son métodos, está bien, así es como se relaciona, por
lo que, en general, la mayor parte del tiempo desde la interfaz de usuario Si no quieres llamar al controlador de tu tarjeta, llamarías controlador
de producto y un controlador de producto lo haría.

Controlador de tarjeta de llamada, está bien, aquí estamos,
ahora en detalle de comida popular y aquí agregaremos función agregar artículo y para poder agregarlo necesitamos
encontrar esta sección donde dice agregar al carrito Creo que agregar al carrito debería estar en algún lugar aquí, bien, ahora
este está envuelto alrededor de texto grande, así que lo haré. En Mac haré la opción Enter y obtendré esta
opción y aquí escribiré detector de gestos. y una vez que haga eso aquí tendré un evento de activación,
está bien, enderezaré y dentro de él llamaré agregue el elemento ahora, veamos definitivamente este
debería incluirse en get builder, que ya está y tiene una instancia de este controlador, por lo que puedes usar
esa instancia para llamar a esta función, así que lo haré ven aquí, usaré este simplemente y luego llamaré para agregar
elemento, está bien y todo lo que tenemos que hacer Necesitamos pasar el producto como una instancia.
Bien, ahora ya está, veamos de dónde viene.

Esto viene de aquí porque cuando
llegas a una nueva página cada página tendrá esta instancia que se crea a partir
de uh, no es una instancia, es solo un objeto de nuestra lista de productos, está bien, de todos
modos, ahora estamos aquí y continuaremos y tocaremos Sobre eso y antes de continuar y tocarlos, creo que
podemos poner un registro dentro de esta función. Bien, ahora esto está en el propio controlador,
así que pondré un registro aquí. dentro del controlador de la tarjeta, bien aquí, como
ves, hay una función de flecha, bien aquí, ahora. En lugar de usar la flecha, en realidad puedo hacer este
tipo de función simple, así que aquí haré esto.

Uno está bien, todo lo que necesito es hacer una declaración de
devolución, está bien y a veces es conveniente imprimir su mensajes porque quiero imprimir un mensaje aquí,
diría que agregue el artículo al carrito Bien, ahora continuaremos y reiniciaremos nuestra aplicación
ahora. Una vez que haga clic en esto, esperaré ver un elemento aquí está bien y un registro aquí
pero al mismo tiempo podemos imprimir muestra información que imprimirías aquí nuestra identificación
de producto, está bien, hacemos punto de producto id bien cualquiera que sea el producto que se le
dio y lo convertiremos a cadena, así como al La cantidad del producto está bien, entonces este también
queremos imprimir aquí la cantidad correcta.

Aquí agregue la cantidad a la cadena, está
bien, este es el registro que esperaría Veo aquí una vez que hago clic en esto, así que sigamos
adelante y hagamos clic en esto y aquí sí, estamos. cargado todo se ha cargado correctamente ahora
vengo aquí definitivamente todo es cero ahora haría clic en esto y ahora son las cuatro,
sigamos adelante y esperemos y veamos qué pasa. Hice clic en esto y decía que agregar artículo al carrito y cuatro,
por lo que hemos agregado cuatro artículos, ¿está bien? eso es hermoso y la identificación es una, creo que la identificación
del carrito está bien, sí, ahora seguiré adelante por aquí e intente agregar este y, por supuesto, esta vez
esta información desapareció porque esto es lo que hicimos temprano porque cada vez que llegamos
a una nueva página se actualiza todo ahora mismo haga clic en esto, lo agregaré aquí, así que digo
que el ID de la tarjeta es 2 y la cantidad es 2 también está bien, ahora vendría aquí y
ahora haría clic en esto, pero aquí primero Lo que esperaría es que aquí todavía
tenga el registro, pero no lo tenemos.

Porque aún no hemos hecho esa parte pero
es cierto al mismo tiempo que podemos agregue información dentro de esto y lo demostraremos
muy pronto, ¿cómo puede hacerlo? eso aquí simplemente cuando haga clic en esto,
intentaré imprimir un registro, ¿vale? La longitud del artículo va a ser suficiente. Los elementos están bien, la longitud del punto está
bien porque recuerda que acabamos de agregar algunos elementos dos elementos porque trabajamos
en dos uh uh dos productos y cada uno de ellos Bueno, ahora se almacenan como modelo, así que
tenemos dos objetos dentro de este elemento. Así que la próxima vez que hagamos clic en esto primero
veremos que debería imprimir dos correctamente. Para este, en realidad vendría aquí. Es un elemento
nuevo. Anteriormente agregaste dos, así que lo haré. agregue uno más aquí o tal vez cinco y luego,
cuando haga clic en esto, esperaré que se imprima dos y luego seguir adelante y agregar uno nuevo,
así que eso es lo que esperaríamos Creo que no lo reinicié, así que déjame
seguir adelante y probar uno nuevo.

Aquí ahora agregaremos dos elementos y aquí
verá que la longitud es tres y ya tenemos agregado tres veces antes de que se agregara el
último aquí ahora veamos si haces clic en este Este es el elemento que agregamos al principio.
Ahora continuaremos y haremos clic en él. ahora aquí acaba de imprimir la longitud es 4,
que está aquí pero aquí no imprimió este Mire por qué, debido a que esta ID de producto,
la ID de producto determinada ya existe. en este mapa vale porque comprueban si está ausente
vale pone si está ausente vale porque ya Agregué esta identificación para que ya no puedas agregarla directamente,
pero quiero agregarle más elementos correctamente. Sí, pero ahora aquí podríamos simplemente seguir
adelante e imprimir e imprimir el cantidad de elemento en esta lista está bien, para
ese simplemente continuaré y reiniciaré todo y todo ha terminado aquí y ahora lo que haré
haré clic en este, está bien y haré clic En esto, recuerden que este es el segundo elemento
y le agregamos tres elementos. Veamos. Está bien, agregamos la identificación de la tarjeta es dos
y la cantidad es tres. Está bien, ahora esta es la primera.

Ahora los agregaré, haré clic aquí y vemos que
la identificación es uno y agregamos dos, ¿vale? Por ahora, comentaré esto y, de hecho,
quiero ver la cantidad de elementos. eso se ha agregado en las tarjetas con su cantidad, bueno,
para este, en realidad comenzaré después veamos por dónde podemos empezar. Parece que tenemos que
empezar de nuevo aquí. Vale, aún nos queda por hacer. como no tenemos otros lugares, simplemente regresaremos,
está bien, ahora aquí porque items es un mapa matemático, así que lo que haremos será crear
un circuito de forraje para recorrer los items.4h y le daría una clave y una clave de elemento y un valor.

Ahora
la clave se refiere a esto. El valor int se refiere a esto. Ahora el valor es un modelo, por lo que podemos acceder al modelo
usando este y simplemente podemos hacer una copia impresa. aquí la cantidad ahora está aquí valoramos la cantidad
de puntos a la cadena, está bien, está bien Bien, ahora encontraremos un problema una vez
que hagamos eso, pero de todos modos, ahora sigamos adelante y hagamos clic en este solo para
reiniciarlo y ahora hagamos clic en este Está bien, porque no vamos a agregar
nada, agreguemos nada por aquí. y le agregaremos Así que continuaremos y agregaremos un nuevo elemento, tal
vez este, y agregaremos dos tres cuatro cinco seis. Siete, bien, ahora haremos clic en esto y veremos
que está agregando un artículo al carrito aquí. Vemos que la identificación de la tarjeta es seis, la cantidad es
siete, está bien, así que agregamos siete y uno mientras viene. desde aquí, pero ahora por aquí, por supuesto, este aún no
se ha agregado, por lo que estos dos son para el anterior.

Uno, el que agregamos, está bien, porque
este se agregaría desde aquí, por eso en esta lista en esta lista no viste la cantidad siete, pero
si seguimos adelante y decimos que trabajamos en este y queremos agregar digamos cinco ahora veremos
los primeros cinco aquí y luego aquí tres dos siete, la cantidad anterior, está bien, tres, dos,
siete, está bien, y esta es la cantidad actual. porque este registro se imprime primero y luego se
agrega al modelo. Lo siento, en el carrito. De todos modos, ahora hay otro problema, así que
reiniciemos nuestra aplicación y vengamos aquí. y hagamos una verificación aquí, así que simplemente haga
clic en esto. Está bien, ahora mi cantidad es cero, pero todavía se ejecuta aquí este elemento agregado, en realidad
agrega el elemento aquí que podemos imprimir el registro y luego viene aquí y agrega el elemento,
por eso lo vemos bien ahora porque No vamos a agregar nada, así que aquí tenemos que hacer una
verificación condicional. Está bien, con esta de aquí. Entonces, lo que haré, lo dividiré
un poco por separado ahora por aquí. Está bien, ahora cortaré esta sección. Está
bien, mira, esta es esta sección.

Sí. Así que cortaré esta sección y la pondré
en un bucle condicional. Aquí parece a ver tenemos que cortar hasta aquí Sí, está bien, entonces esto es lo
que haremos. Si, cantidad. es mayor que cero, está bien, pero no cero,
mayor que cero, entonces seguimos adelante y agregue al controlador, está bien, de lo contrario,
no estaremos bien, ahora reinicie todo y ahora, si voy a este e intento agregarlo, no
pasará nada, está bien, por supuesto. Aquí también podemos enviarle un mensaje al usuario
diciéndole que debe agregar al menos un elemento. Entonces esta es la condición correcta,
así que aquí podemos dar al menos una mensaje al usuario de que no está agregando nada
al carrito, pero que en realidad podemos ser mucho mejor, así que en lugar de dar esta condición
aquí podemos hacerlo aquí porque aquí Estamos agregando el artículo, así que aquí podemos verificar
la condición si la cantidad es menor que cero o no.

Si la cantidad es mayor que cero, entonces seguimos
adelante con esta condición, ¿vale? de lo contrario enviamos un mensaje al usuario ahora
enviamos un mensaje podemos enviar este mensaje el que ya teníamos, así que simplemente copiaremos
este y lo pondremos aquí, sí, así que lo haré. Escríbelo allí. Debes agregar al menos un elemento
en la tarjeta. Debes agregar al menos un elemento. tener problemas Está bien, está bien, y todo está bien ahora,
si hacemos eso cuando estés dentro. el controlador del carrito realmente ya no necesitamos esta
condición, está bien, entonces podemos hacer el control z Volveremos al estado original en el que
estábamos bien. Ahora reiniciaremos todo. y aquí veremos si funciona o no, bien, así
que aquí estamos, no agregamos nada, así que Aquí simplemente agregaremos este. Debes
agregar al menos un artículo al carrito. y ahora es un cero, no puedes reducir más. Vale, ahora
debes agregar al menos un artículo al carrito. o puedes ir y hacer lo habitual, está bien, agregando la identificación
de la tarjeta 1, está bien, la cantidad 5, lo que significa que Estamos recurriendo a la condición correcta
aquí, por lo que solo obtenemos esta.

Si ya tenemos un elemento, está bien, aquí ahora
agregamos la condición, pero el bucle aún no funciona. Debido a que el bucle está vacío aquí, quiero decir que estos elementos
todavía están vacíos, está bien, no los agregamos, así que es se agrega solo después de que se ejecute esta sección,
está bien, sí, otra cosa que aprendimos aquí, si tienes un mapa, puedes verlo usando 4h
y puedes trabajar con el valor para obtener el obtenga el valor imprima el valor y haga todas las
cosas necesarias que tenga que hacer, ¿está bien? Entonces, ¿qué haré? Seguiré adelante y eliminaré
esto. Ya no lo necesito. Está bien. Ahora veamos qué pasa. El problema es que agregué
cinco y quiero agregar uno más ahora.

Haga clic en él, no pasa nada, incluso si lo reduzco,
aún así no se agrega, ya está ahí Por lo tanto, no puedes hacer nada, por lo que no puedes actualizarlo,
por lo que necesitas encontrar una manera de actualizarlo. y afortunadamente es bastante fácil actualizar el contenido, así que aquí
tenemos elementos que se colocan con puntos si están ausentes, vale todo. Bien, tenemos una condición bastante similar donde dice que los
elementos se actualizan bien para actualizar los elementos. Si queremos, si queremos poder usarlo, primero
debemos usar otra condición y eso llamado contiene una clave, está bien, entonces en el elemento,
si hay una clave contenida, aquí podemos verificar si la clave ya está contenida en este elemento o no está bien;
si no está allí, seguiremos adelante y haremos una cosa y si está ahí, haremos otra cosa, así que
primero aquí si la clave ya está ahí eso significa que se agregó temprano, por lo que en ese caso,
para la misma identificación del producto, solo necesitamos Realice alguna actualización, pero si esta clave no se encuentra
allí, significa que nunca se agregó en este mapa de elementos.

Sí, de todos modos aquí haremos una verificación condicional. Está
bien, si contiene una clave, entonces haremos una cosa. de lo contrario hacemos otra cosa qué otra cosa hacemos
hacemos esto está bien, veamos por aquí esta es la condición, vamos a poner esta y esta
es para esta, está bien, entonces cortaré esta y colóquelo aquí. ¿Qué es esta clave? Una vez más, esta es
la clave del producto. Bien, ID del punto del producto. Bueno, también podemos usar el árbitro bancario para indicar
que no está vacío, pero de todos modos, ahora aquí si la clave ya se encuentra en esta lista al insertar
este mapa significa que ya está allí De todos modos, podemos seguir adelante y actualizarlo.
Si aún no está allí, lo hacemos directamente.

Agréguelo, está bien, por eso aquí hacemos actualizaciones
de puntos de elementos ahora una vez más Al igual que en esta condición, también se necesita
la clave, así que sea cual sea la clave que desees. actualización que debe colocar aquí, en nuestro caso, esta es la identificación
correcta, así que aquí, en nuestro caso, la identificación del punto del producto Está bien, pero si en tu caso veamos una
vez más, entonces se está juzgando.

Se trata como opcional, por lo que dices que está
bien, no será opcional, significa que significa que no va a ser nulo de todos modos, así que
después de eso obtendrás el valor aquí si ves aquí para actualizar tienes la clave y luego aquí automáticamente
obtenemos el valor como modelo de carrito Está bien, entonces se necesita un modelo,
una instancia o un objeto relacionado con este. Así que recuerde cada objeto, cada ID de producto,
hay un derecho de modelo de objeto o un objeto. Entonces este es ese objeto que también significa que
podemos acceder a la propiedad interna de ese objeto. Así que aquí hacemos algunas cosas interesantes.
Primero pondremos una coma aquí. y en lugar de escribir esta flecha gorda queremos
escribir un poco más en detalle aquí regresamos, está bien ahora una vez
más si ves sin embargo en él Entonces, a partir de este, entiendes que el nombre
del método es actualizar pero devuelve un modelo y un modelo de carrito en nuestro caso, está
bien, por eso tenemos que devolver un modelo y Tengo que devolver un modelo de carrito, así que en nuestro
caso, hacemos un modelo de carrito como este de aquí.

Está bien, ahora volvemos, pero afortunadamente podemos simplemente
seguir adelante y copiar este. Está bien. simplemente podemos copiar aquí para que veamos
que el método de actualización devuelve un modelo y si no hay aplicaciones, esta también
devuelve un modelo, ¿vale? pero con este modelo se agrega a esta lista
y aquí en este modelo se actualiza, ¿vale? basado en esta identificación, ahora qué identificación desea actualizar,
por supuesto, en nuestro caso, este valor porque recuerde En este caso, el valor es un objeto de este modelo de producto,
por lo que simplemente reemplazaremos producto con valor. ok y ahora por aquí Esta cantidad es lo interesante porque
estamos tratando con la cantidad, así que cualquier cantidad que haya, tome esa, así que tenemos
que obtener esa cantidad de puntos de valor Está bien porque este es el
que ya se guardó antes. y luego la nueva cantidad que se ha pasado. Vale,
sí, añade esa para que así sea como actualices. la cantidad está bien, veamos que había un verificador
nulo, está bien, entonces esto tiene que ver con esto Flutter SDK en algunas versiones, es posible que no lo
necesites, por lo que muchos de ellos necesitan esto o Comprobador nulo, pero para la versión avanzada, la última,
en realidad hay muchos de ellos, es necesario indicarlo.

No será nulo, porque anteriormente en nuestro modelo
de carrito dijimos que podría ser opcional. pero aquí este tipo de menos en este tipo
de mapa no toman valores opcionales, necesitan estar seguros de que algunos de los valores no
son opcionales, lo que significa que quieren ser nulos. Está bien, de todos modos, ahora con todo lo que envíes,
ese contenido se agregará. Está bien ahora, mientras Después de esto, seguiremos adelante e imprimiremos un registro y, para
imprimir un registro, en realidad necesitamos encontrar una mejor lugar este no es realmente un buen lugar para imprimir
el registro de este, de hecho, vendría aquí y aquí tengo este método que se
llama agregar elemento aquí Entonces, justo después de esto, quiero imprimir un registro.
Ahora, para imprimir un registro, tengo que poder acceder a elementos del controlador de esta tarjeta, entonces, lo que podemos
hacer es configurar un captador aquí, así que aquí asignamos y porque estoy devolviendo un mapa aquí
y este tipo de modelo de carrito ahora aquí obtendría artículos, artículos
bien, ahora esto se volvió más como un campo público, por lo que podríamos usar este para
acceder desde este controlador de producto, ¿vale? Por aquí lo revisaríamos y diríamos que usaremos el
método de aquí para cada método, está bien, lo hacemos.

Carrito punto artículos punto forraje está bien, ahora dentro de
él haremos el método de impresión y aquí escribiremos aquí amigo, está bien, la clave es o en realidad la identificación,
la identificación tiene más sentido es la clave valor punto id a cadena a cadena bien y el la cantidad está aquí una vez más valora la cantidad punto
para transmitir está bien, ahora seguiremos adelante reinicie nuestra aplicación y verifique un
poco desde cero aquí ahora aquí esto Este se imprimirá después de agregar el artículo
al carrito, así que vendremos aquí.

Ahora aquí agregaremos dos elementos.
Ahora haré clic en esto, veamos. bien, ahora la identificación es uno y la cantidad
es dos, bien, ahora está bien y para El segundo producto vendremos aquí y agregaremos
cinco. Bien, ahora veamos qué pasa aquí. Bien, entonces la identificación es uno y la cantidad es
dos. La identificación es dos y la cantidad es cinco. bien, ahora esto es lo que quiero agregar aquí
más más elementos dicen que tuve otro ocho correcto, en realidad en total quiero poder ver ocho
elementos para la cantidad de identificación dos correcto para id2, me gustaría decir ocho, pero veamos
que cuando haces clic en esto ahora hay un problema. Bien, ahora este ocho se suma con este cinco, por lo
que se convierte en 13. Bien, ahora tenemos esto. Hay un problema con esta cantidad aquí, entonces, ¿qué
debemos hacer después de configurar esta cantidad? en esto, después de agregar este artículo, debemos poder establecer
la cantidad en cero, de modo que la cantidad solo tenga valor distinto de cero durante el tiempo de suma
antes de sumar es cero después de sumar su cero La cantidad solo tiene un valor cuando haces clic en
este o en este.

De lo contrario, siempre es cero. Está bien, de esta manera no dañará nuestra aplicación ahora,
guardémosla y restaurémosla ahora aquí definitivamente. No podemos agregar nada porque dice que necesitamos agregar
al menos un elemento. Ahora aquí hacemos tres. Bueno, antes eran tres, ¿verdad? y luego sumamos para que antes fuera 13,
luego sumamos tres para que resulte 16. ahora veamos dos más, así que ahora mismo esperaría ver
18, está bien, eso es todo, así que ya está funcionando. Para el primero aquí podemos comprobarlo de nuevo.
Anteriormente había dos, como lo veo bien.

Ahora aquí agregaría otros tres, así que
esperaría ver el resultado aquí cinco y dieciocho, así que hagamos clic en esto, eso es
lo que vemos, ahora funciona correctamente. Ahora también hay otros problemas. No es
un problema si aún no lo hemos hecho. así que sigamos adelante y verifiquemos ahora. Quiero reducir
el elemento, está bien, para que llegue de inmediato. cero, está bien, entonces ese es un problema, está bien, entonces
tenemos que trabajar en ciertas cuestiones aquí. cómo resolver este, está bien, antes de decir
lo siento, este se vuelve cero ahora, eh, esto Se produjo un problema porque agregaste la cantidad es igual
a cero. Está bien, pero también necesitamos esto. pero necesitamos más variables para trabajar
juntas para que esté en funcionamiento Bueno, ahora hay otra cosa que debemos hacer
primero, así que aquí aprendimos que si justo ahora era 18, agregas 1 y se convierte en 19. Pero
en realidad, cuando llego a esta página quiero ver 18. No quiero ver el cero correctamente, así que ese
es un problema que debemos resolver primero y luego resolver ese otro problema reduciendo porque de
alguna manera están conectados y entonces sería Se vuelve muy fácil trabajar con esta y otras partes
de esta aplicación, por lo que para esa realmente Recuerda desde aquí los detalles de comida popular
cuando visites esta página por primera vez.

Vale, cada página tiene un ID de página, pero
el ID de página proviene de nuestra lista. Ahora, según esa lista, obtenemos este objeto que
se guarda en este y este es el objeto de aquí. Está bien y recordamos que todos los objetos
aquí que provienen de nuestro servidor los grandes tienen una identificación única, así que todo lo
que tenemos que hacer primero es hacerlo de alguna manera funciona en este controlador de automóvil y debemos
verificar en este si el modelo de carro dentro de la identificación, que es esta.

De
hecho, esta es la identificación del producto. Entonces, esta identificación coincide con la identificación aquí,
la que recuperamos en función de esta identificación de página. entonces, dentro del modelo del producto hay una identificación,
por lo que esta identificación coincide con La identificación aquí está bien, eso es lo que queremos
verificar una vez más para que quede más claro. Vayamos a nuestro modelo de producto. Este es nuestro modelo de producto,
así que lo único que queremos es el modelo de producto. esta identificación, ya sea que coincida con esta identificación o no, está
bien y en base a eso podemos mostrarlo porque lleva mucho tiempo Si simplemente vienes aquí, vendrías aquí y harías
clic en esto y es posible que no agregues nada.

Vale, si no añades nada, lo mostraremos
a cero la próxima vez que vuelvas. pero si agregaste algo y regresas la próxima vez,
mostraremos el elemento de edición aquí, ¿vale? Muy bien, entonces para este vendríamos aquí a nuestro
controlador de carrito y dentro de este carrito. controlador aquí crearemos un nuevo método aquí
llamaremos al método existe en el carrito y Tomará un modelo de producto como producto y luego, primero
haremos dos tipos de comprobaciones si estos artículos contiene aquí la identificación del producto si es así, lo que
significa este si tiene una identificación de este producto si contiene la clave, eso es muy bueno, en ese caso podemos seguir
adelante y hacer una verificación del bucle for. y si realmente es así, no necesitamos hacerlo.

Si
es así, simplemente devolveremos verdadero. así que aquí simplemente regresamos cierto, está bien, porque esto existe ahora, aquí necesitamos
configurar un valor booleano, de lo contrario devolveremos falso, está bien aquí, devolveremos falso ahora
aquí con el tipo de devolución es toro, está bien, ahora todo tenemos que hacer tenemos que seguir adelante y llamar a esta
función desde aquí uh no exactamente desde aquí por aquí está bien entonces aquí llamaríamos crearemos una nueva variable y
la llamaremos existir, ¿vale? ver existe igual falso vale pero ahora
aquí existe igual tarjeta punto existe en el carrito, por lo que le enviaremos un modelo de
producto. ¿Cuál es este modelo de producto y dónde? ¿Esto viene de este? Necesitamos poder
enviarlo desde aquí también, ¿vale? Aquí por ahora solo estamos pasando un parámetro, así que
aquí hacemos que el producto esté bien y por aquí.

Simplemente lo tomaríamos como un modelo de
producto modelo de producto producto Bien, ahora el error debería desaparecer. Ahora con
esto podremos imprimir y echar un vistazo. Entonces, cada vez que inicializamos la variable, aquí la verifico,
digamos que existe o no está bien, además de que existe. punto a cadena está bien, ahora lo guardaré, está
bien, vendré aquí y me gustaría ir aquí y ve que existe o no es verdadero, por lo que devuelve verdadero,
está bien para este y para este debería devolver verdadero como Bueno, ahora el último artículo, que es este, no lo agregamos
al carrito y devuelve falso, así que ahora con Esto lo podemos saber, podemos saber si un artículo
existe en el carrito o no está bien, si existe, si es cierto, entonces podemos hacer muchas cosas.
Bien, ahora desde aquí lo llamaremos otro método.

Entonces crearemos otro método
aquí y ese método sería llamado dentro de esto ahora aquí intentaremos
obtener la cantidad si existe, bien aquí Crearemos un nuevo método y el tipo de retorno sería
int, pero primero lo escribiré un poco más tarde. Escribiré el nombre del método, así como la cantidad
y obtendría el modelo del producto y el producto. aquí una vez más estaría haciendo un
poco de reputación como esta que hicimos Así que aquí primero comprobaremos si el punto del artículo contiene.
Bien, la clave es el ID del punto del producto, si lo contiene. Entonces definitivamente seguiremos adelante y haremos un bucle para
cada bucle, así que aquí haces los elementos del punto 4h aquí.

Y recuerde que esta clave es la misma que esta clave.
Está bien, sí, si contiene esta clave y esta. clave, serían los mismos. Puedo decírtelo porque es la
primera vez que agregamos este elemento aquí, así que ponga si está ausente aquí también estamos agregando la misma identificación que
esta, está bien, entonces esta identificación esta identificación esta identificación y esta identificación son todas la misma identificación, todos
son identificación de producto, está bien ahora de todos modos, así que vendremos Regresemos a esta sección y aquí haremos otra verificación
condicional si es clave porque estamos haciendo un bucle, por lo que necesitamos saber cuál coincide, está
bien, pero sabemos que uno de ellos coincidirá bien si Las coincidencias aquí devolverán algo bien.

Ahora
primero crearé una variable local aquí. entonces lo llamaré var cantidad es igual a cero, bien, ahora aquí hacemos una cantidad igual,
obtenemos el valor y aquí obtenemos la cantidad, bien y luego asegúrese de que no sea nulo, se lo estamos
diciendo al compilador y luego por aquí después de esta línea devolverá la cantidad correcta ahora el tipo es final, está bien y eso es todo lo que
queremos ahora, ojalá tenga sentido, así que desde controlador de producto aquí, pasaremos este a este método
y primero verificamos que la identificación contenga o no, si es así, pasaremos por un bucle
for y si el bucle ocurre, ciertamente encontraremos una de las cantidades que coincida con la
identificación, luego devolveremos esa cantidad y luego ponlo aquí, está bien, ahora simplemente seguiremos adelante
y llamaremos aquí si existe, si existe, entonces Seguiremos adelante y aquí obtendremos el valor.
Ahora dónde poner el valor.

Pondremos el valor. en esta variable la que creamos en los artículos del carrito,
está bien, así que sigamos adelante y hagámoslo. Así que aquí hacemos que los artículos del carrito sean iguales al
carrito y obtengamos la cantidad correcta y pasamos el producto. modelo bien ahora aquí diremos que imprimiremos
un mensaje diremos que la cantidad es la cantidad en la pieza está aquí en las tarjetas
de artículos, está bien, tenemos que conviértelo en cadena, eso es lo que vamos
a hacer. Bien, ahora guardémoslo aquí. uh, para este la cantidad es cero, cierto, este
es el último, pero de todos modos iremos aquí ahora haremos clic en el primero y veremos
que la cantidad en el carrito es dos Así que ahora estamos listos para mostrar dos aquí, así
que ahora la cantidad del artículo de este es 19.

Pero para este obtendremos cero, está bien,
perfecto, ahora todo lo que tenemos que hacer Necesitamos trabajar en esto y mostrarlo aquí cuando
lo abras por primera vez, sea cual sea el La cantidad se mostrará bien ahora antes de continuar
y mostrarla, asegurémonos de que la otra Funciona también, por lo que actualmente la cantidad
es dos, así que si le agrego algo, ahora veremos. entonces la cantidad es cuatro, está bien, eso también
funciona ahora, si voy y vuelvo una vez más, veo el la cantidad es cuatro, está bien, entonces esa sección está funcionando,
así que ahora en nuestra interfaz de usuario aquí debemos mostrar cambiar esta sección vale ahora esta sección está en la
parte inferior aquí uh creo que uh en algún lugar más Aquí, actualmente solo mostramos la cantidad, pero
esta vez no queremos mostrar la cantidad.

Queremos mostrar este bien este porque
esta es la combinación de este y este Y esto está vivo cuando vienes a este lugar y cuando
hacemos más menos cosas como esa, ¿vale? Y este tiene el valor que se agregó anteriormente
para que juntos podamos obtener el último. Bueno, espero que tenga sentido. Ahora, para
este, simplemente vendré aquí en lugar de Cantidad como esta la hacemos en el carrito.
Bien, artículos y lo guardaré. Ahora sigamos adelante y verifiquemos este, así que son
cuatro. Esto es lo que queríamos y esperábamos ahora. mira este, este es 19, esto es lo
que queríamos y esperábamos y esto es cero, está bien, perfectamente, tiene sentido,
hermoso, así que estamos casi a la mitad de nuestro controlador de tarjeta y también podemos hacer cambios, así
que aquí hacemos cinco, bien ahora, por supuesto. si vuelvo atrás y lo abro de nuevo serían
cuatro por qué porque no lo guardé es solo vivo si lo guardas bien, si vuelves aquí todavía
verás cuatro porque no lo guardaste así que agregaré dos más ahora, agrégalos ahora si regresas,
vale, no estoy seguro de que el botón haya funcionado bien.

Así que ahora, si regresas y ves sexo, está
bien, aquí en la aplicación mientras la aplicación se está ejecutando durante el tiempo de ejecución, este
es nuestro almacenamiento. Está bien, todo se almacena aquí y En toda nuestra aplicación, en todos los lugares donde usamos esta
para almacenar elementos mientras la aplicación se esté ejecutando. Vivo, está bien, pero pronto usaremos el almacenamiento local.
El beneficio de ese incluso si no usas la aplicación. Tus datos todavía están allí, porque estos datos
desaparecerán si reinicias la aplicación. Vale, desaparecerá inmediatamente. Esto solo
está activo cuando estás usando los datos. Bien, hasta ahora todo bien, ahora hay otro problema, por
lo que agregar el botón definitivamente funciona, pero si haces menos, ves que se vuelve inmediatamente
cero, está bien, dice así, ahora si vuelves y Compruébalo bien, todavía son seis, pero realmente no puedes
reducir nada.

Bueno, ahora ese es el problema. debido a que está aquí, uh, verifica la cantidad, está bien,
porque recuerda cada vez que visites una página nueva tenemos esta función uh llamada cualquier
producto ahora la cantidad se vuelve cero cierto, incluso si es cero si es
cero ahora por aquí uh este uh, intentas hacer menos aquí, así que
cero menos uno está bien porque estamos uh, al tocar este botón menos, eliminar
el botón para que vuelva a esta condición. ahora esto es cero menos uno es menos uno ahora
comprueba aquí oh, se vuelve menor que cero así que no te permitirá hacer nada, está bien, pero
ahora, debido a que nuestra aplicación ha sido cambiando, así que no queremos usar solo esta condición.
Vale, queremos verificar la condición.

Basado en datos anteriores, por lo que seis son nuestros datos anteriores
y es bastante fácil y ¿dónde está nuestro anterior? datos almacenados nuestros datos anteriores almacenados aquí  en los artículos
del carrito, está bien, así que todo lo que tenemos que hacer es simplemente Necesito agregarlo aquí en los artículos del carrito, está
bien, así que por aquí haré tirar, poner, poner un soporte. y dentro agregaré elementos de tarjeta más uno. Está
bien, ahora lo llevaré aquí y lo pondré también. Bien, ahora si haces menos, primero pensará cuántos
artículos tengo antes y antes de tener seis entonces seis menos uno es cinco pero no es menor
que cero así que aquí está bien aquí regresará menos uno ahora wow eso es interesante se supone
que no debes regresar menos uno pero ahora porque Estamos agregando más elementos, más condiciones,
menos uno está bien, porque recuerda aquí.

Recibo menos uno correctamente una vez más si lo hago si
hago clic en él una vez aquí, así que en ese momento primero aquí porque al principio la cantidad es
cero cuando llegas a una nueva página entonces cero menos uno es menos uno, así que
aquí para verificar esta cantidad aquí Estoy enviando menos 1, está bien, incluso
si es menos 1 aquí, pero aquí ya tengo 6. entonces 6 menos 1 es 5. 5 no es menor que 0. entonces esta
condición no es verdadera esta condición no es verdadera por lo que solo devuelve aquí lo que envíes, así que
eso es menos una cosa interesante en este momento es que cuando agregas un artículo aquí ves que estás enviando
menos uno para agregar un artículo y eso es hermoso Bueno, iremos aquí y veremos cuándo actualizamos
un elemento para que entre en esta categoría.

Así que aquí estás enviando menos uno. Anteriormente
tenía seis menos uno, se convierte en cinco y eso es. todo lo que queremos está bien y eso funcionaría perfectamente
bien, guardaré mi aplicación, así que aquí la he guardado. mi aplicación y luego la reiniciaré una vez
más e intentaré hacer todo desde el principio Está bien, ahora aquí lo haré una vez más, como
sea. Está bien, ahora mismo tengo cinco por aquí. Puedo disminuir, puedo aumentar y todo se
trata aquí usando esta variable que se llama cantidad, por lo que la cantidad está viva
en este momento, lo que significa que no es cero Bueno, podría ser negativo, está bien, entonces
es negativo, así que hay algo positivo aquí. Ahora, una vez que hago clic en este botón, se
llama a este método y luego se llama a esto.

Uno y aquí almacena los datos la primera
vez que usa este y luego regresa bien y después de eso establece la cantidad en cero. Bien,
veámoslo, así que guárdalo ahora. La cantidad es seis ahora aquí en este momento aquí esta
cantidad debe ser cero y es cero, vale Ahora, ¿qué pasará si intentamos seguir adelante y reducir
una vez más e intentar volver a enviar el botón? pero ahora, una vez que hagamos clic en este botón de aquí,
veremos inmediatamente que se convierte en cero, eso es porque en realidad en el mapa lo hemos almacenado pero
en el controlador de producto aquí no teníamos el seguimiento de los datos, así que ese es el problema, está bien,
así que sigamos adelante y verifiquemos.

Hago clic en esto. y se vuelve cero inmediatamente y lo cual
es defectuoso, no debería actuar así pero es parte del diseño, así que aquí, bueno,
lo que podríamos hacer es configurar esto. Está bien, entonces el carrito en artículos es igual a la tarjeta y obtiene
la cantidad. Está bien, ahora estoy pasando el mismo modelo que tengo. Usado antes, está bien y después lo recuperaré.
Lo agregaré al carrito y luego lo recibiré. Vuelve y ponlo aquí. Esto se reflejaría
aquí, así que todavía estaré aquí. Todavía veré que el elemento es seis. Bueno, espero que tenga
sentido ahora. Seguiré adelante y comenzaré de nuevo. y veré que funciona como dije, está bien, ahora
haré clic aquí y lo guardaré ahora.

Se agregaron cinco, ahora puedo continuar y eliminar
o eliminar elementos. Ahora son cuatro, sí. ahora son cinco, ahora son seis, está bien, ahora puedo reducirlo
a cuatro y todavía puedo guardarlo, está bien, bueno, ahora Sin embargo, este es otro problema y mira este, así
que estaba intentando guardarlo aquí y ahora. Él lo dijo, deberías agregar al menos un elemento,
pero el problema ya terminó aquí, ves todos. tiempo que me gusta digamos, por ejemplo, hago menos aquí
qué pasa la cantidad se vuelve cero por qué porque por aquí después de agregar, veamos qué pasó después de
agregar, bueno, definitivamente, a primera hora después Agregar cantidad ya se vuelve cero y cuando llegas a esta
nueva página obtenemos la inicialización de datos.

Uh, aquí está bien y eso es cero, está bien, pero cuando
intentamos seguir adelante y agregar un elemento Lo hacemos usando esta cantidad establecida y aquí,
así que cero menos uno, es decir, menos uno. así que verificar la cantidad me devuelve menos uno
ahora mismo aquí tenemos una condición configurada si es menor que cero, entonces vemos esta condición.
Si es mayor que cero, decimos esta condición. Bien, actualmente vuelve a caer a menos de cero. Ahora
primero seguiremos adelante y comentaremos esto. y comprobaremos qué pasa, está bien,
ahora lo guardaré, ¿vale? ahora por aquí veamos que puedo reducirlo y
hice uno ahora son tres ahora son menos dos Ahora sigamos adelante y guárdelo. Ahora se guardó correctamente.
Está bien, ahora por aquí una vez más. Agregué el elemento y luego puse los datos más recientes
aquí. Ahora este 2 proviene de aquí, no de aquí. Tienes que saber que esto vuelve a ser 0. De todos modos, puedo
agregarlo y puedo agregar cualquier número que quiera. Ahora veremos que el último elemento es 8.

Ahora
puedo seguir adelante y restarlo y luego Aquí ic7 y puedo guardarlo y la última cantidad
es 7. Así que está funcionando bien y si Vuelvo y lo veo y todavía está funcionando.
Aquí verás. Bueno, agregaré datos. y primero tal vez lo reduciré y luego lo ahorraré.
La cantidad es cuatro. El primero fue siete. Ahora eche un vistazo a otro ejemplo. Ahora
aquí quiero ver algo interesante. No agregué nada. Tal vez por error haría clic
en esto, pero anteriormente tenía esto. condición que estaba comprobando pero no tengo
este aquí, así que ese es el problema Bien, ahora moveremos este código aquí, así que
comprobaremos si definitivamente no es así todavía. agregado en el carrito a la derecha, así que recurriremos
a esta condición, está bien, esta condición por aquí Así que antes de ponerlo aquí comprobaremos la cantidad.
Bien, lo pondremos aquí dentro de este mapa. solo si la cantidad es mayor que cero,
de lo contrario no lo pondremos bien De lo contrario, desde aquí enviaremos un mensaje.
Este mensaje está bien, así que ahora lo pongo.

Aquí, por supuesto, necesito importar las bibliotecas.
Sigamos adelante y hagámoslo. Lo haré. Ahora lo guardaré, ¿vale? Sí, ahora si sigo
adelante y reiniciemos todo, ¿vale? entonces esto es cuatro ahora vendré aquí y esto
es cero ahora intento agregar esto y obtendré Este mensaje está bien, ahora asegúrate de recibir
el otro si intentas reducirlo. Sí, no puedes. Lo que podrías hacer en este momento, puedes agregar, luego
puedes reducir e intentar reducir nuevamente. Verás el resultado o intentas agregar OK y luego puedes obtener
mucho más y luego puedes agregar menos como este y luego lo agregas, ahora está funcionando, por lo que
nuestro carrito ahora funciona perfectamente y esto es lo que queríamos ahora aquí está bien, entonces
no agregué nada y veo este mensaje, está bien, pero Puedo agregar aquí ahora lo guardaré y bueno, estos
son los mensajes anteriores que todavía aparecen. Está bien, pero aquí ya ves que agregamos
cuatro. Está bien, así es como queda. funciona ahora nuestros datos originales también se
guardan aquí, está bien y sigue funcionando bien y estamos aquí, son nueve, ahora si
quiero, puedo eliminar uno y guardarlo.

Los nuevos datos se guardarán aquí, está
bien, veamos, sí, ahora ven aquí y Ahora tenemos este problema aquí, ahora veamos qué
está pasando, así que haré menos y lo guardaré. Está bien, veamos cinco cuatro nueve seis, así que sí, está
funcionando. Pensé que era un problema, pero ahora no. haz menos tres y lo guardaré aquí ahora
cinco tres nueve cuatro ahora iré aquí Con esto intentaré agregar dos más, por lo que esperaría
que se imprima once aquí nueve cinco tres once sí, así que está funcionando bien, ahora
hay otro problema, por ejemplo, aquí si Compruébalo para que realmente no importe cuál
es el primero, así que sí tenemos esto. Ahora, en este momento, quiero enviar este.
Está bien, ahora veamos qué pasa. Entonces, pero ves que la identificación es uno, la
cantidad es cero, veamos de dónde viene. Está bien, entonces viene de aquí, lo que
significa que aunque la cantidad es cero, es Todavía en esta lista. Bueno, este es el último problema
que tenemos con nuestra tarjeta. Sé que ha habido Hay muchos problemas, pero ese es el carrito, eso no es tan
fácil.

Está bien, porque estás tratando con alguien. dinero de otra persona, por lo que debe realizar un seguimiento de cada pequeño
detalle; de ​​todos modos, no puede tener errores, por lo que desde este mensaje a pesar de que tengo la cantidad cero e intento
agregarlo y el usuario puede hacerlo bien porque A medida que agrega, puede eliminar para que el usuario pueda
confirmar este botón Agregar al carrito.

Cosas así, ¿vale? todavía está allí, así que ahora tenemos que
hacerlo aquí, tenemos que eliminarlo, ¿vale? cero, entonces tenemos que eliminarlo. Bien, entonces, ¿cómo
podemos hacerlo? Pero esta condición vuelve a ser esto. elemento aquí actualizando el elemento correctamente, así que aquí
tenemos que hacer algunas comprobaciones, así que primero en arriba declararé una variable y la llamaré
cantidad total y que es igual a cero Ahora aquí obtendré la cantidad total. Ahora aquí
haría el valor de la cantidad de puntos más. uh, la cantidad que envías aquí está bien. Ahora necesitamos un verificador nulo aquí. Vale,
el héroe se ha ido. ¿Qué está pasando aquí? Esta sección recuerda que este valor es el valor antiguo,
lo que significa que el objeto antiguo está bien.

Para este modelo de carrito, así que obtengo el valor anterior,
sea lo que sea que estuviera allí y sea cual sea el Me dan uno nuevo y lo reviso, está bien, pero
en realidad no importa, sea lo que sea. Incluso después de que sea cero primero,
sigo adelante y actualizo esto. y después de actualizarlo lo elimino de la tarjeta, está
bien, aquí lo haría si fuera cantidad total menor o igual a cero, entonces lo que haré será simplemente
seguir adelante y eliminarlo del carrito, ¿vale? Así que aquí haría items dot remote
y simplemente pasaré la identificación. Vale, ahora cuál es el ID. El ID es cantidad. ID del punto
del producto. Está bien, ID del punto del producto. Lo pasaremos. y elimínelo, está bien, ahora sigamos adelante y reiniciemos
todo desde cero, está bien, aquí estoy. Por supuesto, debido a que iniciamos nuestra aplicación,
todo desapareció. Ahora agregaré cuatro aquí. Volveré a este y agregaré uno. Volveré.
Volveré otra vez. Ahora aquí pondré. de nuevo a cero, está bien, ahora lo confirmaría. Está
bien, así que confirme el envío y solo tenemos un elemento porque se eliminó anteriormente, tendríamos
dos elementos, pero ahora solo uno y También es cero en este momento y aquí todavía son
dos.

Ahora también podemos hacer otra verificación. Confirma que ya no está, así que lo enviaremos
así. Está bien, ya se ha enviado. Entonces, para el próximo envío te pide que al menos
agregues más, pero de todos modos, aquí lo ves. es cero pero, por supuesto, puedes seguir adelante y agregar
más. Ahora son dos, de todos modos, así que para nuestro producto popular la tarjeta está funcionando la lógica
debería ser más o menos la misma para el producto recomendado pero de todos modos, a continuación haremos una cosa interesante,
sea cual sea el elemento que veamos aquí.

O para muchos productos diferentes, los agregaremos y
los mostraremos aquí para que a medida que agregues y confirma que aparecerá aquí. Bueno, eso es lo que veremos
en la siguiente parte. Bueno, ya casi estamos. Hecho con este controlador de tarjeta aquí, todo lo que tenemos
que hacer es mostrar el elemento de edición aquí, ¿vale? Está bien, para hacer eso primero tenemos que ir al controlador
de nuestra tarjeta, que está aquí y aquí. uh, déjame ver, los colapsaré ahora se ve más
limpio y aquí declararé un nuevo método y el método devolvería un número entero. Bueno, en
este caso simplemente usaré end get y total. Los artículos están bien, así que cualesquiera que sean los artículos
aquí, quiero obtenerlos ahora. Recuerden que esto es un captador y devuelve un campo, no una función, por lo
que no necesitas este icono de función aquí, ¿vale? get es una palabra clave especial que pertenece a dart, está
bien, por lo que indica que devolverá algo como uh en o cosas así y devolvería un campo
que no es como una función Vale, el beneficio es este tipo de cosas.

No necesitas
estos parámetros aquí. Vale, de todos modos. Así que aquí primero declararemos una variable
y la llamarás cantidad total. Ahora aquí lo configuraremos en cero y luego devolveré
la cantidad total. Ahora aparece el error. desapareció porque quiere que devuelvas un campo.
Está bien, y este es el campo que vamos a devolver. pero, por supuesto, antes de regresar, debemos
acceder a los datos que contiene y debemos encontrar los artículos o la cantidad de estos artículos están bien,
así que para ese primero haríamos artículos y luego pondría el operador punto y tendrás muchas opciones,
está bien y por ahora usaremos el forraje Bueno, entonces forage es más como un
bucle for pero tiene una clave y un valor.

Entonces estamos interesados ​​en la propiedad
de valor, está bien, no en la clave, así que aquí Recuerde que en nuestro caso esta es la
clave y este es el valor y el valor es un objeto almacenado aquí, por lo que tenemos muchos
objetos a medida que agregamos y confirmamos aquí Los objetos se almacenan en estos elementos en este formato
de mapa.

Bueno, de todos modos, haré el valor y luego Entonces, si tiene un total de dos elementos aquí, este
bucle for se ejecutará dos veces para cada bucle. y dos elementos, los valores o las propiedades a las
que podemos acceder mediante el uso de este y Además, también necesitamos el operador de punto, así que aquí
tendremos la cantidad correcta, ahora queremos configurar. la cantidad a este está bien y cualquiera que sea
la cantidad que obtengamos se la damos a este con el el anterior está bien, entonces aquí tenemos que poner
este operador y ya no está, así que esto significa así, está bien, esa es la oración corta, está
bien, entonces cualquiera que sea el primer valor agregue el nuevo valor y guárdelo en este
y la próxima vez que ejecute el bucle for se obtendrá una vez más, por lo que para el segundo
obtendremos el primer valor más el valor de Del segundo objeto, sumamos el valor de
cantidad y obtenemos este bien y este.

Después de eso, cuando finaliza el ciclo, devolvemos este
valor. Está bien, pero me limitaré a la taquigrafía. uh, esto es más preferido, está bien, al igual que a
medida que haces programación cada vez más avanzada las cosas se vuelven más concisas o cortas,
como esta función de aquí, es más como una función pero todavía no es una función, solo devuelve
datos de todos modos, así que aquí hemos terminado. con esta parte y ahora en el controlador de producto
aquí creará un nuevo método, ¿vale? ahora, al igual que el controlador de tarjetas,
los juntaremos todos. Ahora aquí hacemos indiget. total de artículos está bien, ahora aquí solo devolverías
el carrito punto total de artículos está bien este y eso es todo, estamos listos porque
aquí tenemos esta instancia de carrito y la instancia de la tarjeta se inicializa aquí cuando
cada página se inicializa, ¿vale? De todos modos, ahora que estamos listos con esta sección, iremos
a nuestra sección de detalles de alimentos populares y Aquí tendremos estas tres secciones, así
que esta muestra la imagen de fondo.

Y este muestra la imagen del icono aquí. Bien,
en realidad así es como queremos mostrarlos. Entonces, así está bien, a medida que agregues
más cosas, aumentará así, por ejemplo. Eh, echa un vistazo aquí, tienes dos elementos. Ahora
puedes agregar otros dos y se convierten en cuatro. cuando confirmas, ves cuatro aquí, está bien y cuando
vas a cuando vas a dar me gusta a otras páginas Digamos, por ejemplo, que en este todavía ves cuatro
porque este es el elemento total en la tarjeta. aunque para esta página no hay
nada aquí pero puedes agregarlos Está bien, a medida que agregas, se convierte en seis inmediatamente,
así que este es el resultado que queremos lograr. Bueno, para este de todos modos, vendremos aquí
y tendremos esta sección de fila terminada. Aquí la fila muestra este y este.
Bueno, ahora aquí tenemos este. El detector de gestos de dos secciones sirve para
poder tocarlo y este es el otro icono que aparece. se muestra aquí, está bien,
si ves este diseño anterior En la parte superior de este carrito existente queremos
tener otras dos capas, una es la capa de fondo y la otra.

El otro es el número en sí, está bien, entonces necesitamos
agregar dos capas más aquí, está bien, ahora Esto es dinámico. Está bien si tus artículos ya no están. no están allí en absoluto,
sí, por ejemplo, eliminas eso ahora confirme, ahora son cuatro, estos cuatro provienen
del elemento anterior que vimos aquí, está bien. ahora, si los reduce todos, simplemente desaparece, por
lo que tiene que ser dinámico, está bien a medida que agrega Se mostraría así, está bien, entonces se mostraría,
así que tiene que ser más dinámico.

Bueno, lo primero que debes hacer es una versión más plana
si quieres tener más dinámica según el usuario. interacción para que el sistema de gestión de estado
le ayude en nuestro caso, estamos usando getx y usando getx podemos lograr el mismo resultado y
también hay otros sistemas de gestión de estado también, pero hasta ahora hemos estado usando get x
de todos modos para ser más interactivo con el usuario. interacción y si desea mostrar los datos
inmediatamente y por ese motivo usaremos generador de brechas, tenemos el generador que hemos usado
antes y aquí ahora el controlador determinado, el uno con el que interactuaríamos, usaremos ese controlador
de producto tan popular, este está bien Muy bien, aquí se necesita un parámetro de
roca y para el parámetro necesitamos establecer un ejemplo aquí, está bien, entonces lo llamaremos
como queramos, realmente no importa y después de eso simplemente podemos regresar así, bien,
ahora dentro de retorno tienes que poner tus cosas Está bien, pero ahora, como puedes ver, hay dos capas,
en realidad tres capas, una es la tarjeta misma.

La capa de fondo que es un poco azul y los números,
así que tres capas están todas juntas aquí, por esa razón usaremos el widget de pila porque
usando la pila podemos poner cosas en la parte superior el uno del otro, está bien y justo ahora corté la
otra línea por aquí que mostraba este ícono. Devuélvelo, está bien, lo siento, necesito poner a los niños
primero así, está bien y déjame poner el punto y coma. y luego volveré a colocar lo que corté antes.
Está bien, ahora si sigo adelante y lo guardo.

Nada cambiará todavía, pero nuestro ícono sigue
ahí. Si lo eliminas, el ícono desaparecerá. si lo vuelves a colocar, el icono volverá de todos modos, así
que ahora esta tarjeta siempre estará ahí, pero lo ponemos carrito porque otros dos elementos son dinámicos, bien, ahora sabemos
por qué colocamos la tarjeta dentro del widget de pila porque Los otros dos son dinámicos, puede aparecer
o no, así que si aparecen estos tres. Incluir esta tarjeta y otras dos se superpondrían entre
sí, por eso pusimos esta tarjeta de compras. carrito dentro de la pila, está bien, de lo contrario lo pondremos
afuera de todos modos, así que ahora tenemos que llegar tenemos que hacer una verificación condicional si agrego
más si es cero como en esta posición, no lo hacemos Quiero ver cualquier círculo y número correctamente porque
es cero a medida que agrego más y confirmo este botón. Entonces veré cosas aquí.

Bueno, ahora para
esto podemos hacer una verificación condicional. verificación condicional basada en este
campo porque este eventualmente se obtiene Los datos de este son la cantidad total correcta, por lo
que debemos seguir adelante, llamar a este y hacer una verificación condicional y eso es lo que haremos, así
que para obtener esa multa primero debemos acceder este campo así que para ese aquí obtenemos punto buscar controlador de producto popular, está bien y luego
podremos obtener los campos relacionados que están definiendo el controlador para que el primero sea
el total de artículos y comprobaremos si es igual a uno o más de uno o no, si
lo es, mostraremos algo diferente Mostraremos algo más, de modo que si es cierto,
mostraremos nuestro contenedor si no lo es. cierto, mostraremos algo diferente de todos
modos por ahora en ambos casos solo puse controlador y los cambiaré muy pronto, está bien,
entonces es una verificación condicional usando operador de itinerario si es cierto, recurriremos
a este; de ​​lo contrario, recurriremos a aquel pero por supuesto aquí no queremos poner
un contenedor vacío aquí queremos poner este círculo el círculo de fondo está bien, bueno,
para ese una vez más podemos usar esto icono de la aplicación aquí, así que simplemente seguiremos
adelante y lo pondremos allí, pero en este caso en realidad Pondré enter y haré una nueva línea ok y de
esta manera nos mantenemos organizados Bien, entonces esta condición es verdadera, entonces
volvemos a esta, de lo contrario, aquella pero de todos modos debes continuar y cambiar el ícono,
en nuestro caso lo cambiaremos a un círculo, ¿vale? y pondremos el tamaño en 20 porque el tamaño del texto del ícono
de la aplicación lo sabemos y aquí usaremos el ícono color ahora, en nuestro caso usaremos colores de íconos,
puntos transparentes, puedo colorear, nada está bien pero veremos un fondo bien, así que
estableceremos el color de fondo aquí Entonces esos serían los colores de la aplicación, el color
principal del punto.

Está bien, ahora podemos seguir adelante. y haz una prueba para que nuestra aplicación esté aquí.
Simplemente agregaré la edición dos del elemento y Haga clic en esto, está bien, pero antes de continuar y hacer clic en
esto, lo más probable es que necesite reiniciar mi aplicación. porque acabo de hacer algunos cambios, así que
aquí lo guardaré, pero cuando reinicié todo se ha ido, así que comencemos de nuevo, así que
aquí agregaré y confirmaré aquí y veremos ¿Qué pasa? Está bien, pero aún no apareció bien,
pero ahora se agregó la cantidad.

¿Por qué? no apareció, el motivo está aquí porque este botón agrega
el elemento que estás agregando, pero en realidad nosotros Tenemos nuevos cambios en la interfaz de usuario que aparece después de
agregar  en la interfaz de usuario queremos ver la cantidad total, pero no informé a la interfaz de usuario que vamos a actualizar la interfaz
de usuario correctamente porque justo después de esto la cantidad o el recuento de elementos en el controlador de la tarjeta,
que es este, se actualiza y luego obtenemos ese valor primero, este se actualiza inmediatamente, por
supuesto, obtenemos este valor cuando lo llamamos pero esto se actualiza inmediatamente, pero no le dijimos a la interfaz
de usuario que se actualiza, por lo que necesitamos para decirle a la interfaz de usuario que se actualiza aquí
dentro de esta función, simplemente pondremos actualizar Es más como establecer el estado y luego eliminaré
las secciones que ya no las necesitamos.

Fue para una verificación previamente condicional,
así que aquí lo guardaremos y veremos ese círculo está ahí porque acabamos de agregarlo
ahora si lo eliminamos y confirmamos el círculo debería desaparecer y ya no está, por lo que
nuestra aplicación ya es interactiva, como puedes ver. al menos podemos ver el círculo y el círculo siempre estará
ahí porque tenemos dos artículos en nuestro carrito pero si vienes aquí nuestro círculo sigue
ahí aunque aquí sea cero porque El total de artículos en el carrito es dos, pero
para esta página, aunque no tenemos nada. Bueno, en el futuro crearemos un botón en el que haremos
clic, iremos a una página de carrito aquí.

Verá los artículos en el carrito pero no los detalles.
Pronto crearemos una página de carrito e iremos allí. pero de todos modos, después de hacer esto deberías
poder actualizar tu página inmediatamente. Entonces, en Fluttergarx, una vez que actualices tu interfaz de usuario,
actualiza cualquier cosa en el controlador, excepto tú. Quiero actualizar la interfaz de usuario y la interfaz de usuario no se actualiza
probablemente le falte este método de actualización, ¿vale? De todos modos, ahora volveremos a nuestro controlador
de alimentos. Primero dibujamos este círculo. Está bien, pero la posición
del círculo no es muy correcta. Bien, entonces estamos en ese widget de pasos, por lo que la posición
predeterminada es arriba a la izquierda y aquí es donde estamos. Necesitamos cambiar esta posición predeterminada,
así que para esta simplemente simplemente Continúe y coloque este ícono aquí usando el widget
de posición. Está bien, lo haré aquí posicionado. está bien, y la posición tiene alguna propiedad, por lo que se
llama propiedad de escritura y la propiedad superior, por lo que usaremos este para que hagas el cero correcto, el cero
superior, está bien, ahora sigamos adelante, guárdelo y Lo vemos movido inmediatamente en la parte superior, está bien y
esto es lo que queríamos, pero ahora sí, vemos el círculo.

Y el fondo pero no vemos bien el texto eso sería
una tarea muy sencilla para nosotros Así que, una vez más, basándonos en esta condición, podemos
mostrar el número correcto para esta sección. Primero, Una vez más, seguiré adelante y copiaré toda
esta sección y la colocaré justo después. Bueno, sé que si estás empezando de nuevo, empezando
con el aire plano o con un dardo, parece un montón de cosa, pero se trata de este itinerario, está bien, si es
cierto, muestra esto; de lo contrario, muestra un vacío.

Contenedor lo cual no significa nada, no hay color, está bien, simplemente
vacío, ahora por aquí, por supuesto, no vamos a ir. para usar el círculo y tampoco vamos a usar
el ícono y aquí en realidad vamos a usar un texto, así que simplemente seguiré adelante
y lo eliminaré y todo lo demás seguirá igual Por ahora esto sigue igual, así que
aquí todos estos textos grandes. Recuerde que creamos un ícono de texto grande, lo siento,
este widget hace mucho tiempo, ahora dentro de este Necesito mostrar este elemento total, así que para ese
simplemente seguiré adelante y copiaré esto. y colóquelo aquí en nuestro texto correctamente porque
si pasa el cursor sobre él recordará que tiene uh um, debería haber un texto para ello, pero el
texto es, veamos dónde está este texto. color sí, este está bien, es un campo obligatorio de
todos modos, así que ahora lo pondré allí y necesito para convertirlo en cadena porque el texto lo escribió, se necesita
una cadena, está bien y todo eso está bien, pero hay Hay algunas otras propiedades que podemos tomar aquí
dentro del texto grande podemos confirmar el tamaño del texto en sí, está bien, necesitamos poner
una coma aquí para saber qué tan grande Queremos que el texto esté bien, así que queríamos
12 píxeles y el color que queremos es blanco.

De color blanco, está bien, ahora
continuaremos y lo guardaremos. y vemos que previamente agregamos dos e inmediatamente
dijimos, está bien, aquí tenemos dos, ¿verdad? Ahora vendremos aquí y agregaremos otros tres o cuatro y
ahora veremos inmediatamente que se convierten en seis. lo es, pero ahora aquí todo lo que tenemos que hacer es
cambiar la posición, está bien, así que aquí lo haremos. cambia la posición, así que haz los tres primeros, los tres
primeros, los tres primeros, ahora se ve mejor, mucho mejor. Bien, con esto ya casi hemos terminado con
nuestro controlador de tarjeta uh. así que sigamos adelante y agreguemos que sean nueve. Ahora
puedes continuar y eliminar estos dos íconos aquí. y lo confirmas aquí, inmediatamente se convierten
en siete, ¿no es hermoso? Puedes irte. adelante y agréguelo y se convertirá en ocho, puede
continuar y eliminarlo y se convertirá en siete Por supuesto, si intentas eliminar más, no podrás.

Y luego intentas hacer clic en esto, te dirá que
debes al menos un artículo en ese carrito, ¿vale? Entonces ya está funcionando y aún así los datos se guardan
aquí en nuestro controlador de carrito, este mapa. Bien, en el futuro veremos cómo mostrar los datos
en cómo guardarlos en el almacenamiento local. perfecto, así que a continuación veremos cómo seguir
adelante y hacer lo mismo con este, pero en realidad Hemos preparado todo para el controlador de la tarjeta,
solo faltan otros 10 minutos y podremos hacer esta tarjeta esta tarjeta se puede utilizar para nuestros productos
recomendados. Está bien cuando dije que este carrito es reutilizable, me refiero a este, bueno, ves nuestro controlador
de carrito, la parte más importante es esta El mapa de elementos lo único que hace es guardar información
y, por supuesto, puedes agregarle información.

Puedes verificar si cierta información existe
o no y luego puedes obtener cierta cantidad. y cosas similares así, bueno, no tiene nada
que ver con ningún tipo de producto. controlador independientemente de que sea un controlador de producto
recomendado o un controlador de producto popular, es muy independiente, todo lo que le importa es el modelo de producto
y sabemos que ese modelo de producto se acabó. y este modelo de producto se comparte
entre este y este controlador, ¿vale? El controlador del automóvil solo se preocupa por el modelo de un
producto, en realidad no le importan los otros controladores. Y es por eso que es reutilizable una vez más porque nuestros
dos controladores usan el mismo modelo de producto. entonces significa que independientemente del controlador que
use, siempre y cuando pueda ingresar datos y recuperarlos datos en este mapa y de este mapa entonces significa
que este controlador es reutilizable y otra cosa Me gusta si vienes aquí al controlador de este
producto y ves que tenemos varios métodos.

Aquí y solo un método está directamente relacionado con
este controlador: obtener la lista de productos populares y estos métodos en realidad solo funcionan con
los datos, ¿vale? ¿Con qué datos trabajan? esto usando esta cantidad variable como puede ver,
en realidad no interactúan directamente con esto lista aquí cuál es ésta, está bien, ninguno de los
métodos funciona en esta lista, está bien, así que Hay un dicho que también significa
que estos métodos son todos reutilizables, por lo que, aunque están establecidos aquí
en este popular controlador de productos, en realidad Incluso si no los escribo en el controlador de producto recomendado,
todavía puedo usarlos desde aquí una vez Nuevamente porque todos funcionan en el controlador del automóvil,
no en este método, está bien, por eso estos métodos ya están definidos aquí y puedo reutilizarlos desde
aquí, está bien, ahora después de decir que Ven aquí en mi interfaz de usuario y la interfaz de usuario
es este controlador de alimentos recomendado e iré al barra de navegación inferior aquí porque quiero activar
estas dos cosas aquí, está bien, está bien Aunque esta parte es bastante interesante, primero tenemos
que trabajar en este botón Agregar y luego Trabajaremos en el botón del control remoto.

Bien, ahora, como siempre,
aquí este es el ícono de nuestra aplicación y tenemos que envolver esto alrededor del detector
de gestos, está bien, entonces, ¿qué haré? corte este y escribiré aquí detector de
gestos y tendrá un evento de toque bueno y Por aquí lo dejaré vacío por ahora y pondré el
ícono de esta aplicación como niño aquí, ¿vale? Está bien y me aseguraré de que esté bien. así que haré clic en esto y lo tocaré
y me tocarán, bueno, eso es una cosa y Al tocar esto, quiero aumentar el producto correctamente
para poder simplemente seguir adelante y llame a esta cantidad establecida igual a verdadero, está
bien, poder acceder a este método desde este controlador entonces necesitamos inicializar nuestro controlador
aquí y por esta razón esta columna aquí Envolveremos esta columna para que el constructor esté bien, así
que cortaré esto y aquí para que el constructor esté bien.

Y aquí mismo haría el controlador
de producto popular. Recuerde que no estoy haciendo el controlador de producto
recomendado porque el controlador de producto recomendado No tengo este método. Sí, puedo seguir adelante y hacerlo, pero
no necesito aceptarlo, así que de todos modos lo haré. ven aquí y se necesita una propiedad de constructor y que
requiere una instancia y simplemente la llamaré controlador y luego devolveremos esta columna. Podemos
guardarla y asegurarnos de que todo esté bien. funcionando bien, sí, ahora están bien porque
tengo esta instancia que se llama controlador Entonces podré acceder al método que se llama establecer
cantidad, así que haría el controlador. cantidad de conjunto de puntos y aquí porque esto
es agregar, así que lo estableceré en verdadero Está bien, ahora si continúo y lo guardo,
puedo seguir adelante y tocar esto. trabajar en esto y si lo hago simplemente puedo verifique los elementos que se agregan aquí. Puedo imprime aquí está bien, diría número de
elementos, así que aquí lo haré cantidad a cadena Lo guardaré bien ahora mientras toco esta cantidad, número
de artículos, un número de artículos también Ahora haremos lo mismo con este botón menos y por el
mismo motivo, está bien, simplemente copiaré este.

Y reemplace este, está bien y necesitamos
la coma aquí ahora aquí, eliminaremos este ícono de agregar y lo
usaremos como ícono de eliminación, ¿vale? Está bien ahora, en lugar de conectarlo a verdadero,
lo enviaremos aquí. Falso, está bien, lo guardaré. Bien, ahora aquí todo comienza desde cero.
Bien, ahora puedo reducir cuatro elementos. Tres elementos que teníamos antes, creo que este
registro ahora podemos aumentarlo, vale, tres, cuatro. cinco seis disminuyen y se convierte en cinco, entonces
significa que ya está funcionando bien bueno, pero ahora por aquí artículo recomendado del producto.

El precio de este producto mientras el precio está aquí,
pero ahora a medida que aumentas o disminuyes la cantidad. También puedes mostrarlo aquí. Bien, esto
es lo que tenemos que hacer ahora. Por esta razón vendré aquí y
creo que aquí tenemos este. Así que puedo simplemente seguir adelante y llamar para informar
el artículo del carrito. Está bien, entonces vendré aquí. y esta sección la puedo reemplazar, está
bien, así que aquí previamente aprendí eso Si quiero llamar a una variable desde un objeto,
también necesitamos este signo de dólar.

Como estas llaves están bien ahora por aquí,
haría el punto del controlador, está bien y guárdelo y vemos inmediatamente son cinco,
lo eliminas, son cuatro, lo agregas Son cinco, está bien y lo guardas así.
El valor sigue ahí. Recargar. recarga en caliente hagas lo que hagas, el
valor sigue ahí y puedes disminuirlo así Puedes aumentar así, ¿no es sorprendente?
Entonces significa que ya está funcionando. Muy bien, a continuación tenemos que ir aquí
y llamar al botón Agregar elemento. Muy bien, esta sección es, creo,
veamos por aquí.

Bien, ahora. este precio es solo 10, está codificado, debería
ser este, pero en la vida real nuestro La comida no tendría ese precio a largo plazo, pero
de todos modos, por ahora seguiré adelante y cámbialo aquí también, está
bien, aquí hago el producto. precio punto bien, espero que tal vez necesite este,
lo guardaremos y veremos que el producto está ahí. inmediatamente bien y esta es la multiplicación de todos
modos, así que ahora este es nuestro botón aquí Ahora este texto muestra aquí lo que
puedo hacer.

Cortaremos este. y aquí hacemos un detector de gestos y en el
evento de toque tendremos un niño y child como contenedor ahora aquí
al igual que antes usando esto instancia del controlador, que es esta.
Usaré esta aquí también y luego llamaría para agregar elemento, está bien y enviaré
esta instancia de producto, está bien, la guardaré. Está bien, ahora seguiré adelante y editaré. ahora veamos que pasa parece
que nos tira un error está bien, seguiremos adelante Bien, aquí está el problema. uh, eso es porque el carrito de aquí
no se ha inicializado Bueno, si vienes aquí, verás detalles de comida
popular en la parte superior. Tenemos este. Así que aquí inicializamos nuestro controlador de carrito enviando
un controlador de tarjeta a este producto inicial, pero Cuando vienes aquí por primera vez, no hicimos eso,
simplemente podemos copiarlo y ponerlo aquí. Ahora reinícielo, por supuesto, creo que necesitamos
importar el controlador de la tarjeta. Ahora lo reiniciamos. y todo está bien ahora vendremos aquí, agregaremos elementos
y eliminaremos elementos e intentaremos agregarlos Ok, se agregó ahora aquí, vendremos aquí
y veremos dos bien porque esta tarjeta es para toda la aplicación, aunque no la vemos aquí,
pero la veremos aquí porque para esta página aquí ya usamos este botón del controlador
de tarjeta, por eso podemos verlo y aquí podemos venir aquí agregar más cosas
y vemos inmediatamente ahora mismo una vez De nuevo, esta parte debería ser bastante simple,
así que lo que haré será copiarla, ¿vale? obtener el constructor um regresar apilar esta sección
y veamos, copiaré esta y vendré aquí Vale, tengo este esquema del carrito
aquí, vale, y cuál es este ahora.

Solo comentaré este en caso de que lo necesite
y devolveré lo que tenía antes y lo que Copiado temprano, así que este es el esquema de mi carrito de
compras. Los íconos y estos dos se basan en la condición. esta posición y esta posición una vez que la
guarde aquí verás que aún no la guardé aquí vemos seis ahora una vez que vengo aquí y después
de esto lo guardo con suerte veremos seis aquí también, guardémoslo y vemos seis que puedes
agregar y dirás siete ahora que cierras. esto, ven aquí, todavía ves siete, está bien,
realmente no importa dónde vayas y hagas hagas lo que hagas agregas cosas lo siento y ves inmediatamente
cambia bien, encuentro este botón no responde tan bien, déjame comprobar por
qué y este botón debería ser, veamos aquí este en realidad mientras lo estaba haciendo se
suponía que debía envolver este contenedor alrededor de este detector de gestos, no
datos de gestos dentro del controlador y es por eso que causa este problema, así que
primero eliminaré el detector de gestos.

Ahora el error debería desaparecer. Envolveré este
contenedor alrededor del detector de gestos. Ahora respondería mejor, así que aquí
haré el detector de gestos. y simplemente llamaré aquí al método de
toque, así que aquí lo hacemos punto del producto lo siento, debería
ser el controlador el punto, veamos cuál es el instancia del controlador nombre este producto controlador  punto
agregue elemento y envíe el producto ok y lo guardamos ahora dondequiera que
realmente no importe dondequiera que toques Funcionaría bien, así que se han agregado
tres ahora mismo, toca de nuevo. así que no está agregando bien, pero no vemos ningún
mensaje, pero ven aquí ahora inmediatamente. aquí veremos nueve, funciona, agrega uno
más, realmente no importa dónde toques el botón está más activo en este momento está funcionando
bien, ahora puedes eliminar todo, puedes eliminar todo. y suma aquí para que se convierta en siete
y si vienes aquí todavía verás siete Entonces, lo que significa que ya está funcionando.

Ahora
vienes aquí, elimínalo y guárdalo. Ahora tenemos cuatro. Está bien, agrega uno más, tenemos cinco, por lo que nuestra
tarjeta funciona totalmente ahora, pero ahora el problema es Tienes muchos productos. Algunos productos se agregan desde
aquí, pero creo que en nuestro caso no desde aquí. el producto era de aquí cuatro productos de aquí
y un producto de aquí en total cinco productos pero ahora, si agrega demasiados productos, por ejemplo, también
puede agregar algunos productos desde aquí. aumenta bien eso es bueno vienes
aquí haces lo mismo aumentas o sacas uno disminuyes pero realmente
no sabes que 10 productos hay Bueno, a continuación veremos cómo tocar este botón
e ir a una nueva página y ver todos los productos.

Que se ha agregado a esta lista de carritos, está bien,
seguimos adelante y comenzamos a trabajar en esto. Pantalla de tarjeta Creo que tenemos que solucionar
otro problema ahora que el problema ha terminado. Creo que probablemente lo habrás encontrado mientras estamos
trabajando en la aplicación, pero esta es la parte. que olvidé terminar así que ahora lo haremos ahora, simplemente
lo agregamos al carrito, así que después de agregarlo, uh Las cosas suceden bien, déjame regresar y empezar
de nuevo, así que tomaré este como ejemplo. Vale, ahora mismo tenemos 10 artículos, pero
en esta página no tenemos nada bien. Por esta razón, si bien este es un detalle de
comida recomendado, vendremos aquí y aquí en carrito de iTunes es cero y sabemos que los elementos de la tarjeta
provienen de aquí, por lo que este es un suma de elementos incurridos esta variable y esta variable
ahora mismo, bien ahora agregaré dos en esto Bien, ahora, una vez que haga clic en este
botón Agregar, ¿qué pasará primero? la cantidad sería cero y el artículo final de la tarjeta
será dos correcto porque después de agregarlo Devuelve el monto, está bien, así que haré clic en este
botón, está bien y veremos que aquí se convierte en 12.

Vale, ahora son las 12 y tenemos dos. Bien, aquí
está este problema. Ahora puedo irme. Regrese y redúzcalo, está bien, pero recuerde ahora
mismo, en este momento, en este momento, aquí. Así que sigo adelante y reviso, lo veré en el carrito. en el carrito artículos iguales a y como i pero actualmente
la cantidad es cero la cantidad correcta es cero pero como Empiezo a hacer clic en esto ahora la cantidad se vuelve menos
uno, por lo que la cantidad es igual menos uno y aunque aquí ninguna de estas condiciones aquí
caen en esta categoría, así que simplemente regresa desde aquí, está bien, ahora haré clic en
él una vez más. En este momento la cantidad es dos.

Bueno, ahora, aquí ves, tengo en la tarjeta el artículo
dos y la cantidad menos dos, y juntos son cero pero no menos de cero, por lo que aún así volvemos
a esta categoría. Bueno, ahora la cuestión es que puedo Continúe y agréguelo para que funcione normalmente, pero
el problema es si el usuario lo toca una vez más y puede suceder bien entonces en ese momento la cantidad
se convertiría en tres correcto y si es menos tres bueno entonces hagámoslo así que déjame
decirte si son menos tres aquí ya veremos dos entonces, ¿qué pasará? No lo hice tapping
todavía porque aquí más dos y menos tres Por supuesto, si lo toco en ese caso, menos tres, eso se
convertiría en menos uno, pero después de menos uno.

Voy a devolver desde aquí cero a la derecha y
si devuelve 0, recuerda mi ecuación anterior. por aquí esto es así que esto devolverá 2 por qué
una vez más porque volví a caer en esta categoría porque esto es menor que cero, pero desde aquí devolvemos
cero, por lo que dos más cero se convierte en cero, pero sabemos que este elemento de aquí,
este número es este y este, una vez más, es Este está bien, aunque lo reduje a cero, todavía
veo dos, así que este es el problema que tenemos que tener cuidado, está bien, ahora confirmemos
esto, así que lo golpeé una vez, está bien, veamos, creo. Ya lo hice anteriormente, por eso no funcionó.
Bien, déjame volver a hacerlo. Ahora lo hice. una vez más se convirtieron en dos inmediatamente,
así que ese es el problema y viene de aquí, así que debido a que la cantidad se vuelve primero, se vuelve
menos tres en este caso o menos que cero y luego estamos devolviendo cero y luego esta ecuación,
eso es lo que está causando este problema ahora déjame encargarme de este problema,
así que aquí lo haremos y comprobaremos si en artículos del carrito mayores que cero,
eso significa que ya hay algo en el carrito para esta página, está bien, en ese caso cambiaremos
la cantidad para que la cantidad que llames sea menos encarnaciones, está bien, así que sea cual sea
la cantidad, se la daré a ésta, está bien.

Y desde aquí devolveremos la cantidad, está
bien, ahora por aquí estamos regresando. cantidad, pero en este caso la cantidad sería
negativa y recuerda eso antes aquí uh, la primera vez que estás haciendo solo menos, simplemente
llegas a una página nueva, siempre volvemos menos derecho para eliminar y para agregar siempre
devuelve un número positivo y ahora vamos a haz eso y de esta manera este error también se resolverá,
¿vale? Entonces, ¿qué pasará cuando estés bien? déjame déjame guardar esto, está bien ahora, si hago clic
en esto primero se convierte en -2 lo siento, reduce uno luego uno y luego uno está bien, ahora en este momento
vendrá aquí, está bien, así que cuando llegue aquí volverá a caer en estas categorías porque
si hago clic en esto, inmediatamente esta cantidad se convertiría inmediatamente en -4 bueno, menos
cuatro, mientras que en el carrito teníamos tres entonces se convierte en menos uno, por lo que vuelve a caer en esta
categoría ahora, bueno, el artículo del carrito aún es más que Quiero decir que es grande, quiero decir que es un número positivo
mayor que cero, así que le damos menos tres a esto.

Uno entonces regresamos menos tres está bien
ahora si regresamos menos tres por aquí entonces más tres menos tres es igual a cero, está
bien, si intentas hacer clic aquí para que diga No puedo reducir más y no vimos el resultado
extraño, así es como funciona bien ahora. Vendremos aquí, tomaremos cualquier página como ejemplo.
Ahora seguiré adelante e intentaré reducir así que reduzco dos, por supuesto, los cambios aquí
se confirmarán después de hacer clic en este botón ahora lo haces una vez y dice que no puedes reducir
más pero ya reducimos dos aquí mismo Así que puedes continuar y confirmar aquí y veremos
aquí inmediatamente que todo está bien.

Así es como funciona, solo esta parte del código
que necesitas agregar en tu sección. en verificar la cantidad y eliminaré
este y aquí no necesitamos este y lo que podría hacer, puedo comentarlo porque
podrían ser útiles más adelante, ¿vale? Sí, eso es todo. Ahora esta sección es completamente
funcional. Puedes intentarlo. reducir ahora no funcionará solo funcionará si lo haces
positivo ahora sigue adelante y agrégalo se convierte um 11 ahora, si sigues adelante y eliminas uno ahora, se
convertiría en 10 ahora, por supuesto, si lo intentas. volver a enviar sin agregar nada, en este caso no sucederá
nada, está bien, pero obtenemos un resultado que y observe que dice que necesita
agregar más, ¿vale ahora? entonces el 10 siempre está ahí, así que ahora lo que haremos
será seguir adelante y construir la interfaz de usuario y aquí poder hacer clic y acceder a esa interfaz de usuario, está
bien, por esa razón vendré a mis páginas aquí y aquí primero crearé un nuevo directorio y lo llamaré
tarjeta, así que en esta carpeta volveremos Ponga toda nuestra interfaz de usuario relacionada con el carrito, así que aquí
crearé un nuevo archivo y al archivo lo llamaré página del carrito.

Dot dart está bien, ahora por aquí
crearé una clase sin estado y la llamaremos página del carrito, está bien, importemos
las dependencias, así que aquí estamos y luego por aquí tendremos andamio este andamio volverá
tendrá cuerpo y dentro del cuerpo aquí en esta página usaremos un objeto
de pila y necesita niños y ahora por aquí Bueno, cuando vayas a esta página
después de hacer clic, queremos Tres menús, uno es el botón Atrás, otro es
el botón Inicio y este, este botón de aquí. Este botón de carrito está bien, entonces hay tres menús, así
que aquí usaremos un widget de posición, está bien, sí. Ahora esa página, estos tres íconos se presentarían
en formato de fila en o en fila, está bien, así es. ¿Por qué aquí devolveremos la fila? Está bien, y también
tendremos este relleno izquierdo y derecho. Eso es lo que haremos ahora, así que lo haremos a la izquierda
y usaremos las dimensiones que presentamos anteriormente.

Las dimensiones tienen un punto con 20, está bien, por lo que
esto respondería y escribiría las dimensiones con un punto 20 y también usamos una posición superior aquí, por lo que ahora
para la parte superior también usaremos dimensiones punto Altura ahora mientras vamos a la altura 60, pero
no tenemos 60, así que multiplícalo por tres. lo que sea que aparezca, está bien, ahora
aquí hacemos niños, está bien. Muy bien, después de hacer niños aquí, primero
pondremos el ícono de nuestra aplicación.

Bueno, en este caso el ícono de nuestra aplicación sería
el ícono de la aplicación que ya creamos antes, así que Aquí tenemos este icono correctamente y necesitamos importar
la biblioteca, de lo contrario obtendremos un error. Bueno, ahora aquí simplemente usaremos los íconos con la
flecha hacia atrás. Está bien, sí, este y aquí. También le daré a este ícono un color de fondo. Está bien,
ahora el color del ícono sería colores.blanco Y ahora aquí le daremos un color de fondo y el color
de fondo provendrá de nuestra aplicación. colores y sería el color principal, está bien
y veamos ahora el ícono toma tamaño aquí entonces cambiaremos el tamaño de los íconos, pero ahora,
si queremos que estos íconos sean lo más dinámicos posible, Necesitamos declarar el tamaño de este ícono en nuestras
dimensiones aquí en este archivo, así que lo haré. Ábrelo aquí para que no tengamos
un tamaño para el icono, pero Sí, tenemos, pero tenemos como 24 y 16. Creo que podemos
seguir adelante y usar cualquiera de ellos.

Está bien, entonces usaremos este, así que ya lo tenemos,
así que vendremos aquí y ahora aquí lo hacemos. Las dimensiones puntean este 24, por
lo que ya tenemos uno definido. Bien, ahora, por supuesto, tenemos que ir a nuestro archivo
principal aquí y, por ahora, lo cambiaremos manualmente. y luego configuraremos la ruta para ello, así que aquí
los cerraré. No necesitamos esto por ahora. y en lugar de la página principal de la huella principal, la página de
comida, hacemos la página del carrito, ¿vale? y necesitamos importar la biblioteca.
Bien, ahora continuaré y la guardaré. Y parece que tenemos algunos problemas y vamos a
comprobarlo, así que creo que tenemos muchos. de cambios en la aplicación y mucho tiempo porque
si tienes muchos cambios de estado en ese caso Necesitas reiniciar tu aplicación y aquí estamos, vemos nuestro ícono,
está bien, ahora está bien, entonces ese es nuestro primer ícono. ahora lo copiaré y lo pondré tres veces porque como
dije antes necesitamos tres íconos, ¿vale? ahora lo actualizaré y los vemos por allí Bueno, ahora este ícono usaría el ícono del botón de inicio,
está bien, entonces usaremos inicio, veamos Sharp, está bien, guardémoslo bien, el Sharp no, es un mini
Sharp, lo siento, así que hagámoslo en casa.

Creo que seguiré adelante con lo descrito aquí,
pero guárdalo, sí, ya vemos y para este. Todavía conservaré este carrito de compras que servirá. carrito y este Vale, carrito de compras, así que seguiré adelante y
lo guardaré todo ahora que están juntos, así que usamos una propiedad que se llama acceso principal para que
accedamos al dominio y alineemos el espacio de puntos entre Bueno, aquí están todos distribuidos de la misma manera, pero
quería que este botón de inicio estuviera un poco por aquí. Así que lo moveré hacia la derecha y para ese, justo después
de este ícono, así puedo agregar más espacio.

Entonces eso movería este ícono de aquí a la derecha, está bien,
aquí hacemos el cuadro de tamaño, está bien, ahora el tamaño cuadro con ancho y tenemos dimensiones dimensiones punto
ancho bien 20 multiplicado por cinco, por lo que eso sería ser 100, está bien, así que lo enviaremos allí, está bien,
está bien, por ahora esta página es estática, está bien. Debido a que necesitamos trabajar en este resto de la parte
de la pantalla o página, aquí mostraremos el artículos que se agregaron en el carrito, con la imagen
y el nombre del ícono y cuántos nombres de producto y cuánta cantidad se ha agregado y el precio total,
eso es lo que podremos hacer en la siguiente parte.

De hecho, déjame mostrarte el resultado que queremos lograr,
así que este es el resultado que realmente queremos lograr. Para lograrlo, tenemos esta sección aquí ahora
mismo, por supuesto, aquí los íconos están un poco más grande y estoy aquí. Me quedo con la posición
predeterminada y esta es mi aplicación original. donde moví mucho la posición pero de todos modos y
después de eso, este es el resultado que queremos para lograrlo, está bien y, como puede ver aquí, podemos aumentar
la cantidad, podemos disminuir la cantidad a medida que Bueno, y al hacer eso, verás que hay un cambio
de cantidad aquí también.

Estas son estas son las cosas que queremos hacer, así que es bastante dinámico
para que puedas agregar tantas como quieras y Si eliminas uno de los elementos, desaparecerá,
así que si se vuelve cero, sería desaparece inmediatamente de la lista, está bien,
se actualiza y queremos mostrar la imagen en sí y aquí el sabor y el precio cosas así y puedes
hacer clic en eso para volver a ver Si esto es lo que quieres o no, puedes regresar
una vez más y ver el resultado original y luego Puedes ir a pagar, hay mucho trabajo en esta página,
así que sigamos adelante y comencemos.

Bueno, lo primero que queremos hacer aquí es
obtener una lista de elementos que se han eso se agregó a nuestro carrito, está bien, eso es lo
que queremos obtener antes de que lo recibiéramos. como si fueras a la página de inicio, por ejemplo aquí,
anteriormente aquí, cuando llegaste, estábamos obteniendo el resultado de que se ha agregado una página
en particular, está bien y aquí también estábamos Obtener el resultado está bien, sí, pero ahora, esta
vez, este resultado no podemos usarlo directamente aquí. Y te explicaré por qué, pero primero sigamos
adelante y veamos por qué y por qué no. Bueno, iremos a nuestro controlador de producto
aquí, está bien y los colapsaremos. contraerlos todos, así que aquí solo tengo el elemento total,
así que eso es lo que estamos viendo ahora mismo, ¿vale? y este elemento total lo pudimos ver aquí, está
bien, pero en realidad los necesitamos ahora mismo.

Más información para mostrar esto esto esto y todo
bien así que aquí está solo el monto total Vale, eso no es suficiente para nosotros. Esta sección
es solo para aquí. Vale, como el número total. pero si queremos obtener más resultados, debemos hacerlo,
necesitamos crear una nueva función, ¿vale? pero esa sería una función muy simple, ¿vale? ahora
si vamos al controlador de nuestra tarjeta, que es aquí primero aquí dentro se creará una nueva
función, está bien, y esa función sería responsable de conseguirnos prácticamente todo lo que necesitamos
para crear una página como esta, ¿vale? Ahora recuerde que en este mapa estamos almacenando datos,
ahora tiene el modelo int y cart, así que esto es donde obtenemos almacenamos los objetos, así
que queremos crear una nueva función. donde podríamos obtener los objetos, recuerda
que antes solo obtuvimos el valor Me refiero a la cantidad total de esta lista aquí,
pero esta vez queremos que el modelo esté bien.

O el objeto en sí y más adelante con respecto a
mostrar esta cantidad esta cantidad esto y esto Me ocuparé de ellos por separado, así que por esa
razón primero vendré aquí y declararé una nueva función y esta función devolvería todos
los modelos de carrito almacenados aquí o todos los objeto de tarjeta que está almacenado aquí, está bien o aquí,
en realidad, lo que sea que esté almacenado aquí y todos juntos queremos volver
ok pero claro no vamos a volver el mapa en sí porque el mapa tiene una clave, en este caso
no queremos ninguna clave, está bien, todo lo que queramos es la lista de modelos de carrito u objetos de tarjeta,
está bien, eso es todo lo que queremos, por eso aquí Crearemos una nueva lista. El tipo de devolución sería
lista y devolverá el modelo de carrito. y sería un captador, así
que usaremos get y aquí Si estaríamos aquí, obtendríamos los artículos, está bien, entonces
usted recibirá todos los artículos ahora.

Aquí estamos diciendo eso. Vamos a devolver una lista de modelos de carrito
y esto es lo que Get hace bien ahora para poder Devuélvelo primero, tenemos que mirar este mapa.
Está bien, y para este primero hacemos elementos. y luego haremos las entradas. Cada mapa tiene un
método o propiedad llamado entradas y se basa en que puedes obtener otro método que se llama mapa. Está bien,
entonces cada mapa como iTunes es un mapa que tiene un propiedad llamada entradas y, según las entradas, puede obtener
un mapa. Bueno, el mapa devuelve una función, pero También toma un parámetro para que esta e esté relacionada con
todos los modelos de carrito uno por uno, digamos, por ejemplo. en nuestro carrito artículos aquí si tenemos 10 artículos,
entonces cero uno dos así, así que e primero en el primero bucle apuntaría a cero o al primer elemento o al
primer modelo de carrito y en el segundo bucle e señalaría al segundo y en el tercero en el
tercer bucle o tercera vez se referiría al segundo modelo de tarjeta o índice de dos, ojalá tenga
sentido.

Ahora aquí devuelve una función. pero no queremos devolverlo así, queremos
hacerlo más legible, vale aquí ahora. Ves que esto se refiere a y al modelo al mismo tiempo, está
bien, no solo al modelo, entonces e se refiere a ambos. de ellos está bien, aunque dije que e se refiere al cero,
pero el cero tiene un final y un modelo de tarjeta al lado e es uno y e tendrá un modelo final y de tarjeta, por lo que
el modelo de tarjeta clave es el valor, por lo que aquí solo quiero devolver el valor del punto. Está bien, no
queremos devolver nada más, pero aquí necesitamos regresar porque este get debería devolver algo, lo que
debería devolver, debería devolver una lista, ¿vale? Así que primero devolvemos una devolución y ponemos
la palabra clave return aquí solo por esta, ¿vale? ahora el mapa en sí también regresa, así que aquí también necesitamos
un valor de retorno, bien, nuestra palabra clave de retorno.

Y luego aquí tenemos que convertir este mapa en una
lista, por eso colocamos un punto en la lista, ¿vale? Está bien, eso ya habría desaparecido, porque
el mapa y las entradas de mapas no regresan. una lista, pero aquí decimos que devolveremos
una lista, por eso ponemos dos listas entonces lo convertimos en un mapa, vale, lo siento,
lo convertimos en una lista y si lo hacemos entonces podemos revisar esta lista aquí o el lugar
donde la llamaré y luego puedo indexarla puedo revisarlos usando un índice como cero uno
dos tres así está bien, espero que tenga sentido una vez más aquí hay dos palabras clave que regresan,
la primera devolución es para obtener en sí porque están diciendo que vamos a devolver una lista, por
eso vuelvo y el mapa también devuelve algo bueno.

Bueno, verás que el mapa devuelve iterable ahora.
Aquí iterable significa que no puedes indexar. a través de él usando un índice como cero uno
dos tres está bien, solo tú solo puedes revisarlo usando claves o valores como ese, pero no queremos nada
de esto, queremos devolver una lista, así que convertimos el mapa en una lista usando la herramienta
listar esta, está bien, con esto ya hemos terminado. esto está en la sección de tarjetas, así que ahora en
nuestro controlador de producto que está aquí en este uno crearemos un método similar al que hicimos este anteriormente
como este, está bien, aquí hacemos una lista modelo de pieza y aquí obtenemos y obtenemos
los artículos bien, ahora aquí devolvemos Card Dot obtiene los elementos correctamente y todo lo que
tenemos que hacer es importar el modelo de tarjeta, OK y así es como funciona bien, ahora con esto
ya hemos creado esta lista que queremos muestra así, está bien y luego debemos ir a nuestra sección de interfaz
de usuario que se encuentra dentro de la página del carrito aquí.

Bien, ahora construimos, construimos la primera
sección, que es esta, ahora seguiremos adelante y construye esta sección ahora mismo esta sección
tiene que estar dentro de una vista de lista constructor y también queremos poder desplazarnos
si tienes muchos elementos aquí, ¿vale? Sí, eso es lo que queremos hacer, por eso definitivamente
necesitaremos una vista de desplazamiento o Nuestro creador de vistas de lista está bien, así que
primero seguiría adelante y definiría la posición. Bueno, ahora aquí está el motivo por el que estoy usando
posicionado. Esa es la razón por la que quiero hacerlo. Bueno, definitivamente tendré esta sección inferior
aquí, pero pertenece al andamio, no a la pila. ¿Por qué estoy usando pila porque en esta
sección quiero que sea desplazable? Quiero que se pueda desplazar y al mismo tiempo quiero
que esté posicionado y arreglado bien.

Y descubrí que usando un widget de pila puedo tener un
mejor control sobre dónde quiero poner cosas como esa Bien, es por eso que muchas veces prefiero
trabajar con pila en lugar de columna. La columna crea muchos problemas adicionales, pero con
la pila esos problemas prácticamente han desaparecido. De todos modos, vendría aquí y primero
definiré un contenedor. Ahora déjame configurar la posición
para este, bien, aquí lo haría arriba. Ahora, para el primero, primero usaré dimensiones, altura
de punto 20, pero quiero una base de 100 píxeles. en la altura del dispositivo, está bien, entonces lo multiplicaré
por cinco. Está bien, aquí ya me habré ido. para este una vez más usaría dimensiones
de punto de ancho 20 y dimensiones de punto con 20. ahora la parte inferior misma
estaría en la parte inferior, que es cero Por cero quiero decir que el fondo estaría aquí, por lo
que en nuestro caso el contenedor sería más o menos de aquí hasta aquí está bien, por ahora podemos configurar
un color, está bien, haremos colores de color colores punto rojo Bien, aquí es donde nuestro personal estaría bien
y aquí es donde nuestra posición superior 100 y si quieres también puedes aumentar un poquito alrededor, pero no lo necesitamos, así que aquí
es donde queremos poner nuestras cosas.

De todos modos, esto es solo para fines de depuración,
lo eliminaremos más tarde, ¿vale?, porque una vez que Pon un contenedor con un collar. Sabes realmente dónde
están tus paradas, tus widgets o artículos. así, está bien, entonces lo primero que hago
es seguir adelante y poner un niño. dentro de este contenedor y ese sería
un generador de vistas de lista Así que aquí haré la vista secundaria y de
lista listview.builder, bien y una vez más. se necesita un contexto, en nuestro caso estamos pasando
un contexto predeterminado y lo indexaremos, ¿vale? y después de eso tenemos que devolverlo, así que aquí
necesitamos tener una declaración de devolución. pero antes de eso necesitamos configurar algunas otras
propiedades, así que aquí está el recuento de elementos.

Bien, entonces, ¿cuántos elementos desearías? Ahora
los elementos tendrían la misma longitud que la lista. eso está escrito desde aquí, así que ahora tenemos que
venir aquí y por ahora decir que simplemente pondré 10 y por ahora aquí solo devolveré un contenedor,
está bien y aquí diré altura 100 y con digamos 200, está bien, seguiré adelante y lo guardaré
antes de que tengamos que poner punto y coma Como no tiene ningún color, pondría un
color aquí y haría colores.azul y diremos que el margen está bien y que los conjuntos de bordes
solo están bien para los 10 últimos, así que esto sería solo simplemente para fines de desarrollo.

Bueno, ahora verás que
esto ya se puede desplazar y si tuviéramos que trabajar con la columna a veces se vuelve mucho más dolorosa. Bueno, descubrí
que trabajar con esto lo hace mucho más doloroso. interesante, está bien de todos modos, pero por supuesto
tenemos algunas de las cosas que necesitamos Me ocuparé más adelante, pero en realidad no importa,
así que aquí estoy devolviendo un contenedor. Bueno, ahora tengo este contenedor y el contenedor
muestra esta sección aquí y una por una, pero queremos así, está bien, definitivamente, esto es para
lo que está diseñado aquí para entender qué es esto. pero ahora aquí tenemos que saber que
tenemos un solo contenedor pero aquí este contenedor, que es este, no va a funcionar,
por lo que necesitaríamos una fila, ¿vale? y en la fila el primer elemento es esta imagen
y luego necesitaremos una columna, ¿vale? Muy bien, en lugar de la columna tendremos
el primer hijo, el segundo hijo y el El tercer hijo sería una fila una vez más, está
bien, y dentro de eso tendremos dos hijos.

Y luego el último niño también estará en la
fila, así que sigamos adelante y comencemos. Bueno, eliminaré esta oración y toda la sintaxis
y luego escribiré aquí una vez más. primero un contenedor, ahora le daré una altura, está
bien, entonces haremos 100, lo cambiaremos más tarde y ahora aquí queremos ancho así
que haremos doble punto máximo Finanzas, por lo que se asegurará de que ocupe
todo el espacio disponible posible. Ahora veremos que funciona porque puedo guardarlo. Está bien,
todavía funciona. Por supuesto, elimino el color. Está bien, está bien y ahora por aquí tendremos
una pelea. Está bien cuando era niño. Así que aquí vamos y los niños están bien. Bueno, el primero es una vez más.
Si ves que esta es una imagen. y la imagen tiene borde, así que queremos poner la imagen dentro
de un contenedor, así que aquí lo hacemos.

Ancho del contenedor 100 pero en realidad lo que podríamos hacer
podríamos seguir adelante y hacer este con una altura de 20 5 bien, ahora copiaremos este póngalo aquí y tendremos altura, así que ahora terminaremos
teniendo un cuadrado y aquí también Menciónalo bien para que responda. A continuación queremos hacer una decoración
para mostrar la imagen, así que decoramos la caja. ahora aquí tendremos un radio de borde un poco
de radio de borde para que hagas borde radio.circular y ahora aquí haría dimensiones punto
radio 20 bien y este es el trabajo que hacemos Lo hice antes y deberíamos estar contentos con eso ahora.
Aquí tendré color y haré colores.

Blanco Bien, ahora sigamos adelante y guárdelo
y ya está apareciendo. y esto es lo que queremos, no te preocupes,
nos encargaremos de eso muy pronto ahora queremos mostrar una imagen dentro de ella, así que aquí Lo que haría sería una imagen y por
ahora usaré una imagen activa. Bueno, veamos la imagen de decoración y dentro de ella
haré la imagen y la imagen del recurso. y aquí mencionaría imagen de activos comida cero punto png y tenemos que
venir aquí ahora dentro de él podemos menciona la propiedad que se llama fit o si solo
usas una imagen de activo, no creo que podamos Puedes acceder a este y es por eso que necesitamos esta imagen
decorativa.

Bueno, ahora encaja es boxfit.cover. Bien, ahora sigamos adelante, guárdelo y veamos
si podemos ver la imagen para que ya podamos Para ver bien la imagen ahora creo que también
necesitamos un poco de relleno o margen, ¿vale? en realidad seguiría adelante con el margen, así que aquí
hacemos margen y, como inserciones, solo puntos por ahora, quédate con el margen inferior, así que aquí
haremos este y usaremos dimensiones altura del punto y queremos un margen
de relleno como 10 y se ve mejor Está bien, ahora seguiremos adelante y nos ocuparemos
de esta sección.

Ahora esto viene debido a este creador de vistas de lista porque tiene un relleno
superior que se aplica automáticamente y Necesitamos eliminar ese pozo para eliminarlo,
debemos envolverlo alrededor de otro widget. y eso se llama punto de consulta de medios eliminar relleno, está
bien, entonces punto de consulta de medios eliminar relleno ahora aquí se necesita un contexto, así que pasaremos
un contexto aquí, tú haces el contexto y ahora aquí tenemos que decir quitar la parte superior verdadero Así que ahora todo ha ido bien, pero ahora con esto tenemos
un pequeño problema, ahora está demasiado cerca de el uno al otro está bien, entonces, ¿qué haces? Haremos un margen,
así que aquí hacemos margen y los bordes son solo Lo siento así que haremos arriba y aquí
altura dimensiones punto altura 15 Guárdalo para que ahora se vea mucho mejor, así que tenemos
un poco de distancia.

Bueno, a continuación vamos a vea cómo seguir adelante y trabajar con esta sección  para
esta sección que queríamos que queríamos tomar todo el espacio disponible y es por eso que usaremos
un contenedor y un widget expandido juntos Bien, ahora dentro de la fila, este fue nuestro primer hijo y
ahora lo teníamos aquí, usaremos el widget expandido. y tendremos un contenedor dentro, por lo que ex contenedor
dentro de un widget de contenedor dentro widget expandido ocupa todo el espacio disponible
de su contenedor principal, por eso Hicimos eso y esto es lo que al menos queremos para la
altura porque nuestro widget principal no lo siente. Esto es al menos lo que queremos para el ancho y nuestro
widget principal está aquí.

El primero es una fila. entonces intentará tomar todo el espacio disponible
horizontalmente. Bien, ahora aquí hacemos la altura. y tendremos dimensiones punto
100 dimensiones son la altura 20 multiplicado por 5. Así que aquí ahora
tendremos child y tendremos una columna en la columna en sí queremos que todo comience
desde el principio, por eso tendremos uh la columna queremos que todo empiece desde
cero oh lo siento desde el principio así que echemos un vistazo, si esta es una columna en la
que queremos que todo comience de nuevo aquí, esta es horizontal a la derecha, así que horizontalmente comienza
desde el principio, por eso aquí marcaremos Así que aquí lo marcaremos como alineación de acceso cruzado
y haremos un punto de alineación de acceso cruzado.

Empieza bien, ese es uno y si ves con atención
ahora queremos que el espacio sea uh, este espacio vertical queremos que se les dé
de manera uniforme, por eso configuraremos otro propiedad y cuál es la alineación del acceso principal
y aquí hacemos la alineación del acceso principal evento dot space, está bien, ahora seguiremos adelante y
comenzaremos con nuestros hijos, así que aquí verás Este es un texto sobre marinada de naranja amarga.

Supongo
que lo leyeron, así que aquí primero tendremos algo grande. Envíe un mensaje de texto, está bien, este y simplemente usaré
jugo de naranja amarga, realmente no importa lo que le pongamos. ahora pongámoslo ahí y vemos ahí mismo bien,
ahora con esto llegamos a otro problema entonces esto dentro del contenedor mismo,
mientras que este contenedor que es imagen y este widget expandido que es el texto
de aquí necesitamos un poco de espacio Entonces aquí es por eso que usamos el tamaño del
cuadro y el ancho y las dimensiones con 10. Bueno, ahora se ve mucho mejor. Bueno, ahora el texto es que tenemos el texto, pero
queremos tener un color un poco diferente, no este. Me gusta este color, está bien, así que aquí
usaremos un color y eso serviría como color. Y hacemos colores punto negro uh 54. Es el color
que tenía originalmente. Ahora está bien. para poder ver las cosas bellamente así que aquí
simplemente eliminaré el fondo, ¿vale? Ahora aquí estamos cuando los necesites, los devolveremos.
Ahora después de esto queremos mostrar este texto aquí. y para ese podemos usar justo
después aquí justo después aquí podemos usar este texto, veamos para que podamos seguir
adelante con texto pequeño, está bien, entonces tenemos un pequeño widget de texto texto pequeño ahora aquí por
ahora lo pondremos picante y en el futuro veremos cómo recupere esta información del servidor, está bien,
ahora guardémosla, ahora vemos todo picante Bien, está bien, la siguiente parte es trabajar en este precio,
mientras que una vez más, como dije anteriormente, esto toda la sección debe estar en una fila, está bien, así que seguiremos
adelante y construiremos otra fila, así que pongamos una widget de fila aquí, así que eso es lo que haré.

Haré
aquí la fila y después escucharemos a los niños. y está bien, entonces necesitamos un mensaje de texto aquí. Deberíamos
decir un precio. Bueno, simplemente le daremos un precio. Continúe y copie este texto grande. Lo pondré allí
mismo y por ahora tendré un precio aleatorio. Así que voy a poner el signo de dólar y si para mostrar el signo
de dólar necesitas usar una barra en forma más plana. y luego aquí deberíamos tener una x roja y este
color, así que continuaré y lo guardaré. y aquí estamos, vemos bien, ahora la siguiente sección
muestra este botón aquí, el que vimos antes Bien, y para esta sección, en realidad hemos presentado nuestro
diseño hace mucho tiempo.

Podemos copiar parte del Esta parte del código llegará a esta popular sección
de detalles de alimentos, ahora debes seguirla. conmigo deberías venir a esta sección de navegación
inferior y justo después está esto fila y dentro de esta fila tenemos el contenedor ok Ahora este contenedor muestra esos datos, así que lo que haré
será seguir adelante y copiar este contenedor.

Vale, recuerda desde dónde estamos copiando, así que, en su lugar,
la barra de navegación inferior está dentro de la fila. primer contenedor ahora vendremos aquí y lo colocaremos
allí justo después del texto grande y nos arrojaría algún error pero no te preocupes,
nos encargaremos de eso muy rápidamente. Así que aquí los comentaremos por ahora. y aquí simplemente así para que esté comentado
y hagamos lo mismo con este ahora El error debería desaparecer y guárdelo y ahora
aquí vemos que tenemos un poco de desbordamiento y eso se debe a que se está
copiando del archivo original y en esa página el diseño era un poco diferente, así
que en lugar de tener aquí 20, simplemente tendremos 10 y para todos los demás lugares los cambiaremos
y el error también desaparecerá Bien, entonces fueron estos problemas de relleno.

Ahora
guardémoslo y veremos que ya no está, por supuesto. Necesito empujarlo hacia la derecha, bien, bueno,
para hacer esto verás que estamos dentro. esta fila está bien dentro de esta fila, así que aquí
podemos poner una propiedad que se llama eje principal alineación y aquí hacemos el espacio de puntos de alineación
de acceso principal entre y pondría todo bellamente diseñado así, está bien, y lo siguiente
que queremos hacer es mostrar esto. resultado el que obtenemos de la página del carrito, está bien, nuestro
controlador de tarjeta ahora anteriormente en el controlador del carrito Ya hemos establecido el método, así que todo lo que tenemos
que hacer es seguir adelante y llamarlo ahora. desde dónde llamarlo, recuerde que esto es todo el
generador de vistas de lista y en listviewbuilder los mostramos uno por uno, así que aquí este
constructor de vista de lista lo ajustará a get consigue que el constructor esté bien, por esta razón
primero lo cortaré y estaré aquí y escribiré. obtenga el constructor, está bien, ahora necesitaré encontrar un controlador
de tarjeta.

Recuerde que esta es una página de carrito. No es una página de producto, por lo que definitivamente buscaremos
un controlador de tarjeta para mostrar nuestros datos. Necesitamos importar eso ahora en la parte superior. También
necesitamos importar nuestro paquete get x. así que ahora veamos Bueno, necesitamos un poco más de trabajo por hacer; de lo contrario,
obtendremos un error, así que aquí hacemos el generador. y aquí simplemente diremos controlador de carrito, está bien, aquí
regresaremos y necesitamos una declaración de devolución. y después de eso tendremos este generador de vistas
de lista. Bien, ahora con esto podemos acceder al propiedades y campos dentro de nuestro controlador
de tarjeta ahora abriré el controlador de tarjeta y lo primero que quiero obtener es acceso
a este. Bien, esto nos dará el artículos, así que iré a esta página del carrito aquí.
Ahora usaré este controlador de tarjeta en esta instancia. y lo pondré allí y luego accederé a las propiedades
que se llaman obtener elementos y luego agregue elementos a la lista para obtener la longitud,
está bien, perfecto, y después de obtener la longitud ahora aquí no necesitamos esto codificado
así que aquí una vez más lo pondré Hay un controlador de tarjeta que obtiene elementos.

Ahora recuerda obtener
elementos en la lista para que podamos iterar a través del uso. index y aquí queremos obtener la propiedad
name y le diremos que no es va a ser nulo, está bien, por ahora esto también está
codificado, pero aquí en esta sección podemos elimine eso, así que aquí hacemos esto más, lo
siento, obtenga elementos y aquí tenemos el índice y ahora aquí tendremos el precio, está bien
y decimos que no será nulo, está bien. Mira el problema aquí, ya agregamos un verificador nulo,
realmente fue una vez, entonces lo verificaré allí. Está bien, veamos y está bien, entonces este es el
problema que necesitamos para convertirlo en una cadena. Bien, ahora el error desapareció y dónde más
veamos, y también necesitamos cambiar el La imagen está bien, entonces esta imagen está bastante codificada en
este momento y, por lo tanto, aparecería en la parte superior aquí.

Ahora aquí, en lugar de hacer una imagen de activo, haríamos una
imagen de red. Está bien, aquí hacemos una imagen de red. y aquí tendríamos constantes de aplicación URL base de puntos de constantes de aplicación más constantes de aplicación dot upload url y además tendremos nuestro
controlador de tarjeta dot get items index dot Dios mío, está bien y luego no es nulo, pero, por
supuesto, esto no va a funcionar todavía porque es No obtengo ningún tipo de datos de ningún lugar. Bueno,
primero iremos a nuestro archivo principal aquí.

Y en lugar de esta página de carrito, volveremos a nuestra
página principal de alimentos, veamos cuál es Este está bien y luego vendré aquí. Está bien,
ahora iniciaré la aplicación desde cero. Y, de hecho, antes de seguir adelante y hacer eso, también
debemos revisar esta navegación, así que ¿Qué queremos hacer? Déjame decirte. Aquí
estamos. Lo abriré por aquí. Ahora lo haré. Haga clic en esto y lo agregaré y después de
eso, me gustaría hacer clic en este e ir a la página del carrito está bien, para eso
necesitamos ir a nuestro archivo que se llama veamos popular para obtener más detalles y aquí
debemos colocar este ícono aquí dentro del gesto detector, ahora este ícono está aquí, así que lo ajustaré
alrededor del detector de gestos, está bien y veamos Así que aquí hacemos el detector de gestos,
ahora tendremos el evento de toque.

Ahora, pero no es así como hacemos el enrutamiento,
pero esto es solo para fines de demostración. así que aquí tenemos la página del carrito, está bien y todo
está bien, ahora guardémoslo, está bien, se ha guardado. Muy bien, ahora, si haces clic en esto, irás a la página del
carrito. Está bien, y aquí es donde estamos, por supuesto. Necesitamos actualizar estos datos, pero lo de aquí
tiene sentido. Ahora la última parte que queremos hacer con la página del carrito aquí porque queremos
volver a la página principal y a esa página de aquí este ícono de inicio y también lo envolveremos alrededor
de un widget y lo llamaremos detector de gestos Está bien y aquí lo hacemos enderezado. Así que por ahora aquí tenemos los dos bien.
Una vez más, pronto cambiaremos la ruta. No es así como hacemos el enrutamiento, pero solo quiero
mostrarles cómo deberían funcionar las cosas, veamos Bueno, nos encargaremos de esto más tarde
o incluso ahora mismo, veamos.

Vale, estamos bien y después de eliminar esto simplemente
funciona, así que ahora quiero hacer clic en esto para poder Ve a la página de inicio. Puedo volver. Ahora puedo agregar
más cosas. Haré clic en esto, pero por supuesto. Si voy allí, este botón todavía no funciona correctamente,
así que para eso tenemos que ir a nuestro uh controlador de producto aquí detalle de alimentos
recomendados y aquí tenemos este botón de compras esquema del carrito, así que este está bien, en realidad queríamos
este, así que lo envolveremos alrededor de otro contenedor Otro widget y detector de gestos. y aquí lo hacemos en la página de la tarjeta tap importémoslo, guárdelo y estamos listos para ve bien ahora haremos clic en esto venimos aquí
ahora vemos que esto es lo que agregamos Ahora podemos agregar más cosas aquí y tal vez
agreguemos dos. Confirma que son 10. Ven aquí.

Ahora vemos nuestros artículos hermosos, así que prácticamente
ya funciona. Ahora YouTube tiene un límite. de subir vídeos durante 12 horas
no puedes subir más que eso Así que cubriré el resto del tema en la
siguiente parte del tutorial..

As found on YouTube