entonces extranjero entonces hacer Hola a todos, Assalamualaikum, bienvenidos a un tutorial
aquí aprenderá cómo crear una aplicación de
y esta aplicación sería tanto para ios como para android y esta
y por qué crear esta aplicación porque quieres dominar
lenguaje de programación y marco de back-end y también
En este curso mejorarás mucho o dominarás el marco
si eres nuevo en flutter o si vienes de
idioma o si eres un recién graduado de la universidad,
porque esta sería una aplicación completa
Inmediatamente después de terminar este tutorial tendrás
Aquí cubriremos algunas características importantes, mientras que
Luego, aprenderá cómo crear carritos de compras. Realizar su pedido.
También aprenderá a crear perfiles de usuario y páginas, como
Vea cómo crear la ubicación de la dirección del usuario desde el mapa
El orden para los usuarios y toda la aplicación realizaría un seguimiento de la
Cubriremos la notificación de Firebase y veremos
luego, desde el back-end, también aprenderá cómo cargar
y actualizar el orden y también verás el perfil de usuario
parte 1 tendremos 12 horas y en 12 horas
Comience construyendo cuatro pantallas de interfaz de usuario
widget de pila y posición, así como diferentes fragmentos,
caja al adaptador y una de las interfaces de usuario complejas sería
aumentar, reducir y animar la posición y, justo después, aprenderemos
lo cual sería muy útil más adelante cuando
Y aquí cubriremos el repositorio del cliente API y
cómo construirlos y veremos su conexión entre
Veremos cómo cargarlos en las dependencias y nos aseguraremos
cuando se inicie nuestra aplicación y luego continuaremos y comenzaremos
con el mapa json y la lista y sé que este
principiantes de Flutter, así que aquí lo tomaremos con calma
Si tenemos estas ideas, seguiremos adelante y construiremos
controlador de tarjeta y aprenderemos cómo procesar los datos
También cubrimos el diseño responsivo, lo que también significa
diferentes dispositivos se verían exactamente iguales
tamaño, así que justo después de la parte 1 de este
lenguaje de programación dart mientras que en la parte
8 pantalla de interfaz de usuario compleja y después de esto, realmente
Y aquí aprenderá cómo crear clases de modelos complejos
Otra característica importante sería trabajar
guarde los datos del usuario y luego aprenderá cómo crear
y cómo procesar los datos relacionados, así que
Elija la ubicación del usuario según la pestaña del usuario y luego aprenderá
y muestre la notificación relacionada con el usuario desde
realice el pago de PayPal utilizando PayPal SDK y todos ellos
Gestión de usuarios: otra característica importante sería la ubicación
Entonces, al final de la segunda parte, dominarás realmente el
tres tendremos tres horas y aquí nos ocuparemos de algunos
como notificación tanto para Android como para iOS y también
aplicación web y aquí es donde brilla el aleteo, está bien,
plataforma prácticamente puedes ejecutarla en todas partes,
una aplicación responsiva y al final veremos cómo publicar esta
así que comencemos bien, este es el código de
el sitio web y si lo descargas e instalas tendrás una interfaz
con esta estructura de proyecto donde tendrás
Muy bien, entonces tendrás tu carpeta de labios y
que vamos a usar para nuestra aplicación, bien los colores
Y, por supuesto, este es una vez más el archivo principal
directamente, está bien, entonces no vamos a usar eso,
Lo que vamos a hacer durante las primeras dos horas.
Definitivamente
Bien, mientras estoy aquí tengo esta interfaz de usuario. Esta interfaz de
o puedes ir a una nueva página y regresar y, por supuesto, tenemos
aquí está bien, está bien, y aquí tengo
o control deslizante en realidad si lo entiendes
página de inicio de sesión donde te pide
pero hablaremos de eso más tarde, así que primero trabaje en la
página que queremos crear y nuestra página de inicio tendrá
y la sección de pie de página está bien, así que esta es la
Primero necesitamos crear algunos archivos uh dart.
Crearé un directorio y en este directorio guardaré todos
y aquí crearé un nuevo archivo dart.
Está bien, así
Bueno, el nombre de este archivo Dart sería la página principal de alimentos,
Bueno, esta sería una clase con estado. Bien, así que sigamos
Y la llamaré página principal de alimentos y luego necesitamos
ahora la llamo página principal de comida porque contendrá
Entonces, se trata de la página principal de alimentos, por lo que
esta sección del cuerpo está bien, lo primero que queremos
Está bien, entonces, para este, lo que haré será seguir
este contenedor intentará dibujar directamente esta sección
Sería estático, pero en el futuro leeremos esta sección
pero de todos modos tengo este contenedor aquí, bueno, tengo
contenedor declararé aquí otro niño, así que
El niño sería otro contenedor. Ahora tomemos una estructura
Definitivamente esta es una fila, entonces tendremos
este y este ahora esta fila los primeros hijos
nuevamente en la columna donde tendrás esta letra el nombre
También tendrá otra fila porque estos dos elementos aquí, el
La primera sección sería la fila, está bien, eso es lo que haremos,
niño y aquí lo llamaremos fila y aquí tendremos
fila tendremos dos secciones, este elemento y este, muy
haremos, seguiremos adelante y declararemos la columna aquí,
Bueno, eso es para este y luego queremos hacer este
un contenedor está bien, así que seguiremos adelante y crearemos
Es así que aquí dentro de la fila continuaré y declararé
y el contenedor tendrá ancho y alto, así
y la altura es 45, está bien, y comenzaré
y sería fácil de entender, está bien, ahora
tenemos este borde así que queremos decorar nuestro
Así que ahora, por eso usaría decoración y haríamos
en la decoración de la caja definitivamente tendrá un radio de borde,
Está bien, llamaremos al radio del borde punto circular
Bien, todas estas esquinas están bien y ahora aquí también
entonces eso es lo que haremos ahora aquí hacemos colores punto um
cambiarlos en el futuro pronto, está bien,
Quiero poner un texto al azar.
Está bien,
digamos que la ciudad está bien, hasta ahora todo bien, pero, por
ejecutar, todavía tendremos este predeterminado, podemos
reiniciado por qué porque tenemos que venir aquí y llamar a esta
Entonces, lo que haremos será eliminar esta
La página principal de alimentos está bien y se conectaría
Asegúrate de tener esta dependencia bien y, para
y elimine esto aquí y ya no necesitamos esta
mucho más limpio, así que ahora seguiremos adelante,
Tiene una pantalla bastante fea, pero sí, algo
Bien, bueno, lo primero que quiero eliminar es este
Está bien, configuraremos el banner de depuración
Debería desaparecer y ahora se ha ido, ahora tenemos
usted está o estamos usando un contenedor aquí directamente
podríamos hacer, podríamos simplemente seguir adelante y envolverlo
Para este simplemente cortaré este y aquí haría un
cuerpo y dentro del cuerpo pondremos este contenedor y con
y un nombre, bueno, quizás te preguntes para
Bueno, echemos un vistazo a esta aplicación
Al ver la sección principal, el color cambia, por lo que en
sección principal el color debería cambiar bien y ahora
un parámetro de desplazamiento está bien, por eso
Eso es lo que queremos hacer en el futuro,
Está bien, ahora volvamos a nuestra aplicación
Así que ahora sigamos adelante y solucionemos otro problema.
Esto debería estar a la derecha y ellos deberían estar a la izquierda,
y esto no está a la izquierda, definitivamente
Bueno, definitivamente estos dos están dentro
que podemos usar y que se llama acceso principal,
alineación y luego usaremos un espacio entre para
la pantalla y colóquelos uno a la izquierda
espacio vacío, así que sigamos adelante y ejecutemos,
Al igual que este, queremos que estén en la parte superior derecha,
no está bien, así que ahora esta columna ya está en la parte
está en la parte superior, está bien, pero ahora este está dentro
Intenta ponerlo centrado verticalmente, por lo
está aquí, pero si tiene una columna dentro de la fila
entonces la propiedad predeterminada de las columnas, que debe permanecer
está usando su propiedad predeterminada dentro de la fila, entonces, ¿qué
que debería estar en el centro vertical, ahí es donde
en la parte superior, así que ahí es donde está ahora, está
Esta es la barra superior o sección de encabezado y luego tendremos
sección y esta debe estar dentro de una columna,
Así que ahora solo tenemos este, pero en el futuro
uno porque queremos ponerlo en la parte superior, así que si
pondría todo lo que los niños intentan poner desde
Así se usa la propiedad superior, pero si puedo poner la
estar en la cima al menos comenzaría desde arriba y
Tendremos más secciones, así que lo que haré será seguir adelante
Espero que tenga sentido, así que cortaré
y por aquí tendré hijos y lo pondré ahí ahora
Esto está funcionando como esperábamos y, de acuerdo
margen para este contenedor porque hay demasiado en la parte superior,
y aquí solo hacemos inserciones de borde y aquí
15 ahora lo guardaremos y veremos que bajó ahora
demasiado a la izquierda y demasiado a la derecha también
uno dentro del contenedor, por lo que el contenedor
espacio vacío espacio en blanco está bien, entonces aquí usaría
Solo así quedaría, digamos, 20 y escribiríamos,
Está bien ahora mientras esta sección se
Podemos poner un ícono aquí.
Para hacerlo, aquí
Usaríamos el widget de íconos para hacer eso, de modo que los
Creo que podemos importarlo bien, este
y luego usaremos el color, así Los colores puntean ahora, este paquete de íconos es parte
Está bien, ahora continuaremos y lo guardaremos. Ahora vemos
que está en el centro, podemos seguir adelante y simplemente
Entonces, en Mac, usaría la opción Enter y me dará esta
Bueno, si de alguna manera no está centrado, lo centrará, por
Bueno, ahora podemos cambiar el color de este
queremos, como podemos ver en la aplicación, queremos
Aquí podemos cambiar el color, así que aquí yo
color principal, bien, ¿cuál es el color de la aplicación de este
el nombre de la clase es colores de la aplicación y aquí he declarado
Entonces este es un miembro estático, lo que significa que puedes
en tu proyecto solo usa este nombre de clase, está
si tiene un miembro estático en cualquier lugar de su clase
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
Ahora, si ves esta aplicación, muchos de los lugares
este este este y este bueno, todos son iguales,
Podríamos seguir adelante y crear un widget de texto
En realidad, es un widget de texto personalizado, así que ahora seguiremos
para que podamos reutilizarlo una y otra vez, queremos
Muy bien, iré aquí y dentro de la carpeta
y lo llamaremos widgets, está bien ahora, dentro
texto grande, vale, texto grande, punto, dardo por aquí,
entonces tendré esta opción y lo llamaré texto grande.
las bibliotecas necesarias y estamos listos para comenzar,
contenedor aquí simplemente devolveremos un widget de texto,
propiedades, de lo contrario mostrará un error, pero ahora
ser reutilizable para que veas que es reutilizable aquí en muchos
Aquí el color es bastante diferente a este, así que definitivamente
Por eso seguimos adelante y declaramos el color final.
Está bien, y luego tendremos una secuencia como texto,
entonces el texto se pasaría desde la función de
texto, está bien, ¿qué más podemos mencionar? También podemos mencionar un
de este conjunto dentro de este widget sin estado, pero también
Vale, está bien y, como puedes ver aquí, tenemos
o título y aquí tenemos este punto punto punto, así que
para configurar otra propiedad aquí declarar y que
Aquí declararemos el desbordamiento de texto variable y luego, está bien,
dentro del constructor con, de lo contrario obtendremos un
y ahora el color, creo que el color debería
Puede que no pase el color, así que aquí el color
Bueno, envía el texto, así que lo ajustaré al widget requerido.
aquí ahora con respecto a este desbordamiento de texto, así que con
configuramos el predeterminado, así que hacemos este desbordamiento de puntos,
Si el tamaño del texto es más largo que cierto
Estos puntos se llaman elipses y esta es la propiedad
pero también podemos anularlo porque aquí tiene otras propiedades
Cosas así, así que en el futuro, si lo deseas,
y eso tendrá efecto, de lo contrario solo usaremos elipses
ahora el tamaño es interesante um en general aquí ahora
uh 20 está bien, ahora veamos,
Bien, ahora el error debería desaparecer, así que ahora
todo lo que tenemos que hacer es seguir adelante y llegar a este
ahora hacemos texto, este texto es el texto que transmitirá
desbordamiento, por lo que el widget de texto toma la propiedad
Establecer como predeterminado o el uno pasará bien,
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
aquí y dentro de la propiedad de estilo podemos usar un estilo
Bien, ahora sea cual sea el color que pases, ese
peso, por lo que la fuente predeterminada para texto grande
No estoy seguro de cómo lo llaman y debería estar
si dices este archivo yml de especificación pop y aquí
dentro de esta carpeta de activos, por lo
Ahora, para el tamaño de fuente, usaremos
Bien, este es nuestro widget de texto reutilizable y aquí
desbordamiento y cosas así está bien, bueno para el color,
color en realidad, así que para que este pueda usar el color
Creo que habíamos eliminado esta propiedad final de
el color principal debería venir de aquí, que es este
Así que seguiré adelante y copiaré esto y lo pondré
¿Por qué no estoy usando la propiedad predeterminada directamente?
no, no puedes si quieres configurar una propiedad de color predeterminada,
como estos hexadecimales o cualquier tipo de números, no
Vemos que no puedes usar el color como propiedad predeterminada.
otros números o dígitos no pueden ser una variable, está
Bien, ahora lo que podríamos hacer podríamos seguir
Entonces, en lugar de llamar al país ahora mismo, puedo llamar a nuestro
Entonces, como puedes ver, puedes cambiar entre ellos, así
el texto que quieras decir dice bangladesh o tu
Bangladesh, por eso estoy poniendo este, ahora qué
y ejecuta nuestra aplicación en el simulador, así que veamos qué
aquí podemos ahora está usando el color predeterminado,
Podemos cambiar el color si lo deseas.
Aprendimos
También pase el tamaño del texto, así que aquí primero
punto color principal está bien, ahora iremos a actualizarlo
y ahora mismo el tamaño predeterminado es 20, así que
y podemos hacerlo, pero definitivamente eso
Así que este widget de texto grande nos ahorrará
creas un texto reutilizable. Bien, ahora con esto hemos terminado
Muy bien, ahora queremos crear un texto reutilizable o
Una vez más, si miras con atención, el texto pequeño
como aquí o como aquí está bien, como aquí así
texto para nuestra aplicación, pero ese sería
Iré aquí y justo aquí crearé un nuevo archivo
dart, está bien ahora, con suerte, porque ya hicimos el texto grande,
Copie este aquí y haremos algunos cambios menores.
Definitivamente,
Para llamarlo texto pequeño correctamente y el mismo
Bueno, para este definitivamente queremos configurar un
Está bien, y para este realmente no necesitamos ningún
desbordamiento desde aquí que no necesitamos
Aún mantendremos la familia de fuentes Roberto
Ahora el tamaño es el tamaño que se enviaría
Quiero configurar un color predeterminado, pero este color
o no negro, no negro directo, así que vendremos
El color predeterminado está bien, que sería más parecido
pasado el color, así que sigamos adelante y revisemos
Vale, está bien, entonces este es el predeterminado. Y aquí en
altura para que podamos cambiarla si es necesario,
La altura del punto es igual a 1,2, por lo que si vienes aquí
líneas bien y esto es lo que estará haciendo bien y aquí
altura, bueno, esta es la predeterminada, pero ahora podremos
falta otro porque queremos tener este problema de desbordamiento,
uno está bien, si es más de una línea, tendrá
Ocúpate de este desbordamiento ahora que hemos terminado con este
y úsalo bien, así que aquí lo llamaremos texto
parámetro requerido en este momento veremos nuestra
vale, vale, eh, veamos, creo que pegué, copié
Color negro principal, lo siento, creo que este debería
Así que vendré aquí y lo pondré allí.
Está bien,
El predeterminado es muy ligero, así es, está bien,
que simplemente podemos venir aquí y pasaremos la propiedad
54 para este, así que solo para este cambiaremos
De lo contrario, terminaremos con un color predeterminado
widget reutilizable, nos ahorrará mucho tiempo. Está bien,
dibuja este este ícono para poder dibujar este ícono
dentro de otro widget de fila y luego el texto pequeño
Por eso cortaré este aquí.
Ahora escribiré
Tendremos hijos porque sabemos que la fila requiere
después de eso, simplemente podemos seguir adelante y usar
botón desplegable de flecha así, vale, menú desplegable de
Úselo ahora, después de eso continuaremos y lo guardaremos
Trabajando con este para que se vea exactamente igual
Bueno, este está bien, así que a continuación seguiremos
Está bien, esto sería muy emocionante
Para hacer eso, primero debemos seguir adelante y
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,
ciérralo aquí y lo llamaré aquí cuerpo de página
Así que seguiremos adelante e importaremos la biblioteca que
de esta página que oh esto es parte de toda la pantalla
Definitivamente van a construir esto bien, como puede
Podrás desplazarte hacia la izquierda y hacia la derecha y luego
Bueno, aquí tenemos la sección de vista a la derecha,
Entonces, dentro de este contenedor, de alguna manera también
Si usamos un widget de pila, podremos superponer
eso es lo que tenemos que hacer y como vamos a utilizar el
desplazamiento hacia la derecha, por lo que necesitamos usar el creador de páginas,
Bueno, todos están conectados de alguna manera, así que aquí
Llamaré pageview.builder a este, como cualquier otro constructor,
eso es lo que tenemos aquí ahora generador de elementos, se necesita
El primero es un contexto y el segundo es un índice,
puedes llamarlo como quieras, está bien, ahora aquí
esto entonces tendremos estos dos corchetes y dentro de ellos
También devuelve el contenedor, está bien, vacía el contenedor
que se llama recuento de elementos, así que eso es lo que hacemos y
ahora este cinco y esta posición están conectados porque
Aquí terminaremos teniendo cinco, por lo que aumentará
El primero es cero, el último es cuatro y juntos tenemos
Ahora tengo otra cosa, aunque definitivamente no queremos
queremos poder devolver algo que se desplace hacia
espacio como puedes ver aquí a izquierda y derecha,
Muy bien, es por eso que aquí, en lugar de devolver
una función aquí y la llamaré elemento de página de creación.
Definitivamente dos cosas, la primera es la posición,
veamos bien, por ahora estamos enviando índice y sería
más elementos, así que en este caso la posición es nuestro índice
declarar esta función, así que aquí seguiremos adelante y
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,
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.
aquí la parte amarilla y luego construiremos esta,
Sé que dije que vamos a devolver un widget de pila
widget y tendremos uno, pero primero trabajemos con el
que necesitamos establecer ciertas restricciones,
Bien, primero lo que haremos será seguir adelante y configurar
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
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
Por ahora tendremos un color, digamos,
un color estable ox ff69c5df Por ahora solo tendremos un color
¿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
De todos modos, esta es la página principal de comida,
Ahora recuerda que ya hicimos una configuración
dentro de la columna tenemos este contenedor y
Así que justo debajo podemos llamar a nuestro archivo dart cuerpo de página
así que cópialo y ponlo aquí y lo llamaremos
para importarlo, está bien, sigamos adelante e importemoslo,
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
un contenedor, pero el contenedor no tiene ningún tamaño,
mencionar la altura, está bien, eso es lo que queremos hacer,
aquí, entonces hacemos una altura, digamos 320, y veremos
Al mismo tiempo, esto también significa que el desplazamiento de nuestro
funcionando bien ahora para que sea interesante aquí, haría
un color ahora mismo aquí y tenemos cinco elementos
cinco veces ahora aquí puedo verificar el índice, está
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
Ahora esto también sería útil en el futuro cuando carguemos
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
¿Qué queremos hacer? Queremos mostrar la imagen. Las
Imágenes como esta están bien, eso es lo que queremos
mucho más grande pronto nos encargaremos de esto y
como acercar y alejar así de todos modos,
y usaremos en la propiedad que se llama imagen y
aquí usaremos otra propiedad que se llama imagen
y dentro de él debemos mencionar la ruta de nuestra imagen,
Dentro de la carpeta de imágenes y dentro de ella
o cuatro png de un punto ahora para encontrar la imagen,
es esta carpeta de activos y dentro de ella tenemos esta
imagen de activos y quiero usar comida 0 0 comida 1.png
En el archivo yml de especificación pop aquí también tienes este
ruta de activos, así que todo son activos aquí, las imágenes
a esta dependencia y luego debes mencionar la ruta
Está bien, eso es lo que hicimos de todos modos.
Lo cerraré
Vale, nuestras imágenes ya aparecieron como puedes ver
Quiero cargar una imagen diferente y lo haremos, pero
encajar como portada, así que eso es lo que queremos
Está bien, y yo haría que la caja encajara correctamente con la cubierta de puntos
Como puedes ver aquí, sí, puedo obtener una imagen
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,
este tamaño de imagen tiene una altura de 220 y aquí el
Así que ahora parece que están ocupando
aquí esta función crea la página del elemento
Tienen diferentes tamaños de altura pero
altura aquí podemos probar eso, así que aquí podemos hacer
Los colores puntean en rojo, como ves, esta
pero el contenedor secundario que
pero parece que ocupa todo el espacio, sí, es cierto,
otro contenedor, el contenedor secundario en general ocupa
Está bien, eso es lo que sucede en general,
efecto, está bien, de hecho, si lo quitas, todavía
solucionar este problema de muchas maneras diferentes,
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
child sería nuestro contenedor, por lo que el contenedor
ahora envuelto alrededor del contenedor de pila ahora echemos un
Entonces, si colocas un contenedor dentro del widget
como se supone que debe ser ahora, descomentemoslo,
tomará el tamaño del contenedor principal, que es 320.
tamaño específico dentro de un contenedor principal, entonces debes
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
el margen desapareció, las imágenes están todas adjuntas
Está bien, está bien, ahora si ves el diseño original
Esta parte de aquí, el contenedor blanco superpuesto,
Ahora bien, este es otro beneficio de usar contenedores
entre sí donde puedan superponerse, así que simplemente
Así que lo pondré allí y lo guardaré
Vemos que no hay ningún cambio. En realidad, hay dos
tomando el mismo espacio y la misma cantidad podemos
margen izquierdo y margen derecho puedes hacer diez
Véalo de nuevo, así que aquí puede ver la diferencia,
pero ambos están ocupando la misma cantidad de espacio
porque envuelves cosas alrededor del contenedor de pila, lo
del contenedor que incluye el widget de pila es que los
uh, o puedes envolverlos alrededor de un widget de línea,
dónde quedarnos porque tenemos este espacio vacío aquí,
Así, está bien, así podemos hacerlo fácilmente. Entonces,
alrededor de un widget de línea, está bien, aquí seleccionaré
Vale, no está alineado.
Lo siento, está alineado. Bueno,
alineación pero eso es más como centrar así que por defecto
alrededor de ese contenedor se coloca dentro del contenedor
y aquí está el medio del contenedor rojo,
ahora aquí si podemos forzarlo a bajar al fondo del
alineación de la propiedad, así que alineamos el punto en la parte inferior
pero el segundo es demasiado grande, así que aquí podría
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
luciendo mejor ahora también podemos ocuparnos de esto izquierdo
Bueno, ahora esta vez es más como este. De hecho,
Vale, aquí hacemos 150 para que
aquí y lo que se ve no es que la altura
un poco más grande, entonces lo que podríamos hacer aquí
Ahora tenemos este bien, así que se ve mejor y haremos
Este espacio está bien y lo necesitamos porque queremos
dentro del contenedor dentro de este contenedor rojo,
si es necesario también puedes hacer 15, está bien,
Son las dos imágenes que se superponen entre
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,
Hemos terminado de construir esta parte porque este
el contenedor cuánto espacio ocupa y cuánto
Bueno, otra cosa es que queremos que este segundo
o cuando está ahí hay izquierda y derecha, esas izquierda
este y podemos hacerlo fácilmente, pero para hacerlo necesitamos
aquí, recuerde que estamos usando este pageview.builder
controlador que se llama pagecontroller, lo
variable de él y lo llamaremos controlador de página
controlador de página, ahora toma un
fracción de la ventana gráfica, esta está bien, el valor
entonces el valor predeterminado de la fracción de
Muy bien, ahora veremos con uno qué sucede. De hecho,
pero de todos modos, si vamos a usar este aquí
controlador, simplemente puede pasar el parámetro
No verías ningún cambio, pero ahora hay un beneficio
Bueno, parece que no es un gran cambio.
Prueba 8.5 y reinícialo.
Ahora parece que nuestra izquierda y nuestra derecha están
Viniendo desde aquí temprano, configuramos en este contenedor
Si dices que todo salió bien, este margen crea un espacio
y el control deslizante anterior, debes recordar ese y este controlador
le indica si debe estar visible la siguiente diapositiva
Basado en este parámetro, está bien, tú controlas eso.
se ve mejor y esto es lo que realmente queríamos lograr,
bastante bien, a continuación veremos cómo poner
Antes de continuar, creo que tenemos demasiado espacio a la izquierda
Por ahora lo haremos manualmente, pero en el futuro usaremos
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
Véalos de esta manera, se ve mucho mejor, así que
uh, envía un mensaje de texto aquí el que vemos temprano,
Entonces, como ya estamos dentro del contenedor, sabemos
eso es lo que necesitamos antes de continuar y comenzar
definitivamente entenderás bien la lógica si la miras detenidamente
debería envolver las cosas se llama widget de columna
entonces, dentro del widget de columna tendremos un texto aquí
ser fila porque queremos poner estas cosas y luego
fila aquí está bien y dentro de cada fila tendremos también
es parte de la fila y esto es parte de la fila, está
Hemos terminado con el fondo, por supuesto, no hicimos
pero hemos terminado con el fondo, lo cual ya hemos
Así que ahora tenemos que seguir adelante y empezar a escribir
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
relleno aquí arriba abajo y a la izquierda puedo
en una columna, está bien, por eso voy a usar este
relleno está bien, eso es lo que haremos, así que hacemos
solo punto y perderemos el relleno superior entonces usaremos el encabezado superior para 10 y el 15 a la
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
Recuerde que antes creamos este gran texto, todo lo que tenemos
con cierto texto está bien, eso es lo que hará, así que
Está bien y se necesita un mensaje de texto aquí.
Bueno, por
nombre del plato nunca lo probé, aunque no sé cómo
Hace mucho que debería intentarlo, pero de todos
vídeo del widget reutilizable, así que todo lo que necesitas
cierto, sí, se ve un poco extraño, pero nos encargaremos
¿Qué más veamos? Tenemos esta fila bien, así que eso
Tenemos este relleno, eso es lo que debemos cuidar, entonces,
entonces crearemos esta distancia en lugar de un
Solo diremos 10 y luego tendremos una fila y dentro
Está bien, entonces aquí tendremos niños. Ahora en los niños
cinco estrellas y estas cinco estrellas tenemos que dibujarlas horizontalmente
llamado ajuste. Está bien, puedes usar un widget de ajuste
Por supuesto, también puedes hacer algo un poco diferente,
una propiedad que se llama niños ahora niños toma una
use list dot generate para crear un niño dinámicamente
Ahora, como puedes ver, toma un índice para que
entonces esta flecha significa que devuelve una función, por lo
Necesitas devolver un widget si vienes aquí,
Esta parte está bien, esta es la longitud, así que
eso devuelve un widget, así que eso es lo que queremos hacer
es un widget y aquí podríamos hacer íconos con puntos y estrellas,
Haremos color y ahora la aplicación colorea el color principal, por
Tendremos talla, así que haz la talla 15.
Está
Así que aquí estamos bien, así que ya está mejorando
Muy bien, ahora aquí está la cosa, así que este es
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
ser el eje transversal y este debería ser el eje principal, así
hacemos alineación del eje transversal alineación de acceso cruzado
empezando bien ahora creo que podemos dejarlo
Mejor ahora, vale, ahora por aquí. Una vez más, estamos usando el
porque wrap coloca las cosas horizontalmente como
pero también puedes usarlo verticalmente si quieres
Bueno, dondequiera que veas este soporte que acepta niños,
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
generar para crear una lista de niños, está bien
Puede ser confuso, si no entiendes qué es esto,
devuelve una función, está bien y, en ese caso, debes
Bueno, si no quieres escribir así, también
Puedes usar segundas llaves aquí, pero en ese caso
Aquí por qué necesitamos poner una declaración de devolución.
toma una función que tiene que devolver algo, está bien,
y sigue igual, no hay error, funciona de la misma manera,
de escribir código, pero puedes hacerlo, realmente no importa,
Ahora, justo después de las estrellas, tenemos este y este comentario
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
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
Bien, esto es exactamente lo que queríamos y
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
y luego volvemos a escribir texto pequeño y
aquí haremos comentarios, ¿vale? Está bien, sigamos adelante y guárdelo. Sí, entonces
pero, por supuesto, creo que una cosa que debemos
uh, un poco más, tiene un poco más de altura, así que
140 veamos 130 sí o 20. Está bien, creo que esto es
¿Y qué más? Creo que ahora
Si ves aquí, tenemos más espacio a la derecha, por lo que no tenemos
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
En lugar de los últimos 15 aquí, hagamos 20 y veamos el resultado.
Está bien, eso se ve mucho mejor.
Está
ahora queremos poner este tres bueno si queremos poner
uh, bueno, todavía tenemos que dentro de esta columna corregir
para insertar la columna y lo primero que podemos hacer
caja del tamaño de una caja con una altura de 20 por ahora, está
así que adelante y rema y también necesitamos niños ahora
esta sección esto esto y esto y si siquiera entras
nosotros una cosa, así que en lugar de escribirlos manualmente
o esta sección, no importa de dónde vayas, todavía
esto para que podamos crear un texto reutilizable
Iremos aquí dentro del widget que crearemos
y el archivo dart y lo llamaremos icono y texto editar punto dardo bien ahora
Como queremos crear un widget de texto reutilizable,
y después de crear esto, todo lo que tenemos que hacer es pasar
widget widget reutilizable donde podemos pasar esto y esto
El color del icono y el color del texto, eso es
aquí crearemos una clase sin estado, así que st
expulsar texto, está bien, aquí devolveremos nuestro importaremos
pero ahora ves cuáles son las cosas que queremos que se pasen
lo que esa clase debería enviar aquí definitivamente el nombre
así, está bien, eso es todo lo que queremos, así que ahora
entonces quieres pasar el ícono pero realmente no puedes pasar
Vale, no puedes pasar el ícono directamente.
Tienes que pasar
cadena final y ese es el texto y el
y el color final del ícono, que también es color, color
agregue el campo obligatorio para
todo esto, así que lo haremos Bien, todo lo que tenemos que hacer es agregar
Requerido, así que copiaré
este y lo pondré aquí. Está bien y creo que hasta ahora todo bien.
aquí queremos devolver algo que devolverá
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,
aquí tenemos que escribir niños ahora en la fila cuál
Bien, definitivamente aquí queremos un ícono.
Bien, este
Podemos usarlo directamente, está bien, y luego también tenemos
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
está bien y podríamos decir con cinco ahora
Ya tenemos un widget de texto para eso, así que
Está bien, aquí pasaríamos el texto que es este y también
color del texto ahora aquí está simplemente este color
nuestra fila reutilizable está bien, entonces esto
Widget de fila y hemos terminado con esto, todo lo que tenemos
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
como puedes ver te da llenado automático Muy bien, el primer ícono aquí quiero pasarlo como
uh, digamos círculo sostenido, usaría este
porque este es el primer texto y el color ahora Aquí, creo que podemos usar el color predeterminado,
El color podría ser opcional, así que por aquí.
O creo que no necesitamos pasar ningún color porque
tenemos un color predeterminado configurado en nuestro texto pequeño aquí,
sobre eso, está bien, creo que sin color funcionaría
Si los miras, todos tienen el mismo color de texto,
Entonces, si ves incluso aquí, el color siempre es
De todos modos, eliminamos el color
Así que aquí y definitivamente necesitamos pasar el
icono de punto color uno, así que este es el primer
Ahora sigamos adelante y verifiquemos nuestro
para que podamos copiar este y hacer el segundo Así que aquí lo pondré dos veces porque tenemos
este, así que tenemos un ícono. Creo que este ícono es el
En este está bien y el texto está por ahora, está codificado
ese debería ser nuestro color principal, así que el color principal
Aquí debería estar, creo, algo así como un
Esta vez se redondeó y creo que el color también es color
si vienes aquí tenemos diferentes colores
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
el borde realmente no se ve bien aquí y nos encargaremos
una refactorización de nuestras constantes como esta que
Ya está funcionando y lo que puedo hacer por
que es rojo porque realmente no se ve
Está bien, entonces ya está funcionando bien.
A continuación
uno como ves mientras deslizo esta escala hacia arriba y hacia abajo, hago
Haga lo siguiente, comprendamos el principio básico de escalar
así, bueno, ahora podemos echar un vistazo
Cada diapositiva aquí tiene índice y valor de
aquí este índice es cero y este índice es uno, está
entonces el valor de página para este índice es cero. El valor de página
Otra mirada, aquí el valor de la página es 1 para este índice,
para esta página de índice el valor es 1 pero, curiosamente,
aquí hay un valor de índice, aquí hay dos, está bien,
dos valores de índice un valor de índice dos valores de
tiene sentido, así que esto es lo primero que debes saber
El valor del índice aumenta y el valor de la página aumenta, mientras
pero el índice aumentará sólo casi cuando haya terminado
Entonces, una vez que comienzas a deslizarte, el valor de la
por punto decimal, está bien y el valor del índice solo
Bueno, lo contrario es que cuando vas hacia la derecha,
digamos, por ejemplo, aquí el valor del índice es actualmente, el valor
Si lo desplazo hacia la derecha, el valor del
este es el seleccionado actualmente y el valor de la página
No de repente, disminuye linealmente, como
Está bien, entonces eso es lo básico que tenemos que saber.
Bueno, para esta o la diapositiva actual, para cualquier tipo de
para la diapositiva actual incluida esta y para
uno debería ser 0,8, así que en este caso este es uno,
1 significa 100 por ciento bien, así que esas son
Muy bien con esto, hemos terminado
con la teoría.
Ahora continuaremos y comenzaremos a codificar bien esta
para declarar una variable, eso es lo que haremos, así que aquí
Valor de la página curva y lo estableceremos en 0,0. Está
ahora porque queremos acercar, alejar
Si bien es por eso que estamos usando el controlador
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
El valor tiene un controlador de página y tiene otra propiedad que
puedo acceder a la propiedad de la página y la propiedad de la página
aquí inicializaremos el valor de nuestra página y a medida que nos desplazamos hacia
queremos registrar el evento izquierdo y derecho
Quiero que el valor de la página esté bien, así
método, entonces ese es el método de estado inicial,
llamaremos a y el nombre del método es estado init y cualquier
clase que puedes usar, pero si quieres usarla
La clase es una clase con estado, así que aquí primero
instructor súper instructor para este método initstate,
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,
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
y aquí obtenemos el valor y lo guardamos, así
Ahora aquí creo que necesitamos agregar un verificador
Ahora, por supuesto, necesitamos ajustarlo al estado establecido,
Haciendo esto porque queremos usar este valor tan pronto como
guárdelo aquí y nuestro sistema de gestión estatal
Lo sabemos porque lo pusimos en el estado establecido, así que tan pronto como
que tenemos un nuevo valor y vamos a actualizar la pantalla, está
y el sistema de gestión de estado, por eso estamos usando
entonces lo que está sucediendo aquí es que tenemos un controlador
obtenemos el valor de la página y el valor de la página
Lo que podríamos hacer es imprimir este valor y echarle
aquí podemos simplemente imprimirlos, está bien,
Creo que necesitamos convertirlo a cadena.
Está bien,
Bien, ahora veamos, verás a medida que te desplazas hacia
El valor es uno si vamos allí actualmente para esta página.
Vea el registro aquí que se está imprimiendo, el valor está
es el valor completo de uno y los tres tienen un
de ellos tienen el mismo valor ahora hagámoslo una
Así que la página realmente aumenta o disminuye lentamente,
Muy bien, ahora mientras lo inicializamos dentro de este
está bien, ahora tenemos que hacer otra cosa, tenemos
Cuando sales de la página, no queremos que esté activa; de lo
Entonces hay un método dentro de una clase con estado
método que vamos a utilizar como en cada estado,
cosas que tu página debería necesitar y cuando sales
informarle al sistema de administración de memoria
de la memoria de esta manera mantienes la memoria lo
mucha memoria, así que llamamos a este controlador de página
Esa es la primera parte que hemos hecho bien, pero en
abajo, está bien, creo que deberíamos reiniciarlo ahora
El escalado ocurriría dentro de este método.
Bueno, entonces
y dentro queremos hacer el escalado correctamente, así
que ver con um flutter, aunque es mucho código de dardos,
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
Bien, eso es lo que queremos usar. Primero
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í
de la matriz identidad cuatro, bueno, lo que hace tiene
Estaríamos jugando con la matriz uh porque la identidad
coordenadas x y y z, pero básicamente porque vamos
establece nuestro eje y y y para que este sea el eje
alrededor del eje y, por lo que se escala hasta el eje y y se
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í
indexar es igual al valor de la página actual, por
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
el valor de la página aumenta, pero solo queremos obtener
esa es la verificación que estamos haciendo aquí,
y ver si el valor del índice coincide con el actual
eso es lo que estamos haciendo aquí ahora declararemos
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
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,
que solo quiero que tenga el ochenta por ciento
Ahora que tenemos el factor de escala,
¿qué te dice? Veamos. entonces queremos obtener un factor de escala y a medida que
de este queremos guardar el factor de escala bueno ahora
Actualmente devuelve uno, por ejemplo, sabemos que aquí
El índice cero es cero, por lo que esto se convierte en cero, así
terminamos teniendo uno bien ahora aquí
aquí sabemos que el valor de la página actual es uno y el índice
terminamos teniendo uno, está bien, así que eso es lo que estamos
Esta ecuación solo es cierta para el índice actual,
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í
Entonces hacemos la escala de curva var y aquí hacemos
Lo siento por eso índice más menos lo siento, debería
y más uno multiplicado por uno menos el factor de escala Muy bien, ahora déjame explicarte bien, primero
Se referiría a la siguiente diapositiva, por lo que esta es
y como estamos haciendo más uno con el valor
De hecho, intentará localizar este de aquí.
por ciento de este lado original, eso significa 0,8 y
Bueno, como ves, sabemos que para todas las diapositivas
bien, o en este caso el valor de la página actual es
Y aquí el valor de la página actual es uno que debes
e indexar dos bien, entonces si nos vamos
Esta condición ahora debería ser cero punto
el factor de escala o 80 por ciento, así que aquí
este índice es dos, pero el valor de nuestra página actual
menos uno más uno que se convierte en cero,
multiplicado cualquier factor de escala es 0,8
Bien, ahora con esto ya podemos empezar a ver cómo
avance y vea la escala real que necesitamos para pasar
valor a matriz, está bien, eso es lo que haremos, así
lo pasas bien antes de pasarlo necesitas llamar a otra
diagonal tres valores que toma el valor de x y
está bien, ahora lo siento, el valor z es uno y
para jugar y aquí pasaremos su escala, está
Ponlo aquí, está bien, la idea es la misma, así que ahora puedes
Esto sucederá si intentas desplazarte, no veremos este,
aquí necesitas envolver tu widget de pila alrededor del widget
contraerlo y aquí ingresaría la opción enter
Bien, ahora la transferencia tiene una propiedad que se llama transformar
esta matriz la matriz que ya tenemos aquí está
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
Ya estamos haciendo bien esto de escalar. Ojalá tenga
así, bueno, esto se refiere al actual y esto
se que este es 0.8 porque aquí obtenemos 0.8 ok
tener cuidado, eso se llama posición porque queremos que
Sé que creo que esto era 220, así que queremos omitir,
Vamos a ponerlo en esta posición,
Está bien, eso es lo que queremos hacer ahora, podemos hacerlo
ya que es porque ves que cambia pero vuelve hacia atrás,
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
a la izquierda queremos que baje
verás que está bajando, el seleccionado actual, bajando
bajar y cambiar de posición, por lo que queríamos que
factor y entonces necesitamos cambiar eso bueno no
eso aquí lo llamaremos uh, crearemos
cur trans entonces es una transformación que significa
Entonces, ¿cuál es nuestro tamaño actual de este?
uh, si vemos el original aquí, sí, 220.
Está bien, entonces
una variable aquí también, así que no hay problema con
cero, está bien, ahora debemos ocuparnos de este problema de
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
La escala actual termina aquí es uno, por lo que uno
condición obtenemos uno correcto, entonces uno menos la escala actual
estaría en la parte superior, así que cuál
queremos que baje y esta ecuación funciona, cómo
el factor de escala es 0,8, así que 1 menos 0,8 es 0,2 dos
décimo así, un décimo multiplicado por la altura,
nuestra altura es dos a cero, así que terminamos
una vez que guardamos esto en una matriz, baja a 20 píxeles,
Antes de continuar y reiniciarlo aquí, debemos llamar después
Esta escala de transferencia se ha realizado después de
fila de transición ésta está bien, esta es una que en realidad
la escala simplemente se mueve hacia arriba y hacia abajo y aquí
por eso escribo en cero y el valor z quiero
queremos cambiar este y este es el valor que enviaremos
y simplemente lo pondremos allí, está bien, entonces,
están obteniendo la escala actual y se basan en ese factor
entonces lo cambiamos, está bien, cambiamos la posición,
Está bien, mientras que lo que haré ahora, simplemente seguiremos
adelante, copiaremos este y lo pondremos aquí.
Bien, ahora seguiremos adelante, lo guardaremos
Automáticamente está bien, así que
funciona ahora como ves que funciona. así que comencemos desde cero para que el izquierdo
Como ves, lo muevo hacia la izquierda y
esto estaba aquí pero de repente se redujo a allí ahora
la posición funciona justo después de la transición o el
uh y nos encargaremos de ello pronto. Sé que tenemos
pero esto no cambia mientras esto no cambia nada
actualmente no nos referimos a esta diapositiva,
condición y esta condición se refiere a esta diapositiva, está
Ya hicimos la mitad del trabajo o diría la mayor parte
por aquí seguiré adelante, copia esta
y ponlo ahí, bien y necesitamos hacer algunos
Entonces, cualquiera que sea el valor de la página
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
uno no funciona para esta diapositiva, pero la primera
cómo funciona déjame decirte que está bien para que
el valor de la página es uno, por lo que para todos ellos el valor de
es cero, pero todos tienen valor de página uno ahora
pero aquí este índice es 0, entonces 1 menos 0, por lo que se
una vez que vas a 1 menos 0,8, esto es 0,2, entonces
Entonces terminamos teniendo aquí un factor de escala de 0,8 o eso
hágalo y veremos el resultado inmediatamente. Vale,
sí, eso está funcionando ahora mismo. Vale. Ahora mismo esto está funcionando y todavía
Está bien, entonces cuando vayas hacia la izquierda
la escala funciona perfectamente,
pero cuando vas al Quiero decir, cuando vas hacia
los cambios de repente primero se vuelven grandes y luego
no funciona directamente, necesitamos otra condición, pero aquí
Vale, déjame decirte por qué no funciona.
Este es
y obtenemos un factor de escaneo uno y un factor de escala
este iría ahí y este encajaría en el medio
uno que aparecería aquí está bien, ahora para el
ese tercero pertenece al resto de la condición
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 de curva, esta es fija, por lo que cualquiera
siempre se aplica a la ventana de escaneo 0.8, eso significa
eso va a aparecer pronto, sí, pero es grande, cierto, pero
inmediatamente 0.8 no queremos escalar de grande a
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
y una vez más x y y z mientras que el valor x aquí
veamos la altura multiplicado por uno menos el factor de escala a las dos, bueno, en realidad estamos aplicando
directamente dentro de él ahora vamos a devolverlo
Continúe y reinicie desde cero y verá que
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
a continuación veremos cómo cuidar una sombra
de sombra, así que necesitamos configurar la sombra aquí,
Bueno, queremos aplicar una sombra alrededor de este contenedor,
Bueno, sabemos que este contenedor está
Entonces aquí es donde queremos aplicar
la sombra. Ahora para aplicarla, veamos. Bueno, déjame cerrar este primero por aquí,
Así que aquí haremos la decoración. ver Ya tenemos decoraciones. Lo siento, ya tenemos decoraciones,
directamente vale, déjame ver si cambiamos el radio
Mejor de todos modos, ahora usaremos la propiedad que se
Te dije que dondequiera que veas en plano tienes
Eso significa que toman una lista de niños,
es la propiedad basada en, así que aquí necesitamos la sombra
así que bloquee la sombra aquí y ahora aquí tenemos
lo que queremos hacer es color y color, tendremos
ff e8 e8 e8 está bien, ahora sigamos adelante y guárdelo
No es lo suficientemente bueno.
Necesitamos configurar
otras propiedades 0.5 y compensar. cero cinco ahora sigamos adelante y guardémoslo
Así que para ver la sombra real necesitas configurar propiedades,
la propiedad desapareció, se ve un poco feo, simplemente están compensados,
en el eje x no tenemos ningún cambio pero en el eje
Más o menos 5 píxeles, está bien, puedes hacer lo contrario
Está bien, entonces aquí, más cinco significa
bien y más este más 5 significa eje y
los valores aquí y aquí, ahora podemos cambiarlos,
y guárdelo para que aquí veamos que cambiamos la dirección
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
esta sombra la sombra es como aquí ves, solo tienen
No tenemos la sombra bien, así que necesitamos entender
Bueno, sin radio de desenfoque, es solo un
el radio de desenfoque lo hace borroso, eso es todo lo que significa
el collar, si su radio de desenfoque es mayor, eso significa
Si el radio de desenfoque es muy, muy borroso,
solo por el nombre, está bien, ahora aquí, en realidad
y tenemos un poco de sombra aquí y aquí y aquí,
sombra, para hacer eso aplicaremos otra sombra porque el sombreador
Así que aquí hacemos sombra de cuadro, está bien
Colors.white usaremos el color blanco para aplicar la
nuestro color de primer plano, el color de la sombra es blanco,
entonces parte de la sombra se cortaría, ¿vale?
recuerda que entonces debes aplicar aplicando
pero la sombra del fondo sería una sombra blanca,
color blanco en primer plano, está bien, entonces
un poco de color gris para que ese color quede cubierto,
En realidad, te muestro cómo funciona, así que
Parece que ha aumentado un poco, así que parece
Parece que la sombra está por aquí y no se apaga.
Sí, así es como funciona, es más como si lo estuvieras
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á
Aquí y este es el resultado que queríamos lograr,
y a continuación veremos cómo trabajar con estos puntos, uh,
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
así que sigamos adelante y verifiquemos la última versión, eso
sitio web aquí en pub.dab y parece que su última
Sigue esta versión conmigo si quieres
Es posible que recibas una sorpresa en el futuro o que tenga
aquí, entonces esta es la versión actual que queremos usar
entonces incluirá el paquete al mismo tiempo,
Todo es bastante sencillo, así que queremos usar este
Continúe y copie este. Puede usar muchos otros efectos
solo sigue adelante con este, parece que está hecho,
y cerraré este también aquí y aquí
ahora veamos, esta es la función en la que trabajamos hace un momento,
y veamos, ahora aquí en esta página
página principal de alimentos aquí tenemos este contenedor
mostrando el encabezado y este muestra el cuerpo
este archivo llama a este correctamente, así que aquí
queremos poner nuestros puntos aquí, puntos, está bien, así
Voy a seguir adelante y envolver este contenedor usando el
Lo colapsaré y por aquí diría bueno, creo que
Así que lo cortaré por aquí y haré la columna
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
Así que ahora continuaremos y copiaremos este desde
Está bien, está bien, por supuesto que necesitamos importar
Por ahora usaremos cinco y posición.
Ahora
Ahora esta posición vendría del valor de nuestra página actual.
Bien, el valor cambia, está bien, así que podemos usarlo directamente,
Bien y estamos listos para continuar ahora, sigamos
resultado, ya estamos aquí con esto y nuestra
Aquí los colores para que puedas cambiar el color. No
color, eso es lo que queremos usar, así que usaremos
y aquí tendremos los colores de la aplicación, el color principal de puntos,
Entonces nuestra interfaz de usuario coincide bien,
Antes de continuar y comenzar a dibujar el resto de
Esto se ve bien en este iPhone 12, pero su dispositivo
Así que tenemos muchos factores codificados aquí en
hay una sección de encabezado como arriba, abajo, cosas
Creo que deberían ser dinámicos cuando lees la aplicación
debemos contar este valor según la altura o el ancho de ese
pero definitivamente esto no debería estar codificado, por lo que los márgenes
El margen de 20 de izquierda a derecha o el relleno se verían
Aquí tenemos una altura de aproximadamente 320, que es
queremos cambiar la altura según la altura
Así que esto es lo que tomaremos a continuación antes de continuar,
Las cosas que no queremos están bien, así que con suerte,
Está bien, pero lo siento, antes de continuar,
Olvidé esto por completo, así que debemos cuidar esta
aquí dentro de este widget de alineación y widget secundario
por aquí uh, creo que por aquí, así que aquí tenemos
De hecho, configure una propiedad aquí para el acceso principal.
acceda bien al punto si lo centra, todo está en el
espacio entre ok, entonces esto funciona mucho mejor ok,
Los vectores fijos codificados están bien, así que tener este
y cosas así queremos declarar un nuevo archivo, así que
y aquí declararemos una nueva clase de dardo y la
Muy bien, aquí crearemos una clase y la llamaremos
Quiero crear algún miembro estático.
Bueno, lo primero
a la pantalla o dispositivo dentro de la altura, bueno,
clase con estado donde tienes el método de compilación
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
entonces obtenemos el contexto y luego obtenemos el tamaño
Haz eso, luego lo convertimos en una cadena y luego
Imprima el tamaño aquí para que la altura actual del dispositivo
Así que esta longitud aquí, bueno, por supuesto, esta consulta
eso significa con una clase con estado, pero muchas de
clase sin estado pero queremos poder acceder a ella
Bueno, para hacer eso podemos usar un paquete
en nuestro archivo pub uh spec dot eml aquí, obtenga el paquete x,
Se usa para enrutamiento y administración de estado, pero
Así que lo que se espera te ayuda con muchas
Lo hermoso de get x ahora aquí podemos acceder a
importamos una clase aquí obtenemos el dardo, así
Ahora, como tenemos acceso al paquete get x, podemos
Declararé una variable estática y la llamaremos
y aquí primero obtendremos el contexto del punto y la altura del
El verificador de aquí dice que esto no
propiedad de altura también podemos hacer nuestro ancho aquí,
ancho y ahora aquí hacemos idh con está bien ahora,
y pero esos contextos se encuentran dentro del paquete
Mantén el contexto prácticamente en todas partes, de modo
y luego obtienes la altura y el ancho, así que ahora
Ahora podemos usar este, así que aquí declararíamos otra
contenedor bien ahora este es el contenedor que se usaría
Aquí está bien, ahora primero necesitamos obtener la altura
factor bien aquí factor x ahora ¿qué es esto? x
Aquí, en nuestro caso, el dispositivo actual tiene ocho cuatro
podríamos dividir ocho cuatro cuatro entre dos elevado
bueno, sea cual sea el dispositivo, queremos que esta altura
un poco más de dos a cero un poco menos que
dos cero cero, pero eso debería basarse en un factor,
Puedo hacer un factor como este, entonces ocho cuatro
Entonces este es nuestro factor de altura o factor de perdón
ahora cualquiera que sea el tamaño de la pantalla que se dividiría
ya sea mayor que 2 a 0 o menor que 2 a 0
cuanto más larga o mayor sea la altura, esto también
pero puedes usar cualquier tipo de factor
Bien, eso es para el contenedor de vista de página.
Bueno, ahora podemos seguir adelante y copiarlo.
Tendremos
tendremos para texto, bien ahora, anteriormente este contenedor
entonces ocho cuatro cuatro por uno dos cero eso
Muy bien, ahora podemos seguir adelante y usarlos,
Tamaño dinámico, por lo que cada vez que cargas esta aplicación en
Obtendrá un cierto ancho como este aquí. Está
Bueno, entonces vendremos aquí y creo que tenemos
cuál es este así que aquí puedo cambiarlo para poder
dimensiones punto dimensiones de la pantalla punto
uh, déjame ver que el nombre de la variable es vista de
Anteriormente era de dos a cero, así que simplemente lo estamos
Está bien y creo que tenemos otros dos a cero,
entonces, contenedor de vista de página, porque el contenedor
el tamaño es el mismo, por lo que estás usando la misma variable
acceda a ellos simplemente usando el nombre de la clase y aquí
Contenedor de texto de vista de página, bien, ejecútelo
Ahora esto sucede porque estamos intentando usar el
Según el contexto, ahora en este tipo de situación necesitas empaquetar
o de otra manera se llama obtener aplicación
obtener, puedes usar la aplicación obtener material, ¿vale?
obtendría el contexto constante cuando la aplicación
Por supuesto, tenemos que seguir adelante e importar
Ahora el error debería desaparecer.
Ahora sigamos adelante,
ahora estamos usando muy bien la altura y el ancho de la pantalla
Adelante y crea un nuevo simulador, digamos un iPhone
Está bien, ahora por aquí, en lugar del iPhone 12
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.
Aquí tenemos este problema aquí, así que también
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
es tres dos cero, así que esto no es dinámico, por lo
Así que también tenemos que hacerlo dinámico.
Entonces,
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
por 320, que es este para obtener el factor correcto,
de escribir este escribiremos 2.64, está bien ahora, está
Necesito venir aquí y cambiarlo para que podamos hacer la
veamos, sí, ahora sigamos adelante y ejecútelo una
el problema se ha resuelto pero todavía tenemos este desbordamiento.
Aquí y dice que tenemos un desbordamiento de 12 píxeles.
uh pantallas por aquí bueno ahora aquí tenemos
Tenemos este, pero esto es lo que está causando este problema
este espacio aquí es de 20 píxeles y aquí creo que
ellos dinámicamente en realidad todo el espacio aquí todos
causar cualquier desbordamiento así que sigamos adelante y lo encontremos
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
aquí tenemos este tiempo y distancia que es uh
y esta es la sección de comentarios, está bien, aquí
si lo cojo se podría ver que aquí tengo
20. Así que ahora definitivamente este
Este 10 es esta sección, está bien, así que
El primero de este 10 queremos hacerlo dinámico, especialmente
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
dale la vuelta primero, ahora obtendremos la altura de la pantalla.
tamaño de altura del cuadro 10, por lo que en nuestra aplicación
Necesitamos calcular el primer factor de escaneo, ahora 844
Bien, ese sería nuestro factor de escala, así que aquí hacemos
ciento cuatro cuatro dividido por ochenta y cuatro coma cuatro
ser más que diez menos que diez o igual a diez ahora
cópielo y lo llamaremos altura 10. Está bien, en este
Está bien, perfecto, ahora qué haremos,
vendremos aquí y aquí llamaremos.
Dimensiones altura de punto 10 está bien y para
20 Bien, ahora continuaremos, lo guardaremos y veremos
El error de 5,8 píxeles está bien, así que algunos de los errores,
un poco más ahora, echemos un vistazo a dónde podemos optimizar
Puedo ver un relleno que tenemos relleno 15. Así que este
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,
guárdelo y ejecútelo, parece que todavía tenemos un
Bueno, vamos a tener eso ahora.
Una cosa que podríamos hacer:
este tamaño de fuente porque es un dispositivo más pequeño, por
más pequeño, está bien, entonces podemos optimizarlo.
aquí y aquí crearíamos una variable
fuente 20 y el tamaño de la pantalla, altura de la pantalla,
a las 20 aprendimos eso, entonces debería ser 42.2
Bueno, ahora para el tamaño de fuente, tenemos
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
entonces aquí podríamos hacer dimensiones dimensiones de diamante dot, en ese caso creo que primero
Bueno, y dot phone 20, bueno, sigamos adelante, guárdelo y veamos
desapareció porque se redujo mucho y la fuente
entonces en una pantalla más grande se ve más grande y en una pantalla
Por supuesto, si hacemos esto, no podremos usar este tamaño
Bueno, pero también podríamos encargarnos de este,
Si el tamaño de fuente dado es cero, digamos, por ejemplo, entonces podemos
si el tamaño es igual a cero, significa que no queremos
de lo contrario, usaremos el tamaño que se haya dado porque
no pases ningún tamaño aquí para que el tamaño sea igual
o si envías uno nuevo desde fuera, definitivamente el
algo diferente del mundo exterior, por lo que no serán
envíalo bien, de esta manera nuestra condición se mantiene verdadera.
está en el iPhone 8 y veamos si tenemos algún problema
Iré aquí y creo que esto es para iPhone 12.
Simplemente
Estamos bien, así que al final lo hicimos, así que en
todavía no tenemos ningún desbordamiento pero, por supuesto,
Cuida esta fuente aquí, está bien y eso necesita
El tamaño del texto ya es bastante bueno, es más pequeño
Bueno, podríamos ser más precisos, pero en ese caso
sección donde nos ocupamos dinámicamente del tamaño
este problema del radio está bien, ahora este radio aquí y
No deberían verse iguales, vale, quiero decir que el ángulo está
30 sigue siendo 30 pero sería proporcional. Debería
altura correcta, así que para esa podemos configurar otra dimensión
radio doble estático bueno, tendremos dos en el radio 20 y el
Bueno, para un factor como 20 ya tenemos uno correcto,
Entonces el factor es 42,2.
Ya lo sabemos.
ahora haremos otros 30. ahora en ese
ocho cuatro cuatro ocho cuatro cuatro dividido por 30,
Está bien, ahora seguiremos adelante y encontraremos nuestros
Bueno, el primero aquí, así que aquí tenemos radio
Veamos si qué tenemos aquí. Creo que debería ser
30 Bien, ahora estamos en el iPhone 12 Pro, que es
cambie este ahora iremos al iphone 8 y lo guardaremos
Sí, ahora parece más profesión, uh, proporcional,
para ambas secciones, cierto, sí, y así es como
uh, dinámicamente proporcional, bueno, espero que entiendas
uh hemos recorrido un largo camino uh otra cosa
como diez a la izquierda diez a la derecha para hacer eso,
y en lugar de altura escribiría aquí con ok,
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
y simplemente lo copiaremos y lo pondremos ahí Bien, ahora con esto tendremos acceso al ancho
Ahora que decimos que venimos aquí, solo tenemos que
las dimensiones tienen un punto con 10 y aquí es lo mismo las dimensiones
de otros lugares podemos seguir adelante y cambiar
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
con 30 está bien y podemos simplemente
la parte de abajo digamos bueno en este caso necesitamos
Creo que no lo tenemos, pero en ese caso seguiremos
Creo que tenemos que seguir adelante y crear uno, así
Ponlo aquí y en lugar de ancho lo llamaremos
Y ahora la flecha debería desaparecer, veamos
mucho aquí y veamos dónde más tenemos, podríamos
este relleno es para la sección superior en nuestro caso, veamos
este es el relleno que estamos aplicando aquí, pero actualmente
Los mismos píxeles de este relleno, pero debería ser proporcional.
Y lo siento, sigue adelante y cámbialo para que hagas las
aquí creo que lo estamos haciendo bien, así que lo hacemos con
Y veamos por aquí, creo que también debemos
este es el radio del borde y veamos si tenemos
y 30, pero no tenemos un radio de 15, así que seguiremos
adelante y crearemos uno aquí y veamos. aquí así que coméntalo aquí radio está
bien, ahora simplemente copiaremos este ahora aquí queremos hacer 15.
Entonces
Está bien, ya estás aquí, sigamos adelante y reiniciémoslo
Ahora tenemos este radio aquí que es 15 bueno, también
es mucho menor porque es un dispositivo más pequeño, está
Tengo esta sección inferior ahora, esta es la parte superior
distancia, entonces, ¿qué hacemos para seguir adelante y llegar
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í
veamos, tengo un error aquí. Me falta punto y coma.
Sí, verás que subió un poco. Ahora haremos lo mismo,
Así que vendré aquí y seleccionaré el iPhone 12
por aquí está bien, así que no hay otros cambios
Tuvimos cambios aquí porque es un dispositivo más pequeño.
Ahora aquí, uh, ocupémonos de otro tema que creo
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
Este y este se ven exactamente iguales, está bien,
Cuidé el borde, pero el tamaño es el mismo, por lo que,
Entonces, pero ya tenemos la altura, entonces, ¿qué podríamos
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
los cambios están bien, sí, se hicieron mucho más pequeños,
El ícono del botón de búsqueda es demasiado grande, así que queremos
El botón del ícono debería estar bien, así que creo que el ícono
Bien, este es un ícono de búsqueda. Ahora en Flutter, el tamaño
simplemente escribimos aquí 24, está bien y si reiniciamos
pero si es un 20 cambia bien, se vuelve más pequeño
y veamos, este es nuestro iPhone 12 ahora, si reinicio
Es cierto que está bien 24, así que ahora, aunque
parámetro uh aquí para encontrar factores uh, así
Está bien, y para esto simplemente crearíamos una nueva
tamaño del icono de 24 en este caso y usaremos la altura
35.17 así que aquí escribimos 35.7. Está
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
Tenemos un problema. Aquí debemos mencionar el nombre del
Definitivamente no hay cambios, pero si pasas al iPhone
Sí, se vuelve más pequeño donde se ven muy
ahora digo que uno al mismo tiempo podemos encargarnos
aquí se ve bastante bien pero aquí no se
correcto, que es lo que no queremos, ahora podemos porque
Podemos seguir adelante y encargarnos de eso.
Ahora sabemos
Así que seguiré adelante y aplicaré estos parámetros para
veamos, estamos en el iPhone 8, así que estamos en el iPhone 8,
se vuelve automáticamente más pequeño y ahora se ven
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
creador de vistas de página cómo desplazarse
cómo usar el indicador de puntos aprendimos cómo
widget y también dentro del widget de contenedor aprendimos
Muy bien, también aprendimos cómo hacer que nuestra
y a lo largo del camino construimos algunos widgets ícono
El widget está bien, así que, a la larga, crear
De todos modos, a continuación veremos cómo crear esta
Bueno, para hacer eso tenemos que
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í, 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.
Esta sección está bien, así que aquí eso
Definitivamente necesitamos crear un espacio aquí, como
haga el cuadro de tamaño y necesitamos crear una altura correcta, está bien
altura del punto 30. ya lo tenemos bien, eso
bueno, eso es lo hermoso de trabajar en
De todos modos, te llevará mucho tiempo en el futuro, así
Bien, vamos a hacer un contenedor porque
y usando el contenedor podemos hacerlo bien, así que aquí
uh, inserciones de borde, mientras que solo ahora queremos aplicar
ancho y 30 está bien porque aquí se aplica el margen para la sección
queremos trabajar con el ancho ahora dentro de él, tendremos
una fila porque queremos juntar estas tres cosas populares,
Está bien, está bien, entonces eso estaría en una línea, así
todo lo que pudimos hacer lo pudimos hacer muy rápido
entonces harías gran tecnología, lo siento, ahora hacemos texto
Está bien, sí, ahora si queremos ver el resultado,
Está bien y veamos cuál ha sido seleccionado.
Así que ahora vayamos al iPhone 8, está
Está bien, está bien, entonces el siguiente es
Bueno, para el punto también necesitamos crear un poco
ambos lados tenemos distancia, así que hacemos el tamaño del cuadro
con 10 está bien y copiaré
dos veces antes del punto y después del punto
dibuja el punto, así que para el punto en sí usaremos un
usa un contenedor, te lo diré, así que aquí podemos
Más tarde, veamos primero, tenemos un niño aquí,
ahora se necesita un parámetro de texto y dentro de él
hacer color colores punto negro veamos 26 yo usaría
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á
Entonces, lo que vamos a hacer aquí es crear otro
y dentro del niño tendremos texto pequeño porque este texto
este widget el que ya tenemos texto grande para este tipo
widget de texto, está bien, eso es lo que usaremos, así
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,
Vale, esto es lo que tenemos y ahora
en el diseño original, el par de pies debe estar un
Están usando la línea superior, así que ese es uno de
Ahora una cosa que podríamos hacer, aunque podríamos ponerlos todos
una fila, eso es lo que haremos, aquí usaremos una propiedad
así que la alineación del acceso cruzado termina, así
así que sigamos adelante y verifiquemos bien, déjame
aquí para el punto queremos que esté un poco hacia
arriba no exactamente en la línea inferior. Vale, estos dos textos
El punto no es así para ese porque usamos este punto dentro
inserte una prueba grande y un contenedor ahora porque, dado que
para aplicarle margen, está bien, eso es lo que hacemos
Está bien, haremos los tres de abajo, lo siento, los tres
Sí, aunque en realidad bajó un poco de alguna
Está bien, así es como funciona ahora aquí.
Para aplicar otro margen aquí queremos subirlo un
haremos dos, está bien, ahora esto es lo que parece
En nuestro otro simulador, en el que estamos trabajando,
Y sí, esto es lo que queríamos y es exactamente
Está bien, entonces con esta sección aquí, bueno,
y trabaja en este bien, entonces esta sería
y cosas así, está bien, así que usaremos la vista
Está bien, bueno, para eso, um, veamos,
contenedor que mostraba texto popular y cosas
de comida e imágenes como esa, está bien, ahora
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
y el primer parámetro es el contexto y el segundo es el índice.
quieres en esta vista de lista o en esta lista, está bien,
usa el recuento de elementos, así que lo hacemos como 10, está bien
entonces o devolver un widget en realidad o una función que devuelve
Devolveremos un contenedor.
Está bien, ahora el error
Necesitamos usar punto y coma aquí, así que si bien este
contexto, aunque podría ser un poco diferente, pero
este es el índice, por lo que este índice estaría conectado
Mientras queremos construir cosas como esta aquí,
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í
y ya trabajamos para esas cosas, así que hacemos
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
y esta sección en una fila, por lo que esta es una fila grande
Estaría esta información aquí, pero dentro del segundo elemento
y dentro de la columna tendrá el primer hijo, el segundo
Tendrá un diseño de roles que es muy parecido a
continuaremos y declararemos un niño y ahora dentro de niño
niños, así que aquí estamos ahora y después de eso
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
y haremos decoración de caja y aquí
Bueno, el radio del borde es circular y ahora ya tenemos
Entonces haz un radio de 20.
Está bien, y bueno, también
Los colores son blancos y esto es útil
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
y dentro de él se necesita otra propiedad de imagen y aquí
y ahora con una imagen de activo aquí haremos nuestra
y con una carpeta de imágenes y comida cero uno punto
Quiero dibujar, está bien, ahora, en este momento, lo que haré.
Vale, lo guardaré y veremos qué pasa. Bien, ahora
con respecto al tamaño, como si a la ventana gráfica vertical se le hubiera
uh, altura ilimitada, hay algunas formas de resolver
algo bueno en general cuando tienes el generador de
uh, contenedor principal ahora para este generador de vistas
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
lista para ser un constructor, está bien, ahora sigamos
El problema se vendió bien y ahora tengo
Bueno, el segundo aquí, que espero que sea del
Así que sigamos adelante y apliquémoslo y veamos
120 está bien, sigamos adelante y guárdelo y Parece que todavía tenemos este error, pero las imágenes
Vale, sí, parte del problema se ha resuelto.
Lo
ver el constructor, entonces necesita que el contenedor principal
Está bien, puedes hacer lo que quiero decir, lo más alto
Bueno, por supuesto, al final puede que salga vacío,
responsable de mostrar esta imagen y que le dimos
Tengo este desbordamiento aquí porque se
sabes cuánto tiempo debería ser desplazable, ¿vale? aquí
Aquí arriba podemos hacer un envoltorio retráctil para
Está bien y ahí configuraremos otros parámetros como
física siempre desplazable, sigamos adelante
La solución no funciona, pero necesitamos configurar esto
Viniendo de aquí donde tengo el cuerpo de esta página
Toda esta página principal aquí, aparte de este encabezado,
tenemos que hacer. Voy a ir aquí y debemos envolverlo
uh widget está bien y entonces el problema se resolvería.
este andamio que tiene una columna, esta columna tiene un encabezado
quiero que toda esta sección sea desplazable,
Lo envolvemos alrededor del desplazamiento de un solo niño, pero
alrededor de un solo niño desplazable, bueno, te lo diré más tarde
guárdelo y veremos que el problema se ha resuelto y
toda la página se puede desplazar, está bien en este
La página se puede desplazar.
Verás, puedo desplazarme.
Puedo desplazarme hacia arriba, pero si el encabezado es, quiero decir que la
Entonces tenemos este problema. Ahora sabré cómo resolverlo.
Así que no quiero que se pueda desplazar por sí
Déjame actualizarlo. Quería que esto fuera parte
no solo esta sección, está bien, si hacemos que esta
pero esta parte es demasiado pequeña, así que no somos muy
Entonces quieres que toda la página sea desplazable. Lo siento,
página desplazable y eso es lo que vamos a hacer,
desplazable por sí solo, desea que se pueda desplazar con toda
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.
eso es lo que queremos, está bien y, si no tenemos
mira, ejecutémoslo desde el principio, está bien, sí,
Lo necesitábamos antes, creo que con física
Física nunca desplazable, no necesitamos esto, por
pero si simplemente hacemos que esta sección sea desplazable, esta
No lo somos, por eso no incluimos este generador de vistas de
Está bien, de todos modos, así que ahora vendremos aquí
Aquí tenemos un radio de 20, pero no parece un radio
queremos hacer la propiedad de ajuste aquí, así que haremos la
como 20, está bien, y por aquí, cada uno de este
y podemos margen izquierdo y derecho, de hecho también
abajo y haremos las dimensiones de altura 10.
Veamos, sí,
Bueno, aquí estamos bien con esta sección desplazable,
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
compruébalo en nuestro dispositivo móvil aquí, que es el
y el iphone 12 ya está aquí, sí, está
Si ves el tamaño de esta imagen y esta imagen, son
Ocúpate de ello pronto porque necesitamos hacer que esta sección
Configura los parámetros, está bien, de todos modos, ahora
Bueno, ahora para ese, necesitamos
y dentro del contenedor veamos qué necesitamos, bueno,
Relleno aquí, sí, y eso es una cosa, y ves
Aquí o en el radio, por eso necesitaríamos decoración
Hazlo muy rápido, así que hacemos la decoración y la decoración
punto circular y dimensiones de ese radio de 20, está
entonces podemos usar el color blanco como color de fondo
Está bien y si sigues adelante y lo guardas definitivamente
iphone 12 no tenemos nada porque el contenedor
Solo usaremos algunos datos ficticios, por lo que 100 y digamos
sale bien, ahora puedes verlo aquí.
Hay
uh, este radio aquí no queremos ningún radio fronterizo
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
abajo a la derecha eso es lo que hará dimensiones circulares radio de punto 20, bien, ahora ves aquí, este radio
esta sección está bien, está bien, pero ahora
Esto está codificado, así que quiero hacerlo dinámico,
basado en el tamaño del contenedor, está bien, realmente no
Está bien, porque no sabes exactamente dónde debes
sácalo, pero si lo sacas, uh, veamos, sí, salió bien,
Ahora aquí podemos hacerlo natural, lo que significa
espacio disponible posible, está bien, por eso lo incluiremos
en el widget expandido, ¿vale? ahora sigamos adelante y guárdelo ahora ocupa todo
espacio porque tenemos aquí tenemos este margen
y a la derecha había 20. Así que este es
entonces estos son los 20 píxeles, está bien, si
Por lo tanto, el widget ampliado obligará al
contenedor a ocupar todo el espacio disponible.
Ahora, si seguimos adelante y lo comprobamos
Aquí vemos más o menos lo mismo, está
bien, eso está funcionando. Bien, ahora es el momento de ocuparnos de esta
Muy bien, ahora la columna en sí debería estar
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í
Está bien y dentro de él tendremos relleno. está bien, entonces usaremos las inserciones de borde,
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
ahora definitivamente podríamos para este una comida nutritiva
uh, en el medio de China, bueno, eso es lo que escribiría aquí,
widget de texto grande, que es este. Simplemente seguiré
Necesitamos aplicar un parámetro que se llama
texto y aquí escribiré un nuevo pre solo harina de frutas en China, está bien,
Ahora abriré mi simulador. Este es el iPhone
si vamos al iphone 12 actualicémoslo ¿Cuál es este? Bien, aquí arriba tenemos
tenemos este punto punto porque creo que anteriormente
Entonces, si cierto texto es más
luego usamos punto punto punto pero también podemos usar
desvanecerlo, actualizarlo, sí, así que simplemente se desvaneció, está
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
Desde aquí realmente no es mucho hasta el final,
otro relleno derecho, está bien y haremos dimensiones
Lo veré en el iPhone 12, ahora se
ve mejor, está bien, genial. A continuación queremos encargarnos de esta cosa con
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
Anteriormente lo hemos usado en algún lugar de esta misma
así que déjame buscarlo, así que creo que la palabra se
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
Lo guardaré y lo ejecutaré ahora.
Intentaré
Así que esto es lo que tenemos aquí y parece bastante
Cuida esto bien, lo primero es lo primero, aquí
El lado izquierdo está bien, entonces podemos
entonces haces la alineación del eje transversal alineación
Sí, ya se ve mejor. Ahora queremos centrar
alineación sobrante principal que es la vertical
están bien, entonces alineamos el eje principal con el centro del
centrados pero todavía están congestionados, está bien,
solo usa el cuadro de tamaño para eso, está bien, aquí usaríamos
la altura 10 podemos usar esta, así que simplemente
Ahora lo guardaré y ya se ve genial, ¿no está
iPhone 8, veamos, este es el iPhone 8, así que
guárdelo, ejecútelo. Sí,
Ahora el otro problema que aún no hemos resuelto es el problema del tamaño
Aquí, dos secciones, tenemos este tamaño de imagen
Este contenedor se ve muy bien aquí, pero esta sección
Mira que bien, hay demasiado espacio en la parte superior derecha,
para este, esta altura es 100, correcto, está codificado
La imagen también es difícil de cortar, así que lo que podríamos
coloque el tamaño de la vista, está bien, ahora aquí primero
Bueno, en nuestro caso todos
Así que usaré el tamaño cuadrado, así que usaré solo
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
El iPhone 8 tiene un ancho de pantalla más pequeño y una altura de pantalla
El tamaño de la imagen del contenedor aquí es 120, por lo que
Recuerda que en iPhone 8, iPhone, lo siento, iPhone
390.
Está bien, puedes seguir adelante con
ahora aquí usaremos static uh double y para este contenedor
Tamaño actual del texto. Está bien, hacemos pantalla.
nueve nueve tres nueve cero entonces queremos dividirlo por 100,
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
Igual que este pero muy proporcional, no demasiado grande. Ahora
Continúe y ejecútelo en el iPhone 12 y asegúrese
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
pero si lo elimino tendré un problema, está bien, desapareció
elimine completamente este contenedor. No necesito
guárdelo y todavía tenemos problemas porque si quita
Vale, ahora ha vuelto.
¿Recuerdas que ese 900 que
Eliminé ese y con esto terminamos con nuestra página
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
A medida que accedes a una nueva página, tienes esta información
cosas así, está bien, entonces esto es lo que vamos a construir,
Verás que tendremos una imagen de fondo, vale,
Así que la imagen de fondo se superpone en blanco
Tenemos que usar el widget de pila para esta pantalla. La pantalla
Entonces, si usamos el widget de pila, podemos colocar un
otros elementos o imágenes están bien, por lo que esto
vendría a nuestra carpeta de proyectos aquí bueno,
estructura del proyecto un poco ahora aquí en la carpeta
Las pantallas están bien, o creo que me quedaría con las
Arrastraré y soltaré el directorio de inicio dentro del directorio
si vamos a refactorizar esto, todo
También hará la corrección para la importación de la biblioteca,
Debería tener cosas como esta también, pero si
Así que aquí, debido a que cambiamos la ruta, debemos volver
veamos, está bien, entonces puedo seguir adelante
son buenos ahora si abres nuestra carpeta de páginas ahora tenemos
Cuerpo de la página de comida y página principal de
y aquí lo llamaremos comida.
Ahora dentro
y lo llamaremos detalle de comida popular punto punto. Bueno,
Hacemos st y elegiremos apátrida
ahora aquí hacemos popular Los detalles de la comida están bien, y creo
bibliotecas desde aquí, está bien, en lugar de
devolver un contenedor aquí, regresaremos andamio bien si solo devolvemos un contenedor
podemos probarlo, así que vendremos aquí y en lugar de
detalle esta clase y la guardaremos
Ahora, si llegamos a nuestro iPhone 12 aquí, decimos
para devolver un contenedor negro queremos devolver
color como este, si lo guardas, verás que ahora aquí devolveremos
y dentro de la pila tendremos hijos y los hijos
y se utilizan para posicionar elementos
Bien, ahora, si echamos un vistazo, primero
Ahora lo primero que tenemos que mencionar es la posición
haga primero el cero a la izquierda y el cero a la derecha para
También queremos definir su ancho y alto para que sea
tomará todo el ancho disponible y luego tendremos
y luego haremos una decoración para mostrar la imagen, usaremos
que tiene una imagen de decoración y luego una imagen
Así que ahora, con una imagen de recurso, debemos mencionar la ruta de
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 vemos que este es el iPhone 8.
Por supuesto, se
cubierto completamente pero aquí porque el dispositivo
cubierto en cualquier lugar y en cualquier dispositivo,
que tiene una propiedad llamada boxfit.cover esta bien
para el iphone 12 ves que desapareció uh, sigue
El problema es que este problema de altura debería tener una altura
Necesitamos cambiar aquí para este de aquí. Necesito
comida aquí ahora aquí declararemos una nueva
comida popular, tengo el tamaño así, está bien y hacemos
Entonces obtenemos 2,41, así que este es nuestro factor.
aquí popular y este está bien, ahora
Vamos al iPhone 8, reinícialo. Sí, ahora se ve
Ahora aquí está la cuestión, así que hemos
Ahora continuaremos y veremos cómo dibujar estos íconos.
una vez más como un widget de posición, está bien,
En este diseño sabemos que tienen que estar en una fila,
y luego tenemos que especificar izquierda y
y a la derecha 20. Pero queremos que sea dinámico, así que
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
Por eso seguiremos adelante y crearemos un nuevo ícono, una
um app icon.dart está bien, ahora esta sería una clase
Ahora sigamos adelante e importemos algunas
Bueno, ahora pensemos en ello,
uh utilizable, reutilizable y cuáles
Definitivamente tendremos este color de fondo, el ícono
y el tamaño del icono, con suerte, así que primero seguiremos
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,
y una vez más tendremos otra variable, la llamaremos
Muy bien, ahora por aquí, iremos por aquí, aunque en
este caso el único parámetro obligatorio es el ícono.
Eliminemos este, está bien, ahora los demás son
uh, este color del icono de punto y este tamaño de punto ahora
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
No mencionamos esto en los colores de nuestra aplicación porque aprendimos
o números aquí tiene que ser un color constante como valor
importa aquí cualquier cosa desde los colores de la aplicación,
Ahora lo primero es lo primero, así que aquí tendremos el
eso es tamaño dos y ahora por aquí tendremos
y luego radio del borde radio del borde punto circular y tendrá un
pasarlo dividido por dos entonces eso lo convertiría
y el color debe ser el color de fondo. Bien, después de esto
Ahora el ícono debería ser un niño
ahora llamamos a este constructor de íconos y todo lo que necesitamos
Lo tenemos aquí y luego tenemos que pasar el color
Bueno, por ahora el tamaño es 16. Está bien, con esto hemos terminado
tienes que venir aquí y llamarlo para que lo hagas ícono de aplicación
Otros son todos opcionales, así que hacemos íconos con flechas
Si uso el iPhone 8, ¿cuál
pero ahora aquí está este problema principal para que puedas
bajaría pero creo que también tenemos
Así que podemos usar ese para que se haga según la altura
Podemos reutilizar este una vez más aquí,
Debería ser el ícono de compras, está bien, sigamos
pero ahora estos dos están juntos y
para que puedas separarlos para que puedas acceder a la alineación
Entonces, debido a que esta es una fila, este es el espacio
Muy bien, ahora ya se ve mejor, ahora parece
este es el estado predeterminado de este icono, está bastante
Y revisa nuestro iPhone 12 aquí, cuál
pero ahora tenemos un pequeño problema.
Ahora el tamaño
uno usaremos el mismo enfoque que hemos usado en toda
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
y en lugar de 16 haríamos 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
y el iPhone 12 es un poco más grande, está bien, eso es
Ahora seguiremos adelante y dibujaremos este con
fondo blanco primero tenemos que venir aquí y
aquí tendremos otro widget de posición así que sigamos adelante y creemos un widget
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
Eso es algo que debemos tomar aquí, pero
El lado derecho también está en cero, entonces debes
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 luego vemos qué podemos hacer y para el niño de aquí
Dentro del contenedor creamos un espacio vacío aquí para que
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 aquí radio del borde radio del borde punto circular y
y aquí tendremos color y usaremos
colores punto blanco Bien, hasta ahora todo bien y ahora continuaremos
Ahora estamos en el iPhone 8, así que seguiremos
8.
Entonces el iPhone 8 debería estar en algún lugar
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,
arriba, sí, de lo contrario, comienza abajo. Ahora,
entonces no es visible, pero comenzó justo ahí,
tener contenido para que no veamos nada bien, lo primero
esto y, por supuesto, el contenido viene de acuerdo con este
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
Así que copiaré este y luego
vendremos aquí.
Vale y dentro de este recipiente justo después
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,
eso es porque tenemos fondo blanco uh, que viene aquí pero ahora porque queremos
En este momento estamos comenzando justo después de esta altura,
digamos menos 20. Ahora, a medida que subes, verás que tu
Bueno, por supuesto, no se está tomando esto completo. altura pero podemos forzarlo porque estamos
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
Ahora puedes ver que tomó el
color completo, ¿vale? Está bien, pero ahora aquí, en lugar de ser
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
20 Está bien, ahora si seguimos adelante y cambiamos el
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
esta sección la estamos usando aquí y creo
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
columna de la aplicación, está bien, ahora necesitamos
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
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
al menos el nombre lo podemos cambiar
basado en ese, por eso aquí crearemos una
texto y aquí requerimos este this.text y en lugar de codificar1 aquí, enviamos mensajes
Y por ahora todo lo demás podría seguir igual. Bueno, si hicimos cambios aquí ahora tenemos que venir
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 es un poco más grande y la fuente es más grande, está
ahora dentro de la columna f tenemos este texto grande en
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
Está bien, entonces queremos aprobar, por
esta razón vendremos aquí y Encontraremos nuestro archivo de dimensiones y aquí crearemos
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.
En el iPhone 12 en este momento desde 12 no actualicé
actualicémoslo y vemos que es un poco más grande aquí,
Así que recuerda que el tamaño es un parámetro
Me gusta aquí, así que cualquier cosa que
de lo contrario, usamos el valor predeterminado, que es 20.
ahora tenemos que seguir adelante y trabajar 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
Esta columna de aplicación ahora está envuelta dentro de una
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
Ahora, para este lo que haré, simplemente llamaré
preséntalo, está bien y continuaré y lo guardaré, así que
Entonces sí, está bien, pero ahora aquí podemos
Así que aquí lo haremos, usaremos la propiedad de alineación de acceso
Así que empezó desde el principio.
Ahora aquí,
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
Podemos usar nuestro widget de pila, que ya tenemos
Deberíamos usar nuestro andamio, pero ahora sabemos
y la barra de navegación inferior, así que eso es lo que
envolver todo dentro de un contenedor porque
margen inferior y relleno izquierdo y derecho o margen
una altura, así que eso es lo que definiremos, así que hagas
nuestro contenedor está bien y el relleno debe ser
Sí, aquí hacemos inserciones de borde solo puntos, está
uh dimensiones.altura veamos qué tenemos, entonces tenemos
dimensiones altura del punto 30. y para la izquierda
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
porque ves que tenemos un borde, está bien, así que ahora seguiremos adelante
y aquí usaremos el radio del borde, ahora solo
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
ahora podemos usar el color, así que usaremos un color
colores colores de la aplicación punto color de fondo del botón
archivo de colores de la aplicación, ahora lo guardaremos,
por aquí y vemos que esta es nuestra frontera y ya
Está bien, pero vemos un pequeño problema porque
un poco diferente ahora porque nuestro fondo puede tener
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
En este contenedor queremos tener un hijo, eso es lo que
Muy bien, ahora dentro de la fila, este es nuestro primer
El primer hijo también es un contenedor, como puedes ver,
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,
Bueno, en ese caso primero debemos usar
decoración y decoración de caja.
Y radio del borde radio del borde punto
dimensiones punto radio 20 eso es lo que queremos usar
colores punto blanco está bien, ahora aquí queremos
más y menos lo siento menos cero y más bien, ahora aquí
y aquí serían niños, está bien,
ahora aquí usaremos el ícono entonces los elementos puntúan primero uno es eliminar,
colores punto signo colores bien, entonces tenemos
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
Así que vamos a comprobarlo y aquí estamos.
No es lo
Ahora aquí podemos ver este contenedor, por lo
Bien, eso es lo que haremos: agregar
relleno solo en conjuntos y veamos bien, definitivamente podríamos hacer la parte superior y ahora
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
Bueno, por supuesto, aquí podemos
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
multiplicado por dividido por dos y vamos acá
entonces con dimensiones que ancho por dos Está bien, ahora guardémoslo y se verá mucho mejor.
así funciona bien, así que ese es el primer
es exactamente igual que este, está bien, sigamos adelante
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,
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
propiedad, de lo contrario obtendremos un error.
Sigamos
y aquí, por supuesto, esto no es lo que queremos, lo
colores.blanco porque sabemos que en texto
Muy bien, aquí lo mismo que este,
tenemos que aplicar esto. relleno para que podamos seguir adelante,
y se ve mucho mejor ahora que están demasiado
Está bien, mientras hacemos eso, podemos empujarlo hacia el
Usaremos la propiedad de alineación del eje principal y accederemos
Ok, perfecto, se ve perfectamente bien, así
al lado de uh, tenemos que marcar esto en el
Sí, es iPhone 8 y lo reiniciaremos. Sigamos
adelante y veamos mientras Esta sección está bastante bien aquí, pero
Bien, entonces queremos encargarnos de eso ahora,
que es 120, así que iríamos a nuestro archivo de dimensiones
ahora llámalo altura inferior y aquí crea
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
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í.
Bien, este es nuestro componente de texto y podemos
y podemos descomprimirlo para que aquí no parezca
texto desplegable y plegable, está bien, eso es
entonces tendremos un texto, pasaremos un texto a un widget
un widget de texto está bien y después de crear el widget
ese widget de texto sería responsable de contar cuánto
Luego ocultaremos parte de ello y, si no es demasiado
Lo que haremos será establecer una restricción sobre
tiempo, está bien, entonces tendremos una cierta longitud
y cuando supera esa determinada longitud, digamos, por
luego simplemente ocultaremos el texto y el resto del texto,
cierta altura en la longitud del texto estos dos
Si la longitud del texto es mayor que la altura de la
oculto y luego, una vez que hagamos clic en eso, se
El texto es demasiado largo o demasiado corto.
Si es demasiado
Primero mostraremos la mitad y luego mostraremos el resto.
una llamada seguida, vale, aquí tenemos este programa mostrar
Se puede hacer clic y aquí ves que también cambia su
El texto también estaría en formato de columna. En la columna,
y el siguiente elemento secundario sería esta sección del
una fila también, está bien, entonces estas dos porque
El texto y el ícono también están bien, así que lo primero
widget de texto, bueno, para hacer eso iré
aquí crearé un nuevo archivo y lo
llamaré expandible x expandible widget de texto, está bien así y aquí crearemos
porque vamos a hacer clic en un botón para que se pueda
se puede volver a dibujar en esta página, por eso
en lugar de una clase sin estado porque
podemos usar nuestra función de estado establecida, está bien, dicha
De todos modos, aquí lo llamaremos uh nombre de clase
Está bien, entonces sigamos adelante e importemos algunas
uh, queremos pasar un texto de esta clase aquí, está
Tengo estas tres secciones aquí. ¿Recuerdas
y el segundo aquí muestra estos
Puedo rechazar aquí y aquí tenemos esta uh más
introducción de comida como esa, está bien, así que aquí expandiremos
Lo hará aquí, así que aquí lo llamaremos, así que una vez
Pasaremos un texto largo, así que vendremos aquí,
Primero declare una variable, luego haga el texto de cadena
Está bien, sigamos adelante y agreguemos esta
después de eso tenemos que venir aquí y
y los definiremos como tardíos para que el primero
primera mitad del texto y crearemos una variable
medio bien, ahora vamos a usar late porque
Cualquiera que sea el texto que obtengamos en base a eso,
tarde si no lo marcas tarde tendrás que
Vale, está bien, ahora después de eso también tendremos una
su nombre es un texto oculto, por lo que generalmente lo estableceremos
tener un texto largo, parte del texto estaría oculto y usaremos
Entonces, al mismo tiempo, también
uh, inicializa ciertas condiciones, está
variable y la llamaremos uh altura del texto.
Está
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,
es un poco más de 100, por lo que esto devolverá un poco más
voy a usar, así que si la longitud total del texto
Ocultaremos el resto del texto, por lo que ahora se llama
Hay muchas formas diferentes de hacerlo, pero
De lo contrario, la codificación sería muy larga y habría demasiada
enfoque que estoy usando usando el número de texto número
No, no diría que esta es la mejor solución, pero funciona
He creado y luego quiero crear un método de estado en
y aquí tendremos el estado de inicio vacío, está bien, y ahora aquí
Muy bien, ahora haremos algunas comprobaciones condicionales.
se pasará de esta clase o de cualquier otra clase y
Lo veo en su estado aquí y puedo hacer algunas cosas
Longitud de este texto, eso es lo que vamos a hacer, así que
texto ahora aquí tomaremos su longitud, por lo que
que es un widget de texto que significa que cualquier texto
Muy bien, en ese caso dividiremos el texto en dos secciones,
la primera mitad se mostrará en la pantalla inmediatamente
Es por eso que necesitamos separar este texto en dos secciones.
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
aquí una vez más widget de la subcadena de puntos
altura del texto a cadena hasta el final lo siento más uno
Bueno, ahora tenemos demasiada información y déjame
explicarte lo que está pasando aquí.
Entonces verificamos la longitud del texto para ver si
o 200 realmente no importa, así que ahora intentaré
cierta cantidad, por lo que la longitud y la altura del texto,
tener un texto como me encanta flutter laravel y golem bien
Si la longitud de este texto es superior a 30, en nuestro
establezca la altura del texto en 30 para que esta longitud
que esos 30 primeros 30 los pondré aquí y luego,
debería ser cero, digamos, por ejemplo, 30 hasta aquí. Está bien,
toma el texto y corta cierta parte de él, está bien,
Ahora bien, una vez más, esta es la longitud que viene desde
así que solo es un ejemplo, espero que tenga sentido.
Con suerte, comenzaremos desde aquí, bien, desde
Aquí y luego iremos a la longitud completa del texto para
Así que los primeros 30 los pondré en la primera mitad
Ojalá tenga sentido si el texto no es tan largo,
Lo que haré, seguiré adelante y lo pondré en la primera mitad,
se le dio widget.text, está bien, pero ahora, como
tienen que inicializarse antes de usarlos, así que ahora aquí
pero para el segundo podríamos hacer la segunda mitad,
pero si sigues así es totalmente nulo y en
y con este está vacío, no nulo, así que una vez
tienes que inicializarlo antes de usarlo, ya sea
para ser inicializado de alguna manera, está bien, ojalá tenga
Bien, lo primero que haremos será crear un niño
y ¿cómo podrías hacerlo bien? Antes de seguir adelante
comprobaremos que haremos en función de la segunda mitad la segunda
Realmente no es tan largo, vale, sí, en ese caso seguiremos
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í el contenedor está bien, ¿qué está pasando aquí? Entonces,
No es tan largo así que estoy usando la primera mitad
ha puesto en la primera mitad bien, entonces si el texto es demasiado
por aquí, ven aquí y usa el texto; de lo contrario,
Por supuesto, no puedes usar el contenedor.
El contenedor
Así que aquí usaremos un widget de columna. Recuerda,
tenemos que usar una columna y la columna la primera
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
Bien, entonces lo que haré será copiar
Así que aquí necesitamos usar una declaración condicional. Bueno,
Basado en este valor booleano, bueno, dijimos que inicialmente
De todos modos, aquí escribiría texto oculto.
por aquí y con estos tres puntos, está bien, entonces
punto punto punto está bien, aquí estoy conectando dos mensajes de texto
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
Recurrir a estas categorías no aquí, pero incluso
Como configuración predeterminada, solo mostraremos
porque en ese momento, el primer texto oculto es verdadero,
sucede y a continuación vamos a crear un botón
independientemente de que sea el primer texto o el primer texto
Así que aquí crearemos un botón y
para el botón usaré tintero. Vale, ahora codifica las tomas en la pestaña
y dentro de él tendré un niño y dentro
Está bien, y luego también tendré hijos. Está bien, ahora
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
entonces usamos f colores punto color principal está
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
Bueno, espero que tenga sentido, está bien, así que ahora
aquí e intentaremos ponerlo aquí, pero antes creo
widget de posición en realidad debería estar dentro de
Ya tengo una columna dentro porque todo lo que hay
Muy bien, pondremos el widget de texto expandible
Widget de texto expandible y le pasaremos un texto.
Lo
Bien, ahora continuaré y reiniciaré nuestra aplicación, así
Está bien, pero por supuesto, no funciona así,
y veremos si quiero decir que estos botones están visibles
Envía un mensaje de texto aquí, así que lo cortaré y guardaré
Estamos en el iPhone 8 y verifiquemos la condición
medio vacío, bueno, ahora reiniciemos nuestra aplicación y veamos,
Así que es la primera vez que se inicia, a menos que
ahora vendré aquí y lo pondré de nuevo
este texto el texto de este widget se ha calculado en
Diré que está ahí de todos modos, así
ahora aquí queremos cambiar esta bandera una vez que hagamos
el texto está bien, entonces necesitamos alternar este valor de texto
Así que aquí establecemos el estado. Este estado establecido se usa
El cambio de valor está bien, así que aquí hacemos texto
Está bien, antes, si era cierto, entonces veamos. Está
una vez que hagas clic en este botón, que es este
entonces recuerde que volveremos a esta condición
medio bien, entonces lo guardaré.
Hagamos clic
Hay un poco de desbordamiento por aquí y nos ocuparemos
Bueno, creo que podemos encargarnos de eso primero, así
porque queremos que se pueda desplazar, así que debemos
Llamada vista de desplazamiento de un solo niño, eso es lo que hacemos, así
Vale, ahora la vista de desplazamiento de un solo niño no
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
vista de desplazamiento expandida y de carga única juntas,
Ahora vamos a abrirlo. Puedes desplazarlo. Sin esta herramienta,
entonces está funcionando y haces clic
Así es como funciona ahora. Hay algunas otras
Definitivamente lo primero es el ícono en sí,
Bueno, ahora aquí el ícono, lo cortaré y haré una verificación
uno, entonces, ¿cuál es la condición inicial? De lo contrario,
tenemos un ícono como este ahora no lo tenemos, así que busque
Um, sí, tenemos un menú desplegable, está bien, así que
uh dirección también está bien, entonces verás que ya
Bueno, está bien, está bien, ahora otro problema que está
Un poco de distancia ahora por aquí.
Simplemente seguiríamos
Está bien, está bien, se ve mejor y algunas
mirando ahora mismo, por lo que este texto es demasiado pequeño,
Bueno, anteriormente creo que veamos
este widget de texto expandible aquí ahora dentro tenemos
podemos pasar, veamos si pasamos el cursor sobre él, como
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í
Digamos, por ejemplo, que queremos que tenga 18
y bueno, si venimos aquí nuestro
Ahora aquí tenemos un cierto tamaño de fuente,
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
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
No necesitamos este. Podemos
Bien, aquí pasaremos un tamaño de texto, así que haremos
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
Bueno, veamos, comenzaremos desde aquí 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
sí, este, entonces esto es lo que queríamos, está bien,
Texto pequeño aquí, está bien, está bien, y otro problema
densamente por aquí, así que también podemos enviar la altura aquí, así
mejor y más legible, espero que tenga sentido,
He creado una hermosa página aquí, así que terminamos
para crear otra página que venga de aquí, sería
Muchos de los elementos que construimos antes son como este,
de las páginas anteriores, bien, ahora esta página se vería
Ahora aquí veremos cómo lograr este resultado y este resultado
y la vista de desplazamiento personalizada tiene efectos especiales
o una sección de encabezado expandible como esa, está bien,
carpeta de alimentos crearemos un nuevo
archivo y lo llamaremos recomendar detalle de comida muerta Bien, aquí crearemos una clase sin estado
Detalles de comida, está bien, ahora necesitamos
ok bueno ahora aquí regresaremos andamio y dentro del andamio tendremos el cuerpo dentro del cuerpo devolverá
Bueno, ahora la vista de desplazamiento personalizada requiere palancas,
Son astillas, bueno, las astillas son un widget especial que
Esto como esto es una astilla aquí porque es un
lentamente y es un color, sea cual sea el color que quieras
Esta sección del cuerpo está bien porque se puede desplazar
Muy bien, sí, aquí tenemos dos componentes
entonces, la propiedad de fragmentos aquí se necesita una lista de
usar eso se llama barra envolvente plateada, entonces, una barra plateada,
propiedad llamada espacio flexible flexible, así que esa
espaciador flexible ahora a dónde vamos por qué
imagen de fondo, bien, ahora queremos tener esta imagen
un determinado color, eso es lo que queremos, está bien,
ahora tiene una propiedad llamada fondo.
Bueno, el fondo
Haga image.asset ahora aquí debemos mencionar la ruta de la
están en la carpeta de activos dentro de esa carpeta de imágenes
imagen que vamos a usar para que puedas usar la imagen
ruta de la imagen correctamente, por lo que aquí usaríamos
ancho ahora aquí queremos que la imagen tome el ancho completo,
lo que haremos, iremos a nuestro archivo principal
Escribiremos aquí recomendado, sí, y
Creo que podría tener un tipo aquí, veamos, Reiku
así que simplemente copiaré este, lo pondré
De todos modos, vendré aquí y ahora lo guardaré
así que veamos dónde está mi iPhone 12. Este es mi
No es lo que esperábamos, está bien, pero al menos podemos ver
Vale, el ancho está bien, pero no lo es porque
así que la caja se ajusta a la cubierta de puntos ahora lo obligará
queremos lograr este resultado esta altura bien, ahora
expandirse, sí, eso es lo que queremos lograr,
altura ampliada y por ahora le pongo 300 y
se expande bien, así que cuando se expande
La altura expandida está bien y ya puedes ver que
vamos a lograr este resultado ahora necesitamos
esta lista de cuchillas está bien y luego todas se desplazarán
entonces queremos usar otra astilla, pero esa astilla
la pantalla dentro del cuerpo de la vista de desplazamiento personalizada
Se entrega en caja con adaptador, como puedes ver
bien o dentro de la vista de desplazamiento personalizada, bien, ahora
podría tomar cualquier tipo de texto aquí y ahora para
y copia este texto largo, vale, lo
Lo pondré allí.
Creo que necesito ponerlo dentro de
Es un texto realmente largo, como puedes ver desde aquí,
y lo comprobaré en mi teléfono. Ahora ya está allí,
Bien, ahora con esto ya estamos mejorando, algunas
Ahora queremos que quede pegado aquí, entonces hay
Lo usaré como un verdadero bien, ahora se puede expandir
Esta cierta altura está bien y al mismo tiempo podemos
color de fondo y para el color de fondo usaré un color
entonces los colores de la aplicación son puntos de color amarillo.
Ahora hay otra cosa que quiero lograr, lograr
Bien, entonces quiero lograr este tipo de barra aquí independientemente
Me refiero a este borde o no, pero quiero lograr este resultado.
otra propiedad que se llama tamaño preferido está bien dentro
toma el widget de tamaño preferido, así que eso es lo que
otro tamaño preferido dentro del tamaño preferido,
tamaño que desea, entonces usaría un punto de tamaño
Toma a otro niño aquí y, como niño, por ahora simplemente
Lo llamaré barra de aplicaciones uh sliver, está bien,
Vale, ahora lo guardaré y veré el resultado.
Bueno, quiero decir que en realidad no ocupó espacio, simplemente
haz cero, está bien ahora todavía está ahí, bien,
solo un texto aquí, pero queremos que tenga
qué haré, usaré un contenedor, está bien, ahora usaré
Está bien, está bien y parece que se ha ido.
No tenemos nada de niño aquí, así que pasaremos
barra de la aplicación Slaver hace un momento no teníamos ningún
ahora aquí veamos que podemos usar otra propiedad que
max finito por lo que ocupará todo el
y además de aquí, dentro del contenedor, podemos
relleno y aquí solo hacemos inserciones de borde.
Ahora
Los 10 últimos están bien, entonces
Y aquí queremos centrar esto, así que lo envolveré
alrededor del widget central. entonces estaría centrado entonces ya está centrado,
Por supuesto, no quiero usar este texto aquí. Quiero usar
Está bien, aquí tendremos un nombre
diferente. Diré lado chino y Está bien, sí, ahora para este puedo usar una
Está bien, porque creo que es demasiado pequeño. Puedes usar
dimensiones fuente 26 porque sabemos que en nuestro archivo
Vale, vale, entonces ya se ve más grande. Muy bien, ahora para el contenedor en sí, también
así que aquí hacemos margen, está bien, ahora para el margen haríamos
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
córtalo y lo guardaré. De hecho, quería 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
veamos, intentemos con 20, así que bajó un poco, y esto
Ese es el tamaño preferido, así que puedes usar un tamaño
Si lo sacas aumenta 20 píxeles, si lo vuelves a
De todos modos, ahora lo siguiente que queremos lograr es este
queremos lograr aquí ahora para eso podemos usar otra
se llama título y el título en realidad toma cualquier tipo
niños ahora aquí podría seguir adelante y simplemente
Cualquiera que sea el ícono que desees y que definitivamente
Es iPhone 12 y como puedes
ver ya está ahí. Vale, sí, claro que este no es el icono
í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,
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í
alineación del acceso principal, entonces
punto y espacio entre ellos para que veamos que
llegan lejos hasta este final, ¿sí? Bien, ahora hay un problema. Lo ves como cortado.
tenemos que usar otra propiedad que se llama altura de la barra de
ha mejorado un poco, está bien, o podríamos
usar más, así que usa 80.
Vale, sí, ahora está mejor, pero en
Y quédate con 70 y veremos
cómo queda bien. Así que ya se ve mejor, sí, estamos
queríamos lograr cuál es este y también tenemos
Bien, ahora este resultado se realiza dentro de este
borde a la derecha así que todo lo que pudimos hacer pudimos venir
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
ese radio 20 está bien, ahora lo que haré, seguiré adelante
usaremos la parte superior derecha, está bien, y veamos y por supuesto, este es el color, así que como estamos usando la
Ahora continuaremos, lo guardaremos y veremos
Está bien, ahora creo que en lugar de los cinco primeros, bueno,
Lo que queremos lograr es esto de aquí y
bien, para hacerlo desplazable definitivamente uh desplazable
de desplazable, bien o plegable, yo diría que sí,
Aquí tendremos este texto.
Tenemos este niño
y dentro de la columna usaremos niños y dentro de niños
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
El texto que teníamos antes, así que lo copiaré
y lo pondré aquí unas cuantas veces
Muy bien, si guardo esto, veré este resultado
y colapsar este, está bien, como si viniera
Otra cosa es por qué uso el contenedor porque queremos
para que el contenedor de afuera pueda usar un margen, así
déjame seguir adelante y hacerlo justo después, así que ahora hacemos
ahora aquí quedan todos los que quedan, así que las dimensiones puntúan
ahora vamos a guardarlo y ya se ve mejor
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
aquí estamos ahora seguiremos adelante y lograremos este
archivo de detalles de alimentos recomendados y aquí
scaffold scaffold tiene otra propiedad que se llama barra
Bien, ahora usaremos la columna.
Ahora tienes que entender
Tenemos estas dos secciones, esta y ésta,
y también dentro del primer hijo usaremos esta fila
Está bien, ahora seguiremos adelante y aquí escribiremos
ahora dentro de la fila uh, tendré hijos, está bien
ícono f, cuál es este, así que lo que haré, seguiré
ícono de la aplicación, está bien, ahora aquí se necesita el nombre del ícono,
Muy bien, copiaré este y lo pondré allí
y usaré agregar. Este es otro ícono. Bien, continuaré, lo guardaré e intentaré ejecutarlo
Ahora esto sucede porque estamos usando la columna. El primer
cualquier andamio de contenedor principal no es realmente un buen
Si envuelve la columna dentro de un contenedor,
Definitivamente no tenemos un contenedor,
ejercicio principal podemos usar ese ejercicio principal punto mínimo
cuál es este y usar el espacio mínimo, está bien,
tiempo creo que se coloca en el fondo, está bien, así
Estos dos elementos no deberían estar juntos, así 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
el color de fondo que queremos, no queremos este, así
y usaremos el color de fondo que tenemos en nuestra aplicación para
Sí, y además del ícono, el color del ícono,
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
así, está bien, vamos a guardarlo.
El ícono es blanco,
aquí, así que no queremos un ícono tan pequeño. Ahora
icono en sí hay una propiedad que se llama
Ahora el tamaño en sí es solo 16, por eso parece demasiado
tamaño, pero aquí vemos que el tamaño está codificado aquí
por aquí y lo llamaremos tamaño de icono final. uh, lo
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
es por eso que lo ponemos aquí 40, así
que aquí usaremos 16, está bien. Bueno, ahora hay otro problema, entonces, ¿cómo lo
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
nuevo, entonces usaré 16.
Está bien, espero que
pero en este caso queremos usar un 24, por lo que debes
para ir a nuestro archivo donde dice dimensiones de la aplicación
aquí tenemos este tamaño para el ícono, vale, que es
Bien, una vez que estemos aquí, podemos agregar una nueva propiedad
y pasaremos desde aquí dimensiones
Bien, ahora se ve mejor y más grande
y parece que tenemos un error. Está bien, porque tenemos cambios de muchas cosas
Tuvimos este error antes pero ahora el
Está bien, entonces estamos bien, ahora vendremos
El código aquí está bien, entonces está funcionando correctamente,
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
Los problemas de relleno y margen que debemos tener en cuenta,
y lo estamos haciendo porque podemos aplicar relleno o margen
Usaremos un relleno y haremos inserciones de borde ahora solo
todos ellos, así que aquí vamos a la izquierda y tenemos
Ahora aquí queremos aplicar 2,5 veces, así que sea
50 pero no tengo 58, así que lo que tengo aquí
me da 50.
Está bien, espero que tenga sentido aquí
Lo usaremos ahora y veremos que ya tenemos cambios
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
Entonces, lo que también significa justo aquí, vale,
Tenemos que tener esta sección correcta, así que necesitamos encontrar
Ahora aquí veamos, podemos usar el texto.
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
signos, así que necesito tener esta barra, entonces
Bueno, aquí tiene que ser una cadena diferente, por eso,
como este y más cero ahora en el futuro funcionarían de
dinámica esta sección también sería dinámica,
Creo que necesitamos usar el signo de dólar; de lo contrario,
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
oscuro aquí pero no lo tenemos, así que creo
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
Sí, podemos poner el tamaño, así que hacemos dimensiones, puntos, fuente,
Está bien, ahora se ven, sí, mejores y más
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
Vale, esta barra inferior y esta parte inferior en realidad
Bien, ahora recuerda que anteriormente trabajamos
en nuestra otra página, que es ¿Cuál es este de aquí? Bien, ahora
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,
y vendré aquí y lo pondré justo debajo
Consigamos mi simulador, lo pondré ahí y
Así que nos salvó de mucho trabajo.
Ahora
uh veamos bien dentro de este
Así que definitivamente necesitamos cambiar este
Queremos que este niño sea una fila, está bien y en lugar de querer
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
error, no necesitamos ese ahora, ahora aquí
este está bien y usaremos un color para esto hacemos
Está bien, ¿y qué más creo que sea? Guardémoslo y veamos
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,
El tamaño dice 45, parecerá más grande, pero no queremos
24 usamos ese, está bien, así que mientras terminamos
uh, hemos creado la página de inicio aquí y luego
página principal de comida, página popular
En la siguiente parte del tutorial combinaremos estas
que veremos cómo usar cómo crear un repositorio de
nuestro servidor y eso es muy emocionante, gracias a todos,
crear repositorios y controladores de clientes de API y
así que te guiaré a través del proceso completo, así que
Eche un vistazo a nuestro ejemplo de aplicación básica
repositorios y controladores del cliente API y cómo
Para ese propósito, ya tengo una demostración aquí.
Haré
Esta aplicación está realmente en el servidor. Ahora, aquí.
si hago clic en esto, voy a una página diferente y ahora
Aquí y luego puedo dirigirme al carrito. Vale, si tengo que
Cierro este una vez más, pero si vuelvo hacia atrás
guardado temprano y aquí puedo agregar más cosas si quiero,
para ver mi carrito y aquí también puedo reducir o obtener
Regreso a mi página de inicio y puedo venir aquí.
dirección guardada y puedo guardar una nueva dirección desde
Vale, está bien y luego, si vengo aquí, veré
Está bien, así, pero este historial proviene de nuestra base
Y aquí no tengo ninguna información de todos modos,
uh y si vuelvo otra vez puedo desplazarme por ellos
Lo agrego al carrito después de eso veré que tengo más
y mira, haz clic aquí, está bien y eso es todo, así
Veo que tengo un nuevo pedido generado, vale, lo
de mi carrito está bien, así que puedo hacer mucha más información,
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,
una vez más, puedo seguir adelante y cambiar mi dirección
aplicación como esta, por lo que se trata de una aplicación de comercio electrónico
flutter framework lo obtiene y procesa los
Por lo tanto, para una aplicación como esta necesitas tener
porque aquí estamos haciendo muchas cosas, bien,
listo desde el principio y debe ser de la manera
No es una aplicación sencilla en la que simplemente vas
Lógica, tu interfaz de usuario y dependencias, por eso necesitamos
repositorios, así que para ese vendré
Estructura básica y aquí primero explicaré qué
Seguiremos adelante y construiremos estas cosas una por una, está
aplicación aquí y dentro de la aplicación tenemos esta función
llamar a una función que se llama init pero, por supuesto,
en general, quiero decir que no está en la función principal
así que continuaremos y lo crearemos ahora.
El objetivo
cargando dependencias como puedes ver, las escribí aquí
muchas dependencias, pero aquí acabo de enumerar tres.
Las dependencias más importantes son el cliente API, por lo que
El nombre es api porque puedes entender que desde aquí vamos
Como este, el que les mostré, debería comunicarse
Ahora este es un lado del cliente, por lo que ahora iría al servidor
datos, por eso decimos que este es un cliente, entonces
Pero de todos modos puede parecer muy alto para principiantes,
archivo aquí en nuestro caso, la aplicación flutter está
cuerpo de la solicitud de publicación, está bien, el cuerpo real
Entonces, en la aplicación en general, solo desea tener una sola solicitud
un método de publicación y usando esos dos métodos hablarás
para publicar datos, pero su aplicación puede ser compleja,
En general, solo tendrás una solicitud de obtención, un método
Espero que ahora tenga sentido, así que obtener y publicar
así que ahora necesitamos llamar a ese cuerpo o al
este cliente API ahora necesitamos llamar al método ahora,
repositorio pero, una vez más, el repositorio es solo una clase
Bueno, de todos modos crearemos una clase de dardos
pero el concepto que llamamos a este tipo de clases
y el método de publicación, recuerde que en el cliente API tendremos
cuerpos correctos y desde aquí dentro del repositorio simplemente
tiene sentido, entonces el cuerpo está ahí y llamas al cuerpo
del repositorio es simplemente llamar a los métodos, qué
esa es la forma más sencilla de entender y, de
Los repositorios de las clases oscuras son bastante simples
El cliente API es un poco más grande que los repositorios.
Bueno,
Bien, ahora los controladores procesan los datos.
Los repositorios obtienen datos del cliente API. Recuerde
eso significa que estamos obteniendo datos del servidor. Ahora los
El cuerpo habla con el servidor y el servidor envía algunos
desde el repositorio ahora a cambio tanto del cliente API como del
pasado a los controladores, está bien, sí, ahora los controladores
que vamos a procesar y luego de procesarlo lo enviamos
Así funciona, pero de todos modos, ahora
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
obtenga la solicitud de la interfaz de usuario, llamará a los controladores.
y el repositorio llamará al método get en el cliente
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
uh ui desde ui llegamos a controladores y desde controladores
cliente y desde el cliente api hablamos con el servidor y el
Volver al cliente API porque es una solicitud de obtención,
Los repositorios y el repositorio pasan los datos a los
los datos a la interfaz de usuario y luego se vuelve a dibujar,
repositorios y cliente API para una solicitud de obtención, está bien, ahora
general de la interfaz de usuario recopilará algunos datos y
Primero procesará los datos, luego llegará al repositorio
obtener o publicar solicitud, en este caso encontraremos la solicitud de
Esa publicación simplemente se encuentra dentro del cliente API,
A lo largo de este proceso, ahora el cliente API encontrará el cuerpo
al servidor ahora, después de enviar los datos al servidor,
Vuelva a contactarnos ahora una vez que envíe una respuesta una
luego a los controladores y luego a la interfaz de usuario, así
Espero que tenga sentido, así que ahora tenemos claro
controladores ahora continuaremos y veremos de primera
ahora vamos a construir el representante y los controladores del
Sígueme y, si estás siguiendo algún
Para entender este concepto, aún puedes seguir,
mi proyecto el que estoy haciendo aquí pero si no
simplemente crea una aplicación de flutter simple, me refiero solo a la aplicación
aplicación, sigue adelante con esa y sígueme
Aquí es donde lo dejamos la última vez,
repositorio de cliente y controladores de API,
carpetas nuevas la primera carpeta la llamaré aquí
entonces esta es una carpeta y dentro del asistente
dependencias, está bien, dependencias, punto, dardo,
una clase, bueno, realmente no necesitamos crear una clase,
y el tipo de método sería futuro pero no devolverá
entonces simplemente tendremos estas llaves,
el tipo de retorno, por lo que necesitamos usar una sincronización
de lo que estaba hablando antes, está bien, es tan simple como
pero una vez que hayamos terminado con esto, debemos seguir
y una vez que creamos la clase para el cliente API,
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
otra otra carpeta nueva y aquí la llamaré api, está
y lo llamaré cliente api dot dart, está bien, crearé
y en nuestro caso, vamos a usar getx para administrar
repositorios, por eso necesitamos extender get
interfaz que se llama get x service, está bien,
uh variables para la inicialización la primera que hacemos
Cuando hablas con el servidor, deberías tener un token
El cliente API está bien, por eso tenemos un token
también tipo cadena y lo llamaremos url bayes.
Ahora esta
Hablaría con el servidor para que la URL del servidor esté
Pasaremos esto desde otro lugar donde llama al cliente
ahora crearemos el constructor para el cliente
variable o parámetros, así que registre este punto y URL base y luego continuaremos y crearemos
ahora usaremos la URL base igual a la URL base de la aplicación.
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
Si ves que vienen de get get connect y se conectan
uh, sistema de administración de paquetes, estas dos variables, por lo que
¿Cuál es tu URL base para que se la pases
Entonces, ¿cuánto tiempo debe intentarse la solicitud
Así que aquí intentas realizar una solicitud o intentar obtener datos
la solicitud y después de eso, si falla, la detendrá,
Crearemos otra variable aquí y habrá
también será de tipo tardío, ahora la variable en sí
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
ahora tiene un valor de par de claves, por lo que en nuestro
también cadena, pero esto es solo para esta variable.
El mapa tendrá una clave y un valor de par. Escriba la cadena de
y pronto veremos cuáles son los encabezados. Está bien,
Lo marqué como tarde, lo que significa que antes de seguir
Así que lo inicializaré dentro del constructor con
Ahora, una vez más, los mapas tienen llaves. Está
entre llaves, la mayoría de las veces
están envueltos alrededor de estas llaves o corchetes, así es
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
cliente API y estos encabezados ahora, una vez más, dije
ahora aquí vamos a hablar con el servidor pero
debes mencionar el encabezado en tu URL
Independientemente de que se trate de una solicitud de obtención o de publicación,
Quiero obtener una respuesta del servidor. Le dices al servidor.
Debes enviarme datos json. Está bien, todo está bien. Esto también
envías datos al servidor, el servidor sabe por el encabezado
desde el cliente, lo que significa nuestra aplicación o desde
debes mencionar el tipo de contenido aquí y esta es la sección
debería decodificar y codificar mucho tiempo. Esto no
Ahora aquí, si realizas muchas solicitudes de publicación,
un token desde su dispositivo al servidor, por eso
y es por eso que tenemos esta variable
aquí, ojalá tenga sentido Ahora veamos, sí, y ahora esto del portador,
Así que debes mencionar el tipo aquí.
y este tipo de clave se llama autorización porque
y el token que enviamos es de tipo portador,
Ahora tenemos que seguir adelante y crear una clase para nuestros
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.
vivirían en esta carpeta ahora
cree un nuevo repositorio que sería una clase
de dardo y lo llamaré producto popular repositorio, está bien y dardo, puedes nombrarlo
Muchas veces al final ponen esta palabra llamada
eso es todo ahora que estamos aquí y como dije
ahora crearé una clase basada en el nombre de mi repositorio, así
y aquí ampliaremos obtener un servicio ahora el paquete se ha importado automáticamente, ahora los
tiene que ver con la conexión a Internet, por eso
Internet, debes extender este servicio get x, así que
Internet, si usas el paquete get x, deberías ex, tu
Sí, está bien.
Ahora necesitamos crear una
el tipo es final y esa variable será tipo api uh
Muy bien, aquí pasaremos el cliente API al producto
por aquí está bien, entonces están conectados de alguna manera, está
porque si es así, desde dentro del repositorio podemos llamar
Está bien, entonces el repositorio de API debería tener una
aquí espero que tenga sentido, porque si tenemos
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 lo llamaré hacerse popular el nombre del
método lista de productos populares Bien, aquí tendría que mencionar el tipo
Está bien, porque regresa en el futuro. Ahora aquí necesitamos tener
Está bien, ahora nos ocuparemos de eso.
Ahora olvidé
constructor está bien, así que hacemos un repositorio de productos
cliente dot api, así que cada vez que llames por primera vez
Está bien, espero que tenga sentido ahora aquí tenemos que
Como dije antes desde el repositorio, llamarías a un
método todavía, así que necesitamos seguir adelante
cree un método de publicación y después de crear el método de publicación
Ahora iremos a nuestro cliente API aquí, así que continuaremos
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,
del paquete get x, está bien porque en lugar del
obtener datos del servidor y obtener x le devuelve
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
servidor, me refiero a la solicitud, el punto final está
y después de eso deberías haber uh bueno,
Piensa que por ahora lo mantendré simple, ¿vale?
después de eso tenemos que devolver algo como usted dijo,
Bien, ahora aquí primero, definitivamente tenemos que usar una clase
Llamaremos a algo desde el servidor y, si
en nuestra cláusula de captura, está bien, aquí
te devolveremos una respuesta, está bien.
Muy bien ahora aquí, bueno, hay muchas cosas que
Lo que queremos es crear un método de obtención aquí o una solicitud
Pasaremos, llamaremos a get y no recibimos, te enviaremos,
Vale, ahora veamos que te pide que añadas
Ahora obtendrá los datos y, por supuesto,
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, si hay algún problema aquí,
Entonces aquí veamos que esta es una respuesta ahora,
Texto de estado de algunos de ellos, está bien, así que seguiremos
falla, enviaremos un código de estado igual a uno y luego
proviene de nuestro error, así que escribe un punto a una cadena.
Estamos listos, así que esta es una solicitud muy simple para
en nuestro caso estamos usando el método get de getx. No estoy
obtener x dentro usa http, está bien, así que de todos modos
los datos cuando se devuelven los datos, los guarda en un objeto
Si falla, devolveremos el mensaje de relleno y de
sentido, ahora estamos aquí dentro de esto, está bien,
lo que debería devolver, mucho antes de que regrese,
Bien, aquí podemos simplemente seguir adelante y llamarlo,
punto obtener datos está bien, todo está bien,
url, está bien, URL, eso es tan simple como ese, está bien,
Ahora nos estamos dando cuenta de esto, como dije antes, por lo que
entonces el repositorio es simplemente responsable
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
uno está bien, eso es lo que aprendimos y al
obtener los datos para obtener la solicitud del primer repositorio
datos al repositorio y luego el repositorio enviaría
así que ahora tenemos que seguir adelante y crear un
podemos obtener estos datos porque aquí ves que devuelve
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
Vale, o dentro del cliente API. Lo siento,
creo que podemos cerrarlo. y este también así que de todos
producto de controlador popular uh controlador de producto
variable, eso es lo que haremos y lo llamaremos repositorio
El repositorio del producto pelador de patas está bien, espero que
Así que necesito pasarle el registro como el representante
el repositorio que necesita para pasar el cliente API está bien,
producto popular cuando continuamos y lo inicializamos,
Si tengo una instancia dentro de este controlador de este
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
Está bien, esto es algo que tienes que proporcionar.
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
la lista está bien y la inicializaremos
a nula, está bien.
Ahora bien, ¿por qué estamos haciendo
desde aquí llamaré a esto rappo y ahora el rapero devolvería
por aquí y luego guardaré los datos en esta
Ahora, seguiría adelante y crearía un método y el
Llamaré al nombre del método para obtener
y eso es todo y aquí creo que necesito crear esto
el tipo de devolución es futuro. Ahora vendré
instancia de ajuste aquí para que pueda simplemente
llama a un método dentro de él ahora sabemos que dentro
Obtener una lista de productos populares. Creo
obtener una lista de productos populares, sí, este es el
Continúe y busque los datos. Encuentre este método dentro
respuesta, entonces el repositorio tendrá la respuesta aquí ahora
Puedo verlo aquí. Vale, puedo guardarlo. De todos
como respuesta aquí respuesta respuesta ahora por
qué escribo aquí respuesta lo siento ahora por qué escribo aquí respuesta porque recuerda rappo devuelve una respuesta, por lo que aquí la
objeto y ahora aquí me está gritando porque
ahora el error debería estar cometido por qué estamos poniendo
escriba OK, así que debemos esperar hasta que obtengamos
una vez que los datos estén listos entonces, bueno, de alguna
respuesta o una respuesta fallida, ya sea que necesitemos verificarla
Lo siento, código de estado del punto de respuesta si ahora es 200
Devuelven un código de estado de 200 si se realiza correctamente.
Entonces, en nuestro caso, get x también devuelve el
eso significa que si la respuesta va de aquí a aquí
uno cuando regresa desde aquí el código de estado es
cuando regrese de aquí, regresará a nosotros 200, está
Entonces, si devuelve la respuesta correcta, guardaremos
una vez más lo inicializaré a nulo porque puedes
Entonces, si no lo inicializas en nulo, es posible
Lo inicializaremos a nulo, está bien y luego llamaré
a la lista de productos populares y agregaré todo.
Bien, ahora aquí necesitas poner
Sí, eso es tan simple como ese, pero
No es tan fácil, hay que tener algo, mucho tiempo, necesitamos
y el modelo obtendría la respuesta, recuerda porque
la respuesta es parte de los datos dentro de la respuesta tendremos
Así que aquí dentro tendremos datos de tipo JSON, pero
a un modelo, está bien, entonces tenemos que seguir adelante y
Realmente no podemos seguir adelante y usarlo, pero te da
pero, por supuesto, te mostrará un error, ya está bien,
solo desea actualizar porque si llama a este método,
y nuestra interfaz de usuario lo sabría, por lo que esta actualización
falla aquí, vale, entonces querrías
Y esa es la idea de cómo conectar los repositorios
Ahora, si esto tiene éxito, está bien, ahora puedes acceder a esta
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
porque esta es una variable privada que tiene un
subraye lo marcado como una variable privada para que una
Puedes simplemente llamar a este desde tu interfaz de usuario y esta es
diga así a b cualesquiera que sean los datos que
Bien, ahora antes de querer ver qué sucede realmente,
De lo contrario, esto no funcionará bien, pero ya entiendes
Así funciona bien, así que tienes este método init
Obtener publicaciones y controladores, cosas así,
El rompecabezas es que nuestro método init está bien, así que ahora seguimos
método init está bien, por ahora lo comentaré
Ven aquí y este es nuestro método de edición.
Ahora
está bien para uh flutter get x, simplemente
necesitas obtener dot lazy put y luego simplemente llamas a tus dependencias desde
cliente api el primero en general en las
El cliente API primero está bien, creo que necesitamos
Ahora recuerda que tiene un constructor y requiere datos, por lo que
Bien, ahora tenemos que pasar por un mundo ajetreado.
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,
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
primeras dependencias que cargamos ahora en
Quiero cargar los repositorios, así que esto
es lo que hacemos. Te vuelves perezoso. ahora aquí necesitamos llamar a nuestros repositorios
Aquí hay un producto popular, así que
seguiré adelante y lo copiaré.
Ahora aquí solo usaré este
Deberías pasar el cliente API. Recuerda que aquí
inicialicé el cliente api aquí, así que ahora podríamos seguir
Sí, y ahora aquí obtenemos dot find y necesitamos importar
así que inicializamos, creamos una instancia de api client
porque estamos dentro del paquete get x, así que una vez que
para ti, pero, por supuesto, este nombre tiene que ser el mismo
un poco diferente aquí o cualquiera que sea el nombre que
nombre, está bien, ahora estos dos nombres son todos iguales, por lo que ahora
En nuestro caso, esta es la clase de cliente API.
Ojalá
o repositorios y este es nuestro cliente API, está
controladores, está bien, sí, ahora de la misma manera tenemos que
Copiaré este ahora en lugar del popular repositorio de
es un controlador de producto popular, así que este
Primero necesitamos importar el paquete y ahora vemos
ajuste bien, por lo que debemos pasarle el contenedor y ya
y la variable que creamos que es un envoltorio
simplemente reemplace esto, está bien y desaparecerá, así
funciona bien, primero el cliente API, luego todos los repositorios y
informes para que todas las ondas intenten cargarse juntas
Todos los controladores que cargas juntos aquí, uno
Bueno, entonces tendremos que ir a nuestro
main.class ahora, como dije antes, este init se llama
Ahora aquí tenemos que importar nuestro paquete de dependencias
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
Lo siento, lo importaremos como departamento.
¿Tiene
ahora aquí antes de comenzar a cargar su aplicación principal
para cargar sus dependencias aquí y esa es la convención
un peso y haríamos dab dot init ok y así
está bien antes de que la aplicación comience a ejecutarse,
espera, aquí dentro de flutter usamos
El punto de enlace de aleteo garantiza que esté inicializado,
Se asegurará de que sus dependencias estén cargadas correctamente
Así que ahora con esto ya hemos terminado con esta
este modelo como dije si no seguimos adelante
Realmente no podemos obtener, quiero decir, podemos
mostrar los datos en la interfaz de usuario ahora,
uh, si llegamos a nuestro repositorio ahora, este está
o este enlace debe guardarse en otro lugar, así
y luego tenemos que ir a nuestro punto final que está en el
una lista, está bien, esa lista devolvería los datos, así que quedan
Lo siguiente que haremos es seguir adelante y construir
Cree este punto final en el servidor y luego podremos mostrar
y luego desde la interfaz de usuario simplemente llamaremos
Anteriormente en este tutorial les dije que
y, de hecho, más adelante, la mayor parte de la
más plano de todos modos, así que antes de seguir adelante y
conceptos sobre json y modelos y cómo están
json anidado y cómo podemos construir un modelo, así que
Para trabajar con esto, tienes que venir aquí y este
por supuesto, solo un diagrama y lo guiaré muy rápidamente
o cualquier tipo de json primero tendrá llaves y
valorar este tipo de sección o parte como aquí
es json y ahora dentro de json tenemos una clave y tenemos
Dentro de esta clave, bueno, tengo aquí otro json
bien, entonces ese es otro json, entonces json dentro de json
afuera tienes llaves y dentro tienes otras
llaves, tiene más valores de pares de claves para que sepamos cuál
ser json tiene que tener una clave y un valor, así que tenemos
También tenemos otra clave y valores entre
Jason o el Jason anidado, está bien, por lo que en general
e internamente también tendrá llaves, está
Esa es toda nuestra teoría.
Ahora vendremos aquí
Te llevará este tipo de página y aquí aclararemos
Hemos visto lo que se llama nido adyacente pero
otra idea que se llama mapa y más adelante veremos
Veremos cómo se conectan los jsons y modelos de mapas. Está bien,
Aclararé parte de la idea sobre el mapa, así que seguiré
barra y lo llamaré mi mapa, está bien ahora en
sección del cuerpo si tiene llaves, eso lo convierte en un
Aquí el mapa de valores clave también tiene un valor clave.
primero haremos el básico, haré el nombre
ahora aquí escribiría edad aquí escribiría
Está bien, está bien, entonces eso es lo que lo convirtió en un
y dentro tienes esta clave y valor como json que lo
Hay otras formas diferentes de declarar el mapa ahora.
Este es otro artículo que creé.
Hay algunas formas
Un mapa como este es la primera forma que acabamos de hacer
crea una instancia de mapa usando este constructor
y está la otra tercera vía. Bueno, aquí mencionaste
Entonces, en nuestro caso aquí estamos diciendo
y los valores son dinámicos, lo que significa que podrían
cualquier otro tipo está bien, eso es lo que lo
en esta sección nos apegamos a este formato de mapa, pero
y aquí la idea básica es la misma porque aquí
y todos son cadenas, ahora el valor es una cadena o
Así que aquí vemos que así es como declaramos un
usando claves, está bien, ahora veremos cómo acceder a ellas.
Te gusta mi mapa y si estás aquí, escribe el nombre de
Vengo aquí para ver el primero y presionaré Ejecutar
Eso tiene sentido, así es como accedes a los elementos
Bueno, hay otras formas diferentes, pero aquí
Ese es el mapa más básico, pero justo ahora vimos un
por aquí, está bien, sí, entre llaves, clave y clave
Entonces se podría decir que son parientes o primos.
uh mapa está bien o mapa anidado o lo mismo aquí qué es
Ya tengo este.
Ahora crearé otro
di dirección, está bien, después de eso la pondré
Bueno, ahora para la dirección crearé un mapa dentro
y aquí diría china, está bien y aquí
Muy bien, ahora copiaré este y
Y lo repetiré una vez más. Aquí escribiré,
Vale, aquí este es un mapa, pero aunque esta sección
Está bien, pero ¿qué es esto ahora aquí en dardo cada
de llaves que se llama lista, entonces, ¿qué es lo que tenemos
es una lista de mapas, tenemos dos mapas, puedes tener más
Regrese a nuestro archivo json. Recuerde que aquí está
este json y el mapa son bastante similares, sí,
Sí, cuando entiendas qué es json, colocar tu
Bien, ahora aquí tengo esta clave y, aunque en este
contiene una lista y una lista contiene un mapa, bien,
Más o menos cómo quieres acceder a este, pero aquí
y aquí puedo imprimir el nombre, ahora puedo
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.
No es así, solo quiero obtener un valor particular,
Vale, solo quiero obtener el nombre
Lo que quieras, creo que escribiría aquí,
puedes, podemos hacer eso, pero cómo lo hacemos ahora
Puedo acceder a este directamente, así que lo que haré
lista de direcciones y aquí lo haríamos, guardaremos esta
en una nueva variable y lo llamaré mapa de direcciones.
maymap está bien, entonces tomé esta lista, esta
la clave de mapas, así que tomé la clave de mapas, una de
En este momento, esta es una lista, así que si es una lista, puedo
Los elementos internos están bien, no las variables, los elementos
lista como lista, necesitamos convertirla en lista y
elementos y cada uno de los elementos lo llamaremos
Bien, ahora aquí podemos hacer una impresión,
así que aquí hacemos el país.
Y ahora lo imprimiremos por aquí
Muy bien, entonces el primer país es China,
Entonces, cuando lo conviertas en una lista, cada vez
que intentará tomar la clave cualquiera que
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,
uno una y otra vez porque en general estás en
tendrás tu json, este tipo de json en realidad proviene
el servidor se parece a esto, así que en realidad
Lo llamaría mapa en lugar de json aunque la convención
el formato que le proporciona la mayor parte del lado del
Los datos son prácticamente una respuesta json y la
y veremos que la API Restful que vamos a construir
json y que es bastante similar a map y si es similar
cosas porque se convierte en un mapa, está bien, esa es
mapa y json anidado. Bueno, ahora cómo seguir adelante
Ahora está bien, ahora seguiremos adelante y construiremos un modelo ahora.
¿Por
un modelo hay toneladas de beneficios bueno,
proyecto o aplicación usando el mapa y acceda a ellos de esta
nombre como este, está bien, no querrás hacer eso
Es difícil de mantener, especialmente el tema del nombre,
Tienes que nombrar muchos lugares, pero una vez que creas
Eso te hace la vida más fácil, está bien y hay muchos otros
así que te recomiendo encarecidamente que siempre que tengas un archivo
para hacer algo, construir una clase o realizar alguna operación en
y le hará la vida mucho más fácil y la idea de la clase de modelo
otros marcos o lenguajes están bien, así que una vez que
Verás que cuando intentas aprender otro idioma, se vuelve
Lo mismo, tal como vimos que json y map son similares,
Está bien, de todos modos, para construir un modelo primero crearemos
persona ahora por qué estoy haciendo eso porque aquí en
Por eso, pero puedes nombrarlo como quieras, aquí primero seguiré
h y string city bien por ahora no voy a poner
voy a cortarlo, sácalo, bueno, ahora aquí verás,
Los miembros y los nombres de los miembros son los mismos
construyes un modelo y debes tener campos y esos
o mapear los nombres de las claves, entonces estos son los
es un mapa pequeño y para el mapa pequeño construimos
todavía tenemos constructor, así que seguiremos adelante
este nombre de punto y este punto h y este punto ciudad,
Clase bastante completa aquí basada en este mapa, por
Ahora, para un mapa tan simple, tenemos un modelo simple.
Ahora eche un vistazo, tenemos este, entonces,
otro mapa justo mientras se repiten
entonces dentro de este valor dentro de esta clave dentro
significa que aquí tenemos que seguir adelante y declarar un mapa,
eso está basado en este mapa en realidad no declarar
que obtenemos esto para esto ahora mismo, eso también significa
Bien, aquí dentro de esta sección tenemos que construir
Eso nos dice que hay una lista de modelos aquí, lo
para crear un modelo y para el campo relacionado dentro de
Pondré bien estos modelos porque es una lista de mapas
A partir de la lista de mapas creamos una lista de modelos.
Muy bien, ahora aquí, lo que haré.
Seguiré adelante
está aquí y la llamaré dirección. Vale, sí, ahora, aquí
ahora son dos campos, país y ciudad, está bien, así
así que simplemente lo pondremos allí. Ahora, todo
y aquí tenemos que escribir país, está bien, recuerda,
ahora aquí en lugar de persona escribiríamos
Bien, ahora tengo un mapa grande y para ese mapa tenemos
completo dentro de ese mapa tenemos otro mapa
Ahora, debido a que este es un mapa grande, tiene otro mapa,
lista de modelos, está bien, eso es lo que vamos
dirección y aquí llamamos dirección,
Ahora, una vez que hagas esto aquí, también
esta dirección y sí, estamos listos, eso es todo, así
o desde json anidado creas un modelo donde hay modelos anidados,
tenemos otro modelo y ese es un modelo anidado, está
sección tenemos que construir otra tenemos que
dentro de ti, en esta clase tendrás otro método que
convención, pero creo que puedes llamarlo como quieras.
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
Bien, dentro de esta clase tendrás un método
entonces, ¿qué haces realmente con base en este método?
crear objeto si sabes, di que creo un objeto a partir
Persona ahora podré usar una persona para acceder
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
El mapa es una cadena y es dinámico. Antes aprendimos
la clave podría ser una cadena y el valor podría ser dinámico.
y esto es lo que estamos haciendo ahora de todos modos,
en algún lugar de mi aplicación llamaré a esta
Tengo que dárselo a un mapa, así que tengo que dárselo a
el mapa, los valores se almacenarían en json aquí
para recuperar esos valores e inicializarlos aquí en
crear un objeto, está bien, ojalá tenga sentido,
uh, Jason, ahora Jason debería tener el nombre
haces h y json una vez más.
Recuerda lo que estamos
dale a tu método de Jason uh, está bien, como
a esto aquí, lo que significa que esto se completa y debe
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í
toma un modelo, así que cómo trabajar con este,
ahora aquí dice que podría ser nulo, así que podemos
no, no haremos nada si no es nulo, lo que haremos,
así que si no es nulo así, está bien, entonces aquí hago
escribiremos esta declaración que significa crear
uh dirección vacía está bien, entonces aquí estamos creando
vacío y lo asignamos a este, por supuesto, este es este,
significa lista vacía, correcto y el tipo es dirección, está
tipo, lo sabemos, está bien, por eso estamos inicializando
Ojalá tenga sentido ahora. Esta es una lista
ahora mismo sabemos que nuestra dirección esta sección
a esta sección y al comienzo de esta sección
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
Está bien, eso es lo que vamos a hacer, aquí
error que es una cuestión de seguridad nula, entonces, lo que
Este es una lista, como vimos antes y luego
Ahora, si hacemos eso, puedes acceder a ellos uno
y luego pondremos las llaves y luego estamos
a pesar de que es una lista, la forzamos a que sea una lista pura
así que lo estamos transmitiendo asegurándonos porque, después de todo,
no es puramente una lista, así que lo transmití a una pura lista.
este bucle se ejecutaría aquí dos veces, por lo
La segunda e se referiría a este.
Vale, recuerda
Podemos crear un modelo y ya lo hicimos, está
Pasaremos este valor y crearemos un objeto. Bueno,
por aquí uh nosotros nosotros necesitamos crear otro
Más o menos como este, está bien, entonces, lo
y lo pondré aquí. Simplemente cambiaré el nombre de la
Necesitamos esta sección porque no tenemos para esta
json, está bien, ahora eliminaré esto y listo,
aquí debemos escribir el país. Entonces, ¿qué tenemos aquí? Aquí podemos simplemente
podemos crear un objeto correctamente, por lo que este es un método,
en otro lugar de otras clases, está bien, eso
Esta sección en realidad es más o menos igual que esta,
que no tiene, tiene una lista anidada porque
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,
Vamos a crear objetos y colocarlos dentro
de esta lista.
Bien, aquí lo hacemos. dirección punto de json bien, ahora todo lo
así que pasa e bien y eso es todo,
veamos que tenemos un error. Así que aquí puedes decir que no es nulo. Sí,
ahora echemos un vistazo a este, así que aquí estoy
y cada vez que miro tengo acceso
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á
Lo siento, el tipo de objeto es dirección, está bien, así que
Tiene sentido, ahora podemos seguir adelante y crear un
y veré cómo crear objetos basados en estos
adelante y crea una nueva variable, la llamaré
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
o mapear, sí, eso es todo lo que se necesita,
usando nuestra clase o modelo y lo proporcionamos
Ahora, curiosamente, podría hacer muchas cosas interesantes
Está bien y me imprimirá el nombre aquí.
imprime la h por mí, también podría hacer la dirección,
aquí estamos creando un objeto y llamando a este método,
llamando aquí que se relaciona con este, por lo que
Aquí almacena la instancia una vez que se crean los objetos.
Ahora, para poder acceder a él aquí, debemos
Bueno, lo siento, no es así.
Primero creemos
mi dirección y aquí hacemos la dirección de punto obj,
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
entonces esta e se referiría a cada uno de ellos como
Bien, ahora aquí podría imprimir e punto, ya
debido a que es un objeto, ya no es un json,
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
Oh, lo siento, lo etiqueté mal aquí. Necesito tomar
De todos modos, ahora vendremos aquí y veremos
También así es como construyes una clase o un modelo basado
Modelos u objetos anidados basados en tu mapa anidado.
aquí tenía este y en base a esto tuve que crear
En realidad, hay mucho escrito en la aplicación Flutter cuando
Tendrás muchos modelos y para cada modelo tendrás que
Afortunadamente, hay una herramienta que puedes usar.
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
No hay nada más que adyacente, está bien, así que tómalo
Y luego puedes nombrarlo como quieras.
Lo llamaré
Verás, este es un modelo que creó aquí para nosotros,
La dirección está bien, así que es algo hermoso y
Continúe y hágalo algunas veces por su cuenta escribiendo
¿Qué es el mapa? ¿Qué es json y qué es la clase?
Está bien, entonces puedes usar este. Está bien,
Espero que lo hayas entendido bien. A continuación veremos cómo
y crear modelos y luego usaremos ese en
recuerda que aquí estamos esperando para usar un
objetos y guárdelos dentro de este,
aquí, como dije, para nuestra aplicación también tenemos un
Este es popular, así que lo que haremos será seguir adelante
aquí ya tiene la misma URL y es una solicitud de
herramienta que debe utilizar, es muy conveniente para
Hay muchos otros aquí cuando haces una publicación
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
El mismo formato que este que vimos antes.
Vale,
Puedes ver que tiene llaves, luego algunos rellenos
Hay mucha otra información dentro, está bien,
Creo que la tercera llave y la segunda llave están bien,
creamos nuestro manual de clase pero esta vez no
aquí o el mapa sin importar cómo lo entiendas, así
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
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í,
vas a crear por tu cuenta para escribir manualmente,
puede tener errores, por lo que le recomiendo encarecidamente
este archivo json y modelo y practícalo más
Bien, copiaré este y ahora volveré a
y dentro de ella crearé una nueva carpeta dentro
modelos bien, ahora en este directorio tendremos
producto uh modelo de productos o en realidad lo
En realidad, todos los productos usarán el mismo,
productos, todos usarán el mismo modelo de producto.
para ese lo copiaré, vendré aquí y los
Está bien y aunque aquí hay otro método para Jason,
Si lo necesitas, generaremos otro más adelante
y está bien, ahora esto es exactamente lo mismo que la persona
la persona que creamos temprano lo siento, sí, creamos
clase de dirección que creamos anteriormente pero, por supuesto,
solo dos campos, está bien, ahora lo que haré lo revisaré
de las cosas y cámbialas, bueno, lo primero que
no es del todo correcto, así que seguiré adelante
Llámalo modelo de producto, está bien porque cambio el nombre
y para esta clase también y ahora aquí
y aquí es lo mismo y aquí es lo mismo y puedo
necesario y haríamos algunos cambios, pero en general
En los campos privados usamos guión bajo, así que seguiré adelante
Ahora diré que esto se inicializará más tarde
ahora le estoy diciendo al compilador que
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
quitar por aquí ponerlo allí y quitar por aquí Muy bien, ahora necesito cambiar el tipo a privado
privado a menos que los especifique de otra manera, ahora
Bien, ahora puedes preguntar por qué estoy haciendo esto.
uh campos públicos ahora todos estos son privados bien
También necesito hacerlo privado aquí.
Está bien,
cámbielo aquí también, está bien, y ahora por aquí, haría
Por supuesto, no necesitamos este guión bajo, así que
que los valores correspondientes como este se asignarán
Funcionará porque en Dart puedes inicializar el constructor
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
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
aquí los valores se pasarían bien, recuerda
crea un objeto pero, como lo hace, en realidad
entonces están conectados internamente
Cuando creamos un objeto primero tenemos que pasar
Podría usar este y este también.
campo público privado y lo llamaré modelo de producto
productos y aquí tenemos que usar una propiedad,
eso pertenece a dart aquí quiero obtener toda esta
en esta lista y puedo obtenerlo a través de esta
En otro lenguaje de programación verás que hay getter
pero la única diferencia es que no toman ningún método, solo
quieres usar la función de flecha así, está bien,
Esta es una convención, por lo que si tiene un captador
se accede desde fuera de esta clase, entonces antes
fuera de esta clase si llamo productos eso significa
por aquí desde aquí está bien, entonces con esto,
Lo repasaremos rápidamente aquí.
También
antes ahora aquí una vez que pasamos el mapa para
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
Por aquí, primero estamos inicializando esta
para vaciar la matriz, la lista vacía está
usando la función forraje y lo agregamos a la lista.
una lista privada pertenece a esta clase ahora usamos un modelo
parcheamos, pasamos cada uno de ellos así dentro de estas
molesto hasta aquí así pasamos cada uno de
a medida que se enfría, crea y devuelve un objeto. De hecho,
y luego se guarda en esta lista. Ahora recorre
esto está bien, en nuestro caso tenemos seis elementos porque
mapa dentro de ellos, así que este bucle se ejecuta
y después de eso podemos acceder a la lista de objetos
Ahora bien, hemos terminado con la construcción del modelo,
Así que ahora iremos a nuestro controlador y
primero tenemos que llamar a este um lo siento, tenemos
le pasamos un mapa. Bien, ahora tenemos que pasarle
Recuerde que el objeto de respuesta tiene un cuerpo,
Está bien, entonces el objeto de respuesta tiene un cuerpo que ves, sí.
Pero, por supuesto, no podemos simplemente
uh en absoluto uh iterable que mantiene una gran cantidad
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
se necesita una lista de objetos, así que recuerda
Podemos acceder a este usando este aquí, así
así que aquí hacemos productos, ahora devolverá una
funciona y con esto básicamente hemos terminado
para obtener la lista de productos del servidor,
cada información usando cartero pero ahora veremos cómo obtenemos
Bueno, ahora seguiré adelante y primero iniciaré
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
si funciona, si funciona o no, porque es solo
ahora tenemos que asegurarnos de que este método se enfría y la información se actualiza
del servidor se guarda aquí, está bien, ahora cómo hacerlo.
Este es un método de controlador, por lo que todos nuestros
repositorio de productos y controlador de productos de hélice,
controlador por lo que necesitamos encontrar este controlador
este método por ahora para fines de prueba,
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,
flutter get ex si desea encontrar un controlador
el controlador si tiene algún campo o método al que
Ahora primero seguiremos adelante y lo ejecutaremos para asegurarnos de que se inicializó y creó, sí,
repositorio de productos y controlador de productos, pero
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
Este método es correcto, ¿por qué podemos seguir adelante y mirar
primero se inicializa y obtiene la URL base ahora mismo,
Bien, esa parte es correcta ahora si
El método get toma uri ahora veamos dónde está
Bueno, se llama desde aquí, pero ahora aquí
y este getdata llama internamente o veamos llama
proviene de get x. Ahora esta función get en
no quiere la uri completa, solo quiere el punto
porque recuerde que cuando inicializamos este cliente
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
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é
y dependencias, así que creo que
Está bien, o podemos poner una barra, ya tenemos una barra, así que
así que ahora se ha proporcionado la URL
cuando llamamos a getdata simplemente estamos pasando el punto
en el método get aquí, primero encontrará
Este uri se conectarán y luego obtendrán los
Bien, y esta vez vemos que podemos imprimir
tiene datos dentro, está bien, debería haber datos,
venga aquí y simplemente imprimiremos aquí imprimiremos
Está bien, sí, aquí parece que se está imprimiendo
La información relacionada está bien, eso significa
y después de obtener los datos, podemos guardarlos
Bueno, ese es un muy buen avance.
Ahora tenemos
modelo, a lo que me refiero con uh, necesitamos recuperarlos.
para encontrar un lugar donde realmente sigamos adelante
en nuestra página de productos populares porque la página de
dos interfaces de usuario para un producto popular y un producto
Información para productos populares, por lo que debemos mostrar
página, así como las imágenes, ahora mismo,
uh, reestructura algunas de las cosas y reorganízalas bien
En realidad no debería estar aquí, así que queremos
llámalo directamente, está bien, entonces esta es una constante para
Ahora, por aquí, si llegamos al repositorio de productos
es una constante para los derechos de producto populares
debería tener un token, pero por ahora estamos pasando un
organizar y deberíamos ponerlos en un archivo separado
ahora aquí dentro de la carpeta utils ya tenemos
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
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
ahora aquí definiremos una variable que es
dv comida que significa la mejor comida wow
Para cambiar el nombre de la aplicación, simplemente póngale un nombre
Necesitamos usarlo en algún lugar, lo haremos,
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
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
cadena constante ahora aquí popular producto que estás aquí, este es el punto final. Nuestro
Aquí es popular, está bien, está bien
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
en letras mayúsculas, pero Android Studio podría tener una
esos archivos y cámbielos, está bien, ahora aquí
Cambie aquí primero, por lo que no desea enviar
tab constantes.baseurl está bien y necesitamos importar
Muy bien, solo tienes un método de obtención y cada
Mismo método de obtención pero uri diferente, simplemente
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,
Está bien, porque estamos pasando el uri base por aquí.
Necesitamos crear otra constante y eso es para alimentar un token,
Sería un token aleatorio en este momento, así que
cualquier cosa que quieras, pero más adelante
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
cambia algo, simplemente cambia aquí, no tienes que
Bueno, después de esto, ahora es el momento de mostrar los datos
página principal, está bien, entonces iremos a nuestra página principal
estar en el archivo main.dart pero definitivamente no en este, así
Ok, comida, cuerpo de la página de comida, aquí es donde
Quiero llamar primero, así que copiaré este
página principal de comida y la pondré allí, está
Esto sucederá cuando cargues el anuncio por primera vez en la aplicación,
realiza una solicitud de obtención al servidor y, si
Está bien, cuando esta llamada haya finalizado y se hayan
lista aquí, está bien de todos modos, así que descomentaré
ahora se cargarían los datos y si los datos están cargados,
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
y los puntos y otro contenedor y el creador de vistas
Estas son las secciones comunes que tenemos ahora porque en la aplicación
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
Comida recomendada a los cuerpos de las páginas de comida,
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,
uh página principal de comida, está bien, no el cuerpo
En el andamio recordamos que aprendimos temprano, así que
este archivo dart que se llama página principal de comida, está
Abriremos nuestro punto principal, aparecerá
y restaurarlo y antes de eso
necesitamos importarlo Bien, esta es nuestra página de inicio y
Bien, por ahora estamos obteniendo datos
del servidor y queremos mostrarlos aquí. y la página principal de comida haremos
son estas pocas secciones aquí esta y esto se llama cuerpo de la
El cuerpo en realidad muestra todo esto como vimos al principio
mostrando este correctamente, así que aquí es donde queremos
déjame encontrar nuestro controlador y déjame cerrar esto, algunos
Y veamos ahora mismo, necesitamos trabajar con
Así que una vez más se guardan aquí ahora mismo, necesitamos
y luego tenemos que llegar a este, si podemos,
datos correctos, por esta razón vendremos aquí
que se ha pasado que se ha pasado desde el servidor necesitamos
constructor, está bien, ahora seguiré adelante y cortaré
este comando x y luego obtendré el constructor y dentro de get builder debemos mencionar
nuestro controlador es un controlador de producto popular,
se llama constructor y dentro del constructor puedes
controlador y puedes llamarlo como quieras,
vale y luego regresamos vale, necesitamos poner una
uno que copiamos temprano está bien ahora porque es una declaración
Ahora esto debería venir de nuestro paquete
obtener el paquete está bien, ahora el error debería desaparecer, así
Controlador del producto con la interfaz de usuario, pase
Lo sabríamos para esta interfaz de usuario usando este generador de obtención.
Si desea volver a dibujar la interfaz de usuario, entonces debe ajustar su
y, por supuesto, la mayoría de las veces también deseas crear
Ven aquí, así como lo hicimos allí, ahora podemos
En este momento, lo primero que hacemos aquí es
ciertos artículos, por ejemplo, si acudimos a nuestro cartero
De todos modos, quiero saber la cantidad de artículos que se
es una instancia de este controlador, así que puedo ponerlo
campo público dentro de este controlador dentro de este, así
es un campo público que es este en este momento, vendremos
Ahora esta debería ser la longitud.
Bien,
nuestro indicador de puntos por qué, porque la cantidad de puntos
y por esta razón lo que haré será cortarlo y luego
Entonces, para llegar al constructor, aquí mencionaríamos
producto controlador de producto popular controlador
y aquí, al igual que antes aquí, mencionaremos
Oponerse a estos productos, productos populares,
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
palabra clave nueva, por eso estaba gritando y veamos
ahora aquí ocurre lo mismo, así que aquí productos populares punto
Muy bien, sigamos adelante y reiniciemos,
veamos qué pasa.
Está bien, tenemos seis, sí, y con suerte
dos tres 4 5 6. significa que cargamos correctamente los datos
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
Ahora el problema es que lleva tiempo cargar.
Entonces, cuando la interfaz de usuario dibuja los
Por eso está creando un problema aquí. Ahora podemos
menor o igual a cero, está bien, si es menor o igual
Usamos cualquier longitud dada, vale, lo siento,
copiar y pegar, por supuesto, creo. Mira esto, no, este, está bien y veamos
Vale, es una buena sugerencia si no hay nada que
usaremos un 1, de lo contrario usaremos lo que sea que esté ahí,
Si se ha cargado, esta parte se actualizará y veremos actualizaciones
y reinícielo y, como puede ver, primero había uno y luego
Aquí ahora no tenemos ese error.
Esta es la advertencia.
porque queremos emocionarnos ya han pasado
vez que vemos que estamos obteniendo datos del servidor
pero de todos modos ahora significa que nuestra aplicación
ahora es el momento de cambiar los datos ahora mismo, aquí está
uh de esta lista de productos y luego, según ese objeto,
Elementos y cosas así están bien, así
Si bien haremos cambios en dos lugares, aquí debemos
y lo capturaremos aquí y una vez que lo hagamos
Aquí, especialmente este ícono de imagen, podemos. Necesitamos
Primero necesitamos pasar una imagen, es decir, necesitamos
que esta lista es una lista de objetos esta es una
Bien, una vez que creamos un modelo, uh y desde el modelo, creamos
aquí a la derecha, entonces esta es una lista de objetos ahora,
ellos por índice, está bien, índice significa cero
aquí y crear pasará un nuevo argumento aquí
y lo pasaremos así productos populares y nuestro índice, entonces, ¿cuál es nuestro índice?
Pondremos el índice aquí cuando el índice sea
uh, se requiere un argumento posicional aquí, está bien,
llámelo lista de productos populares, lo llamaré producto popular,
de la lista y estoy captando ese objeto aquí ahora el tipo
modelo si vienes aquí nuestro tipo de objeto
Hay dos clases aquí, así que esta clase contiene esta
Así que ahora tengo el objeto y como lo tenía antes,
herramienta que podemos usar el operador de punto para acceder
Lo primero cambiará aquí en lugar de la imagen del
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,
nuestro nombre de objeto es producto popular producto popular
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
el compilador esto no va a ser nulo, de lo contrario
sobre qué tipo de valor viene aquí, ya sea
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
No tengo idea de qué es este enlace, porque no contiene
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,
guardado en la carpeta de cargas de pub, está
Veremos nuestro backend muy pronto, pero veamos los datos
Ahora las imágenes con esto tendrán una
Continúe, cárguelo y veremos si las imágenes
Está bien, entonces continuaremos y las cargaremos.
uh, se están cargando lentamente, pero todas estas son imágenes
gracias por quedarte conmigo y has hecho un gran
Aprendimos muchas cosas y trabajamos mucho.
Ahora las imágenes
A continuación podemos seguir adelante y cambiar el nombre también
Así que aquí este está codificado, así
Lo siento, producto popular, nombre del punto,
Bueno, creo que debemos decirle al compilador que el nombre
Perfecto, ahora estamos hablando con el servidor. Hermoso,
Bueno, antes de seguir adelante y hacer algo más,
La primera vez puede que se cargue lentamente, ahora mi servidor
lento, es posible que se cargue lentamente, por lo que desea cargar el
Para trabajar con este ícono de carga, primero
Vamos a encontrar nuestro controlador. Con suerte, este
Abriré la carpeta y aquí tengo este controlador
y aquí necesitamos configurar un booleano, está
Lo diremos como si el toro estuviera cargado, está
Por supuesto, esta es una variable privada y ahora
y eso también sería un toro y
lo llamaremos está cargado Bien, ahora queremos crear un get
Entonces, cuando uses get, podrás acceder
y aquí queremos cargarlo, está bien, así que ahora
uno y cualquier cambio que hagamos en este,
y luego podremos usar este afuera y luego podremos
Bien, aquí cuando tengamos un código de estado de
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í
Podemos hacer incluso cosas mucho más avanzadas,
Cíñete a este y después de eso tenemos que ir al
Y aquí tenemos esta sección, uh, generador de vista de lista
Así que aquí, para el primero, tenemos que
convertirnos en constructor ahora.
Dentro de este, en realidad tenemos un contenedor, así
esta sección, así que primero cortaré esta
productos y recuerde que acabamos
si se carga verdadero, entonces haré algo; de lo contrario,
quieres hacer algo aquí esta parte es si es
Así que aquí mostraré el contenedor, si está
cargado, es verdadero. Está bien, parece que lo corté pero no
Lo cortaré desde aquí, está bien y
El producto está cargado si es cierto, entonces
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
Bien, una vez más, esto se llama operador ternario. Se necesita
entonces esta parte se ejecuta si es falsa entonces esta
un contenedor como este para que podamos dibujar algo así
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
Sí, entonces viste ese ícono de carga.
Está bien, y por
cambiar algo aquí uh, esta sección está funcionando muy
Cargue nuestros productos aquí, lo cual
Creo que seguiría adelante y cambiaría la palabra,
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,
Ahora, aquí hay un contenedor que muestra este
y dentro del listviewbuilder tenemos esta sección
Ahora, para los alimentos recomendados, vamos a
Así que aquí crearemos el controlador Dot Dart del
sección también necesitamos crear un repositorio porque
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
Cerrada Creo que la sección de modelos podemos cerrar ahora.
Este
podrías hacer, puedes seguir adelante y copiar
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
Entonces la primera parte se está cambiando en todas partes.
Por supuesto, es una lista de productos recomendados con letra minúscula
porque no necesitamos reescribir todo
Creo que debería ser un poco más ligero, déjame
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.
El modelo y otra información siguen siendo los mismos y
llámalo recomendado obtener lista de productos reparados
para cambiar porque nuestro contenedor debería tener un método
Ahora nos mostrará un error.
Bueno, aún no
y crear uno ahora si venimos aquí necesitamos
Así que lo pondremos aquí y en lugar de popular
Ahora copiaré este y lo pondré aquí también y aquí
hombres muertos, está bien y todo lo demás sigue igual
Se recomienda que ya tengamos un uri para este porque solo
Ahora el repositorio de productos cerrará
Controlador recomendado, veamos, necesitamos importar
Muy bien, estos dos controladores se ven iguales
Ah, entonces tenemos estos dos sorteos listos y, por
Necesitamos cargarlos como dependencias en nuestro archivo
cargado aquí, está bien, así que vamos a seguir adelante
Lo pondré allí y haré un ligero cambio
en el nombre.
Aquí lo recomendamos. Vale, está bien, por lo que se recomienda este repositorio
y aquí tenemos que pasar recomendado Muy bien, ahora continuaremos e importaremos. Parece
veamos el repositorio de productos recomendados, pero está
bien, lo estoy haciendo. Tengo un tipo aquí. Ahora podemos seguir adelante e importarlo
Está bien, sigamos adelante e importémoslo. Está
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
Acabo de cambiar el nombre, así que de todos modos copiaré
pop puro controlador de producto bien
y aquí debería ser popular Bien, ahora continuaremos y reiniciaremos la aplicación
Al igual que antes, trabajamos con el controlador
carga los datos y los coloca en una lista, por lo que para
pero ahora aquí hay una cosa, aunque aquí tenemos
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á
este si funciona en cartero o no Voy a poner a mi cartero y después de eso
cartero primero, muchos de ustedes no tienen acceso
Pronto te abriré la parte trasera y tendrás una
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
Ahora presionaré el botón Enviar y parece que sí, tenemos
está obteniendo información diferente a la popular,
tamaño de 6 y tipo de identificación 2, pero aquí vemos el tipo de identificación
simplemente haz popular una vez más y veremos que
Eso significa que nuestro punto final está funcionando bien
Eso también debería funcionar en tu aplicación.
y este es el creador de vistas de lista, así
terminemos con esto y obtengamos el generador de vistas. Está bien, eso es
Aquí debemos mencionar el
En nuestro caso, este es el controlador de producto recomendado.
Bien, ahora aquí crearemos una instancia
y la llamaremos recomendada. producto ahora aquí presionaremos el botón
listviewbuilder está bien, pero antes de seguir adelante
Así, deberíamos tener este icono de carga correctamente,
cambiar cualquier cosa en este controlador así que exactamente
El producto recomendado se carga, si es verdadero, mostraremos
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
punto y coma, bien, ahora continuaremos e iniciaremos
cómo funciona como ves todavía se está cargando aquí
La carga está tardando demasiado. Puede que haya
Lista de productos aquí, tenemos algunos problemas. 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
aquí en nuestra función principal porque no los estoy cargando
No los llamaré para que lo carguen, está bien, así
Estamos llamando a este método para cargar todos los
Podemos mostrarlos correctamente, pero aquí no llamé al
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
No actualizamos estas páginas. Bueno, verás que el
cuerpo de la página de comida ahora aquí hay lugares donde podemos
Definitivamente, esta es la imagen del recurso que necesitamos
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í
entonces en nuestro caso la instancia
es un producto recomendado Así que aquí nuestra instancia es un producto recomendado,
Está bien, está bien y veamos un producto recomendado
Todos déjenme ampliar la pantalla y déjenme
ahora veamos que el producto recomendado está aquí ahora
de nuestro controlador, está bien, ahora usando el controlador
y busque la lista entonces, ¿cuál es la lista? Esta es la
por índice, está bien, entonces, ¿cuál es nuestro índice ahora
del generador de vistas de lista, así que aquí es de donde
Entonces aquí hacemos un índice y ahora a partir de ese índice
modelo, ahora podemos seguir adelante y acceder a img.
Está
para cambiar la longitud, está bien, así que ya no debería
obtendremos la longitud del punto de la lista de productos recomendados.
iría de cero a cuatro y debido a que la vista de lista
puedes acceder aquí y hay información
Una vez hecho esto, debemos venir aquí en las restricciones
eso es porque aquí no queremos codificarlo
lugares, así que queremos declararlo aquí, así
que aquí hacemos carga estática constante. URL bien, ahora aquí solo cargamos,
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
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,
Por eso no puede leer la ruta de la imagen o para esa
Dentro de este pondré una barra, está bien, ahora continuaré
las imágenes, bien, veamos, sí, estas son las imágenes
Todas las imágenes nuevas que obtuvimos del servidor están
Ahora el nombre es correcto, así que queremos ocuparnos
ven a la sección de aquí, como ves, esta
aquí hacemos esto hacemos una lista de puntos recomendados
índice ahora aquí tienes el nombre, creo que está bien, ahora
para decirle que no es nulo, por supuesto, lo pones solo
ahora reiniciemos como ves, tenemos
Y eso es hermoso, hemos hecho un gran trabajo hasta ahora
¿Está bien esta advertencia? La próxima vez veremos cómo
Bueno, ahora seguiremos adelante y analizaremos este problema
La operación tiene la cual incluir excluye nulo, mientras
este es el significado, está bien, este es un operador
así que haré clic en esto y esto en realidad
la novena palabra o novena letra, así que esta es de
es el operando de nulo superior aleatorio nulo nuestra operación
y que excluye nulo ahora cuando usamos este
o la variable no puede ser nula.
Bueno, aquí no necesitamos
ser una matriz vacía o una lista vacía, diría que está
no apunta a ninguna parte de la memoria,
ya está vacío, entonces aquí ya dijimos que
Esto es solo una vez más si no estás seguro de
pero estás bastante seguro de que viene de otro
En esa situación se utiliza este operador bang, por lo que simplemente
y reiniciamos nuestra aplicación y con suerte veremos que el error
Muy bien y hasta ahora hemos recorrido un largo camino. En la
vaya a una nueva página y para esa crearemos nuestra clase
mantén tu proyecto y aprenderás cuando hagas un proyecto
Bueno, antes de seguir adelante y trabajar en la clase de rutas,
funciona en flutter get x bueno, así que para este entendamos
Quiero ir a la sección de detalles de alimentos populares
para ir a la sección de detalles de alimentos recomendados,
No se puede hacer clic en absoluto.
Bien, podríamos hacer
y busque el cuerpo de nuestra página
y por ahora cerraré otros, no los necesitamos ahora,
Cerraré este controlador de restricciones, está bien, y las dependencias
y también necesitamos que nos recomienden para obtener detalles, está bien,
no el repositorio que queremos, la interfaz de usuario. Está bien, ahora desde aquí, una vez que hagamos
Ahora busquemos dónde podemos hacer clic en él, por lo que esta es la página
cuál es este de aquí está bien, déjame ampliar
ahora este es el generador de obtención de alimentos recomendados
Ahora aquí este es el creador de páginas, y en lugar
De hecho, puedo hacer que se pueda hacer clic en él, ¿vale? Porque
cantidad de pantalla, está bien, entonces este es el lugar
En otro lugar está bien, así que lo que haré será uh
opción enter, me pedirá que ajuste un widget
Lo llamaré detector de gestos, y dentro de él usaré
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
Está bien, puedes usar cualquiera de ellos, así que aquí, si
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
ellos sí, me tomó una nueva página está bien,
pero no podemos regresar bien porque en realidad primero
aquí y sé que aquí tenemos este botón
al igual que antes, tenemos que hacer que se pueda hacer clic
Aquí y el primer ícono, este está bien, al igual que antes,
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,
hecho, veamos la página principal de comida. Creo que esta es
Así que lo reiniciaré y haré clic en esto. Ok,
haga clic en esto, me lleva a este, por supuesto, la información
y lo mismo por aquí pero por aquí si
No registramos ningún evento ontap, solo lo hicimos
y está bien para aplicaciones como la lista de tareas pendientes, pero aquí
De hecho, estamos intentando crear una aplicación del mundo
escribes manualmente el nombre de tu página, pero
y es por eso que organizaremos todas nuestras rutas en un
enfoque, pero seguiremos usando el paquete x, pero
para ayudar con nuestras rutas está bien porque queremos
por ejemplo, trabajando en los datos, procesamos algunos datos y
podría ser un problema y otra cosa es que quieras mantener
esa es la mejor manera de hacerlo y desde la interfaz de usuario simplemente
inserte nuestra carpeta lib, crearemos una nueva carpeta
Crearé un nuevo archivo y lo llamaremos route helper
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,
Mantendremos toda nuestra lógica de ruta ahora, porque
y uh el tipo de transmisión y aquí lo llamaremos uh inicial,
Bien, aquí es donde queremos ir ahora, de hecho,
esta ruta inicial y para usarla necesitamos hacer algunos cambios
Bueno, creo que eliminaré este por ahora, no
Ahora aquí tendremos una sección que se llama ruta inicial.
inicial del punto auxiliar, está bien, entonces con
obtenga este ahora, reiniciemos nuestra aplicación
Sí, está funcionando porque cargó bien nuestra página
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
Se necesitan páginas aquí, como puedes
detalle de comida recomendada popular para detalles
Ahora, como vi antes, se necesita una lista de páginas. Está bien,
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á
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 aquí este toma una lista de páginas
Bien, ahora para eso necesitamos crear o llamar
obtener página, está bien, esta toma el nombre y tu página,
o diría más como un constructor, como ves, tiene
las rutas y dónde ir, así que podemos usar
Tienes aquí como ves la ruta inicial como una
barra por aquí está bien y por aquí podemos menciona el nombre, vale, ¿cuál es el nombre? En nuestro
Sí, ahora con esto, todo lo que tenemos que hacer, veamos, oh,
Ahora con esto todo lo que necesitas hacer es venir aquí y
ahora aquí tienes las rutas de puntos de ayuda de ruta porque
Seguiré adelante y lo reiniciaré.
Está bien y todavía funciona,
pero nuestra ruta inicial ha sido definida usando
lo que sucede está bien, parece que todavía funciona
y lo encuentro y funciona así, está
y puedes navegar a diferentes páginas, ¿vale? pero ahora aquí el problema es ahora uh bueno esto
pero nos encargaremos de eso más adelante. Si
Está bien, porque ahora solo encuentra uno y llega
De todos modos, volveremos a colocar nuestras rutas iniciales.
una página diferente una vez que hacemos clic en esa,
Bueno, cómo hacer eso, primero crearemos una variable estática
cadena constante aquí lo llamamos comida popular y aquí
cadena de nombre de rutas si tienes dos palabras, deberían
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,
Detalle de comida, este está bien, vendríamos aquí. bien ahora veamos Oh, me falta el argumento aquí
Bien, ahora la flecha debería desaparecer.
Ahora el problema
Está bien, porque esta es una cadena. Entonces, lo
y ponlo aquí, está bien, esto se refiere a ese
Desde los lugares donde estoy intentando
Vale, este encontraría este aquí
Bien, sigamos adelante y probémoslo. Ahora estamos en la página
entonces en lugar de usar este usaremos get dot
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á
Esto funciona, así que parece que esto funciona, uh, cómo
Entonces, debido a que esta es una función de flecha, en
una función anónima aquí y devolver esta
Yo diría que se llama comida popular,
y recuerda, haré clic en esto y veo que funciona,
y por supuesto hay un registro de ruta para ello
eso está funcionando bien, pero ahora mantiene las cosas simples
uh, déjame decirte ahora si quiero pasar el parámetro
Esto es un poco difícil, vale, ahora dónde pasar
Entonces, lo que haremos, vendremos aquí, vendremos
uh estático y aquí tendríamos un tipo que es
conseguir pop paw popular está bien y sería una función
la cadena tiene una variable dentro de la variable es
entonces tenemos el tipo aquí cadena y esta variable
esto no cambia y está bien ahora con
porque ahora en lugar de llamar a este directamente
Entonces, cuando lo llamo, puedo pasar el parámetro dentro
ellos aquí como un parámetro como lo hago ahora
aquí puedo recibir esos parámetros Puedo procesarlos y puedo hacer una verificación
a esta ruta o a un tipo diferente de ruta, este es el
Ahora, para demostrar que esto funciona también, seguiremos
Vale, recuerda que cuando llames a este encontrará
Ya lo tengo y verás que tiene un enrutador definido,
y luego, si pasa algún parámetro dentro de
Te mostraré cómo tomar los parámetros y trabajar
esta vez llegaremos al cuerpo de nuestra página de imágenes,
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,
uh eso es porque cuando vas a una nueva página Necesito mostrar una nueva imagen y la nueva información,
Vale, y antes de continuar y hacer eso, déjame cambiar
Ahora aquí verás que si pasas el cursor sobre
Ahora seguiremos adelante y los usaremos correctamente
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.
Muy bien, cada vez que entras a una página nueva,
Ahora aquí también hay otras propiedades que puedes usar
Los usé de izquierda a derecha, está bien, voy a usar
Haré clic aquí.
Bueno, en realidad no se veía muy
El viejo se desvaneció y estamos bien. Ahora
La comida popular haría lo mismo para nuestra ruta inicial,
cadena estática obtener inicial inicial creo que
Creo que solo tendremos este y
todo está bien y por aquí. Oh, lo siento, no. Este tendrá algo. Esto se refiere
y aquí usaremos uh inicial, está bien, entonces cuando llames
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
así que no te preocupes porque pasaremos
nosotros de todos modos, así que ahora seguiremos adelante y
Bien, ahora continuaremos rápidamente y replicaremos este
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
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.
escribiendo la clase correcta para que se recomiende
en realidad no necesitamos el mismo aquí
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, eso se debe a que no conectamos nuestra
Bueno, antes hicimos esto para el control de productos recomendados
ahora este, que antes lo hicimos para la comida popular, ahora
ahora aquí tenemos este contenedor y este contenedor
y veamos ahora dentro de esto tengo este otro
Entonces este es un constructor de vistas de lista, así que sí,
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
ui aquí y no funciona, funciona, pero tienes
A continuación veremos cómo seguir adelante
Para resolver este problema tenemos que venir
Bueno, esto proviene del menú posterior. Bueno, ahora esta
Bien, entonces ven aquí y si vienes
astilla superior y si pasas el cursor sobre él
automáticamente implica que esto es lo que causa el problema,
botón por tu cuenta, pero podemos desactivarlo, así que
Está bien, ahora iremos allí y parece que está funcionando.
Todavía no tenemos este botón de cancelar aquí, vectores, así
Haré un detector de gestos y luego tendrá un evento
nuestra ruta de obtención y luego aquí tendremos
Ahora funcionará y necesitamos poner una coma
cosas así están bien, pero antes de que necesitemos importar
Bien, ahora vendremos aquí y necesitamos llegar al
Ahora, por supuesto, también necesitamos importar este.
Aquí
regrese a la página inicial que es nuestra página principal,
la página principal, después de esto, ahora continuaremos y
ruta y llámala, bueno, para eso primero vendríamos
y por aquí tenemos veamos qué tenemos
comida no popular y por aquí vemos
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
un buen lugar. Lo que haría, simplemente copiaría
y luego eliminaré aquí y eliminaré
volverá a su estado original. Vale, sí, está
Entonces, para trabajar con esto, vendría
Ahora pasaré a esta función y esta función
Así que aquí, este contenedor está bien, en realidad
y luego lo envolveré alrededor de un widget y el
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.
cambia bien, primero tenemos que obtener cierta identificación y, en
Cada lista tiene una identificación en la lista misma
Así que podemos acceder a ese ahora. Recuerda que cuando pasas
Bueno, por ahora solo obtendremos el índice e iremos
En realidad, simplemente pasaré el índice. Está bien,
agreguemos este parámetro posicional ahora
Entonces esta es la función aquí, así que aquí necesito
solo ID de página, no ID de producto, producto, es bastante
están pasando aquí la identificación de la página ahora
aquí y esta ruta luego viene aquí para que
a este de aquí bueno para hacer eso todo lo que tenemos
programación web ruta de programación web, pasas
nombre del parámetro está bien, aquí solo nombraré
y después de eso etiquetaré lo que sea que se haya dado, está bien,
Bien, ahora el ID de esta página es este porque ahora es
una cadena necesita usar signos de dólar, por eso
este es el parámetro que queremos recuperar y sería un
a esta esta variable está bien o este parámetro ahora
Está bien, ahora lo atraparemos
y pasaremos a él.
De bueno a bueno, simplemente podríamos hacer cosas
Obtuviste desde allí, así que estamos pasando nuestra variable
para obtener ese, obtienes los parámetros de punto de este
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
Y eso es lo que tenemos que hacer. Bueno, déjame explicarte
desde aquí desde aquí estamos pasando un
lista índice de lista y lo llamamos ID de
y debido a que es una función, puedo obtenerla aquí
la función del cuerpo y dentro del cuerpo,
desde aquí lo tomo aquí en esta variable
usando esta función auxiliar especial que
toma una cadena y la pasamos y luego la enviamos a nuestra
Pidiéndote que sigas adelante y agregues este, entonces,
Aquí crearé una variable y será de tipo
Vale, ahora se requiere el ID de esta página.
Debes enviarlo,
Muy bien, ahora veamos qué más creo que debemos eliminar
Ahora aquí tenemos esta ID de página. ¿Cuál es el
Bueno, ahora tengo el valor del índice correcto, por lo que
desde este lugar ahora mismo, así que ahora podemos tomarlo,
luego usamos este índice, cierto índice y luego podemos
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
Necesitamos obtener acceso a la lista,
este está bien, recuerda uh no, no quiero abrir
controlador, así que recuerde que hay una lista,
tiene acceso a esto y esto viene desde aquí, ya
a este, así que para ese creo que está bien aquí, primero
obtenga dot find y luego mencione su controlador, nombre el
es popular para el controlador de alimentos popular,
muchos controladores y así es como vas y encuentras un
una determinada propiedad, por lo que las propiedades de esta lista
puedo acceder a los elementos internos, así que aquí simplemente pasaré
Ahora, si lo hice bien, esto me da una instancia de esta
Instancia del modelo de producto.
Ahora, según
modelo cierto modelo de producto está bien, así que
Yo diría que imprimir la identificación de la página. Haré la identificación
nuestro nombre de producto se debe a que se trata de una instancia de
el modelo para poder tener acceso a sus diferentes
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 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
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.
la identificación de la página y el nombre del producto, este sería
Como se esperaba, haré clic aquí y el ID de la página es
Bien, esto es exactamente lo que teníamos aquí.
y luego vería, intentaré ver el índice y este nombre,
2 y este es exactamente el que teníamos al principio ahora
Podría venir aquí.
Lo comentaré ahora mismo. No necesitamos
Comience a cambiar estos nombres, así que esto estaba codificado correctamente,
Está bien, así que asegúrese de decirle al compilador
Ahora recuerda que este es el texto largo, así que no queremos
elimínelo y pondremos lo que hayamos obtenido, así que aquí
También necesitamos el operador bang una vez más uh
imagen sigamos adelante y veamos la imagen. La
imagen de fondo ahora aquí tenemos una imagen de activo, así
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á
Y con suerte funcionará esta vez y vendremos aquí
es hermoso, verdad, y ya está funcionando. Si hago
una introducción diferente, está bien, y ¿qué
imagen y este texto y esto es exactamente lo que queríamos,
recorrido un largo camino, es bastante hermoso, ¿no está
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
Bien, ahora esta cadena sería una variable.
Aqui Bueno, para hacer eso primero tendremos el signo de dólar
Accederemos al precio del producto y diremos que no
operador sí porque ya estamos usando esta
una variable bien en flutter o en dart en realidad si
deberías usar este también y lo siento, uh, estos
reinícialo ahora veremos si el precio cambia
ahora haga clic en este precio es 2153 eso
y revisaremos este aquí y hacemos clic en esto y vemos
El precio funciona y todo lo demás funciona aquí
Quizás te preguntes por qué tengo estas llaves y este signo
en el asistente de ruta si tiene una variable y si la variable
comillas simples o dobles para esa variable
palabra que se llama uh en este signo de dólar, está
uh, veamos cuál es aquí parte de un objeto, entonces también
esta inicial no es parte de un objeto porque esta inicial
comida popular es solo una cuerda, por lo que no
un objeto correctamente, por lo que si desea obtener una
Además de este signo de dólar, está bien, con suerte, tiene
En este está bien porque ahora mismo todos muestran
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
Así que también usaremos el mismo índice para
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
Bien, ahora arrojará un error, así
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
entonces tomaremos este parámetro en la URL. y lo llamaremos ID de página después de eso porque es
también tenemos este ahora tenemos que encontrarlo en la
aquí vendría aquí y así simplemente
y lo pondré aquí y luego lo pasaré y
Está bien, ahora arrojará un error,
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
Bueno, creo que estamos bien, pero antes no teníamos
puedes usar final si quieres y luego tienes que usar
Ahora estamos aquí y después de eso encontraremos
variable el nombre de la variable es producto, puedes
busque bien y luego encontraremos el controlador,
uh, comando raro, controlador de producto muerto, está
lista de productos recomendados porque esta es una lista, tenemos que
Entonces esto nos dará el número de página del índice. Bien,
instancia y ahora bajaremos aquí y comenzaremos
Haremos aquí la imagen de la red de puntos, está bien
es la ruta completa para este, necesitamos importar la
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
aquí hijo y luego este es el widget que quiero usar y
quiere tomar una descripción, eso es lo que hará
Creo que también necesitamos cambiar el precio
aquí tendré el signo de dólar y luego
una propiedad de un objeto y hacemos el precio punto del
y aquí en realidad podemos eliminar este
y uh, además de este por ahora, está bien, todas estas son cadenas,
y veremos cómo va ahora comencemos desde este
etiquetas esto es lo que tenemos y el precio ahora vendremos
Un poco de texto y este es el precio del producto.
Vemos el precio del producto y este texto es prácticamente
cambiado así que sigamos adelante y cambiemos
veamos donde esta tenemos la descripción tenemos el carrito de compras, así que esta es la aplicación
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,
El nombre del punto es un operador bang
Está bien, ahora reiniciémoslo.
Déjame hacer clic en este.
Tenemos un texto muy corto y aquí el texto es
y es como esperábamos antes de que trabajamos bien,
Vale, todavía no estamos listos para ir a comprobar
y hacer algunas cosas más antes de continuar y verificar
tutorial veremos cómo trabajar en este botón y agregar
Eso es lo que queremos hacer en esta sección: aprenderemos los conceptos
carrito antes de continuar y aprender esta sección, primero
Bueno, anteriormente aprendimos la arquitectura de nuestra aplicación
método init y luego cargaremos las dependencias y, en
repositorios y controladores y así es como
funciona bien y, en base a eso, más adelante aprendimos cómo
Jason cómo codificar y decodificar json anidado y también
Seguiremos adelante y echaremos un vistazo a los conceptos básicos
En general, tendremos una interfaz de usuario y la interfaz de usuario interactuará
interactuaría con el controlador del carrito y el controlador de
cómo ocurre la interacción aquí, así que en tu interfaz
entonces tendremos una instancia de producto y usaremos esa instancia
los campos de propiedades y métodos de nuestro controlador
controlador de tarjeta para que pueda tener una instancia de controlador
Podrías llamar a la información del controlador del
La interfaz de usuario también obtendría una instancia del controlador
Esto sucederá a través del controlador de producto.
Por
llamaríamos al controlador del carrito desde aquí llamaremos
y luego el controlador de producto seguirá adelante y llamará
Al usar una instancia de controlador de tarjeta dentro del
Almacenamiento local desde el controlador del carrito. Un controlador
Entonces, si voy a obtener información del almacenamiento local,
la instancia de almacenamiento local está bien, así es como funciona
Realmente no seguirías adelante y llamarías a los métodos o campos del controlador
Lo haces a través del controlador de producto, está bien y si el
desde el almacenamiento local no interactuará directamente
controlador de tarjeta y de esta manera nuestras lógicas
se vuelve más limpio ahora, después de aprender esto, seguiremos
mucho después de tener los conocimientos básicos del producto
modelo y modelo de carrito, ahora sabemos cómo seguir adelante y
controlador de producto y lo abriremos aquí Este es nuestro popular controlador de productos
justo debajo de este método, así que lo colapsaré.
anular el tipo es el tipo de retorno es nulo y llamaré
Bueno, en general, se necesitará
un tazón y un incremento.
Ahora, como vimos anteriormente en
Necesitamos pasarle un valor booleano para
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
vamos a aumentar el elemento en función de este clic falso significa
en esto, haga clic en Aceptar, por eso necesitamos hacer
incrementa muy bien, si es cierto, veamos que me falta
algo está bien, de lo contrario disminuirá está bien,
uh, cantidad correcta, por lo que desea aumentar
Por esta razón, primero aquí necesitamos establecer
Bueno, en general, cuando lo inicialicemos,
por aquí uh, vamos a establecer este valor, bien, ahora
Podría hacer una cantidad llamada cualquiera que sea la cantidad
y cero más uno es uno, así que cuando llamamos a este
aquí para que se llame y si el valor se ha pasado
categoría, por lo que inicialmente la cantidad es cero, por lo
ahora uno más uno es igual a, por lo que si haces un tercer
tres, entonces la cantidad total es tres, así que esta
y cópialo y ponlo aquí ahora esta vez en lugar
Muy bien, con esto, en realidad esta es la función
cantidad en el artículo del carrito, por este motivo, seguiremos adelante
Seguiremos adelante y encontraremos nuestros detalles de comida popular
De todos modos, volveré a nuestra página
y aquí tenemos este uh, veamos, hay un
contenedor inferior y dentro de él tenemos este ícono, bien, ahora este ícono, este
primero continuaremos y lo verificaremos con el ícono que
envuélvelo alrededor del widget, lo siento Entonces, si estás en Mac, lo seleccionarás
opción para el widget, está bien, ahora lo seleccionaremos
Bien, ahora ingresaré y presionaré Intro.
Iremos
Tendremos un evento on tap, bien, así que aquí lo
evento queremos llamar a este método el que acabamos
Bueno, para poder llamar a un determinado método desde
Esto está bien, ahora generalmente podemos seguir adelante
podemos crear la instancia y así es como continuaremos
y envuélvalo alrededor de get builder
y aquí llamaré a get builder y se necesita producto
popular controlador de producto popular controlador de producto y luego
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,
Entonces, para que puedas ver ahora aquí, regresaremos
ahora con esto creamos una instancia de este controlador, está
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
Establecer cantidad creo que esto está bien ahora, por
este en realidad quiere pasar un valor booleano como un verdadero
Ahora, una vez más, si seguimos adelante e intentamos registrarlo
por aquí, está bien, diremos incremento, está bien,
Puedo hacer clic en esto y veo que dice incrementar.
Está
aumentar el resultado en función de esto, pero en este momento
Por esta razón, bueno, ¿cómo hacerlo aquí? En
entonces, ¿cómo podemos hacerlo bien para este?
En realidad, necesitamos poder acceder Esta en nuestra interfaz de usuario está
Bien, entonces seguiremos adelante y crearemos un captador público
Al igual que antes, usted sugiere obtener cantidad
y él obtendrá la cantidad para nosotros. Está bien, ahora hay otra forma de
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
Este está bien, se llama función de flecha.
La función
por eso se llama función de flecha o algo que
Bien, entonces en la función de flecha solo devolvemos una línea,
Así que ahora cerraré este, no necesitamos
y aquí ahora este es el lugar uh veamos este
valor está bien, ahora aquí podemos obtener acceso a
para llamarlo así hacemos popular producto popular cantidad
Está bien, ahora sigamos adelante y guárdelo.
Está
veamos, creo que eliminé este registro aquí, así que
Bien, ahora reiniciémoslo. Ahora tenemos
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
aunque se está incrementando, el estado del estado
Necesitamos decirle a nuestra interfaz de usuario que sepa
para su actualización, actualice una función incorporada para obtener
simplemente continúe, llámelo y podrá saber
Bueno, entonces vuelve a dibujar la interfaz de usuario. Aquí verás
Bien, ahora con esto ya podemos interactuar
que ahora vamos a seguir adelante y hacer lo contrario ahora
Bien, para esta una vez más, esta sección, de
y lo ponemos allí y creo que necesitamos una
ahora aquí en lugar de verdadero hacemos falso ahora si
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
hacer menos, está bien, ahora hagamos menos como dices es 17 18
y también puedes aumentarlo.
Es hermoso, así que
en realidad y aquí ahora este es el problema, se
Bien, antes de seguir adelante, aumentar y disminuir,
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
Verifique la cantidad y la cantidad vendría de
desde aquí y pasaremos este valor aquí para
Está bien, ahora queremos devolver algo. Está
Comprobaremos si es inferior a cero o superior
Entonces, lo que sea que sea, regresará, así que primero
haz uno o dos menos que cero si es menor que cero aquí lo
Ahora bien, si la cantidad cuantitativa es mayor que
devuelve 20.
Está bien, este es un número aleatorio.
20 pedidos de una persona, está bien, quieres aceptar,
según sus necesidades, puede hacer cualquier cosa, pero en realidad
eso debería aumentar mucho la complejidad
Así que por ahora lo configuraré en un número aleatorio
También podrías tomarlo desde el servidor,
ese, así que lo mantendré un poco codificado, pero
según sus necesidades, está bien, entonces si es menor que
de lo contrario, devolveremos el número que sea, así
Una cosa que debes saber es que esta cantidad es
Entonces esta variable en el alcance global, esto está en el alcance
el alcance local tiene prioridad sobre el alcance global, así
ahora esto esto aquí todas estas condiciones están
por qué necesito poner fin aquí está bien ahora como
llama a esta función desde aquí, está bien, entonces la pondré
Copia este y lo pondré aquí también en
Ahora continuaremos y lo guardaremos bien y veamos que
Disminuye más y veremos qué pasa. menos uno cero ahora ya no disminuye, está
desde aquí está bien porque es menos, verifica
entonces la cantidad es cero, no puede ser menos ahora hagamos
20 o no, no, no puedes, como ves, si hago
ese es el único número que obtenemos el número más alto,
Bien, también debemos decirle a nuestro usuario que
Bueno, podemos hacerlo fácilmente aquí si realmente
podemos enviar un mensaje al usuario y eso es bastante fácil con
función get.snack está bien porque recuerda que este es un controlador
todo lo que se necesita es un título y el nombre de nuestro
No puedes reutilizar más, sí, ese es el mensaje,
y estilo en esto, así que aquí podemos establecer un
Los colores de la aplicación aparecen bien ahora.
Creo que primero debemos
propiedades estáticas y usarías el color principal, por lo
texto para el color del texto hacemos colores
me falta una coma ahora el error debería ser también
Bien, ahora esto es para si es menor que cero, si es más
Ahora haremos lo mismo, sí, así que ahora sigamos adelante,
guardémoslo y verifiquemos el resultado. Bueno, después de guardarlo, intentemos
No puedes agregar más, está bien, ahora vamos
a disminuirlo y veremos el resultado. No puedes reducir más. Vale, el mensaje ya
y agrega uno más ahora vendremos aquí ahora regresaremos
Ahora, si vengo aquí, todavía está aquí, pero
así que todo lo que abras más adelante seguirá ahí.
estado es que estamos tratando con un controlador de producto
cual es la cantidad, está bien, entonces este campo es global para
permanece en la memoria, está bien, no es un alcance local, permanece
abres, todavía está allí, vale, definitivamente, esto
después de agregar tres, pero se convierte en siete, así
y esto no es lo que queremos, está bien, pero esta lógica
pero necesitamos agregar otra función para que cada vez que abramos
Necesitamos inicializar algunos datos y verificar los
Aquí estas dos funciones verifican la cantidad y establecen la
Bien, ahora este es el problema de arquitectura del que
nueva función y esa función será responsable de verificar
Muy bien, entonces para esa función crearemos una
queremos devolver cualquier cosa, simplemente verificamos las
Está bien, ahora lo llamaré datos de inicio.
Está bien,
Bien, ahora esto tendrá un modelo de producto. Bueno, creo
todo lo que tenemos que hacer es llamarlo desde algún
La cantidad actual, esta que está en el alcance global,
En este lo pondremos a cero y eso es todo lo que hacemos por
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
Está bien, entonces eliminaré
Vale, aquí simplemente llamaré a get.find. Vale,
sí, get dot find popular popular. controlador de producto, este está bien,
producto, está bien, llamaremos a este. Necesito hacer la
inicialización. Ahora sigamos adelante, guárdelo y Ahora venimos aquí, abrimos esto, podemos agregarle
Las lógicas no cambian, siguen igual. Ahora
La nueva página ahora se establece en cero, pero en la nueva página
temprano, está bien, pero con este enfoque, el problema
Ahora, ese es un problema. Necesitamos superar este problema.
Necesito hacer más cosas en este controlador y en este
Si te gusta, quiero decir, si te gusta el producto, lo editas
agregas a esta tarjeta tienes que guardar los datos.
Está bien,
Está bien, y más adelante, cualquier cosa que agregues, está bien,
A nivel global, esos datos dicen que, por ejemplo, aquí agregaste
Se agregaron tres elementos y usted confirma aquí, está bien, agreguémoslo,
Aparecerá aquí inmediatamente que agregaste dos
artículos lo siento y se guardará globalmente aquí
aquí e intento trabajar en un nuevo producto y tal
anteriormente tenías un tres tres más
pero al mismo tiempo cuando vuelvo por aquí
Podré ver tres elementos. No se están borrando los datos.
aquí y también necesitamos este, por lo que debemos introducir
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
cero al principio y luego también podemos obtenerlo.
y obtenga artículos difíciles, está bien aquí y
establezca la cantidad o la cantidad, esta está bien, por
agregado en nuestro carrito, está bien desde diferentes páginas,
solo en este, está bien, entonces sí, eso es lo que queremos,
agregado aquí y esto sería responsable de realizar
Los elementos que se agregan a esta lista están bien ahora,
rol aquí, está bien, cada vez que necesitemos los datos, también
elementos es igual a cero, bueno, se podría decir cuál
Haremos eso y luego haremos una verificación condicional
No, si se guarda, tomaremos esos datos, de acuerdo, para
eso se ha guardado bien y nos aseguramos de que inicialmente
tenemos otra variable donde configuramos nuestro, quiero decir,
a partir de ahí lo tomaremos y lo pondremos aquí y
entonces esto y esto se juntarían, así que aquí hacemos
Está bien, entonces tendremos un sistema de almacenamiento y lo obtendrás del
luego, si estás seguro, tal vez tengas que obtener
tiene ciertos números porque los guardaste.
Una vez que
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á
Tenemos tres pero, por supuesto, tenemos que comprobar si
si existe, obtendremos el elemento, así que aquí tendremos
si existe, obtenga el elemento, por ejemplo, diga que es
luego continúa con lo que estás haciendo, ¿vale?
en el almacenamiento ya tenemos tres, así que tenemos
digamos, por ejemplo, uno, dos, tres, entonces
y tienes tres y luego quieres agregar más
Entonces aquí primero obtendremos estos tres y luego,
entonces esta cantidad establecida esta cantidad
y luego obtendremos la cantidad total aquí, así que
Es complejo en este momento, pero a medida que trabajemos
Bueno, como dije, tenemos que verificar si cierta
se ha guardado bien, así que aquí primero debemos guardar bien
un controlador por eso sería un controlador de tarjeta relacionado
uno, debemos seguir adelante y crear primero crear y un controlador,
controlador de tarjeta, pero antes de seguir adelante y crear un
para el controlador de tarjeta, recuerde que cada controlador
Bueno, en general, como dije antes, los repositorios
o pedir perdón, los envoltorios están dedicados a obtener datos
De todos modos, aquí seguiremos adelante y crearemos un
por ahora lo llamaremos una clase como repositorio
vacío no tendrá nada bien y a medida que crezcamos
Para los controladores de aquí crearemos otro archivo
al que llamaremos controlador de tarjeta.
Punto punto entonces en toda nuestra aplicación solo tendremos
y se ocupará de todo lo demás, está bien con
Ya sea que sea popular o recomendado, aquí crearemos
y extenderá el controlador get x ahora aquí porque cada controlador toma la relación
En nuestro repositorio de tarjetas de relación nuevamente crearemos una
Bien, ahora necesitamos obtener el archivo. Bien, ahora
ponerlo en nuestro constructor también para el controlador
hardware y con esto ya casi terminamos con la inicialización
hacer otra cosa porque todos los controladores deben
Necesitamos cargar nuestras dependencias y nuestras
dependencias están aquí, ¿vale? Así que aquí cargaré el controlador de la tarjeta Apple.
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
el constructor como te mostré aquí es una clase vacía,
para pasar cualquier parámetro ahora como los demás
y aquí hacemos nuestro controlador ahora, por supuesto,
repositorio, obtenga puntos bien con esto, podrá
Bien, ahora con esto nuestras dependencias están listas para
El rasguño, asegúrate de que todo esté bien.
Nuestras huellas, no las necesitamos ahora.
Creo que
Está bien, está bien, estamos geniales y hay otro
Este también lo eliminaremos, pero lo mantendremos
Veremos que se ha impreso, así que por ahora
producto recomendado, lo cerraré. Bueno, antes dije que si hacemos clic en
Pulsaremos este botón, tocaremos este botón y luego
Ahora esa variable global en realidad es un mapa global, por
vendría del controlador de la tarjeta.
Ahora el controlador
El mapa cada vez que hagamos clic en esto, todo se
Bueno, en general, las claves serían int como la identificación
y se necesitará un modelo, está bien, pero aún no tenemos
datos en general cuando recibes datos del servidor
al servidor basado en ese modelo envías datos ahora aquí
No solo este número, tenemos que guardar el nombre del producto, la cantidad
pero ahora esto es un poco diferente a esto.
Esto
modelo porque en el modelo de producto no tenemos
la palabra cantidad ahora en el controlador de la tarjeta necesitamos
Se ha pedido cuál es el precio total y cuál es la identificación
Por eso tendremos que seguir adelante y crear
modelo, está bien, parte del modelo, pero, por supuesto, este
Bien, crearemos elementos con un nombre variable. Bien, crearé
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
aquí, así que no necesitamos reescribir todo, así que
y luego iré a mi archivo de proyecto aquí
Crearé un nuevo archivo y lo llamaré modelo de
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
modelo de carrito en realidad no queremos guardar ninguna
No queremos guardar ninguna ubicación.
No
Vale, tampoco queremos guardar este, así
que continuaremos y lo 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
pero aquí también necesitamos agregar algunas otras cosas, así que
llámalo cantidad y aquí también tendremos un toro
ya sea que exista o esté en el carrito o no, y luego
Esta vez es como cuando fue creado, ¿vale? así que mantendremos un seguimiento de ese, por
cuántos elementos se han agregado, está bien y existen, lo
agregado en nuestro carrito aquí o no,
aquí ahora aquí tenemos que venir aquí y
y este punto existe, creo que debería existir,
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é
Ok cantidad ahora aquí también deberíamos verificar
que este exista json exista ahora aquí tiempo json está bien, veamos Ahora bien, todo esto es opcional.
Ahora iremos a nuestro controlador
para importarlo, está bien, está bien, entonces
una variable de artículos que se escribe ahora en el
foil agregar elemento ok, ahora este se llamará
Se enfriaría pero, por supuesto, no recibiría llamadas
ser llamado desde el controlador de producto, por lo que en
deberíamos llamar a agregar elemento y desde
el proceso de datos necesario y guárdelo, así que primero
y este método tomaría el modelo de producto como producto
debes pasar la cantidad porque queremos guardarla,
Justo después de eso, una vez que se haya llamado a
Ahora, para guardarlo, no queremos guardar los elementos
Bueno, para ese primero revisaremos aquí los
y luego pondremos si está ausente.
Bien, aquí verás
y tiene un valor que es un tipo de objeto, así que llamo
cualquier tipo de mapa tiene esta función integrada,
todo lo que hace es verificar si esta clave (cierta
No, si no es así, seguirá adelante e insertará ese objeto,
basado en esta clave, si no existe,
Vale, eso es lo que hace ahora. Esta clave, esta
pero tengo que asegurarme de que todo lo que dé sea
porque es por eso que se llama poner si está ausente, vale,
ahora único vendría de este producto objeto recuerde
backend y el backend cada producto tiene su identificación, la identificación
verifique esto para que esta sea la identificación y esta es una identificación
clave en nuestra base de datos, comprobaremos nuestra base de datos
es una clave principal, por lo que no se puede duplicar, por lo que
Habrá nuevas ideas y todas serán únicas.
Bien, entonces
es único y también sabemos que cuando tomas datos
Entonces, al mismo tiempo que hemos guardado esta identificación,
Así que este es nuestro modelo de producto. Recuerde que hay un campo
objeto modelo ya lo guardamos, tal vez no lo hayas
id aquí y lo guardé en este campo, de acuerdo, así como
guardado dentro de él, está bien, por esa razón, ahora qué
a la identificación, la identificación del punto del producto que ve,
tiene un campo que se llama id, está bien, de todos modos,
el argumento en tipo no se puede asignar al tipo
modelo dije que esto es opcional como ves aquí está
Cuando escribes así, estás diciendo: "Habrá un
Estoy seguro de si es opcional o no, porque aquí
adelante y elimínelo también, así que lo haremos.
palabra clave que se llama requerida, está bien,
y luego debería desaparecer, veamos aquí ahora creó una instancia con conocimiento nulo y debe
antes de seguir adelante y usarlo ahora, eso es una gran molestia,
Está bien, pero aquí puedo resolver este problema fácilmente
no puede ser nulo pero necesito decirle al compilador
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
aquí se refiere a este, está bien, entonces debemos darle
modelo de carrito, está bien, eso es lo que le estamos
tenga el punto y coma también y nuestro modelo está bien, ahora,
cuando creas un objeto, se necesitan estas cosas, está
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
y lo guardaremos, pero, por supuesto, el modelo del producto
Lo siento, el modelo del carrito en sí no tiene idea
es una identificación única y esta es la identificación del
procesamiento de datos basado en eso, está bien, ahora aquí
páselo y el nombre también proviene de la identificación
Estoy tomando toda esta información del producto, por
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
modelo, solo puede existir en el carrito o en el controlador del
Así que aquí hacemos la cantidad y guardaremos
Entonces esto se refiere a este y esto se refiere al modelo
Volveré por este, así que simplemente estableceremos
y lo estableceremos como verdadero porque lo estás agregando correctamente,
ahora para este hacemos tiempo ahora aquí
porque el tiempo real es único, tiempo único, identificación única
Por eso simplemente seguiremos adelante y usaremos
Cuando el artículo se agrega al carrito,
pero necesitamos guardarlo como una cadena, porque es un
poder agregar un elemento a nuestro controlador de tarjeta
Para usar esta función en el artículo, todo lo que tenemos que hacer
y dentro de ella crearemos una nueva función y la llamaremos
anular vale agregar artículo ahora este es un modelo de producto
llame a la función que escribimos aquí en el elemento.
controlador de tarjeta desde aquí, está bien, este lo podemos hacer
uh, a este lo llaman desde cada página, por ejemplo,
lo construyes bien cuando creas por primera vez cualquier
Entonces, en realidad, desde aquí podemos pasar un controlador
y haremos el controlador de tarjeta y eso es todo, así que
enviar bien, pero por supuesto este no tiene ningún parámetro
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
está pasando un controlador de tarjeta ahora en nuestra
tener un controlador de tarjeta y una instancia
Desde donde llames al controlador de esta tarjeta podrás
Aquí está bien, entonces, en general, en una aplicación hay un
como agregar y eliminar el total de elementos, cosas así, está
Ahora aquí inicializaremos el controlador de la tarjeta.
sería el tipo de controlador de tarjeta, por lo que el controlador
Lo inicializaremos más tarde. Vale, cuando utilices la variable
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
La instancia está dentro de esta, por lo que podemos llamar
y al mismo tiempo podemos pasar el modelo del producto,
El artículo está bien, este y aquí estamos
Bueno, ahora la cantidad en sí se guarda aquí, pero
entonces desde la interfaz de usuario llamaremos a este e internamente
las funciones son métodos, está bien, así es como se relaciona, por lo
Si no quieres llamar al controlador de tu tarjeta, llamarías controlador
controlador de tarjeta de llamada, está bien, aquí estamos,
función agregar artículo y para poder agregarlo necesitamos
Creo que agregar al carrito debería estar en algún lugar aquí, bien, ahora
En Mac haré la opción Enter y obtendré esta opción
y una vez que haga eso aquí tendré un evento de activación,
agregue el elemento ahora, veamos definitivamente este
tiene una instancia de este controlador, por lo que puedes usar
ven aquí, usaré este simplemente y luego llamaré para agregar
Necesitamos pasar el producto como una instancia.
Bien, ahora ya está, veamos de dónde viene.
Esto viene de aquí porque cuando llegas
cada página tendrá esta instancia que se crea a partir
de nuestra lista de productos, está bien, de todos modos,
Sobre eso y antes de continuar y tocarlos, creo que podemos
Bien, ahora esto está en el propio controlador,
dentro del controlador de la tarjeta, bien aquí, como
En lugar de usar la flecha, en realidad puedo hacer este
uno está bien, todo lo que necesito es hacer una declaración de
mensajes porque quiero imprimir un mensaje aquí,
diría que agregue el artículo al carrito Bien, ahora continuaremos y reiniciaremos nuestra aplicación
elemento aquí está bien y un registro aquí
muestra información que imprimirías aquí nuestra identificación
id bien cualquiera que sea el producto que se le dio
La cantidad del producto está bien, entonces este también
aquí agregue la cantidad a la cadena, está
Veo aquí una vez que hago clic en esto, así que sigamos
cargado todo se ha cargado correctamente ahora
ahora haría clic en esto y ahora son las cuatro, sigamos
Hice clic en esto y decía que agregar artículo al carrito y cuatro,
eso es hermoso y la identificación es una, creo que la identificación
e intente agregar este y, por supuesto, esta vez
es lo que hicimos temprano porque cada vez que llegamos
haga clic en esto, lo agregaré aquí, así que digo
2 también está bien, ahora vendría aquí y ahora
Lo que esperaría es que aquí todavía tenga
porque aún no hemos hecho esa parte pero
agregue información dentro de esto y lo demostraremos
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á
algunos elementos dos elementos porque trabajamos en
Bueno, ahora se almacenan como modelo, así que tenemos
Así que la próxima vez que hagamos clic en esto primero
Para este, en realidad vendría aquí. Es un elemento nuevo.
agregue uno más aquí o tal vez cinco y luego, cuando
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
aquí ahora agregaremos dos elementos y aquí verá
agregado tres veces antes de que se agregara el último
Este es el elemento que agregamos al principio.
ahora aquí acaba de imprimir la longitud es 4, que
Mire por qué, debido a que esta ID de producto,
en este mapa vale porque comprueban si está ausente
Agregué esta identificación para que ya no puedas agregarla directamente,
Sí, pero ahora aquí podríamos simplemente seguir
cantidad de elemento en esta lista está bien, para
y todo ha terminado aquí y ahora lo que haré haré
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
ahora los agregaré, haré clic aquí y vemos que la
Por ahora, comentaré esto y, de hecho,
eso se ha agregado en las tarjetas con su cantidad, bueno,
veamos por dónde podemos empezar.
Parece que tenemos que empezar
como no tenemos otros lugares, simplemente regresaremos,
items es un mapa matemático, así que lo que haremos será crear
le daría una clave y una clave de elemento y un valor. Ahora la
Ahora el valor es un modelo, por lo que podemos acceder al modelo usando
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
sigamos adelante y hagamos clic en este solo para
reiniciarlo y ahora hagamos clic en este Está bien, porque no vamos a agregar
y le agregaremos Así que continuaremos y agregaremos un nuevo elemento, tal
Siete, bien, ahora haremos clic en esto y veremos
Vemos que la identificación de la tarjeta es seis, la cantidad es siete,
desde aquí, pero ahora por aquí, por supuesto, este aún no
uno, el que agregamos, está bien, porque este
en esta lista en esta lista no viste la cantidad siete, pero
este y queremos agregar digamos cinco ahora veremos los
siete, la cantidad anterior, está bien, tres, dos,
porque este registro se imprime primero y luego se agrega
De todos modos, ahora hay otro problema, así que reiniciemos
y hagamos una verificación aquí, así que simplemente haga clic
todavía se ejecuta aquí este elemento agregado, en realidad
el registro y luego viene aquí y agrega el elemento,
No vamos a agregar nada, así que aquí tenemos que hacer una
Entonces, lo que haré, lo dividiré
Está bien, ahora cortaré esta sección.
Está
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
agregue al controlador, está bien, de lo contrario,
y ahora, si voy a este e intento agregarlo, no
Aquí también podemos enviarle un mensaje al usuario
Entonces esta es la condición correcta,
así que aquí podemos dar al menos una mensaje al usuario de que no está agregando nada
mucho mejor, así que en lugar de dar esta condición
Estamos agregando el artículo, así que aquí podemos verificar
si la cantidad es mayor que cero, entonces seguimos
adelante con esta condición, ¿vale? de lo contrario enviamos un mensaje al usuario ahora
el que ya teníamos, así que simplemente copiaremos este
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,
el controlador del carrito realmente ya no necesitamos esta condición,
Volveremos al estado original en el que estábamos
y aquí veremos si funciona o no, bien, así que
Aquí simplemente agregaremos este. Debes agregar
y ahora es un cero, no puedes reducir más. Vale, ahora
o puedes ir y hacer lo habitual, está bien, agregando la identificación
Estamos recurriendo a la condición correcta
Si ya tenemos un elemento, está bien, aquí ahora agregamos
Debido a que el bucle está vacío aquí, quiero decir que estos elementos
se agrega solo después de que se ejecute esta sección,
aquí, si tienes un mapa, puedes verlo usando 4h
obtenga el valor imprima el valor y haga todas las cosas
Entonces, ¿qué haré? Seguiré adelante y eliminaré
Ahora veamos qué pasa. El problema es que agregué
haga clic en él, no pasa nada, incluso si lo reduzco,
Por lo tanto, no puedes hacer nada, por lo que no puedes actualizarlo,
y afortunadamente es bastante fácil actualizar el contenido, así que aquí tenemos
Bien, tenemos una condición bastante similar donde dice que los
Si queremos, si queremos poder usarlo, primero
llamado contiene una clave, está bien, entonces en el elemento,
la clave ya está contenida en este elemento o no está bien;
y si está ahí, haremos otra cosa, así que
eso significa que se agregó temprano, por lo que en ese caso, para
Realice alguna actualización, pero si esta clave no se encuentra allí,
Sí, de todos modos aquí haremos una verificación condicional.
Está
de lo contrario hacemos otra cosa qué otra cosa hacemos
esta es la condición, vamos a poner esta y esta es
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
la clave ya se encuentra en esta lista al insertar
De todos modos, podemos seguir adelante y actualizarlo.
agréguelo, está bien, por eso aquí hacemos actualizaciones
Al igual que en esta condición, también se necesita la
actualización que debe colocar aquí, en nuestro caso, esta es la identificación correcta,
Está bien, pero si en tu caso veamos una vez
se trata como opcional, por lo que dices que está
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
Está bien, entonces se necesita un modelo, una
Así que recuerde cada objeto, cada ID de producto,
Entonces este es ese objeto que también significa que podemos
Así que aquí hacemos algunas cosas interesantes.
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
un modelo y un modelo de carrito en nuestro caso, está
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
y si no hay aplicaciones, esta también
pero con este modelo se agrega a esta lista y
basado en esta identificación, ahora qué identificación desea actualizar,
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
cualquier cantidad que haya, tome esa, así que tenemos
Está bien porque este es el
y luego la nueva cantidad que se ha pasado. Vale, sí,
la cantidad está bien, veamos que había un verificador
Flutter SDK en algunas versiones, es posible que no lo
Comprobador nulo, pero para la versión avanzada, la última,
No será nulo, porque anteriormente en nuestro modelo
pero aquí este tipo de menos en este tipo
necesitan estar seguros de que algunos de los valores no son
Está bien, de todos modos, ahora con todo lo que envíes,
Después de esto, seguiremos adelante e imprimiremos un registro y, para
lugar este no es realmente un buen lugar para imprimir
y aquí tengo este método que se llama
Entonces, justo después de esto, quiero imprimir un registro.
elementos del controlador de esta tarjeta, entonces, lo que podemos
y porque estoy devolviendo un mapa aquí
y este tipo de modelo de carrito ahora aquí obtendría artículos, artículos
campo público, por lo que podríamos usar este para acceder
Por aquí lo revisaríamos y diríamos que usaremos el método
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
reinicie nuestra aplicación y verifique un poco
Este se imprimirá después de agregar el artículo
Ahora aquí agregaremos dos elementos.
Ahora haré clic en esto, veamos.
Bien, ahora la identificación es uno y la cantidad
El segundo producto vendremos aquí y agregaremos
Bien, entonces la identificación es uno y la cantidad es dos.
bien, ahora esto es lo que quiero agregar aquí
ocho correcto, en realidad en total quiero poder ver ocho
correcto para id2, me gustaría decir ocho, pero veamos que
Bien, ahora este ocho se suma con este cinco, por lo
Hay un problema con esta cantidad aquí, entonces, ¿qué
en esto, después de agregar este artículo, debemos poder establecer
valor distinto de cero durante el tiempo de suma antes
La cantidad solo tiene un valor cuando haces clic en este
Está bien, de esta manera no dañará nuestra aplicación ahora,
No podemos agregar nada porque dice que necesitamos agregar
Bueno, antes eran tres, ¿verdad? y luego sumamos para que antes fuera 13, luego
ahora veamos dos más, así que ahora mismo esperaría ver 18,
Para el primero aquí podemos comprobarlo de nuevo.
ahora aquí agregaría otros tres, así que esperaría
dieciocho, así que hagamos clic en esto, eso es
Ahora también hay otros problemas.
No es un
así que sigamos adelante y verifiquemos ahora. Quiero reducir
cero, está bien, entonces ese es un problema, está bien, entonces
cómo resolver este, está bien, antes de decir lo
Se produjo un problema porque agregaste la cantidad es igual
pero necesitamos más variables para trabajar
juntas para que esté en funcionamiento Bueno, ahora hay otra cosa que debemos hacer
justo ahora era 18, agregas 1 y se convierte en 19. Pero
18. No quiero ver el cero correctamente, así que ese
resolver ese otro problema reduciendo porque de alguna
Se vuelve muy fácil trabajar con esta y otras partes
Recuerda desde aquí los detalles de comida popular cuando
Vale, cada página tiene un ID de página, pero el
Ahora, según esa lista, obtenemos este objeto que
Está bien y recordamos que todos los objetos
los grandes tienen una identificación única, así que todo lo
funciona en este controlador de automóvil y debemos
dentro de la identificación, que es esta. De hecho,
Entonces, esta identificación coincide con la identificación aquí,
entonces, dentro del modelo del producto hay una identificación,
La identificación aquí está bien, eso es lo que queremos
Vayamos a nuestro modelo de producto.
Este es nuestro modelo de producto,
esta identificación, ya sea que coincida con esta identificación o no, está
Si simplemente vienes aquí, vendrías aquí y harías
Vale, si no añades nada, lo mostraremos
pero si agregaste algo y regresas la próxima vez,
Muy bien, entonces para este vendríamos aquí a nuestro
controlador aquí crearemos un nuevo método aquí
Tomará un modelo de producto como producto y luego, primero
contiene aquí la identificación del producto si es así, lo que
contiene la clave, eso es muy bueno, en ese caso podemos seguir
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
devolveremos falso, está bien aquí, devolveremos falso ahora
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
ver existe igual falso vale pero ahora
aquí existe igual tarjeta punto existe en el carrito, por lo que le enviaremos un modelo de
¿Esto viene de este? Necesitamos poder enviarlo
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
Bien, ahora el error debería desaparecer. Ahora con
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á
ve que existe o no es verdadero, por lo que devuelve verdadero, está
Bueno, ahora el último artículo, que es este, no lo agregamos
Esto lo podemos saber, podemos saber si un artículo
existe, si es cierto, entonces podemos hacer muchas cosas.
entonces crearemos otro método
llamado dentro de esto ahora aquí intentaremos
Crearemos un nuevo método y el tipo de retorno sería int,
Escribiré el nombre del método, así como la cantidad
aquí una vez más estaría haciendo un
Así que aquí primero comprobaremos si el punto del artículo 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.
clave, serían los mismos. Puedo decírtelo porque es la primera
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
Regresemos a esta sección y aquí haremos otra verificación
un bucle, por lo que necesitamos saber cuál coincide, está
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,
y luego asegúrese de que no sea nulo, se lo estamos
después de esta línea devolverá la cantidad correcta ahora el tipo es final, está bien y eso es todo lo que queremos
controlador de producto aquí, pasaremos este a este método
o no, si es así, pasaremos por un bucle for
encontraremos una de las cantidades que coincida con la identificación,
ponlo aquí, está bien, ahora simplemente seguiremos adelante
Seguiremos adelante y aquí obtendremos el valor.
en esta variable la que creamos en los artículos del carrito,
Así que aquí hacemos que los artículos del carrito sean iguales al
modelo bien ahora aquí diremos que imprimiremos
la cantidad en la pieza está aquí en las tarjetas
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
aquí ahora haremos clic en el primero y veremos
Así que ahora estamos listos para mostrar dos aquí, así
pero para este obtendremos cero, está bien,
Necesitamos trabajar en esto y mostrarlo aquí cuando
La cantidad se mostrará bien ahora antes de continuar
Funciona también, por lo que actualmente la cantidad
entonces la cantidad es cuatro, está bien, eso también
la cantidad es cuatro, está bien, entonces esa sección está funcionando,
cambiar esta sección vale ahora esta sección está en la
Aquí, actualmente solo mostramos la cantidad, pero
queremos mostrar este bien este porque esta
Y esto está vivo cuando vienes a este lugar y cuando
Y este tiene el valor que se agregó anteriormente
Bueno, espero que tenga sentido.
Ahora, para este,
Cantidad como esta la hacemos en el carrito.
Bien, artículos y lo guardaré. Ahora sigamos adelante y verifiquemos este, así que son cuatro.
mira este, este es 19, esto es lo que
y esto es cero, está bien, perfectamente, tiene sentido,
controlador de tarjeta y también podemos hacer cambios, así que
si vuelvo atrás y lo abro de nuevo serían cuatro
vivo si lo guardas bien, si vuelves aquí todavía
así que agregaré dos más ahora, agrégalos ahora si regresas,
Así que ahora, si regresas y ves sexo, está
la aplicación se está ejecutando durante el tiempo de ejecución, este
En toda nuestra aplicación, en todos los lugares donde usamos esta para
Vivo, está bien, pero pronto usaremos el almacenamiento local.
Tus datos todavía están allí, porque estos datos
Vale, desaparecerá inmediatamente.
Esto solo
Bien, hasta ahora todo bien, ahora hay otro problema, por
haces menos, ves que se vuelve inmediatamente cero,
Compruébalo bien, todavía son seis, pero realmente no puedes
debido a que está aquí, uh, verifica la cantidad, está bien,
tenemos esta función uh llamada cualquier producto
cierto, incluso si es cero si es
cero ahora por aquí uh este uh, intentas hacer menos aquí, así que cero
uh, al tocar este botón menos, eliminar el
ahora esto es cero menos uno es menos uno ahora comprueba
así que no te permitirá hacer nada, está bien, pero
cambiando, así que no queremos usar solo esta condición.
basado en datos anteriores, por lo que seis son nuestros datos anteriores
datos almacenados nuestros datos anteriores almacenados aquí en los artículos
Necesito agregarlo aquí en los artículos del carrito, está
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
seis entonces seis menos uno es cinco pero no es menor
menos uno ahora wow eso es interesante se supone
Estamos agregando más elementos, más condiciones,
Recibo menos uno correctamente una vez más si lo hago si hago
primero aquí porque al principio la cantidad es cero
entonces cero menos uno es menos uno, así que
Estoy enviando menos 1, está bien, incluso si
entonces 6 menos 1 es 5.
5 no es menor que 0. entonces esta condición
por lo que solo devuelve aquí lo que envíes, así que eso
que cuando agregas un artículo aquí ves que estás enviando
Bueno, iremos aquí y veremos cuándo actualizamos
Así que aquí estás enviando menos uno. Anteriormente tenía
todo lo que queremos está bien y eso funcionaría perfectamente
mi aplicación y luego la reiniciaré una vez más
Está bien, ahora aquí lo haré una vez más, como sea.
Puedo disminuir, puedo aumentar y todo se
se llama cantidad, por lo que la cantidad está viva
Bueno, podría ser negativo, está bien, entonces
Ahora, una vez que hago clic en este botón, se
uno y aquí almacena los datos la primera
y después de eso establece la cantidad en cero. Bien,
seis ahora aquí en este momento aquí esta
Ahora, ¿qué pasará si intentamos seguir adelante y reducir
pero ahora, una vez que hagamos clic en este botón de aquí,
porque en realidad en el mapa lo hemos almacenado pero
seguimiento de los datos, así que ese es el problema, está bien,
y se vuelve cero inmediatamente y lo cual es
pero es parte del diseño, así que aquí, bueno,
Está bien, entonces el carrito en artículos es igual a la tarjeta y obtiene
Usado antes, está bien y después lo recuperaré.
Vuelve y ponlo aquí.
Esto se reflejaría aquí,
Todavía veré que el elemento es seis. Bueno, espero que tenga
y veré que funciona como dije, está bien, ahora
Se agregaron cinco, ahora puedo continuar y eliminar
ahora son cinco, ahora son seis, está bien, ahora puedo reducirlo
Sin embargo, este es otro problema y mira este, así
Él lo dijo, deberías agregar al menos un elemento,
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 cantidad ya se vuelve cero y cuando llegas a esta
uh, aquí está bien y eso es cero, está bien, pero cuando
Lo hacemos usando esta cantidad establecida y aquí,
así que verificar la cantidad me devuelve menos uno ahora
es menor que cero, entonces vemos esta condición.
Bien, actualmente vuelve a caer a menos de cero.
Ahora
y comprobaremos qué pasa, está bien,
ahora por aquí veamos que puedo reducirlo y hice
Ahora sigamos adelante y guárdelo. Ahora se guardó correctamente.
Agregué el elemento y luego puse los datos más recientes
Tienes que saber que esto vuelve a ser 0. De todos modos, puedo
Ahora veremos que el último elemento es 8. Ahora
Aquí ic7 y puedo guardarlo y la última cantidad
Vuelvo y lo veo y todavía está funcionando.
y primero tal vez lo reduciré y luego lo ahorraré.
Ahora eche un vistazo a otro ejemplo. Ahora
No agregué nada. Tal vez por error haría clic
condición que estaba comprobando pero no tengo
Bien, ahora moveremos este código aquí, así que comprobaremos
agregado en el carrito a la derecha, así que recurriremos a
Así que antes de ponerlo aquí comprobaremos la cantidad.
solo si la cantidad es mayor que cero, de
De lo contrario, desde aquí enviaremos un mensaje.
Aquí, por supuesto, necesito importar las bibliotecas.
Ahora lo guardaré, ¿vale? Sí, ahora si sigo
adelante y reiniciemos todo, ¿vale? entonces esto es cuatro ahora vendré aquí y esto
Este mensaje está bien, ahora asegúrate de recibir
Lo que podrías hacer en este momento, puedes agregar, luego
resultado o intentas agregar OK y luego puedes obtener mucho
y luego lo agregas, ahora está funcionando, por lo que nuestro
lo que queríamos ahora aquí está bien, entonces no
Puedo agregar aquí ahora lo guardaré y bueno, estos son
Está bien, pero aquí ya ves que agregamos
funciona ahora nuestros datos originales también se
y estamos aquí, son nueve, ahora si quiero,
los nuevos datos se guardarán aquí, está
Ahora tenemos este problema aquí, ahora veamos qué
Está bien, veamos cinco cuatro nueve seis, así que sí, está
haz menos tres y lo guardaré aquí ahora cinco
Con esto intentaré agregar dos más, por lo que esperaría
once sí, así que está funcionando bien, ahora
Compruébalo para que realmente no importe cuál
Ahora, en este momento, quiero enviar este.
Entonces, pero ves que la identificación es uno, la
Está bien, entonces viene de aquí, lo que significa
Todavía en esta lista.
Bueno, este es el último problema
Hay muchos problemas, pero ese es el carrito, eso no es tan
dinero de otra persona, por lo que debe realizar un seguimiento de cada pequeño
este mensaje a pesar de que tengo la cantidad cero e intento
A medida que agrega, puede eliminar para que el usuario pueda confirmar
todavía está allí, así que ahora tenemos que
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í
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
uh, la cantidad que envías aquí está bien. Ahora necesitamos un verificador nulo aquí. Vale, el
Esta sección recuerda que este valor es el valor antiguo,
para este modelo de carrito, así que obtengo el valor anterior,
Me dan uno nuevo y lo reviso, está bien, pero
Incluso después de que sea cero primero,
y después de actualizarlo lo elimino de la tarjeta, está
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
Vale, ahora cuál es el ID.
El ID es cantidad. ID del punto
y elimínelo, está bien, ahora sigamos adelante y reiniciemos
Por supuesto, debido a que iniciamos nuestra aplicación,
Volveré a este y agregaré uno. Volveré.
de nuevo a cero, está bien, ahora lo confirmaría. Está
un elemento porque se eliminó anteriormente, tendríamos
También es cero en este momento y aquí todavía son dos.
Confirma que ya no está, así que lo enviaremos
Entonces, para el próximo envío te pide que al menos
es cero pero, por supuesto, puedes seguir adelante y agregar
nuestro producto popular la tarjeta está funcionando la lógica debería
pero de todos modos, a continuación haremos una cosa interesante,
o para muchos productos diferentes, los agregaremos y los
y confirma que aparecerá aquí.
Bueno, eso es lo que veremos
Hecho con este controlador de tarjeta aquí, todo lo que tenemos
Está bien, para hacer eso primero tenemos que ir al controlador
uh, déjame ver, los colapsaré ahora se ve más
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
un captador y devuelve un campo, no una función, por lo que
get es una palabra clave especial que pertenece a dart, está
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
Así que aquí primero declararemos una variable
Ahora aquí lo configuraremos en cero y luego devolveré
desapareció porque quiere que devuelvas un campo.
Está
pero, por supuesto, antes de regresar, debemos acceder
los artículos o la cantidad de estos artículos están bien,
pondría el operador punto y tendrás muchas opciones,
Bueno, entonces forage es más como un bucle
entonces estamos interesados en la propiedad
Recuerde que en nuestro caso esta es la
un objeto almacenado aquí, por lo que tenemos muchos objetos
Los objetos se almacenan en estos elementos en este formato
Entonces, si tiene un total de dos elementos aquí, este
y dos elementos, los valores o las propiedades a las
Además, también necesitamos el operador de punto, así que aquí
la cantidad a este está bien y cualquiera que sea la
el anterior está bien, entonces aquí tenemos que poner
así, está bien, esa es la oración corta, está bien,
agregue el nuevo valor y guárdelo en este y
se obtendrá una vez más, por lo que para el segundo
Del segundo objeto, sumamos el valor de cantidad
Después de eso, cuando finaliza el ciclo, devolvemos este valor.
uh, esto es más preferido, está bien, al igual que a medida
las cosas se vuelven más concisas o cortas, como
función pero todavía no es una función, solo devuelve datos
con esta parte y ahora en el controlador de producto
ahora, al igual que el controlador de tarjetas, los
total de artículos está bien, ahora aquí solo devolverías
este y eso es todo, estamos listos porque
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
Aquí tendremos estas tres secciones, así
y este muestra la imagen del icono aquí.
Bien, en
Entonces, así está bien, a medida que agregues
Eh, echa un vistazo aquí, tienes dos elementos. Ahora
cuando confirmas, ves cuatro aquí, está bien y cuando
Digamos, por ejemplo, que en este todavía ves cuatro
aunque para esta página no hay nada
Está bien, a medida que agregas, se convierte en seis inmediatamente,
Bueno, para este de todos modos, vendremos aquí
Aquí la fila muestra este y este.
Bueno, ahora aquí tenemos este. El detector de gestos de dos secciones sirve para poder
se muestra aquí, está bien, si
En la parte superior de este carrito existente queremos tener
el otro es el número en sí, está bien, entonces necesitamos
Esto es dinámico. Está bien si tus artículos ya no están. no están allí en absoluto, sí,
ahora confirme, ahora son cuatro, estos cuatro provienen
ahora, si los reduce todos, simplemente desaparece, por lo
Se mostraría así, está bien, entonces se mostraría,
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
y usando getx podemos lograr el mismo resultado y también
también, pero hasta ahora hemos estado usando get x de
interacción y si desea mostrar los datos inmediatamente
generador de brechas, tenemos el generador que hemos usado
uno con el que interactuaríamos, usaremos ese controlador
Muy bien, aquí se necesita un parámetro de roca
ejemplo aquí, está bien, entonces lo llamaremos
y después de eso simplemente podemos regresar así, bien,
Está bien, pero ahora, como puedes ver, hay dos capas,
la capa de fondo que es un poco azul y los números,
aquí, por esa razón usaremos el widget de pila porque usando
el uno del otro, está bien y justo ahora corté la otra
Devuélvelo, está bien, lo siento, necesito poner a los niños
y luego volveré a colocar lo que corté antes.
Nada cambiará todavía, pero nuestro ícono sigue
si lo vuelves a colocar, el icono volverá de todos modos, así que
carrito porque otros dos elementos son dinámicos, bien, ahora sabemos
Los otros dos son dinámicos, puede aparecer
Incluir esta tarjeta y otras dos se superpondrían entre
carrito dentro de la pila, está bien, de lo contrario lo pondremos
tenemos que hacer una verificación condicional si agrego más
Quiero ver cualquier círculo y número correctamente porque
Entonces veré cosas aquí.
Bueno, ahora para esto
verificación condicional basada en este
Los datos de este son la cantidad total correcta, por lo que
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
definiendo el controlador para que el primero sea
igual a uno o más de uno o no, si lo
Mostraremos algo más, de modo que si es cierto,
cierto, mostraremos algo diferente de todos
controlador y los cambiaré muy pronto, está bien, entonces
operador de itinerario si es cierto, recurriremos a
pero por supuesto aquí no queremos poner un
este círculo el círculo de fondo está bien, bueno,
icono de la aplicación aquí, así que simplemente seguiremos
Pondré enter y haré una nueva línea ok y de
Bien, entonces esta condición es verdadera, entonces
pero de todos modos debes continuar y cambiar el ícono,
y pondremos el tamaño en 20 porque el tamaño del texto del ícono
color ahora, en nuestro caso usaremos colores de íconos,
pero veremos un fondo bien, así que estableceremos
Entonces esos serían los colores de la aplicación, el color principal
y haz una prueba para que nuestra aplicación esté aquí.
Haga clic en esto, está bien, pero antes de continuar y hacer clic en esto,
porque acabo de hacer algunos cambios, así que
se ha ido, así que comencemos de nuevo, así que aquí
¿Qué pasa? Está bien, pero aún no apareció bien,
no apareció, el motivo está aquí porque este botón agrega
Tenemos nuevos cambios en la interfaz de usuario que aparece después de agregar
no informé a la interfaz de usuario que vamos a actualizar la interfaz
o el recuento de elementos en el controlador de la tarjeta,
primero, este se actualiza inmediatamente, por supuesto,
pero esto se actualiza inmediatamente, pero no le dijimos a la interfaz
para decirle a la interfaz de usuario que se actualiza aquí
Es más como establecer el estado y luego eliminaré
fue para una verificación previamente condicional,
ese círculo está ahí porque acabamos de agregarlo
el círculo debería desaparecer y ya no está, por lo que nuestra
al menos podemos ver el círculo y el círculo siempre estará
pero si vienes aquí nuestro círculo sigue
El total de artículos en el carrito es dos, pero
Bueno, en el futuro crearemos un botón en el que haremos
Verá los artículos en el carrito pero no los detalles.
pero de todos modos, después de hacer esto deberías
Entonces, en Fluttergarx, una vez que actualices tu interfaz de usuario,
Quiero actualizar la interfaz de usuario y la interfaz de usuario no se actualiza
De todos modos, ahora volveremos a nuestro controlador
Está bien, pero la posición del
Bien, entonces estamos en ese widget de pasos, por lo que la posición
Necesitamos cambiar esta posición predeterminada,
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
usaremos este para que hagas el cero correcto, el cero superior,
Lo vemos movido inmediatamente en la parte superior, está bien y esto
y el fondo pero no vemos bien el texto eso sería
Así que, una vez más, basándonos en esta condición, podemos
Una vez más, seguiré adelante y copiaré toda esta sección,
está bien, y la pondré justo después, ¿vale? Bueno, sé que si estás empezando de nuevo, empezando
cosa, pero se trata de este itinerario, está bien, si es cierto,
contenedor lo cual no significa nada, no hay color, está bien, simplemente
para usar el círculo y tampoco vamos a usar
usar un texto, así que simplemente seguiré adelante
Por ahora esto sigue igual, así que aquí
Recuerde que creamos un ícono de texto grande, lo siento,
Necesito mostrar este elemento total, así que para ese
y colóquelo aquí en nuestro texto correctamente porque si
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
para convertirlo en cadena porque el texto lo escribió, se necesita
Hay algunas otras propiedades que podemos tomar aquí
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
de color blanco, está bien, ahora
y vemos que previamente agregamos dos e inmediatamente
Ahora vendremos aquí y agregaremos otros tres o cuatro y ahora
lo es, pero ahora aquí todo lo que tenemos que hacer es cambiar
cambia la posición, así que haz los tres primeros, los tres primeros,
Bien, con esto ya casi hemos terminado con
nuestro controlador de tarjeta uh. así que sigamos adelante y agreguemos que sean nueve. Ahora
y lo confirmas aquí, inmediatamente se convierten
adelante y agréguelo y se convertirá en ocho, puede
Por supuesto, si intentas eliminar más, no podrás. y luego intentas hacer clic en esto, te dirá que debes
Entonces ya está funcionando y aún así los datos se guardan
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
Hemos preparado todo para el controlador de la tarjeta,
esta tarjeta esta tarjeta se puede utilizar para nuestros productos
reutilizable, me refiero a este, bueno, ves nuestro controlador
El mapa de elementos lo único que hace es guardar información
Puedes verificar si cierta información existe
y cosas similares así, bueno, no tiene nada
controlador independientemente de que sea un controlador de producto
independiente, todo lo que le importa es el modelo de producto
y este modelo de producto se comparte
El controlador del automóvil solo se preocupa por el modelo de un
Y es por eso que es reutilizable una vez más porque nuestros
entonces significa que independientemente del controlador que
datos en este mapa y de este mapa entonces significa
Me gusta si vienes aquí al controlador de este
aquí y solo un método está directamente relacionado con
y estos métodos en realidad solo funcionan con los
esto usando esta cantidad variable como puede ver, en
lista aquí cuál es ésta, está bien, ninguno de los métodos
Hay un dicho que también significa
reutilizables, por lo que, aunque están establecidos aquí
Incluso si no los escribo en el controlador de producto recomendado,
Nuevamente porque todos funcionan en el controlador del automóvil,
ya están definidos aquí y puedo reutilizarlos desde
Ven aquí en mi interfaz de usuario y la interfaz de usuario
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
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
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
Está bien y me aseguraré de que esté bien. así que haré clic en esto y lo tocaré
Al tocar esto, quiero aumentar el producto correctamente
llame a esta cantidad establecida igual a verdadero, está bien,
entonces necesitamos inicializar nuestro controlador
Envolveremos esta columna para que el constructor esté bien, así
Y aquí mismo haría el controlador
de producto popular. Recuerde que no estoy haciendo el controlador de producto
No tengo este método.
Sí, puedo seguir adelante y hacerlo, pero
ven aquí y se necesita una propiedad de constructor y que
controlador y luego devolveremos esta columna. Podemos
funcionando bien, sí, ahora están bien porque
Entonces podré acceder al método que se llama establecer
cantidad de conjunto de puntos y aquí porque esto
Está bien, ahora si continúo y lo guardo,
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
Ahora haremos lo mismo con este botón menos y por el
y reemplace este, está bien y necesitamos
la coma aquí ahora aquí, eliminaremos este ícono de agregar y lo usaremos
Está bien ahora, en lugar de conectarlo a verdadero,
Bien, ahora aquí todo comienza desde cero. Bien,
Tres elementos que teníamos antes, creo que este registro
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í,
También puedes mostrarlo aquí.
Bien, esto
Por esta razón vendré aquí y
creo que aquí tenemos este. Así que puedo simplemente seguir adelante y llamar para informar
y esta sección la puedo reemplazar, está bien,
Si quiero llamar a una variable desde un objeto, también
como estas llaves están bien ahora por aquí, haría
guárdelo y vemos inmediatamente son cinco,
Son cinco, está bien y lo guardas así.
recarga en caliente hagas lo que hagas, el
Puedes aumentar así, ¿no es sorprendente?
Muy bien, a continuación tenemos que ir aquí
Muy bien, esta sección es, creo,
este precio es solo 10, está codificado, debería
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,
precio punto bien, espero que tal vez necesite este, lo
inmediatamente bien y esta es la multiplicación de todos modos,
Ahora este texto muestra aquí lo que
y aquí hacemos un detector de gestos y en el
evento de toque tendremos un niño y child como contenedor ahora aquí
instancia del controlador, que es esta.
Usaré esta aquí también y luego llamaría para agregar elemento, está bien y enviaré
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
Así que aquí inicializamos nuestro controlador de carrito enviando
Cuando vienes aquí por primera vez, no hicimos eso,
Ahora reinícielo, por supuesto, creo que necesitamos importar
y todo está bien ahora vendremos aquí, agregaremos elementos
Ok, se agregó ahora aquí, vendremos aquí
para toda la aplicación, aunque no la vemos aquí,
aquí ya usamos este botón del controlador
y aquí podemos venir aquí agregar más cosas
De nuevo, esta parte debería ser bastante simple, así
obtener el constructor um regresar apilar esta sección
y veamos, copiaré esta y vendré aquí Vale, tengo este esquema del carrito aquí,
Solo comentaré este en caso de que lo necesite
Copiado temprano, así que este es el esquema de mi carrito de compras.
esta posición y esta posición una vez que la
aquí vemos seis ahora una vez que vengo aquí y después
aquí también, guardémoslo y vemos seis que puedes
esto, ven aquí, todavía ves siete, está bien,
hagas lo que hagas agregas cosas lo siento y ves inmediatamente
no responde tan bien, déjame ver por qué
y este botón debería ser, veamos aquí este en realidad mientras lo estaba haciendo se
alrededor de este detector de gestos, no
y es por eso que causa este problema, así que
primero eliminaré el detector de gestos.
Ahora el error debería desaparecer. Envolveré este
Ahora respondería mejor, así que aquí
y simplemente llamaré aquí al método de
toque, así que aquí lo hacemos punto del producto lo siento, debería ser
instancia del controlador nombre este producto controlador punto
agregue elemento y envíe el producto ok y lo guardamos ahora dondequiera que realmente
Funcionaría bien, así que se han agregado
así que no está agregando bien, pero no vemos ningún
aquí veremos nueve, funciona, agrega uno
el botón está más activo en este momento está funcionando
y suma aquí para que se convierta en siete y
Entonces, lo que significa que ya está funcionando. Ahora vienes
Está bien, agrega uno más, tenemos cinco, por lo que nuestra tarjeta
Tienes muchos productos. Algunos productos se agregan desde
el producto era de aquí cuatro productos de aquí y un
pero ahora, si agrega demasiados productos, por ejemplo, también
puede agregar algunos productos desde aquí.
Aumenta bien eso es bueno vienes
o sacas uno disminuyes pero realmente
Bueno, a continuación veremos cómo tocar este botón
que se ha agregado a esta lista de carritos, está bien, seguimos
Pantalla de tarjeta Creo que tenemos que solucionar
Creo que probablemente lo habrás encontrado mientras estamos
que olvidé terminar así que ahora lo haremos ahora, simplemente
Las cosas suceden bien, déjame regresar y empezar de
Vale, ahora mismo tenemos 10 artículos, pero
Por esta razón, si bien este es un detalle de comida
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
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
Devuelve el monto, está bien, así que haré clic en este botón,
Vale, ahora son las 12 y tenemos dos.
Bien, aquí
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
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
regresa desde aquí, está bien, ahora haré clic en él
Bueno, ahora, aquí ves, tengo en la tarjeta el artículo
cero pero no menos de cero, por lo que aún así volvemos a
Continúe y agréguelo para que funcione normalmente, pero
puede suceder bien entonces en ese momento la cantidad
bueno entonces hagámoslo así que déjame decirte
dos entonces, ¿qué pasará? No lo hice tapping
Por supuesto, si lo toco en ese caso, menos tres, eso se
Voy a devolver desde aquí cero a la derecha y si
por aquí esto es así que esto devolverá 2 por qué
porque esto es menor que cero, pero desde aquí devolvemos
cero, pero sabemos que este elemento de aquí, este
Este está bien, aunque lo reduje a cero, todavía
tenemos que tener cuidado, está bien, ahora confirmemos esto,
Ya lo hice anteriormente, por eso no funcionó.
Bien,
una vez más se convirtieron en dos inmediatamente, así
debido a que la cantidad se vuelve primero, se vuelve
estamos devolviendo cero y luego esta ecuación,
este problema ahora déjame encargarme de este problema,
en artículos del carrito mayores que cero,
carrito para esta página, está bien, en ese caso cambiaremos
encarnaciones, está bien, así que sea cual sea la
y desde aquí devolveremos la cantidad, está
cantidad, pero en este caso la cantidad sería
uh, la primera vez que estás haciendo solo menos, simplemente
menos derecho para eliminar y para agregar siempre
haz eso y de esta manera este error también se resolverá,
déjame déjame guardar esto, está bien ahora, si hago clic
luego uno y luego uno está bien, ahora en este momento
aquí volverá a caer en estas categorías porque
esta cantidad se convertiría inmediatamente en -4 bueno, menos
entonces se convierte en menos uno, por lo que vuelve a caer en esta
Quiero decir que es grande, quiero decir que es un número positivo
uno entonces regresamos menos tres está bien
entonces más tres menos tres es igual a cero, está
No puedo reducir más y no vimos el resultado extraño,
Vendremos aquí, tomaremos cualquier página como ejemplo.
así que reduzco dos, por supuesto, los cambios aquí
ahora lo haces una vez y dice que no puedes reducir
Así que puedes continuar y confirmar aquí y veremos
Así es como funciona, solo esta parte del código
en verificar la cantidad y eliminaré
este y aquí no necesitamos este y lo que podría hacer, puedo comentarlo porque podrían
Sí, eso es todo.
Ahora esta sección es completamente
reducir ahora no funcionará solo funcionará si lo haces positivo
um 11 ahora, si sigues adelante y eliminas uno ahora, se convertiría
volver a enviar sin agregar nada, en este caso no sucederá
y observe que dice que necesita agregar
entonces el 10 siempre está ahí, así que ahora lo que haremos
poder hacer clic y acceder a esa interfaz de usuario, está
y aquí primero crearé un nuevo directorio y lo llamaré
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í
y la llamaremos página del carrito, está bien, importemos
por aquí tendremos andamio este andamio volverá
aquí en esta página usaremos un objeto de
Bueno, cuando vayas a esta página después
Tres menús, uno es el botón Atrás, otro es el
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
¿Por qué aquí devolveremos la fila? Está bien, y también
Eso es lo que haremos ahora, así que lo haremos a la izquierda
las dimensiones tienen un punto con 20, está bien, por lo que
20 y también usamos una posición superior aquí, por lo que ahora
Altura ahora mientras vamos a la altura 60, pero
lo que sea que aparezca, está bien, ahora
Muy bien, después de hacer niños aquí, primero
Bueno, en este caso el ícono de nuestra aplicación sería el
Aquí tenemos este icono correctamente y necesitamos importar
Ok, ahora aquí simplemente usaremos los íconos con puntos
También le daré a este ícono un color de fondo. Está bien,
Y ahora aquí le daremos un color de fondo y el color
colores y sería el color principal, está bien y
entonces cambiaremos el tamaño de los íconos, pero ahora, si
Necesitamos declarar el tamaño de este ícono en nuestras
Ábrelo aquí para que no tengamos
Sí, tenemos, pero tenemos como 24 y 16.
Creo que podemos
Está bien, entonces usaremos este, así que ya lo tenemos,
Las dimensiones puntean este 24, por
Bien, ahora, por supuesto, tenemos que ir a nuestro archivo
y luego configuraremos la ruta para ello, así que aquí
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,
Y parece que tenemos algunos problemas y vamos a comprobarlo,
de cambios en la aplicación y mucho tiempo porque si
Necesitas reiniciar tu aplicación y aquí estamos, vemos nuestro ícono,
ahora lo copiaré y lo pondré tres veces porque como dije
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í,
Todavía conservaré este carrito de compras que servirá. carrito y este Vale, carrito de compras, así que seguiré adelante y lo
usamos una propiedad que se llama acceso principal para que accedamos
Bueno, aquí están todos distribuidos de la misma manera, pero quería
Así que lo moveré hacia la derecha y para ese, justo después
entonces eso movería este ícono de aquí a la derecha, está bien,
cuadro con ancho y tenemos dimensiones dimensiones punto ancho
ser 100, está bien, así que lo enviaremos allí, está bien, está
Debido a que necesitamos trabajar en este resto de la parte
artículos que se agregaron en el carrito, con la imagen
y cuánta cantidad se ha agregado y el precio total, eso
De hecho, déjame mostrarte el resultado que queremos lograr,
Para lograrlo, tenemos esta sección aquí ahora mismo,
un poco más grande y estoy aquí.
Me quedo con la posición
donde moví mucho la posición pero de todos modos y después
para lograrlo, está bien y, como puede ver aquí, podemos aumentar
Bueno, y al hacer eso, verás que hay un cambio de
son las cosas que queremos hacer, así que es bastante dinámico
Si eliminas uno de los elementos, desaparecerá,
desaparece inmediatamente de la lista, está bien, se
aquí el sabor y el precio cosas así y puedes
Si esto es lo que quieres o no, puedes regresar una
Puedes ir a pagar, hay mucho trabajo en esta página,
Bueno, lo primero que queremos hacer aquí es
eso se agregó a nuestro carrito, está bien, eso es lo que
como si fueras a la página de inicio, por ejemplo aquí,
obteniendo el resultado de que se ha agregado una página
Obtener el resultado está bien, sí, pero ahora, esta vez,
Y te explicaré por qué, pero primero sigamos
Bueno, iremos a nuestro controlador de producto
contraerlos todos, así que aquí solo tengo el elemento total,
y este elemento total lo pudimos ver aquí, está bien,
más información para mostrar esto esto esto y todo
Vale, eso no es suficiente para nosotros.
Esta sección
pero si queremos obtener más resultados, debemos hacerlo,
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
responsable de conseguirnos prácticamente todo lo que necesitamos
Ahora recuerde que en este mapa estamos almacenando datos,
donde obtenemos almacenamos los objetos, así
donde podríamos obtener los objetos, recuerda
Me refiero a la cantidad total de esta lista aquí,
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
una nueva función y esta función devolvería todos los
objeto de tarjeta que está almacenado aquí, está bien o aquí,
y todos juntos queremos volver ok
el mapa en sí porque el mapa tiene una clave, en este caso no
es la lista de modelos de carrito u objetos de tarjeta, está
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
Si estaríamos aquí, obtendríamos los artículos, está bien, entonces
Vamos a devolver una lista de modelos de carrito y
Devuélvelo primero, tenemos que mirar este mapa.
Está
y luego haremos las entradas. Cada mapa tiene un método
que puedes obtener otro método que se llama mapa. Está bien,
propiedad llamada entradas y, según las entradas, puede obtener
También toma un parámetro para que esta e esté relacionada con todos
en nuestro carrito artículos aquí si tenemos 10 artículos,
bucle apuntaría a cero o al primer elemento o al primer
e señalaría al segundo y en el tercero en el
segundo modelo de tarjeta o índice de dos, ojalá tenga
pero no queremos devolverlo así, queremos
Ves que esto se refiere a y al modelo al mismo tiempo, está
de ellos está bien, aunque dije que e se refiere al cero, pero
e es uno y e tendrá un modelo final y de tarjeta, por lo que
solo quiero devolver el valor del punto. Está bien, no
regresar porque este get debería devolver algo, lo que debería
Así que primero devolvemos una devolución y ponemos
ahora el mapa en sí también regresa, así que aquí también necesitamos
y luego aquí tenemos que convertir este mapa en una
Está bien, eso ya habría desaparecido, porque
una lista, pero aquí decimos que devolveremos
entonces lo convertimos en un mapa, vale, lo siento,
entonces podemos revisar esta lista aquí o el lugar
puedo revisarlos usando un índice como cero uno dos
una vez más aquí hay dos palabras clave que regresan,
están diciendo que vamos a devolver una lista, por
Bueno, verás que el mapa devuelve iterable ahora.
Aquí
a través de él usando un índice como cero uno
usando claves o valores como ese, pero no queremos nada
convertimos el mapa en una lista usando la herramienta listar
esto está en la sección de tarjetas, así que ahora en nuestro
uno crearemos un método similar al que hicimos este anteriormente
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
así es como funciona bien, ahora con esto
muestra así, está bien y luego debemos ir a nuestra sección de interfaz
Bien, ahora construimos, construimos la primera
construye esta sección ahora mismo esta sección
constructor y también queremos poder desplazarnos
Sí, eso es lo que queremos hacer, por eso definitivamente
Nuestro creador de vistas de lista está bien, así que primero
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í,
¿Por qué estoy usando pila porque en esta sección
Quiero que se pueda desplazar y al mismo tiempo quiero
y descubrí que usando un widget de pila puedo tener un mejor
Bien, es por eso que muchas veces prefiero trabajar
La columna crea muchos problemas adicionales, pero con la
De todos modos, vendría aquí y primero
Ahora déjame configurar la posición para
Ahora, para el primero, primero usaré dimensiones, altura
en la altura del dispositivo, está bien, entonces lo multiplicaré
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
Por cero quiero decir que el fondo estaría aquí, por lo
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 si quieres también puedes aumentar un poquito alrededor, pero no lo necesitamos, así que aquí
De todos modos, esto es solo para fines de depuración, lo
Pon un contenedor con un collar. Sabes realmente dónde
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
se necesita un contexto, en nuestro caso estamos pasando
y después de eso tenemos que devolverlo, así que aquí
pero antes de eso necesitamos configurar algunas otras propiedades,
Bien, entonces, ¿cuántos elementos desearías? Ahora los
eso está escrito desde aquí, así que ahora tenemos que
10 y por ahora aquí solo devolveré un contenedor,
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
simplemente para fines de desarrollo.
Bueno, ahora verás que esto
la columna a veces se vuelve mucho más dolorosa. Bueno, descubrí
interesante, está bien de todos modos, pero por supuesto
Me ocuparé más adelante, pero en realidad no importa,
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
pero ahora aquí tenemos que saber que
este contenedor, que es este, no va a funcionar, por
y en la fila el primer elemento es esta imagen
Muy bien, en lugar de la columna tendremos
El tercer hijo sería una fila una vez más, está
y luego el último niño también estará en la
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,
y ahora aquí queremos ancho así
que haremos doble punto máximo Finanzas, por lo que se asegurará de que ocupe
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
Así que aquí vamos y los niños están bien. Bueno, el primero es una vez más. Si
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
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
Lo hice antes y deberíamos estar contentos con eso ahora.
Bien, ahora sigamos adelante y guárdelo
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
menciona la propiedad que se llama fit o si solo
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
Para ver bien la imagen ahora creo que también necesitamos
en realidad seguiría adelante con el margen, así que aquí hacemos
quédate con el margen inferior, así que aquí
haremos este y usaremos dimensiones altura del punto y queremos un margen
Está bien, ahora seguiremos adelante y nos ocuparemos
este creador de vistas de lista porque tiene un relleno
Necesitamos eliminar ese pozo para eliminarlo, debemos
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
y ahora aquí tenemos que decir quitar la parte superior verdadero Así que ahora todo ha ido bien, pero ahora con esto tenemos
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
Guárdalo para que ahora se vea mucho mejor, así que tenemos
vea cómo seguir adelante y trabajar con esta sección para
todo el espacio disponible y es por eso que usaremos
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
widget expandido ocupa todo el espacio disponible
Hicimos eso y esto es lo que al menos queremos para la
Esto es al menos lo que queremos para el ancho y nuestro
entonces intentará tomar todo el espacio disponible
y tendremos dimensiones punto 100
20 multiplicado por 5. Así que aquí ahora tendremos
la columna en sí queremos que todo comience
la columna queremos que todo empiece desde cero
así que echemos un vistazo, si esta es una columna en la
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
empieza bien, ese es uno y si ves con atención
uh, este espacio vertical queremos que se les dé
propiedad y cuál es la alineación del acceso principal
evento dot space, está bien, ahora seguiremos adelante y comenzaremos
Este es un texto sobre marinada de naranja amarga.
Supongo que
Envíe un mensaje de texto, está bien, este y simplemente usaré jugo
ahora pongámoslo ahí y vemos ahí mismo bien,
entonces esto dentro del contenedor mismo, mientras
y este widget expandido que es el texto de
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
Me gusta este color, está bien, así que aquí
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í
Ahora aquí estamos cuando los necesites, los devolveremos.
y para ese podemos usar justo después
aquí podemos usar este texto, veamos para que podamos seguir
un pequeño widget de texto texto pequeño ahora aquí por ahora
recupere esta información del servidor, está bien,
Bien, está bien, la siguiente parte es trabajar en este precio,
toda la sección debe estar en una fila, está bien, así que seguiremos
widget de fila aquí, así que eso es lo que haré. Haré
y está bien, entonces necesitamos un mensaje de texto aquí. Deberíamos
Continúe y copie este texto grande. Lo pondré allí
Así que voy a poner el signo de dólar y si para mostrar el signo
y luego aquí deberíamos tener una x roja y este
y aquí estamos, vemos bien, ahora la siguiente sección
Bien, y para esta sección, en realidad hemos presentado nuestro
Esta parte del código llegará a esta popular sección
conmigo deberías venir a esta sección de navegación
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,
primer contenedor ahora vendremos aquí y lo colocaremos
y nos arrojaría algún error pero no te preocupes,
Así que aquí los comentaremos por ahora. y aquí simplemente así para que esté comentado
El error debería desaparecer y guárdelo y ahora aquí
eso se debe a que se está copiando
y en esa página el diseño era un poco diferente, así que
10 y para todos los demás lugares los cambiaremos
Bien, entonces fueron estos problemas de relleno. Ahora
Necesito empujarlo hacia la derecha, bien, bueno,
esta fila está bien dentro de esta fila, así que aquí podemos
alineación y aquí hacemos el espacio de puntos de alineación
bellamente diseñado así, está bien, y lo siguiente
resultado el que obtenemos de la página del carrito, está bien, nuestro
Ya hemos establecido el método, así que todo lo que tenemos
desde dónde llamarlo, recuerde que esto es todo el generador
los mostramos uno por uno, por lo que aquí este constructor
consigue que el constructor esté bien, por esta razón
obtenga el constructor, está bien, ahora necesitaré encontrar un controlador
No es una página de producto, por lo que definitivamente buscaremos
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,
y aquí simplemente diremos controlador de carrito, está bien, aquí
y después de eso tendremos este generador de vistas de
propiedades y campos dentro de nuestro controlador
y lo primero que quiero obtener es acceso
artículos, así que iré a esta página del carrito aquí. Ahora
y lo pondré allí y luego accederé a las propiedades
luego agregue elementos a la lista para obtener la longitud,
la longitud ahora aquí no necesitamos esto codificado
Hay un controlador de tarjeta que obtiene elementos.
Ahora recuerda obtener
index y aquí queremos obtener la propiedad
va a ser nulo, está bien, por ahora esto también está
elimine eso, así que aquí hacemos esto más, lo siento,
y ahora aquí tendremos el precio, está bien
Mira el problema aquí, ya agregamos un verificador nulo,
Está bien, veamos y está bien, entonces este es el
Bien, ahora el error desapareció y dónde más veamos,
La imagen está bien, entonces esta imagen está bastante codificada en este
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
Dios mío, está bien y luego no es nulo, pero, por
No obtengo ningún tipo de datos de ningún lado, así que
y en lugar de esta página de carrito, volveremos a nuestra
Este está bien y luego vendré aquí. Está bien,
Y, de hecho, antes de seguir adelante y hacer eso, también
¿Qué queremos hacer? Déjame decirte. Aquí estamos.
Haga clic en esto y lo agregaré y después de eso,
la página del carrito está bien, para eso necesitamos
veamos popular para obtener más detalles y aquí debemos
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
así que aquí tenemos la página del carrito, está bien y todo
Muy bien, ahora, si haces clic en esto, irás a la página del carrito.
Necesitamos actualizar estos datos, pero lo de aquí
hacer con la página del carrito aquí porque queremos volver
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.
No es así como hacemos el enrutamiento, pero solo quiero
Bueno, nos encargaremos de esto más tarde
o incluso ahora mismo, veamos.
Vale, estamos bien y después de eliminar esto simplemente funciona,
Ve a la página de inicio. Puedo volver. Ahora puedo agregar
Si voy allí, este botón todavía no funciona correctamente,
uh controlador de producto aquí detalle de alimentos
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 podemos agregar más cosas aquí y tal vez
Ahora vemos nuestros artículos hermosos, así que prácticamente
de subir videos durante 12 horas no
Así que cubriré el resto del tema en la
siguiente parte del tutorial.