Flutter Master Class Travel App | Flutter 3.13.0 for Beginners to Advanced | iOS & Android Cubit

entonces extranjero Hola a todos, Assalamualaikum. En esta parte de esta
serie, primero aprenderemos cómo construir un control deslizante de castillo personalizado, bueno, ahora
para hacer eso, primero tenemos que entender cómo vamos a constrúyelo para que veas que tendrás imágenes como
esta y las imágenes tendrán puntos como este ok bueno claro todavía no tengo las
imágenes aquí solo tengo la primera uno, pero no te preocupes, me ocuparé de ellos más tarde,
así que ahora aquí queremos tener estos puntos. y también queremos tener este texto y podremos
deslizarnos a través de ellos y el punto sería muestra la diapositiva correspondiente así, está bien,
eso es una cosa que necesitamos saber y la segunda Otra cosa que necesitamos saber
es el diseño de esta página. Entonces el diseño de esta página es así, por lo
que toda la página tendrá una imagen de fondo. entonces, en realidad, la imagen de fondo se moverá bien,
aparte de que el otro diseño sigue siendo el mismo.

Lo mismo, ahora esta sección aquí sería
una fila y en la fila tendremos niños y así el primer hijo sería una columna y este sería
nuestro segundo hijo y ese sería una columna Bueno, primero tendremos una imagen de fondo
y la imagen de fondo tendrá una fila como hijo y dentro de esa fila habrá hijos, por lo que
el primer hijo sería esta columna y el segundo El niño estaría bien en esta columna, así que de todos modos,
ahora para hacer eso primero, lo que haremos, vendremos aquí.

Y creamos una nueva carpeta y la llamaremos páginas y dentro
de ella queremos guardar nuestras clases de dardos o archivos ahora dentro de él llamaremos crear un nuevo
archivo y lo llamaremos página de bienvenida dot dart Bueno, esta página sería nuestro control deslizante personalizado
o control deslizante de carrusel personalizado. Está bien. Así que acabamos de hablar de ello. Este control deslizante sería
una clase con estado, así que lo haremos de manera stful. y dentro de esto sería capaz de construir una plantilla de
caldera de esta clase ahora el nombre de la clase sería será la página de bienvenida porque nuestro control deslizante de castillo
personalizado se mostrará como una página de bienvenida, por supuesto que puede Úsalo donde quieras si entiendes cómo funciona.
El principio es el mismo de todos modos.

Así que ahora aquí dentro necesitamos importar algunas
de las clases, eso es lo que haremos primero, ¿vale? aquí no queremos usar el contenedor primero, queremos
devolver un andamio porque dentro de él use otras secciones como cuerpo y otras propiedades. Está
bien, ahora el andamio debería devolver un cuerpo. Así que usaremos la propiedad del cuerpo ahora porque queremos crear
un control deslizante, por lo que ahora deberían deslizarse. así y para hacer eso podemos usar una función
personalizada en flutter o constructor que es llamado generador de vistas de página, eso es lo que usaríamos,
así que aquí lo llamaremos generador de puntos de vista de página Este está bien, ahora lo cerraré, así que ahora cualquier
tipo de constructor en Flutter, si lo sabes.

Cualquier tipo de constructor que tome dos parámetros,
por lo que el primero es el contexto entonces tendremos el contexto predeterminado para saber
lo que significa y en este caso el segundo parámetro para este constructor es el índice, está bien, sí,
eso es lo que vamos a hacer y eso es lo que escribimos. entonces pageview.builder nos ayudaría a deslizarnos bien,
ese es el propósito principal de este constructor o widget está bien, debido a esto podremos deslizarlo,
ojalá tenga sentido y también queremos Especifique la dirección de desplazamiento porque creo que, por defecto,
se desplaza hacia la izquierda y hacia la derecha, pero así lo queremos. para desplazarse hacia arriba y hacia abajo, por supuesto, puede desplazarse
hacia la izquierda y hacia la derecha, pero sus imágenes deben ser un poco diferente en este caso así que de todos modos ahora aquí haría la
dirección de desplazamiento dirección de desplazamiento Oh, lo siento, entonces aquí lo haré.

Usaré la propiedad
llamada dirección de desplazamiento y accede al punto vertical, está bien, y por ahora
usaremos las tres imágenes para la nuestra. control deslizante del carrusel para que hagamos el recuento de elementos tres Muy bien aquí, entonces estás regresando.
Quieres devolver una función debido a esta. entonces el creador de páginas debería devolver
una función, eso es lo que vamos a hacer o en realidad un widget, debería devolver un widget o una
función que devuelva el widget, así que eso es lo que vamos a hacer aquí ahora lo primero que queremos
devolver aquí es un contenedor Bien, entonces tu declaración de devolución, entonces necesitamos
esta. Ahora piensa en este contenedor, por lo que este contenedor. debe contener estas imágenes y todo lo demás dentro
de esto bien, por lo que el contenedor debe tener ancho y alto máximos porque queremos que ocupe
toda la pantalla, bien, ahora vamos a hacerlo que podemos usar el ancho como el ancho máximo, por lo
que en más plano podemos usar el máximo finito.

Tome el ancho máximo para la pantalla y lo mismo para la
altura, está bien, haga doble punto máximo infinito Bien, ya casi hemos terminado, me refiero a la primera
parte, como mostrar las imágenes. Bien, ahora aquí. uh, ¿qué queremos hacer aquí? Queremos mostrar la imagen
mientras está dentro del contenedor si así lo desea. muestra la imagen que necesitas decoración de caja, eso es
lo que funcionará bien y una decoración de caja tiene propiedad de imagen y toma la imagen de decoración correctamente
y luego dentro de ella una segunda imagen ahora aquí hacemos una imagen ácida para mostrar la imagen
ahora las imágenes están donde bueno ahora las imágenes si descargué el código del enlace, por lo que deberías
tener imágenes en tu carpeta img, mientras estas tres imágenes, está bien, pero primero queremos definirlas en la
parte superior, está bien, ve aquí, está bien, no lo hacemos. Quiero leer directamente desde la carpeta de recursos, pero desde aquí
como una lista, así que declare aquí las imágenes de la lista.

Bueno Así que haremos una lista de imágenes y dentro de
la lista mencionaremos los nombres de las imágenes. así que sigamos adelante y hagámoslo, bienvenido uno.png Bueno, seré rápido, solo los copiaré y pegaré. así que ahora aquí bienvenidos y bienvenidos tres Bien, entonces tenemos esta lista de imágenes aquí.
Ahora aquí podemos revisar esta lista. Está bien, cómo hacerlo, así que ahora podemos poner imágenes
más y  porque el generador de vistas de página tiene índice y se ejecutará tres veces y se ejecutará desde el índice 0
al 2.

Así que podemos especificar el índice aquí para que indexe bien, ahora el error debería desaparecer y, de hecho, aquí
también puede hacer imágenes.longitud para que la imagen es la lista, por lo que la longitud del punto nos daría la longitud
real. Vale, muy bien, hasta ahora, todo bien. Ahora, lo que podríamos hacer, podríamos venir aquí
y ahora, en lugar del contenedor, podemos regresar. como inicio, nuestra página de bienvenida. Bien, ahora tenemos que importarla.
Creo que se importa automáticamente en la parte superior.

Como puedes ver, está bien, genial, ahora es el momento,
sigue adelante y ejecútalo bien, está comenzando. Muy bien, nuestra imagen está aquí. Se mostró bien.
Ahora, ¿qué podríamos hacer aquí? Bien ahora. Queremos que la imagen ocupe toda la pantalla, tanto
el ancho como el alto, pero para esta propiedad, Podemos usar otra propiedad dentro de la imagen de decoración que se
llama encajar bien y ajustamos la cubierta de puntos al cuadro. usando este cubrirá toda la pantalla Vale, ahora, de hecho, tu control deslizante está listo, como
puedes ver, es un control deslizante hermoso, pero aún muy simple bueno lo siguiente que vemos queremos
ver como poner esos puntos asi como los El texto en el control deslizante está bien, eso es lo que
queremos hacer y dijimos que esos textos y puntos serían hijos de este contenedor o parte de esta imagen, por lo
que ahora se parece más a una imagen de fondo bueno, si es una imagen de fondo, puede tener un
hijo porque está en la imagen de fondo, así que dentro del contenedor definiremos aquí el niño, está
bien, ahora dentro del niño tendremos otro contenedor Bueno, usar el contenedor tiene la ventaja de que puedes especificar
el margen y el relleno, así que eso es lo que me gusta.

Sobre el contenedor, es bastante útil, vale, primero
queremos poner nuestro texto aquí, vale, vale. así que ahora debería tener cierta distancia desde la parte
superior y el lado izquierdo, bien, para este podemos haga margen y el borde constante se inserta solo en los 150 superiores, por
lo que en los 150 superiores, 20 a la izquierda y 20 a la derecha por ahora Vale, está bien, a continuación queremos definir
una fila aquí como hija de este contenedor. entonces dibujamos hijos de texto de fila, sabemos que así que dentro de él ahora aquí tendremos una columna, por lo que la primera columna mostraría el texto que vimos
anteriormente aquí.

Está bien, aquí hacemos la columna. Está bien y una vez más la columna toma a los niños. Está bien, ahora lo primero, si
lo viste, discúlpame. Entonces, si viste, tendremos este
texto correcto, tendremos este texto. Así que ahora queremos crear un texto reutilizable para que
podamos usarlo en todas partes de nuestra aplicación. Entonces queremos representar nuestro texto como un widget. Bueno,
entonces continuaré y crearé una nueva carpeta. y lo llamaré widgets y dentro de él crearé
un archivo que lo llamaremos text.dart Bueno, aquí ves que tenemos prácticamente tres
tipos de texto: muy negrita, poco negrita.

Y texto normal también esto es para texto normal,
bueno, el primero es para negrita Así que aquí voy a crear otro archivo
y lo llamaremos uh aplicación grande. punto dardo, está bien, primero queremos trabajar con
este texto extra grande o en negrita, así que primero Aquí queremos crear una clase sin estado,
así que haz esta sin estado y la llamaremos texto grande de la aplicación y ahora necesitamos tener
algunos parámetros que el archivo o la clase llamará a esto uno le transmitirá algunos parámetros predeterminados
o algunos parámetros y queremos recibirlos ¿Qué son? Bueno, primero uno definitivamente, el tamaño
del texto está bien, así que hacemos tamaño int. y luego ¿qué más el texto en sí es tan definitivo? texto de cadena y qué más, también queremos un
color, está bien, entonces le damos color color final color uh bueno por ahora son lo suficientemente
buenos y ahora aquí en lugar de devolver un contenedor quieres devolver un mensaje de texto y también
necesitas esta biblioteca o paquete de capuchino, ¿vale? Ahora aquí, dentro del texto mismo, queremos
usar el texto que transmitimos de otra clase.

Y creo que debemos eliminar esto y poner este
campo aquí ahora. El error debería ser desaparecido pero, por supuesto, también necesitamos
poner otros campos correctamente como require Está bien y también necesitamos uno para
el tamaño, así que hacemos este punto. tamaño y le pedirá que coloque un qr requerido
delante y el error debería desaparecer ahora Hasta ahora estamos bastante bien, ahora recibiremos color,
así que aquí queremos darle estilo al texto. así que aplica el estilo de texto ahora aquí, el estilo
de texto definitivamente el primero es decir color, entonces el color es cualquier color que transmitas,
este color aquí y el tamaño de fuente muy bien ahora Cualquiera que sea el tamaño que pases, está bien ahora para el tamaño de fuente.
De hecho, también podemos usar nuestro tamaño predeterminado, por ejemplo. es 30. Así que este es el valor predeterminado.

Ahora
tenemos que eliminarlo porque es el valor predeterminado. Ya está proporcionado, por lo que no es necesario. Vale, aquí
para el color, de hecho, también podemos cambiarlo. este, así que si se da el color usaremos ese color; de
lo contrario, usaremos colores punto negro si el color no está dado, usaremos un color negro, está bien,
por supuesto, tal vez necesitemos cambiar el estilo aquí porque no es int, es el doble del tamaño,
bien, ahora el error desapareció, bien, bueno eso es todo y qué más queremos que esté en negrita, está bien, así que
sigamos adelante y hagámoslo para que tengamos la fuente.

Peso de la fuente peso de la fuente en negrita, por lo que para el texto
grande de la aplicación x, el texto grande tendrá negrita, está bien. Ahora ya es reutilizable, así que lo que podemos hacer es
simplemente venir aquí y llamar a esta aplicación. Texto grande, así que aquí hacemos la aplicación.
Texto grande. Verás que ya está ahí. Ahora queremos usar el primero que ves. Salta. Te muestra
el parámetro. Está bien, así que solo es necesario.

Uno es el texto este, así que lo que puedes hacer, puedes
pasar aquí viajes, está bien, ahora podría ser Muy hermoso, ahora sigamos adelante y echemos un vistazo.
Sí, está ahí hermoso, porque es reutilizable. Así que solo como demostración, puedes usarlo una y otra
vez. Ahora aquí puedes decir cubierta del disco. y dentro de él también puedes usar decir color, está bien,
entonces puedes hacer colores con puntos, digamos rojo. Está bien, está ahí, así que es reutilizable,
pero no queremos usarlo ahora. Bueno, hasta ahora todo bien con el texto grande de la aplicación,
pero como puedes ver en este control deslizante, también queremos otro texto como este, así que lo que estoy planeando aquí
es que estos dos textos utilizarán prácticamente el mismo widget, así que usaremos un solo widget para ellos y lo
reutilizaremos. Vale, sí, entonces, ¿cómo hacerlo? Así que este es el texto de nuestra aplicación.
Ahora podemos copiarlos todos desde aquí y haremos una ligera diferencia en lugar de llamar a la aplicación texto
más grande aquí llamaremos a la f texto, está bien Muy bien, por supuesto, aquí está el
tamaño predeterminado que no queremos.

30 queremos que sea 16. Está bien,
no lo queremos tan grande. Está bien, y el color predeterminado es bueno. Podemos tener un tipo
diferente de color predeterminado, por ejemplo, negro. 54 este es un poco diferente, está bien, eso es
todo y tampoco queremos que esté en negrita. así que lo eliminaremos ahora porque ya construimos uno,
por lo que este también será más fácil, ¿vale? Puedes usar este de aquí, así que aquí hacemos texto de aplicación.
Está bien, este ahora aquí, el texto pasará la montaña. y aquí también queremos un tamaño para este, el
tamaño predeterminado es 16 si vienes aquí pero en la imagen puedes ver que tienen
el mismo tamaño, así que aquí diremos 30 Está bien, y el color es un poco diferente. Está
bien, pero este ya tenemos un color predeterminado. Así que usaremos el color predeterminado.

Ahora sigamos adelante,
ejecútelo y veamos nuestra aplicación. Sí, está ahí. Bien, ahora queremos alinearlos aquí, así que
cómo hacerlo, aquí lo llamaremos uh cruz. accede a la alineación de esta propiedad, por lo que accedes al inicio
del punto de alineación de acceso cruzado, por lo que ahora los alineará Lo hermoso de esto es que ahora puedes usar
este de aquí también para esto. Entonces este texto es todos reutilizables. Ahora
usaremos la misma clase que creamos para este. una cosa ves que tiene de aquí no va
para allá se corta va hacia el siguiente línea, por eso necesitamos crear un contenedor
y dentro del contenedor usaremos esto texto de la aplicación de texto está bien, así que aquí hacemos contenedor y ahora por qué usamos contenedor porque queremos
mencionar específicamente el ancho porque si son más de 250 queremos volver a la siguiente
línea, está bien, aparte de eso, todo de lo contrario debería permanecer la multa ahora aquí tendremos este niño
y nuestro hijo recibiría un mensaje de texto con este mensaje de texto.

Texto de la aplicación que creamos anteriormente, está bien, ahora
aquí se necesita un argumento de parámetro, por lo que el primero uno es un texto que sabemos que si pasas el cursor sobre
él, tendremos este texto, así que aquí diremos Las caminatas por la montaña te brindan una increíble
sensación de libertad junto con resistencia prueba de resistencia bien perfecto Entonces, ¿qué podrías hacer? Podrías seguir adelante
y comprobarlo de inmediato. Oh, prácticamente está ahí.

Bueno, ya se ve como queremos pero, por supuesto,
tenemos que trabajar más en ello. y aquí queremos tener el color y queremos usar los
colores de la aplicación, el color del texto del punto Bueno, ahora la aplicación colorea este archivo, es necesario importarlo. y usamos el color del texto 2. Ahora, ¿cuál
es el color de esta aplicación? ¿De dónde viene? En realidad, proviene de aquí, colores, por lo que el color
del texto es 2.

Está en la carpeta de descargas. así que continúa y compruébalo de todos modos, así que ahora está allí,
así que ahora guardémoslo bien, así que el color cambió un poco. un poco ahora aquí también queremos cambiar el tamaño del texto,
por lo que el tamaño dice 14, está bien, entonces es mucho más pequeño, pero ahora el control deslizante, si ves
que tienen un poco de distancia, eso es lo que queremos que hacer ahora y es bastante fácil, así que aquí haremos el tamaño
del cuadro correcto y podemos decir altura, digamos 20.

Ahora Ahí lo ves, es hermoso, así que nuestro control deslizante
ya está funcionando si echas un vistazo. pero, por supuesto, también puedes cambiar este texto junto
con el control deslizante, lo que sería bastante fácil si quieres hacer eso puedes declarar otra lista de
texto aquí diferente tipo de texto si quieres para el título para las líneas pequeñas está bien
y puedes cambiarlas como quieras cómo cambiarlo es bastante fácil, simplemente aquí, así, aquí,
vale, aquí puedes revisar el índice como si tiene texto, una lista, diga una lista llamada
texto, si declara un texto aquí, diga lista texto, así que aquí tendrás algo de texto basado en
cualquier texto que quieras, así que aquí haremos A cada uno de ellos puedes acceder a ellos como índice de texto,
como este índice de texto, está bien y solo para eliminar esto. parte y deberías estar listo para comenzar, pero no queremos
hacerlo ahora, está bien, así que nos saltaremos esta parte. Sí, el control deslizante ya está
allí y está bastante bien, sí.

A continuación veremos cómo crear este botón. Bueno, ahora
para este botón también queremos que este botón sea reutilizable, está bien, bueno, gracias
a ese, ahora vendremos aquí y cree un botón ahora, simplemente no solo queremos que sea
una botella reutilizable, también queremos que responda Vale, por eso lo llamaré botón
responsivo dot dart Entonces, para hacer eso primero, crearé una clase
sin estado aquí y la llamaré responsiva. botón ok, ahora aquí necesitamos importar algunos
de los paquetes o bibliotecas predeterminados y deberíamos estar listos para comenzar ahora, piénsalo,
así que este botón, ¿qué quieres? Bueno, ahora Queremos que este botón responda en el sentido de
que el mismo botón que queremos usar aquí y aquí Ahora, como puede ver, el color de fondo permanece igual,
por lo que estamos contentos con el color de fondo.

Además, este ícono no cambia, por lo que este ícono
es fijo, el color de fondo solo es fijo, no. Lo fijo es este y el tamaño está bien,
ves que la altura es fija, ¿qué haces? quieres pasarle bueno, quieres pasarle una variable booleana
para saber si es más larga o más corta, vale y al mismo tiempo, si es más corto, qué tan corto
es, entonces quieres pasarle el ancho, ¿vale? bueno, si no es más corto, si es más largo, en realidad
está ocupando todo el espacio disponible, ¿vale? Quiero pasar dos cosas: el ancho y una variable
booleana para saber si será un Uno corto o uno largo, está bien, eso es lo que
queremos con esto.

Ahora aquí, lo que haremos. Aquí crearemos una variable y la
llamaremos Bull is responsive. Está bien, y ahora aquí también queremos pasar el
ancho, está bien, así que lo llamaremos doble. ancho, está bien ahora, por supuesto, necesitamos
inicializar aquí, veamos ahora veamos Bueno, ahora también queremos que esto sea opcional, ¿vale? puede aprobarlo o no puede aprobarlo,
está bien, y aquí veamos responde este punto responde entonces el valor predeterminado es falso, está bien y estamos
listos para seguir con esto, así que ahora esto es lo que ¿Quieres, bien, el primero que queremos tener?
Bien, por ahora queremos tener un ancho.

Está bien y di el ancho, cualquiera que sea el ancho
que pases, usa ese, está bien y el alto, pero Ahora queremos una altura bastante fija, así que 60 está
bien y dentro de ella también mostraremos esta imagen. y este texto juntos pero a veces solo
el texto a veces imagen y texto juntos si están juntos entonces es más como decir en
una fila está bien en una propiedad de fila entonces aquí tendremos un niño dentro del niño,
tendremos una fila y tomará niños Bien, como puedes ver en ambos botones, la imagen es imprescindible,
por lo que la imagen siempre estará ahí. Así que usaré el activo de punto de imagen en este y dentro
pasará la imagen. Entonces, ¿cuál es la imagen? Aquí tenemos una imagen que se llama botón uno,
así que eso es lo que queremos usar.

Bien, entonces, ¿qué quieres hacer? Aquí queremos
crear el nombre del botón, botón 1 punto png. y deberíamos estar listos para ir bien, y uh,
sí, entonces eso está bien para el botón. Ahora, por supuesto, como puedes ver, tendrá
algún borde, así que aquí podemos crear borde podríamos hacer decoración hacemos decoración
de caja ahora aquí tendremos radio de borde y el radio del borde es circular, digamos 10 por ahora, está
bien y tendrá un color de fondo, así que usaremos colores de la aplicación punto color principal está bien, una vez
más, esto proviene de nuestra clase de color aquí, está bien Muy bien, ahora con esto tenemos un botón
bastante interesante, entonces, ¿qué podríamos seguir adelante y comprobarlo, ejecutarlo
bien y queremos ver cómo se ve así que pondremos el botón justo debajo
y ahora, si ves aquí, hay un poco de distancia, así que primero queremos crear una distancia, así
que simplemente copiaremos y pegaremos esta y la pondremos aquí.

Y le daremos altura adicional aquí,
ahora lo llamaremos botón aplicación botones grandes o texto grande lo siento
botones responsables botones responsivos Bueno, ahora por aquí aunque no
pasemos nada, veamos qué pasa. Bueno, está ahí, entonces el botón ya apareció,
eso es bastante bueno y reconfortante, así que ahora aquí el pozo ahora no pasamos ningún ancho por
aquí pero en realidad podemos pasarlo con Así que ahora sigamos adelante y pasemos
un ancho por aquí y veamos decir con 120 ahora sigamos adelante y verifiquemos que ahora
es un poco más grande, pero ahora aquí el El problema es que no está centrado, así que queremos
que esté centrado. Ahora podemos cambiarlo. Entonces podríamos hacer la alineación del acceso principal. Centro
de puntos de alineación del acceso principal. Bien, ahora está centrado. Bien, ahora veremos
cómo dibujar estos puntos. Cómo dibujar esto. tres puntos, está bien, como dijimos antes, necesitamos
las dos columnas en la fila, ¿vale? Bueno, mira esto.

Ya tenemos la primera columna.
Esta columna muestra esta para que puedas quiero la otra columna aquí, está bien, ahora haremos
eso para tener una columna para puntos Está bien, ahora usaremos niños, está
bien y ahora no vamos a usar esto. operador de lista aquí para poner a los niños, usaremos
en realidad otra función muy conveniente, la función que se envió de fábrica en flutter automáticamente
para ti como esta, está bien, Hacer generador es muy útil, así que aquí queremos
tener tres puntos, ¿vale? y ahora para cada punto.

Queremos devolver un contenedor, está bien, eso es todo
lo que queremos, así que devolvemos el contenedor, pero En realidad, no me gusta que me guste esto, me gusta de esta manera porque
puedo tener una nueva línea, así que haré un contenedor. y necesitamos tener punto y coma porque estamos
regresando ahora mira la imagen así que Esta imagen de aquí, si ves bien los puntos, tienen
cierto borde, está bien, sí, y la longitud. Vaya, eso es lo que necesitamos primero. Queremos asignarles
un ancho. Bien, digamos que, por ejemplo, el ancho es 8. Ahora, si miras la imagen, verás que su altura
cambia según la diapositiva, así que Necesito tener una altura, pero una altura dinámica, pero
de todos modos, por ahora diremos que pongamos altura. 25 simplemente sigamos adelante con
esto y veamos el resultado y luego queremos tener una decoración porque queremos tener
un borde, así que hacemos un radio de borde y tendremos un radio de borde ocho, y también necesitamos
color, así que usamos colores de la aplicación.

Colores punto color principal que vimos anteriormente aquí
continuaremos y lo ejecutaremos bien para que esté ahí Bueno, ahora queremos llevarlo hasta el final aquí, así
que ahora una vez más podemos usar esta propiedad de fila y Podemos usar una propiedad llamada alineación de acceso principal y
espacio de puntos de alineación de acceso principal entre por lo que intentará crear todo el espacio vacío
entre estas dos columnas o estos dos widgets Bien, ahora se ve perfecto, por supuesto,
aquí está este 20 debido a este. Está bien, sí, ahora nuestros puntos están ahí, pero, como puedes
ver, no es dinámico, así que lo primero que debes hacer es queremos queremos que sea dinámico cambiar
el color y también cambiar su posición Bueno, ahora gracias a este todos obtenemos 25 de altura para
nuestro contenedor, pero queremos ser dinámicos.

Entonces, a medida que nos deslizamos, queríamos cambiar la altura. Está
bien, y la diapositiva actual debería tener una altura más larga. cómo hacerlo ahora aquí podemos usar una de las
propiedades que ya tenemos, como elemento El constructor debido al generador de elementos realiza un seguimiento
del índice, sea cual sea el índice por el que pasamos. podemos comparar este índice dentro de este
bucle, entonces en ese caso en realidad podemos cambiar el nombre del control deslizante de índice o los puntos de
índice. Bien, ahora haremos una verificación para que el índice sea igual. punto de índice, entonces este índice es para los puntos
y este índice es para el control deslizante y si son iguales entonces usaremos 25, de lo contrario usaremos solo ocho Vale, parece que ya está
funcionando, como ves.

Pero ahora están demasiado cerca uno del otro, en ese
caso podemos aplicar el margen rápidamente hacer el margen inferior digamos ocho,
está bien, supongo que es demasiado. dos esta bien Ahora la otra cosa que tenemos que hacer
es cambiar el color y si hacemos el color De hecho, nos gusta usar este. Aún podemos usar
esta condición usando el operador de itinerario. así que indexe los puntos de índice, si son iguales, usaremos
el color principal; de lo contrario, usaremos uno diferente.

Color, así que obtendremos los colores de la aplicación, punto,
color principal con opacidad, vale, queremos usar un poco con opacidad, por lo que si no son iguales tendrán
un color un poco diferente como ves ahora Muy muy bien, así que con esto
ya casi terminamos con nuestro uh. control deslizante personalizado, está bien, a continuación veremos
cómo usar cómo crear esta página, está bien, esta Bueno, esta página tiene esta parte de navegación inferior, así
que nos centraremos en crear esta parte de negación inferior.

Y después de crear eso, crearemos esta página de todos modos,
por lo que la barra de navegación inferior debe incluir Este tiene cuatro elementos, por lo que estos cuatro elementos
deben tener sus rutas o cuatro páginas relacionadas. Entonces, una vez que hagas clic en ellos, te llevará a cada
una de las páginas. Está bien, entonces crea este botón. barra de navegación primero necesitamos esta lista de rutas
o lista de páginas, entonces eso es lo que necesitamos Bueno, ahora, para hacer eso primero, seguiremos adelante
y crearemos un nuevo archivo, pero ahora este nuevo archivo Lo pondré en una carpeta nueva, así que aquí, dentro de
este archivo de páginas, crearé una carpeta nueva. y aquí lo llamaré navegación, diga páginas de navegación, está bien,
ahora dentro de las páginas del mapa, primero crearé un archivo dart. archivo lo llamaré página principal, está bien, página
principal, dot dart, está bien, entonces, ¿qué es esto? Bueno, en realidad este archivo page.dart principal contendría
todo en esta pantalla, como puedes ver.

Entonces también significaría que mantendría estos
cuatro elementos en la barra de navegación inferior. para que esta página contenga todo y una vez
que hagas clic en cada uno de los elementos nos llevará a una nueva página según el clic de
esta página irá a páginas nuevas, así que Ahora digo eso, así que esta también es nuestra página principal
para mostrar todo, además de esta página, ¿vale? Entonces este botón o este elemento significa esta página.
Ahora, ¿qué debemos hacer? Tenemos que seguir adelante. y crea estas cuatro páginas, así que simplemente seguiremos
adelante y las crearemos muy rápidamente. ¿Qué hago? Lo que hacemos vendríamos aquí y crearíamos un nuevo archivo,
por lo que el otro archivo lo llamaré barra item.dart. Bueno, el nombre proviene de aquí, es un elemento de barra, elemento
de búsqueda o página de búsqueda y mi página, está bien.

Bien, bueno, creo que podríamos refactorizar el nombre aquí,
es una página de elemento de barra, está bien, ahora mismo. aquí declararé otras dos páginas o archivos, archivos dart,
de modo que uno sea la página de búsqueda dot dart y el otro es uh uh mi página dot dart está bien, genial, ahora
aquí dentro de él simplemente tendremos algunos contenido muy simple de mostrar basado en el clic,
está bien, entonces, ¿qué haremos ahora? adelante y cree una clase sin estado aquí, está
bien, para buscar una escribiré aquí buscar página bien, ahora dentro de ella necesitamos importar
algunas de las bibliotecas y luego aquí dentro de ella digamos que devolveré un niño como un mensaje de texto, está bien y
aquí escribiré la página de búsqueda, está bien, ahora aquí quiero para centrarlo, así que lo envolveré y el widget central
está bien, ahora estamos bastante bien con esto.

Mundo, simplemente copiaré esta parte para terminar con la página
de búsqueda. Ahora iremos a mi página y aquí lo haremos. clase sin estado y simplemente copiaremos y pegaremos lo que
hicimos anteriormente. Ahora aquí necesitamos importar esto. clasifica esta biblioteca por aquí y por aquí
la llamaremos mi página, está bien, um y también tenemos que dejarlo ahí. Bien, ahora el error
debería desaparecer y aquí tenemos que tener esto. Declaración de devolución, así que si
quieres reorganizar tu código, puedes haga la opción comando l en mac, está bien de todos modos, eso
es todo.

Ahora también seguiremos adelante y crearemos un Clase rápida sin estado para esta, la llamaremos página de
elemento de barra, está bien, ahora la copiaremos aquí. el contenido, oh lo siento, el contenido de mi página está
aquí, está bien, pero por supuesto, aquí primero queremos cambia el nombre, la llamaremos mi página, ahora vendremos
aquí y copiaremos y pegaremos esta, en su lugar de la página de búsqueda aquí escribiremos la página del elemento
de barra ahora necesitamos importar otras bibliotecas Bueno, somos bastante buenos, por lo que nuestra barra de navegación
aquí necesitaría cuatro páginas, bueno, tres de ellas.

Ya están hechos y esta página también es nuestra página
principal, así que ahora seguiremos adelante y trabajaremos en uh, esta página, así como esta barra de navegación inferior,
está bien, como dije, navegación inferior. bar estaría aquí en este archivo, así
que aquí crearemos una clase con estado Está bien, ahora llamaremos a este nombre
como página principal. Está bien, está bien. Ahora aquí, en lugar de devolver un contenedor, queremos
devolver un andamio porque queremos tener un cuerpo y dentro del cuerpo tendremos esta sección
y el andamio tiene otra propiedad que se llama barra de navegación inferior para esa propiedad, adjuntaremos
esta a estas cuatro secciones de alguna manera, está bien Muy bien, ahora primero seguiremos
adelante y trabajaremos con el propiedad del elemento de la barra de navegación inferior, está
bien, barra de navegación inferior, esta, entonces, ¿qué haré? adelante y cierre esto, hágalo más grande, está bien,
aquí definitivamente si pasa el cursor sobre él Verás que dice que debería
llevar aquí un widget.

Y el widget que debemos usar se llama barra de navegación
inferior, está bien, entonces la parte inferior barra de navegación inferior, esta está bien,
ahora aquí si pasas el cursor sobre ella Verás que se necesita una lista de elementos.
Eso es lo primero que queremos cuidar. lista de elementos, entonces, ¿qué es esta lista de elementos?
Ahora esta lista de elementos debería contener todo está bien, sí, entonces estos cuatro elementos
deberían contener estos cuatro elementos, sí. Así que ahora, ¿qué hacemos? Seguiremos adelante y crearemos
esta lista, así que simplemente llame aquí a los elementos.

Bien, como puedes ver, se necesita una lista. Ahora,
por supuesto, debería tomarse la lista, pero. ¿De dónde viene esta lista y cuáles son las
cosas que deberíamos poner en la lista pero? Como puedes ver, si pasas el cursor sobre él, dice
elemento de la barra de navegación inferior. entonces el tipo de lista debería ser el elemento de la barra de navegación
inferior a la derecha, así que eso es lo que deberíamos tener Así que ahora aquí simplemente escribiremos aquí el elemento de la
barra de navegación inferior, está bien, este es correcto. así que ahora se necesita un ícono, ahora el primero
queremos tomar este ícono, vale, este ícono pero ahora tenemos un ícono similar aquí,
así que usaremos esos íconos iconos de aplicaciones de puntos está bien, el primero está bien y debería tomar
otra propiedad que se llama título y simplemente Llámalo uh hogar, está bien, y el título requiere un mensaje de
texto, así que seguiremos adelante y simplemente lo llamaremos hogar. Está bien y ahora sí, estamos bien, así que aquí
ponemos una coma. Ahora copiaré esto tres veces.

Bien, ahora aquí cambiaremos el nombre, aquí lo llamaremos
barra y aquí lo llamaremos búsqueda. y aquí lo llamaremos mi bien Ahora también necesitaremos cambiar los íconos aquí,
definitivamente lo llamaremos gráfico de barras. Vale, creo que es un gráfico de barras. Para definir este ahora para la búsqueda, simplemente
podemos usar un ícono que se llama búsqueda. Vale, y para mí o mi página aquí usamos
un icono que se llama persona. Vale. Así que ahora con estos cuatro niños
en la lista de elementos hemos terminado. Bueno, recuerda, en cualquier lugar donde puedas ver en
Flutter prácticamente tiene la barra de palabras como barra de navegación de la barra de pestañas o vista de la barra de pestañas,
deben tomar una lista de elementos secundarios, esto es algo común propiedad en tierra plana dondequiera que un widget tenga una barra,
la mayor parte del tiempo se necesita una lista de elementos Bueno, como dije, ahora toman la lista de niños.

Se puede
hacer clic en cada niño, lo que también significa que una vez que hagas clic en ellos, este elemento de la barra debería
llevarte a una página determinada, ¿vale? Eso es lo que sucede. Aquí, para cada elemento de la barra tendremos una página
relacionada donde podemos navegar para indicar Me gusta. Si hacemos clic en el primero, deberíamos ir a esta
página que mostrará este. Para el segundo, vaya a una segunda página, una tercera para una tercera página así,
está bien, entonces necesitamos crear esas páginas en un lista, pero en realidad ya los creamos como ves estas cuatro
páginas como elemento de barra elemento de barra de búsqueda y mi página está bien, así que ahora lo que tenemos
que hacer es seguir adelante y crearlas.

Cree una lista y coloque estas clases en la lista. Está bien,
eso es lo que haremos, así que aquí hacemos la lista. Y lo llamaré aquí páginas. Ahora debería tomar
cuatro rondas o páginas relacionadas con esta. bueno no el primero lo hará
poco después es el segundo se llama página de elementos de la barra, está bien, el
tercero está aquí en la página de búsqueda y el cuarto es nuestra mi página derecha Bien, ahora necesitamos importar las bibliotecas de paquetes
relacionadas para esto. Bien, tenemos tres, así que por último. uno es para este este es para este y la barra
inferior es para este ahora este es muy especial porque esta sería nuestra página predeterminada,
pero, por supuesto, debemos seguir adelante y crear la página que aún no lo hicimos, así que para toda la aplicación esta
es la página principal, por eso escribí aquí la página principal pero el contenido debe provenir de otra ruta u otra
página para este ícono, por lo que necesitamos para seguir adelante y crear eso también para que uno lo
llame página de inicio, ¿vale? Entonces, ¿qué haremos? Seguiremos adelante y crearemos un archivo aquí y lo llamaremos
página de inicio.

Bien, ahora por aquí vamos cree una clase con estado y la llamaremos página de
inicio ahora mismo simplemente aquí ahora mismo Simplemente devolveremos, digamos, un contenedor por ahora
para que entiendas bien la idea y ahora, por aquí, importará los paquetes y bibliotecas relacionados,
bueno, este sería responsable de Mostrando todos ellos aquí relacionados con este botón
de todos modos, así que ahora ven aquí. Así que aquí simplemente escribiremos la página de inicio. Bien, tenemos que importarlo. Bien, hasta ahora todo bien.
Ahora, ¿qué podrías hacer? Podríamos continuar. adelante, ejecútelo y vea el resultado, porque
tenemos cuatro páginas bien relacionadas En esas cuatro páginas tenemos estos elementos de la barra,
pero una última cosa antes de seguir adelante y hacerlo, Necesito adjuntar esta lista, está bien, adjunta esta lista
aquí en la sección del cuerpo del andamio, está bien.

Así que ahora aquí escribimos cuerpo, está bien, ahora el cuerpo
toma un widget más plano dentro del andamio, está bien, ahora aquí Quiero pasar esta primera página. Recuerde que esta página de inicio
también es un widget. Vale, entonces la clase es un widget. en plano la mayor parte del tiempo, así que ahora
simplemente devolveré este. Puedo devolverlo así. páginas cero, por lo que las páginas son una lista, encontrará
el primer elemento, el primer elemento es este y dentro de él devolverá un contenedor, está bien, así que ahora lo que
podemos hacer es seguir adelante y ejecutarlo.

Está bien, por supuesto, ahora aquí, dentro de nuestro
archivo principal por ahora en lugar de regresando a la página de bienvenida aquí
regresaremos a la página principal, ¿vale? Una vez que hayamos terminado con toda la aplicación, las
conectaremos todas juntas, pero por ahora queremos ir a Esta página directamente, está bien,
ahora sigamos adelante y revisémosla. Bien, aquí no tenemos ningún error, pero si llegamos
a nuestra página principal, mira esto. Ahora tenemos todo aquí, nuestra barra de navegación
inferior está visible como puedes ver. está aquí, está bien y ahora, si ves un poco, también
tenemos los colores aquí, así que es visible, muy bien, si ves ahora estos colores,
la etiqueta y los íconos no son visibles Entonces podemos cambiar el color y, para hacerlo primero, lo que
podrías hacer es mostrar el color del elemento seleccionado.

O veamos el color del elemento seleccionado, entonces el color del elemento
seleccionado por ahora usamos colores punto negro, está bien 54 así que ahora, si lo guardas para que se seleccione
el primero, podrás verlo ahora al mismo tiempo. Para el artículo no seleccionado también
tenemos un color y este usará gris. Muy bien, podemos usar gris con opacidad 0,5, así
que está bien, ahora hay una gran diferencia. Muy bien, ahora no queremos mostrar estos
nombres aquí como puedes ver, así que queremos deshacernos de los nombres, así que aquí mostramos las
etiquetas seleccionadas falsas, está bien y mostramos Las etiquetas no seleccionadas y seleccionadas están configuradas
en falso ahora el nombre ya no está bien, hasta ahora todo bien y ahora hay esta línea aquí, también podemos deshacernos
de esa, hacemos elevación cero, ¿vale? pero ahora trabajaremos en el evento tap, bueno, para eso
primero necesitamos definir una función de pestaña porque si vienes aquí y pasas el cursor sobre él verás que
tiene una función pestaña sobre pestaña, vale, primero necesitamos crear una función fuera de este método de
compilación, está bien, lo haremos aquí, llamarías en void evitar en la pestaña, el nombre de la función está en
la pestaña y ahora aquí, bueno, en la pestaña debería tener uh index debería recibir un índice de la función de
llamada de esto, entonces, ¿qué haremos aquí? tenemos que verificar, bueno, ahora la barra de navegación inferior
también necesita un índice, está bien, así que si Ven aquí, verás el índice actual cero.

Está bien,
ahora aquí configuraremos el índice actual. Bueno, una cosa, aunque el índice actual es
cero, en realidad eso significa que encuentras esta página para que pueda continuar, ejecutarla y verificarla
ahora, por supuesto, no hay cambios, pero ahora si cambiamos El índice actual es 2 y aparecerá aquí. Está bien,
entonces verás que este es el valor predeterminado. uno no seleccionado, sí, entonces encontró mi
página de búsqueda, este está aquí, sí, sí.

De todos modos, ahora lo que haremos es que necesitamos
tener un determinado índice guardado aquí. y pasar ese índice a este lugar también, por supuesto,
también debemos pasar este evento de enderezar Bien, aquí podemos definir otra variable y la
llamaremos índice final actual. es igual a cero, el valor predeterminado,
puede ser lo que quieras ahora aquí estableceremos la función de estado
y no establecimos el estado que tendríamos valor de índice actual de este, está bien, entonces este,
una vez que hicimos clic en algo determinado aquí para que ese índice se transmita a este,
luego lo guardamos en esta variable y después de eso en realidad aquí podemos pasar En este, todos los nombres parecen iguales, pero puedes
nombrarlos como quieras, realmente no importa. Entonces, lo siguiente que debemos hacer es vincular este evento
ontap con este evento superior, está bien, aquí lo sabemos. que se necesita en el evento superior y aquí simplemente
llamamos al toque, ¿vale? ¿Y ahora qué es esto? índice, de modo que cada vez que haga clic en cualquiera de estos elementos,
está bien, de modo que el índice se envíe directamente a él.

Significa enviar a este y este más tarde envía
a este de vuelta, así es como funciona Bien, ahora podremos hacer clic en ellos, como
ves, ahora se puede hacer clic en ellos. Está bien, ahora aquí, como ves. quieres establecerle un color de fondo determinado pero si hacemos eso, no funcionará bien, así
que sigamos adelante y verifiquemoslo aquí. Podemos establecer el color de fondo.

El
color de fondo dice colores.rojo. pero si ves que no hay ningún cambio ahora, es porque
el botón de navegación tiene una propiedad que es llamado tipo y toma un valor tipo de barra de navegación
inferior y en realidad toma este cambiar cuál es el predeterminado en realidad
está bien, debido a esto cambia si haces clic en ellos, como ves, se desplaza de izquierda a derecha así,
está bien ahora debido a que este es el predeterminado El color de fondo sigue ahí, por lo que podemos anularlo.
Aquí podemos anularlo escribiendo fijo, vale.

Como ves ahora no cambiarán, quiero decir, no se desplazan hacia la izquierda
y hacia la derecha, está bien, entonces debes escribir este si deseas establecer cierto color de fondo de todos
modos, en nuestro caso lo configuraremos en blanco Bien, ahora el color de fondo es blanco, como puedes
ver, es diferente del color de la pantalla. Está bien, pero ahora queremos que el color de nuestra
pantalla y el color de fondo tengan el mismo color. Me refiero al color del fondo de navegación inferior
y al color de la pantalla, así que aquí veremos configura el color de fondo, nosotros haremos colores colores punto blanco está bien, sí, ahora se ve mucho
mejor, pero ahora hay otro problema, así que si intentas hacer clic en la parte inferior y se muestra un error,
está bien ahora porque tu etiqueta desapareció, pero Bueno, es invisible pero sigue ahí, así que cuando
haces clic en él se crea este problema. Entonces, para deshacerte de ese problema, lo que puedes hacer es usar
un tamaño de fuente cero no seleccionado para que cuando sea cero.

En realidad no se puede hacer clic porque el tamaño no está
seleccionado y no seleccionado, todo configurado en cero Bien, ahora como ves, no hay ningún error si intentas
hacer clic en la parte inferior. Bien, ahora, uh, El error se llama Ok, bueno, ahora hay otro
problema, así que estamos configurando el Índice actual pero no vamos a cambiar aquí. Está
bien, también necesitamos cambiar el índice aquí. entonces haremos el índice actual, está bien, sigamos adelante,
ahora puedes ver, en realidad puedes ver las páginas. Muy bien, una vez que cambies el índice aquí,
tendremos que cambiar el índice aquí aquí. algunos lugares y también pasar el índice
tocado a este ahora con esto en realidad Hemos terminado con la creación de nuestra barra
de navegación inferior, simple y hermosa. A continuación veremos cómo mostrar esta página en la
página de inicio de nuestra barra de navegación inferior. Para este, seguimos adelante y comenzamos la página. Comenzamos
a construir la página. Veamos la estructura de la página. Bien, esta es la página que vamos a crear.

Como puedes
ver desde aquí, prácticamente todo está en El diseño de columnas y filas está bien, entonces esta sería
una columna grande y dentro de la columna tendremos esta fila. uno, por lo que todo esto sería parte de las filas y luego tendremos
el generador de vistas de página o el generador de vistas de lista. y luego, una vez más, tendremos estas
cosas y ya construimos esta y ya Hemos hecho prácticamente todo el trabajo para esta página,
por ejemplo, ya sabemos cómo mostrar el texto.

Este texto aquí está bien, entonces esta página sería bastante
rápida de construir de todos modos, bueno, ahora hazlo Primero tenemos que ir a nuestra página de inicio aquí,
así que esta es la página de inicio. Bien, aquí Si queremos empezar a construirlo bien ahora, en lugar
de devolver un contenedor, devolveremos un andamio. Está bien, entonces hacemos un andamio. Está bien, ahora
dentro de él, regresaremos. Bueno, tendremos el cuerpo. dentro del cuerpo tendremos una columna, está bien,
como dije, date prisa ahora, la columna tendrá hijos Bien, ahora dentro de los niños que
tendremos aquí verás este ícono. y este y ambos están bien, así que aquí podríamos
hacer una cosa que realmente podríamos hacer un poco de relleno y luego ponerlos dos en fila,
o podríamos hacer la fila primero, ¿vale? Así que primero haremos un contenedor y
dentro del contenedor tendremos un hijo. y dentro niño tendrá fila y
ahora tendremos niños Bien, ahora dentro de estos niños queremos
mostrar este ícono y este tipo. Ahora cómo hacerlo, aquí podemos simplemente seguir
adelante y llamar a los íconos y usaremos el menú.

Icono que se envía fuera del cuadro de flutter predeterminado,
está bien, me refiero al SDK y luego haremos El tamaño 30 y el color servirían como puntos negros
aquí, está bien, muy bien, con esto que es. Ahora sigamos adelante y construyamoslo para
que esté justo ahí, en la parte superior. Está bien, ahora nos ocuparemos de eso pronto, así
que ahora, como dije, este contenedor está aquí. Así que aquí podríamos hacer un poco de relleno. Haremos
solo inserciones de borde y diremos 7t superior y Son los 20 de la izquierda. Bueno, diré que está aquí, pero
este efecto también se podría hacer en un área segura. ver pero personalmente no me gusta, me gusta seguir adelante
con esto, así que es la preferencia, está bien.

Parece que nuestra página funciona allí de todos modos,
así que eso es lo primero que hicimos. ¿Qué hacemos? queremos hacer, queremos mostrarle a este tipo de aquí,
pero ahora para este simplemente tendremos un contenedor entonces hacemos contenedor y decimos
ancho 50 y alto 50 y tendremos así que aquí decoración porque vamos
a bordear así que decoración de caja y luego el radio del borde y el radio del borde de
esa circular dicen 10, estamos bien y tendremos color dentro de él, así que haremos colores.gris y con opacidad
0.5 ahora sigamos adelante y ejecutemos nuestra máquina mientras que ahora está demasiado cerca el uno del otro, así que
definitivamente porque estamos dentro de la fila, así que Podemos usar el widget expandido aquí, por lo que usaremos
el widget expandido y usaremos un contenedor vacío.

Bien, veamos ahora, sigamos adelante y
guárdelo. Parece que tenemos un error. Bien, ahora lo empujamos hacia abajo hasta este lado izquierdo,
así que para este en realidad este contenedor. en sí lo que podrías hacer, puedes organizar un margen
aquí, está bien o incluso relleno, así que ve adelante con margen esto es solo y escribimos
digamos 20, ahora se ve mucho mejor Bueno, ese es el primer paso que hicimos.
Ahora continuaremos y haremos este. entonces esto estaría dentro de veamos entonces tenemos
esta columna así que dentro de la columna tenemos Entonces este es el primer contenedor
que muestra esta parte, que es esta. Está bien, pero por supuesto podemos reemplazar
esta parte con un ícono, pero no importa. pero ya entiendes la idea, así que ahora queremos
mostrar esta sección, pero como ves Tenemos un espacio aquí, así que lo que haremos será
seguir adelante y crear un cuadro de tamaño. y altura digamos bueno digamos 40 está
bien, ahora queremos usar este este texto, pero anteriormente ya hemos trabajado
en esto, así que tenemos estos widgets aquí Así que aplica texto grande para que
podamos seguir adelante y llamarlo. Entonces se llamó aplicación de texto grande.

Ahora
esto es lo hermoso de los widgets reutilizables. Sí, una vez que crees uno, podrás usarlo una y otra vez,
así que escribiremos el texto para descubrirlo. Bien, ahora sigamos adelante y veamos nuestra aplicación
aquí. Bien, ahora, por supuesto, está en el medio. pero realmente no importa, así que podemos encargarnos de ello
desde aquí, podríamos hacer una alineación de acceso cruzado cuál es este eje y hacemos acceso cruzado, alineación
punto inicio, está bien, viene aquí Está bien, está bien, ahora una de las cosas
que tenemos aquí, así que si es así, no. lo pone aquí aquí mismo, así que lo que podríamos hacer
podríamos seguir adelante y crear un contenedor y dentro del contenedor, diremos que el margen está bien,
así que const solo como inserciones y lo dejaremos aquí 20 Está bien, porque ya tenemos este, así que ahora podemos
simplemente seguir adelante y poner el texto en grande.

Y debería solucionar ese problema, ahora se ve mucho
mejor, así que a continuación veremos cómo para seguir adelante y mostrar este, pero una vez más, en esta
sección también necesitamos un cuadro de tamaño aquí Está bien, como este y este, como puedes ver, hay un espacio vacío,
así que lo ajustaremos alrededor del cuadro de tamaño. así que hagámoslo así, aquí podemos escribir aquí descubrir
texto, entonces el texto del menú es así, está bien. Muy bien, ahora usaremos 30. Bueno, después de eso,
lo que haremos, seguiremos adelante y crearemos esto. barra de pestañas está bien, así que aquí escribiríamos barra de pestañas,
bueno, aprendimos anteriormente que en otros tutoriales de flutter Si tiene algún tipo de barra o barra de pestañas,
deberían aceptar a los niños y los niños deberían ser como en la lista, está bien, eso es lo que vamos a hacer
ahora, esta sería nuestra barra de pestañas y esto sería sea ​​nuestra vista de barra de pestañas, ahora sabemos cómo podríamos
hacerlas, de hecho podemos poner esta dentro de un contenedor y pon esto dentro de otro contenedor,
así tendremos dos contenedores, ¿vale? Así que ahora sigamos adelante y ocupémonos de esto,
así que aquí primero declararíamos un contenedor.

Y dentro del contenedor tendremos child y diremos que
child será la barra de pestañas, vale esta Está bien, pero acabamos de aprender que la barra de pestañas
debería tener hijos. Los hijos deberían ser tan lista o en la lista si puede ver aquí, así que registre esta
pestaña para que estas pestañas acepten a los niños, ¿vale? ahora aquí hacemos pestañas y ya está bien,
ahora aquí lo que podríamos hacer podemos coloque nuestras pestañas, estas pestañas aquí como este texto,
están bien las pestañas, así que aquí las envolveríamos constructor de pestañas también lo hace el texto y el primero es un
texto de etiqueta de pestaña de lugares, el segundo es inspiración y texto de pestaña, el tercero es emociones, está
bien, está bien, hasta ahora todo bien, está bien.

Bueno, ahora relacionado con estos tres, tal como
vimos anteriormente en la parte inferior. barra de navegación deberíamos tener una vista de barra de
tres pestañas, así que una vez que hagas clic en ellas entonces la barra de pestañas mostraríamos la
vista de barra de pestañas correspondiente, se mostrarían bien al igual que la barra de navegación inferior, en realidad son
bonitas, la idea es bastante similar, así que si haces clic En el elemento de la barra de navegación del botón, deberían mostrarle
elementos o páginas.

Lo mismo aquí es lo predeterminado. este y si haces clic en otros, también deberían mostrarte
nuevos elementos, así que eso es lo que estamos haciendo. vamos a hacer ahora para este aquí lo que haremos:
seguiremos adelante y crearemos otro contenedor Bien, ahora el contenedor debería tener un hijo y nuestro
hijo debería ser una vista de barra de pestañas. así que aquí escribiría la vista de la barra de pestañas secundaria, bien
ahora, dentro de ella, como ve, pase el cursor sobre ella para que Necesito un argumento que se llame hijos, así que eso es
todo, simplemente sigue adelante, escríbelo y escribe.

Como niños, está bien, ahora seamos rápidos, muy rápido, aquí
mientras recibiré un mensaje de texto y saludaré. texto allí texto por supuesto así que una vez que hagas
clic en cada uno de ellos deberían mostrarte este texto Está bien, está bien, entonces esa es la estructura básica que
ya creamos para nuestra aplicación. Está bien, por supuesto. Si intentas seguir adelante y ejecutarlo, te diré que
habrá un error. ¿Sabes qué error aparecerá? está bien, entonces no hay controlador de barra de pestañas, entonces,
¿qué significa que tenemos que definir una pestaña? controlador de barra para que esté bien, para
hacerlo debes venir aquí y aquí debes implementar esto que se llama con ticker, veamos
la mezcla del estado del proveedor de ticker Debido a la vista tabber, tienen su propio estado y
puedes acceder a esos estados si tienes esta clase.

Implementado en tu clase con estado, que es
esta, está bien, necesitas esa porque tabber El controlador toma este inc como parámetro. Está
bien, por eso los necesitas ahora. Iremos aquí. y declare aquí la barra de pestañas, veamos el controlador
de pestañas en realidad se llama controlador de pestañas y aquí hacemos el controlador de pestañas y ahora
aquí el controlador de pestañas Así que aquí usaremos el primero, porque
es un parámetro, como puedes ver. Entonces eso es lo que queremos usar. Ahora tendremos
tres pestañas, así que aquí escribiremos. longitud tres y este inc es en general, está
bien, ahora vsync es esto por aquí, pero Te muestra un error porque solo quieres hacer referencia
a un contexto, así que lo haremos.

Consulte este contexto por qué esto es importante
porque cada vez que hace clic en el botón o la barra se reconstruye, por lo que necesita el
contexto y v-sync se refiere a este contexto, ¿vale? Ahora vayamos aquí y tiene una propiedad que se
llama controlador como puedes ver aquí. Entonces aquí hacemos el controlador y el controlador
de pestañas. Ya lo tenemos aquí, lo mismo. controlador de pestaña controlador, bien,
ahora sigamos adelante y ejecútelo Bueno, parece que tenemos muchos otros problemas.
Tenemos esta flecha porque nuestro Tabber ve todo, necesita cierto ancho y alto,
pero no lo proporcionamos, por eso es obteniéndonos un error, así que aquí escribiremos altura,
digamos 300 y digamos doble punto máximo infinito, así todo el ancho disponible se aceptará.

Bien, ahora sigamos adelante
y ejecutemos esta vez, ahora el error desapareció. Sí, ya está funcionando bien, pero, por
supuesto, debemos ocuparnos de muchas cosas. ven aquí, está bien, genial, sin estar dentro
de la altura no sabe qué mostrar y cuánto mostrar, bueno, ese es el problema, bueno,
hasta ahora todo bien y definitivamente Necesito cuidar muchas propiedades aquí
y eso es lo que haremos, sigamos adelante. y cambia el color primero porque no son muy visibles. Está
bien, entonces cambia el color de la etiqueta. Está bien, y en este hacemos colores con puntos negros. Está
bien, entonces estas son las etiquetas ahora que son visibles. Bien, a continuación haremos un color de etiqueta
no seleccionado porque este y este queremos tener un poco de color diferente son casi muy diferentes
pero casi diferentes pero nosotros Si quieres especificarlo más, utiliza el color de etiqueta no
seleccionado y aquí ponemos los colores con puntos grises.

Uh sí, ahora son más obvios, está bien y ahora
hagámoslo, ahora queremos ponerlos aquí por aquí está bien, me refiero a una línea como esta. Ahora es
complicado, necesitas establecer algunas propiedades para eso. No funciona directamente como si se usara una propiedad,
así que aquí primero debes definitivamente poner esta llamada es un desplazamiento verdadero, sí,
se puso un poco, pero no exactamente lo que quiero Bien, ahora este es un problema y este
problema en realidad anula este. Necesitamos envolver esto alrededor de un contenedor
o widget. De hecho, esto se llama alinear widget.

Alinee este y dentro de él usaremos la propiedad
de alineación para alinear la alineación centro izquierda Está bien, entonces pondrá todo a la izquierda. Bueno, eso todavía no funciona porque hay otras
configuraciones que debemos tener en cuenta. Ahora aquí tienen un poco de relleno. entonces necesitamos deshacernos de ese relleno, así que
primero nos desharemos de todos los rellenos, ¿vale? así que veamos aquí nivel de relleno borde constante
esto es solo izquierda cero derecha a cero Vale, aquí ves que están todos juntos, pero ahora
digamos que no tienes este. Vale, todavía. funciona pero retrocedió, así que primero usando este,
ponemos todo a la izquierda, bien, y luego usamos En este controlamos el espacio, eso significa que
necesitamos usarlos ambos, pero ahora, si ves Ten cuidado, saca este, funcionará un poco diferente
una vez más. Está bien, ahora si Si solo pones este, no funcionará solo, ¿vale?
o si solo pones esto, veamos cómo funciona. Está bien, no hay respuesta, así que muchos de ellos trabajan
juntos, no solo en un entorno, por lo que podría ser Es doloroso si no lo sabes, así que todos deberían trabajar
juntos, pero ahora, por supuesto, significa.

Vida a cero significa que podemos ponerlo directamente a la
izquierda, así que aquí podemos poner 20, veamos Entonces, en el lado izquierdo, todos tendrán 20. Está
bien, ¿y ahora qué pasa si pones 20 en el lado derecho? Bueno, ahora el espacio es mucho mejor. Bueno,
ahora el tamaño del indicador. veamos que el tamaño del indicador podría
ser el mismo que el tamaño del nivel o hay una propiedad que se llama tamaño del indicador tamaño
del indicador y usaremos una barra de pestañas etiqueta de tamaño del indicador Ahora es el mismo que el tamaño de la etiqueta.
Esta es otra propiedad que podemos cuidar.

Pero ahora definitivamente lo que queremos queremos que
sea, digamos así el de aquí, vale, no, en realidad Uh, una línea, está bien, para trabajar en esto, necesitamos
especificar nuestra decoración personalizada. pintor, podrías pensar que puedes dibujar directamente
un círculo aquí, no, no puedes, el problema es que aquí, si ve una propiedad que se llama indicador,
ahora si pasa el cursor sobre ella, quiere tomar el widget de decoración, está bien, así que si sigues
adelante y usas directamente un contenedor u otro tipo de método de decoración de cajas no funcionará, así
que tienes que implementar aquí una clase que se extienda decoración y devolverá un valor de esa clase, lo que también
significa que estamos devolviendo una decoración Entonces eso es lo que tenemos que hacer ahora. Para hacerlo,
debemos declarar una nueva clase. Bien, eso es lo que lo haremos, haremos la barra de pestañas del círculo de clase o el indicador
de pestaña, está bien y debería extender la decoración. Está bien, este tan pronto como hagas eso, veamos
el indicador, pasaremos el cursor sobre él.

Es que falta una propiedad primordial, por lo que
cada vez que extiendas la decoración debes implemente crear pintor de cuadro, está bien, debe hacerlo,
de lo contrario obtendrá un error y aquí estará Deberíamos resolver el error. Ahora queremos devolver
algo correcto, así que queremos devolver esto. circule aquí, está bien, entonces, ¿cómo hacerlo ahora?
Queremos dibujar un círculo personalizado y aquí solo puedes dibujar un círculo personalizado; de lo contrario, no
funcionará bien, así que aquí queremos devolver un círculo. pero para hacer eso necesitas implementar otra
clase y esta clase se llamará círculo y extiende el pintor de cajas Está bien, lo siento, debería estar
fuera de esta clase, no dentro. Esta clase está bien ahora mientras hacemos eso,
verás, dice que devuelve un pintor de cuadros. Así que primero extendemos una decoración, por eso
necesitamos este método, pero ahora aquí dice.

Que este método debería devolver el pintor de cuadros,
por lo que tenemos una nueva clase aquí y de esta clase queremos devolver un pintor de cajas ahora
tenemos otro problema dice que falta otro propiedad primordial de la pintura, eso es lo que también
necesitamos aquí. De lo contrario, obtendremos un error. Es muy interesante y complicado porque, una vez más,
esto solo requiere un widget de decoración. Por eso queremos crear un widget de decoración
y, a cambio, el widget de decoración tiene un método que se llama crear cuadro pintor debemos
anularlo y una vez que lo anules queremos devuelve algo lo que devuelve, devuelve un cuadro
pintor, así que seguimos adelante y creamos otro clase de pintor de cajas, está bien o una clase que extienda
el pintor de cajas y aquí podrías regresar.

Una pintura o deberías anular un método de pintura, está
bien, así es como funciona, entonces, ¿qué haremos? hazlo ahora mira este a esta clase queremos pasar color
y radio está bien, eso es todo lo que queremos Entonces, una vez que lo llamamos desde aquí, podemos
pasar el color y el radio, así que hacemos el final. color color está bien y ahora aquí hacemos doble radio
porque queremos regresar, queremos usar esto también y pásalo a nuestras otras clases, está bien,
y los obtendremos de la función de color. pero ahora, por supuesto, dice que necesitas use el modificador iluminado o cosas así, pero
también necesitamos crear el constructor Así que aquí está nuestro constructor, por lo que necesitas
este color de punto y este radio de punto. Bien, ahora el error debería desaparecer tal como está, ya
que sabemos que esto debería devolver un pintor de cuadro. Bien, esta clase regresa al pintor de cajas, así
que podemos llamar a esta clase desde aquí. Está bien, lo hacemos a través de este, así que
devuelve este y podemos pasar este color. porque usamos este color para pintar en este
método y ahora aquí tendremos radio radio Bien, por supuesto, si pasas el cursor sobre él, te
preguntará si no está definido como principal.

Parámetro aquí, así que eso es lo que tenemos que
hacer aquí también, así que seguiremos adelante y Copie directamente esta parte a esta parte, está
bien, y ahora aquí también copiaremos esta. y ponlo aquí y simplemente cambiaremos el nombre Vale, sí, ahora el error debería desaparecer. Ahora mira este método de pintura. Este
método de pintura es muy interesante. este método de pintura en realidad debería dibujar este círculo. Bien,
ahora, ¿qué podríamos hacer? Podríamos seguir adelante y usa este lienzo y tendrá un método de dibujo dentro,
así que haz canvas.draw círculo, creo que esto uno está bien, ahora el primero está compensado, por lo que podemos usar
este desplazamiento cualquiera que sea el desplazamiento dado Vale, es un desplazamiento predeterminado una vez que hacemos clic en En la pantalla lo vemos, bien, ahora aquí dice que se necesita
un objeto de pintura.

Bien, se necesita una pintura. objeto, así que necesitamos crear nuestro propio objeto de pintura
y eso es lo que haremos, así que aquí pintamos paint llamado diría aquí paint usaremos
el constructor de pintura para crear el objeto de pintura, está bien, ahora pinta, que
tiene algunas propiedades subyacentes que podemos usar es propiedad de color, por lo que para esta propiedad de
color usamos el color que transmitimos y para el hardware La aceleración que podemos especificar es anti-alias, es verdadera,
por lo que usaremos una aceleración más fuerte para esto. y simplemente lo cambiamos a este guión bajo para que
ahora se conviertan en el mismo objeto de pintura. Bueno, espero que lo que está sucediendo aquí tenga sentido,
así que llamaremos a esta clase y la transmitiremos. el radio y el color y se reducirá a este
y aquí usando este método de pintura que Vamos a dibujarlo, dibujaremos nuestros círculos. Ahora seguiremos
adelante y lo usaremos, así que lo llamaremos desde aquí. Bien, llamaremos indicador de pestaña circular aquí usaremos colores,
digamos colores, así que ahora para este color usaremos use el color de nuestra aplicación colores de la aplicación
punto color principal y radio aquí usaremos cuatro, está bien Ahora sigamos adelante y ejecútelo para ver el resultado.

Bueno,
nuestra barra de pestañas está ahí, pero en la parte superior. Bien, ahora tenemos que trabajar en la posición. Para trabajar
en la posición, tenemos que llegar a esta pintura. objeto o método de pintura aquí y verá que tiene este
objeto de configuración de imagen uh y desplazamiento objeto, está bien, necesitamos trabajar con ambos juntos, por lo
que actualmente, dondequiera que lo toques, se está tomando eso. colocar y poner al principio está bien para que podamos
calcular la posición y cambiarla, ¿está bien? Bueno, lo primero que vamos a hacer aquí es crear un nuevo objeto
de desplazamiento, así que el desplazamiento final dice círculo. desplazamiento del círculo, bien, ahora usamos el constructor
de desplazamiento, ahora podemos contar x y, así que necesitamos cambie el xy y primero este objeto de configuración, este
usando este podemos acceder desde cualquier lugar toca bien esa área y su ancho y alto, así que aquí
usaremos el tamaño porque en realidad está en tamaño Dondequiera que toques, puede tomar el tamaño del área,
así como su ancho, así que cualquier cosa que toque entonces tendré acceso a ese ancho.

Ahora que tengo
acceso a este ancho, puedo dividirlo por dos. Vale, me pondrá en el medio, así que
si toco aquí ahora volveré a este lugar. porque lo divido por dos, lo que toque, obtengo el ancho
y lo divido por dos, así es como funciona, ¿vale? y ahora digamos "bueno" para la altura, así que es más
como la parte x y para la parte y establezcamos cero y mira el resultado, está bien y tenemos un pequeño problema
aquí, veamos, está bien, necesitas hacerlo. agregue un verificador nulo uh y qué más ahora
aquí podemos sumar estos dos opuestos, ¿vale? el otro está alterado en círculo. Bien, ahora
sigamos adelante, ejecútelo y veamos el resultado. entonces parece que está funcionando, por lo que está en el
medio en este momento, dondequiera que toques en este momento. Necesitas empujarlo hacia abajo hasta este ahora recuerda que
el sistema de coordenadas es así dondequiera que toques ¿Está bien el cero cero o así es un cero
cero entonces esta coordenada x es y? coordenada así que ahora mismo aquí en la coordenada
x estamos en el medio a la derecha Está bien, prácticamente en el medio, no exactamente, pero
podemos optimizarlo más.

Está bien, así que todos ustedes. Necesitas hacer cualquier radio que obtengas, debes hacer menos
2 con eso, está bien, entonces menos radio 2. entonces ahora está exactamente en el medio de la coordenada
x pero de todos modos ahora para y entonces baja, aumenta, vale, entonces para este uno,
cero, cero está aquí, baja, aumenta Así que ahora tenemos que venir aquí
y desde el objeto de configuración. Necesitamos obtener el tamaño y el ancho. Ya
tenemos el ancho. Ahora obtendremos la altura. Bien, ahora aquí, veamos, también necesitamos agregar un verificador
nulo, sigamos adelante y ejecútelo, así que si es cero cero y este área total seleccionada el área
total seleccionada la altura tal vez sea esta Así que ahora estoy poniendo esta altura desde
cero más esta, está bien, lo ves, bajó Vale, sí, por supuesto, podemos restar un poco
el radio para aumentarlo un poco.

Ok ahora es perfecto Bien, entonces, ¿qué está sucediendo aquí una vez más, dondequiera
que hagas clic, obtiene esa área y comienza desde cero para la dirección y cero para la dirección
x dirección x y dirección y y también obtienes el ancho y alto totales y restamos eso para obtener
la posición deseada, ojalá tenga sentido De todos modos, este es el objeto de pintura o el método
de pintura, puedes pintar cosas y, personalmente, yo Me gusta mucho de todos modos, así que ya terminamos
con este. Lo siguiente que queremos hacer es dibuja bien este para dibujar esto todo lo que tenemos
que hacer tenemos que venir a nuestro contenedor aquí y no hicimos un contenedor para el primero, tendremos
otro contenedor y definitivamente necesitamos use decoración de caja, está bien, sería rápido, así
que decimos que en este caso no queremos el completo El ancho tal vez solo diga 200 y el alto es el mismo que
el alto principal, que es este y la decoración.

Ahora qué imagen queremos usar queremos usar la imagen
uh, con suerte, esta es la primera imagen entonces lo llamaremos montaña.jpeg asegúrese de que no tengamos
ningún error mountain.jpg O por ahora mostraremos solo una imagen estática,
pero más adelante en este tutorial Obtendremos toda esta imagen de nuestra solicitud
de red. Está bien, sigamos adelante y ejecútelo. Vale, nuestra imagen está ahí y
todos solo tenemos una imagen. Como puedes ver, ahora aquí algunas de las propiedades,
así que vamos a ocuparnos de ello rápidamente. Bueno, tomó todo el espacio, pero
sería bueno si pudiéramos ponerlo. Más imágenes aquí, está bien, entonces las tomará exactamente dentro de
la altura, está bien, así que no te preocupes, nosotros nos encargaremos. de ello ahora mismo, así que aquí queremos desplazarnos a través
de diferentes imágenes para este botón de este lugar, ¿vale? Sí, ahora lo que podrías hacer aquí podríamos ajustarlo
a un generador de vistas de lista, ¿vale? así que aquí lo haré y lo envolveré alrededor de un widget y
lo llamaremos generador de vistas de lista, este está bien.

Muy bien, ahora, por supuesto, dice que necesitamos
agregar un elemento aquí, que es este. y de hecho, dentro de él, lo que
podríamos hacer sería devolverlo. Está bien, entonces aquí regresamos, está bien,
si obtienes un código que se vuelve así de feo. Puedes deshacerte de esto, podrías decir la opción comando
l en Mac, está bien, intentémoslo una vez más. comando de opción l Bueno, ahora está mejorando, entonces nuestro
contenedor está dentro de este generador de vista de lista Bien, ahora cuántos elementos queremos por ahora, diga
el recuento de elementos dentro de listviewbuilder.

Queremos tres elementos, está bien, entonces los elementos cuentan los tres Bien, ahora sigamos adelante, ejecútelo y veamos el resultado,
por lo que nuestros elementos están aquí, pero ahora mismo están horizontal o lo siento, vertical, pero queremos que sean
horizontales, está bien, así que hagámoslo aquí podemos cambiar el eje podemos hacer dirección
de desplazamiento acceder punto horizontal ok ahora se ve mucho mejor Está bien, mientras que otras propiedades
podríamos encargarnos de ellas. decir cosa izquierda y derecha, excepto
para el contenedor principal, que es este A esta parte aquí podemos asignarle margen o relleno para
que hagas un relleno constante solo en las inserciones. así que dejamos 20. Está bien, ahora es mejor, pero dentro
de cada contenedor aquí podemos proporcionar un margen. entonces se toma un lado extra de esta
caja, así que aquí hacemos margen borde constante esto es solo y escribimos digamos 10. Unos 15 píxeles así se ven mejor y también
podemos proporcionar un margen superior. Podríamos decir 10, vale, sí, y al mismo
tiempo podemos desplazarnos por ellos. Vale, funcionará en el futuro. En este tutorial
veremos cómo hacer diferentes cosas aquí.

Pero por ahora está funcionando, lo sabemos bien y
también cargamos las imágenes dinámicamente. Bueno, lo siguiente que queremos hacer es encargarnos
de esto, estas pocas cosas, está bien. Muy bien, aquí hemos terminado con esta pestaña,
barra de pestañas y vista de barra de pestañas. Está bien, ¿qué es lo siguiente que queremos hacer?
Nos encargaríamos de esto.

Está bien, lo haremos. eso, uh, lo primero es lo primero, mientras que aquí está en una sección
de fila, así que aquí remamos, está bien y niños. Ahora, aquí ya trabajamos en este
y se llama aplicación de texto grande. Ponemos texto grande aquí y pondremos explorar. O bien, ahora guardémoslo para que esté ahí
abajo, pero ahora tienen el mismo tamaño de texto. pero ves que no tienen el
mismo tamaño de texto Entonces sabemos que podemos pasar parámetros como el tamaño, que es el tamaño
de fuente, así que aquí usamos el tamaño, digamos 22. Vale, sí, ahora es mejor y al mismo tiempo podemos usar
un poco de distancia, así que aquí lo pondremos. así, está bien, pero, por supuesto, tenemos
que encargarnos de esto de aquí. el relleno, para ello lo envolveremos alrededor de otro
widget para que el contenedor de opciones de comando Ahora mientras este contenedor podríamos hacer margen. Sólo entonces hacemos a la izquierda, digamos
20 y a la derecha 20. Está bien, escribimos 20. porque en el futuro también necesitaremos 20 píxeles
aquí.

Ahora queremos mostrar el texto pequeño. pero ya trabajamos en ello, por eso se llama texto
de aplicación, este componente texto de aplicación Vale, entonces, como puedes ver desde aquí,
se necesita tamaño, texto y muchas otras cosas. Así que aquí escribiré ver todo
y podemos especificar el color. Así que aquí coloreamos y usamos colores de nuestra
aplicación Colors Dot, digamos color de texto. Está bien, sigamos adelante, ejecútelo y guárdelo,
veamos el resultado. Sí, es así. Ah, pero ahora podemos ocuparnos del espacio de aquí, así
que una forma de hacerlo es alinear el acceso principal. espacio de alineación de acceso principal entre  está
bien, ahora se ve perfecto, está bien, genial Así que a continuación nos ocuparemos
bien de esto para hacer esto.

Definitivamente necesitamos un constructor
de vistas de lista horizontal y al final Al mismo tiempo, dentro del constructor listviewbuilder habrá una
columna correcta, así que aquí tal vez tengamos cuatro columnas. cada columna mostrará esta y luego esta y la
siguiente columna, por lo que la columna sería El hijo de listviewbuilder o devolverá la columna de él, está
bien, así que ahora sigamos adelante y hagámoslo. Así que aquí definitivamente necesitamos un cuadro de tamaño
y en este caso usaremos 20, por supuesto que necesitamos. este relleno aquí o margen está bien, así que usaremos
un contenedor para hacer eso y entonces hacemos margen y El borde constante solo se inserta y esta vez solo dice izquierda
20. Bien, ahora el niño sería la vista de lista. constructor este y cualquier tipo de constructor
que tome una función que funcione tiene dos propiedades o dos
parámetros, lo siento y otro es el primero es contexto el
otro es índice la mayor parte del tiempo Bien, ahora aquí queremos devolver algo, como
dije, queremos devolver una columna.

Ok, la columna tendrá hijos, ok Así que ahora aquí, por supuesto, necesitamos el punto y coma.
Ahora los niños, cada uno de ellos, te harán ver. si tenemos tendremos cuatro cuatro cuatro hijos correctos
y cada uno de los hijos sería una columna Así que aquí podemos mencionar el recuento de elementos recuento de elementos por ahora mencionaremos
cuatro, pero en el futuro los leeremos dinámicamente Está bien, ahora aquí dentro, mira
este, así que este es el borde. Bueno, ahora queremos leer esto y mostrarlo. Debe tener
borde, así que usaremos contenedor y cuadro. propiedad de decoración está bien, está bien hacer eso, creo
que podemos ver, vamos a pedir prestado algún contenedor propiedad, supongo que más o menos desde aquí, así
que simplemente copiaremos esta y la pegaremos aquí.

Pero no se ve bien, así que use el comando de opción
l en Mac para purificarlo y tenemos un error. Está bien, ahora es bonito, pero una cosa, echemos un vistazo,
así que no queremos que cada uno de ellos tenga 80 uh. lo siento 200 lo queremos 80 vale, está bien y por ahora
creo que solo necesitamos este margen izquierdo, vale para que podamos deshacernos de este, lo siento, margen
derecho, así que escriba margen 50 y radio circular 20 está bien y el color de fondo es blanco porque necesitas
un color y todo lo demás se ve bien pero ahora, ¿qué tal las imágenes? Por ahora, sigue
adelante y usa esta imagen y mira el resultado.

Vale, por supuesto que tenemos un error,
veamos de dónde viene este error. Bueno, incluso si no veo allí, lo sé, pero
¿saben ustedes dónde está este error? ventana gráfica que no tiene altura, así
que ahora, si vienes al padre de aquí el padre no tiene ancho ni alto entonces este contenedor tiene pero el patrón listviewbuilder
no lo tiene, así que siempre si tienes una lista, sé un El constructor es un padre y debe estar dentro de la altura; de
lo contrario, obtendrás un error, así que aquí usaremos altura digamos 120 y con digamos doble punto máximo
infinitivo está bien, sigamos adelante y ejecútelo y el error debería desaparecer, está bien, sí, y ahora
tenemos algunos problemas con el relleno aquí. debido a esta barra de navegación inferior, bueno, ahora
hay algunas formas en que podemos deshacernos de esta uh, podemos cambiar este a 100 y ver que
no es muy bueno y veamos qué más Vale, hay otra razón por la que está
sucediendo y me olvidé de esto, así que dirección de desplazamiento porque ahora desciende
desde allí, por eso se muestra así Entonces aquí podemos cambiar la dirección de desplazamiento.

Vale, accede al punto horizontal. Vale, ejecútelo.
Ahora se ve mejor. Vale, sí, y veamos. en lugar de tanta altura aquí tal vez hagamos
10 bien porque también queremos muestra el texto aquí, vale, qué texto,
este texto, vale, viene de allí Bueno, si miras este, este
es el primer contenedor. está mostrando este, así que queremos mostrar
este texto aquí para que podamos tener Otro contenedor, está bien, así que por
aquí contenedor y tendremos un hijo. y simplemente usaremos el texto de la aplicación para
este y por ahora solo diremos kayak y veamos tenemos un error Lo siento mucho, pero este texto es este,
nos olvidamos de eso y decimos color. usaremos colores de la aplicación punto color del texto segundo color oh, vamos a ejecutarlo bien,
así que aunque está ahí bastante bien, no lo hizo funciona bien, esa podría ser la razón podría ser
esta, así que veamos, sí, si lo eliminas, funciona ¿Cómo puedes probarlo? Digamos, por ejemplo, que puedes poner
en rojo solo un texto aleatorio para que esté en el medio.

Mira, pero ahora todavía necesitamos este margen izquierdo,
así que para ese podemos envolverlo alrededor de un widget. widget de contenedor y dentro de él podemos poner margen
aquí para que sea constante como inserciones entonces escribimos 20 Vale, ahora está funcionando bien y tal vez podríamos decir
30. Vale, perfecto, sea cual sea el texto que pongas. estaría en el centro, está bien, no importa, ahora
queremos mostrar diferentes imágenes para esto. Y estas imágenes ya están en el archivo de tu proyecto
aquí, como un kayak de senderismo ondulante. bucear está bien y también queremos mostrar
texto diferente para cada uno de ellos para Ahora en esta aplicación los leeremos estáticamente,
lo que también significa que los vincularemos aquí. Quiero decir que los declararemos aquí,
así que crearemos una nueva variable. y lo llamaremos, por ejemplo, imágenes,
lista de imágenes. bueno o en lugar de lista podemos usar un mapa, vale,
lo llamaremos imágenes y las guardaremos. en el valor del par de claves, por lo que la clave serían
nuestras imágenes y los valores serían el texto.

Ahora las imágenes como se ven desde aquí, podemos
simplemente escribirlas para poder llamarlas globo. png y el valor está aumentando, ¿vale? y usaremos mayúscula Entonces, si no sabes qué es un mapa, consulta mi
otro tutorial en la descripción. Tengo una lista. enlace de video para eso de todos modos, así que ahora nuestra lista de imágenes
está lista para que podamos seguir adelante y leerlas, ¿vale? y muéstrate aquí ahora para este tenemos que venir a este lugar y aquí
es donde mostramos las imágenes Ahora todas las imágenes están en la carpeta img, por lo
que todas las carpetas img permanecen allí ahora aquí. Necesitamos acceder a nuestro mapa como imágenes. Ahora queremos
acceder a la clave y, como dije, nuestras imágenes. El mapa tiene clave y valor, por lo que las claves son las
imágenes, así que accedería a esa y ahora aquí hay otra. propiedad llamada elemento en el índice, así que usaremos
esa ahora, ¿de dónde viene este índice? Este índice proviene de esta lista para ser un generador porque nuestra
vista de lista tiene cuatro elementos en nuestro mapa.

También tiene cuatro elementos, lo que significa que
este índice correspondería, no estará mal, ¿vale? Sí, entonces usamos este ahora, el mismo que usaríamos
aquí, pero en lugar de claves, esto el tiempo seguiría adelante con los valores, está bien,
ahora sigamos adelante y ejecutemos para ver el resultado. perfecto, entonces nuestras imágenes están ahí, nuestro
texto también está ahí, está bien, ahora queremos Para poner un poco de distancia ahí, está bien, ahora
sigamos adelante y creemos esta distancia. uh, aquí decimos tamaño de caja y altura. cinco cinco píxeles Bien, ahora tenemos problemas de desbordamiento, ahora tenemos demasiado
espacio vacío en la parte superior, así que en realidad Podemos optimizarlo para que no necesitemos tanto espacio
vacío, así que si llegas a la parte superior Vamos a encontrarlo bien aquí, bueno, definitivamente
tenemos esta caja de tamaño que es 40, creo, aquí.

Así que en lugar de eso podríamos hacer 30 bien y más
aquí también lo mismo en lugar de 30 hagamos 20 Está bien, sí, esa es una forma en que lo resolvimos, pero
el problema principal está aquí en la parte superior. uh, dentro de este contenedor no se resolvió,
así que aquí podríamos hacer 120 ahora, ¿vale? y como hicimos ese en el contenedor mismo,
también podemos aumentar este un poco Vale, oh, es perfecto. Increíble. Ya hemos
terminado con esta página. Hasta ahora, Hemos creado nuestra página de bienvenida, esta barra
de navegación inferior y esta es la página principal. A continuación veremos cómo construir este.
Vale, esta sería una página de detalles.

Ahora, si echas un vistazo, verás que esta
imagen y estos menús se superponen. Así que debemos ocuparnos de este problema, cómo
hacerlo, así que definitivamente esto se superpone. problemas, por lo que necesitamos usar la pila de
widgets y colocar el widget juntos, está bien. Así que ahora continuaremos y declararemos una nueva página
dentro de ella y la llamaremos página de detalles. página de detalles dot dart, está bien, entonces está aquí Bueno, personalmente creo que esta página de inicio, que es
ésta, no debería pertenecer allí con las páginas de siesta. porque en realidad es una de las páginas más grandes
que tenemos, así que lo que haré será sacarla y Ponlo aquí, refactorízalo, pero ahora sigamos adelante y ejecutemos
nuestra aplicación y asegurémonos de que se importe automáticamente.

Cada configuración sí, funcionó bien,
a veces debes encargarte de estas cosas si cambia tu importación automática así como aquí  está bien,
entonces parece que lo hizo automáticamente para nosotros Ahora iremos a nuestra página de detalles. Aquí
crearemos una clase con estado y la llamaremos. página de detalles está bien, lo primero que
definitivamente quieres es devolver un andamio Está bien y tendrá un cuerpo dentro del cuerpo
en el que deseas devolver un widget de pila. Bien, ahora el widget de pila debería tener ancho
y alto; de lo contrario, aparecerá un error.

Por eso lo envolveremos alrededor del widget de
contenedor, ahora este widget de contenedor. Para este usaremos doble máximo infinito,
ancho y alto es lo mismo, ¿vale? por lo tanto, el widget principal del widget
de pila o el widget de pila deberían tener uh, con una altura proveniente de su widget principal,
de lo contrario obtendrá un error Bien, ahora lo que haremos: vendremos aquí en nuestro pi principal,
bueno, este archivo principal, así que ahora solo Queremos trabajar solo en esta página y una vez que
hayamos terminado, importaremos los datos de la red. y combinarlos todos juntos usando qubit de todos modos,
así que ahora iremos a la página de detalles y necesitamos importarlo, sigamos adelante y hagámoslo ahora,
ejecútelo, entonces, ¿qué sucede, por supuesto? No hay nada ahí y tampoco tenemos ningún error.
Genial porque está vacío.

No hay nada ahí. Está bien ahora si lo miras detenidamente Entonces aquí están posicionados aquí, entonces lo que haríamos
sería seguir adelante y declarar un widget de posición. así que aquí dentro de él tendremos uh, estas dos cosas ahora podrían estar en una
fila, está bien, entonces haremos una fila La fila debería tener hijos y al mismo tiempo aquí el primer
ícono, así que hacemos el ícono ahora bien. Se podría hacer clic en él, por lo que queremos
que sea un botón de icono en lugar de otro icono.

Así que por ahora el evento no presionado está vacío.
Ahora el ícono en sí usará el ícono Icons Dot. menú Bien, ahora sigamos adelante y ejecútelo para ver qué sucede.
Está en la parte superior, pero estamos usando la posición. widget para que podamos definirlo dentro de las propiedades izquierda
y derecha, de modo que la izquierda 20 y la parte superior digan 70. Así que todo se redujo a este lugar
y estamos contentos con esto. Está bien, y por ahora también necesitamos configurar
el color, así que lo hacemos aquí. Y bueno, definitivamente queremos mostrar un
color diferente, queremos que sea blanco. porque la mayoría de nuestras imágenes que vendrían
desde el fondo tendrán un fondo azul, ¿vale? Así que nos encargaremos de ello un poco más tarde, una vez
que mostremos la imagen.

Está bien, ya está hecho, pero. Si lo deseas, puedes continuar colocando este ícono
aquí, pero no pude encontrarlo, pero puedes Pon cualquier ícono que quieras, pero entiendes la lógica de por qué
lo hice sin formato. Bueno, ahora seguiremos adelante y muestra esta imagen, bien, ahora una vez más, esta imagen
también está dentro del widget de posición ahora tendrá contenedor y cosas de izquierda y derecha, así que
hacemos izquierda cero y derecha a cero Ahora, el contenedor de aquí debe tener un
ancho, así que lo hacemos con aquí. y un doble punto máximo infinito queremos obtener
el ancho completo y la altura que queremos queremos especificar es 300 y ahora aquí para
la imagen, por lo tanto, continuaremos con el La misma decoración interior, está bien, entonces la decoración de la caja
y la imagen, decoración, uh, imagen de decoración.

Y ahora aquí una vez más otra
propiedad de imagen y aquí este, pero en lugar de recurso de imagen
usaría una imagen ácida Está bien, ahora sigamos adelante, ejecútelo
y veamos el resultado. Está bien, ahora porque todos están
bien posicionados, pero otra cosa. es la propiedad de la imagen, por lo que aquí
queremos que el cuadro encaje correctamente Lo siento, debería estar dentro de este. punto de ajuste de caja, diga que siga adelante con la cubierta y vea el El resultado está bien, pero ahora nuestro ícono
ha desaparecido porque este se está superponiendo. ese se superpone a este, por lo que queremos poner
la imagen primero y luego el ícono Vale, ahora el icono está aquí, pero ahora queremos
un icono blanco en lugar de uno negro. Entonces aquí podemos especificar este color de icono. entonces color colores punto blanco está bien, es demasiado hasta
arriba, así que hagamos 50. está bien, ahora estamos bien Está bien, entonces, por supuesto, puedes jugar con esto. valor si no está satisfecho con la posición de
la imagen, por lo que también puede hacerlo encajar con ver el resultado bien,
en realidad no cambia mucho así que ajustemos la altura, sigamos adelante y veamos,
sí, así, así que preferimos seguir adelante con encaja con nuestra cubierta, está bien, ahora
también puedes hacer un contenedor o contener para que coincidan, tienen prácticamente el mismo
resultado que con la altura de ajuste, así que cubriremos Está bien, perfecto, lo siguiente que queremos es trabajar en
este.

Está bien, creo que podríamos seguir adelante un poco. un poco más ancho con esta imagen, está bien,
ahora aquí queremos tener este resultado. este tipo de resultado curvo está bien, ahora para
este una vez más usaremos otra posición para expulsar, sigamos adelante y declaremos un widget de
posición, eso es lo que haría posicionado y el niño vuelve a ser el contenedor ok bueno
ahora como ven bien queremos ponerle un tallado El contenedor por aquí está un poco tallado, está bien, así
que para hacerlo necesitamos especificar la posición superior. así que hicimos el top 330 porque anteriormente hemos visto que
la altura total del contenedor de nuestra imagen aquí es 350 Así que subimos un poco en la parte superior para que esto sea 350 y
320 está aquí, tal vez en algún lugar aquí o 330, está bien. Muy bien, ahora para el contenedor de aquí necesitamos ancho
y alto, así que aquí lo hacemos con, por ejemplo, doble. puntee bien ahora para este ancho en realidad porque estamos
dentro del widget de posición dentro, por lo que debemos Acostúmbrese a la consulta de medios, está bien, entonces haga la consulta de medios
punto de contexto tamaño de punto punto digamos, por ejemplo, uh ancho, bien, esto es lo que queremos y para la altura, está
bien, así que por ahora digamos altura, por ejemplo.

500 está bien y también queremos usar lo que se
llama color, así que usas colores.rojo solo para propósito de depuración, está bien, sigamos adelante
e intentemos comprobarlo para que esté ahí y ver eso. Al decir eso queremos decir que también necesitamos decoración
porque queremos decoración de carbohidratos o curva por aquí al igual que el diseño como ves, está bien, entonces el radio
del borde y el radio del borde y ahora aquí solo lo hacemos Así que aquí hacemos laptop y radio punto, ¿qué es circular?
y hacemos 20 izquierda arriba derecha arriba entonces radio esa circular 20 y necesitamos mover el color dentro
de esta decoración, de lo contrario obtendremos un error ahora veamos el resultado, está bien, así que sí, esta
es la curva que queríamos, tal vez queramos 30. Bien, ya entiendes la idea. Eso es lo que tenemos
en lugar del rojo que queremos usar. blanco para que sepamos que ya está funcionando
bien y creo que podemos subir un poco más Aquí, como puedes ver, este espacio en
blanco que apareció no se ve bien.

Entonces podemos hacer 20, está bien, ahora es mucho mejor,
está bien, aquí si ves este contenido, estos son todos el diseño de la columna está bien, prácticamente una columna,
por supuesto, esto podría ser una fila dentro de una columna pero columna columna columna columna entonces todas estas son
columnas, así que aquí usaremos un elemento secundario así que adelante y declara niño y dentro
de niño tendremos la columna Bueno, ahora este de aquí.

Pero ahora hay otra cosa que también podríamos tomar
aquí uh oh, lo haremos un poco más tarde, ¿vale? Te mostraré un poco más tarde por qué, así que ahora sigue
adelante y escribe este texto, pero ahora, como ves Estos dos textos están en formato de fila, por
eso declaramos fila aquí y hacemos hijos. ahora aquí podemos usar nuestra aplicación texto grande, vale,
toca texto grande y aquí simplemente decimos que sí para que digas Es posible que por ahora estemos usando este, pero en el futuro
los leeré de la base de datos como dije anteriormente. y ahora aquí este signo de dólar 250. Está bien,
ahora sigamos adelante y veamos qué pasa. Vale, sí, y queremos crear espacio entre ellos.
Bien, aquí usaremos la propiedad. La alineación del acceso principal para el acceso principal de la fila
es esta, por lo que el punto de alineación del acceso al dominio espacio entre ellos, por lo que los empujará hacia el borde
ahora que están demasiado hacia el final, ¿verdad? Eso es lo que quería decirles desde el principio,
así que veamos si podemos asignar margen.

O relleno en realidad no importa, así que aquí hacemos
relleno solo con inserciones de borde constante aquí están los 20 izquierdos, los 20 derechos, y al mismo
tiempo también podríamos hacer el top 30. Oh, se ve mucho mejor, más
parecido a este, ¿vale? El color es demasiado negro. También podemos encargarnos
de este color aquí para que puedas hacer colores. punto negro 54 está bien y aquí para
este usamos el color lo siento color colores de la aplicación punto uh color del texto creo que este Está bien o también podemos usar el color
principal para este color principal. Está bien, está bien, pero creo que es demasiado gris, así que
aquí es negro con una opacidad tal vez de 0,8, sí, funciona. mucho mejor, está bien, hasta ahora todo va bien con
esta sección, ahora seguiremos adelante y lo haremos. muy rápido, así que ahora quieres mostrar este  y una
vez más el que está dentro de esta columna y aquí quieres tener un cuadro de tamaño, por lo que el
cuadro de tamaño aquí dice altura 10 píxeles y ahora queremos tener este, así que también está en una fila
este ícono de mapa y la dirección, así que lo hacemos fila aquí y hacemos niños aquí y el primero es este
ícono, así que aquí con el ícono de iTunes uh um creo que es eso creo que es una ubicación
veamos uh está buscando el ícono um sí Creo que el primero.

Seguiremos adelante
con el primero o veamos la ubicación. Lo siento, hola ocasión, bueno, en realidad no es el primero,
um, el segundo, está bien y nos vendría bien. el color está bien, entonces la aplicación colorea ese color principal
o el color principal de la aplicación y luego creo que está bien y seguiría adelante con este ahora para este podemos usar el
texto de la aplicación en segundo lugar y el texto es u Es California, lo mantendremos por ahora y coloreamos, digamos, los colores
de la aplicación, el texto con puntos, coloreamos nuestro texto principal.

El color no es este, tal vez el primero, no lo recuerdo
de todos modos, solo sigue adelante y compruébalo. uh, mientras esté allí y tal vez podamos usar
un poco de caja de tamaño aquí para Copiaré esto, lo pondré aquí y lo haremos
con y en lugar de esto haremos cinco, veamos. Sí, se ve bien. Ahora queremos que estas
estrellas estén aquí y una vez más. Antes de continuar con las estrellas, también debemos
crear el cuadro de tamaño, la distancia. entonces es casi el doble de la distancia aquí así
que hacemos 20.

Ahora aquí para las estrellas mismas aquí usaremos el objeto de ajuste, está bien,
el widget de ajuste, ahora se necesitan niños ahora en niños usaremos list dot generar este
y queremos usar cinco estrellas y aquí queremos devolver algo, así que devolveremos diremos
icono está bien y aquí puedes hacer iconos punto veamos estrellas este está bien, ahora sigamos adelante, guárdelo
y veamos el resultado, está bien, tenemos esto icono ahora mismo este icono está aquí para que podamos
cuidar esta propiedad también, así que aquí lo hacemos una alineación de acceso cruzado alineación de acceso cruzado
punto de inicio el problema debería resolverse ahora el El color es: no queremos este color, queremos un color de estrella
diferente, por lo que necesitas los colores de la aplicación.

Punto estrella color está bien, ahora si ves este
diseño tenemos esta estrella en blanco encima aquí y el texto está bien, así que esta estrella y este
texto están en una fila, así que aquí cortaré este y aquí haría remo haré niños y
el primero es el de envoltura y El segundo es este texto de aquí, así que
puedes usar el texto de la aplicación.

Bien y en este caso el texto es 4.0 una vez más.
Esto es estático. Pronto los cargaremos desde el servidor bien, ahora aquí hacemos uh color, así que aquí tendríamos
colores de aplicación, punto, digamos, color de texto, um sigamos adelante con el color de texto 2 y veamos el resultado Vale, sí, esto es lo que queríamos
y ahora aquí tienes el tamaño. El cuadro dice que hacemos un poco de
ancho aquí y los 10 píxeles. Vale, ahora otra cosa, si ves esta de aquí, está
en blanco, con una estrella vacía, ¿verdad? Entonces, ¿cómo cuidar de esto? En realidad, podemos
poner una condición aquí. Está bien, por ahora. digamos que creamos una nueva variable en la cima aquí crearé una nueva variable
y la llamaremos decir en uh, obtuve estrellas, está bien, por ahora,
haremos que diga tres, está bien. Ahora lo comprobamos aquí. Está bien, creo que podríamos
hacer esta comprobación aquí para ver el color.

Así que aquí digo estrellas obtenidas menos de cinco, si es cierto, usaremos este color de
aplicación, que es texto, quiero decir, que es este color de estrella, de lo contrario usaremos un color diferente
para el último, está bien, para este usaríamos color de texto para este, está bien,
ahora sigamos adelante y veamos Bueno, está bien, por supuesto que no funciona porque la estrella
obtenida es un tres, cierto, tres siempre es menos de cinco, por eso no funciona, así que aquí
tenemos que cambiar este índice, ¿vale? si el número de índice es mayor que dios
y la estrella usarán colores de estrella De lo contrario, usaremos este color de texto. Bueno, ahora
podemos hacer lo contrario, así que marca aquí. El índice es menor que las estrellas obtenidas.
Me refiero al índice actual. Lo siento. Bien, ahora está funcionando, pero, por supuesto,
podemos configurarlo en cuatro. Sí, está funcionando, así que una vez más en el futuro los leeremos
dinámicamente, así que la idea está aquí, así que si el índice actual es menor que el de las estrellas de jardín, entonces
usamos el color de la estrella cuando es cuatro y luego dorado estrella e indexado están esta condición no se aplica, así
que usamos este color, está bien, perfecto ahora Si vienes aquí, mira este.

Seguiré
adelante y haré este y este. Así que, una vez más, veamos que estamos en esta fila
de aquí y usaremos el cuadro de tamaño y esta vez. un poco más de altura adicional, está bien y ahora la aplicación
muestra texto grande y aquí usaremos personas y podríamos usar colores de color punto
negro con opacidad 0.8 Bien, ahora el tamaño de fuente es demasiado grande para este. Entonces podríamos pasar una variable de tamaño aquí,
decir sí, es mejor, está bien, la siguiente. Usaremos este número de texto de personas, por lo que usas
el texto de la aplicación y el texto es el número. número de personas en tu grupo tu
grupo está bien y color es uh tener colores punto color del texto principal
creo que este está bien, sigamos adelante y veamos Está bien, perfecto y creo que también necesitamos un poco
de espacio aquí, así que ajustamos la altura de la caja. cinco y estamos bien, bueno, el siguiente
son estos widgets de aquí Ok y una vez más lo que
haremos usaremos esto uh función de ajuste que usamos al principio, está
bien y me gusta, es increíble, te ahorra mucho tiempo en lugar de bucle for, puedes usar este que se
genera la lista aquí, necesitamos cinco y devolver nuestro contenedor bueno Muy bien, ahora aquí, solo configura el ancho
y el alto, digamos con 60 de alto.

60 y bueno esta parte es muy interesante entonces aquí tendremos el radio del borde Lo siento decoración caja decoración y aquí
hacemos radio de borde diga radio de borde 15 y el color puntos de colores O puedes usar el color de la aplicación,
el color de fondo del botón. Está bien, sigamos adelante y veamos
el resultado. Está ahí, por ahí. Ahora, ¿qué podrías hacer? Podríamos seguir
adelante y crear un margen para ello, ¿vale? pero ahora no queremos crear margen aquí,
¿por qué no? Si ves este estilo Estos botones y este botón son casi similares
y deberían ser reutilizables, ¿vale? Quieres crear un botón reutilizable, pero ya lo
hicimos, así que todo lo que tenemos que hacer es cortar este y ponerlo en un archivo nuevo y ese sería
un nuevo widget, así que aquí lo llamaremos crearemos un nuevo archivo y lo llamaremos botones de aplicación.
Ahora aquí crearemos una clase sin estado.

Y lo que acabamos de hacer allí
lo pondremos aquí y por supuesto necesitamos importar algunas de las
bibliotecas, y aquí lo llamaremos um botones Está bien, importemos este también. Está bien, ahora
purifiquemos nuestro código. Sí, está bien. pero hay una cosa porque queremos
crear un botón reutilizable Está bien, bueno, ahora podemos seguir adelante y llamarlo,
podemos simplemente llamarlo botones. y aún verías el mismo resultado Sí, pero ahora queremos crear un botón reutilizable. Vale, ¿qué debería tener? Como puedes ver aquí,
tendrá el texto del icono del color de fondo. Cosas así, así que las definiremos todas, así que aquí
definitivamente quieres el color, así que haz lo final. color color, por lo que este color sería el color del texto
o el color del icono que ahora también deseas aquí. color de fondo, está bien, entonces colorea el color de fondo, está bien,
¿qué más quieres también? Tamaño, está bien, así que o haremos el doble de tamaño para que sean más
como cuadrados, sí, así que eso es una cosa También quieres un color de borde para hacer el color final.

Color del borde Está bien, está bien, entonces todo lo que te pide es
que los implementes todos, solo sigue adelante y hazlo. Bien y ahora te pide que añadas
la palabra clave requerida. Bueno, ahora todos estos son obligatorios, no opcionales. Está bien y dice que elimine este. Bueno, ahora para el tamaño hacemos lo mismo, este tamaño
de punto está bien, entonces estas son las cosas que nuestra función de llamada debería pasarlo
a la derecha, sí, ahora si vienes aquí Ahora, por supuesto, mostrará un error y, si pasa el cursor sobre
él, aparecerá un color de argumento para agregar registro. pero veamos, ven aquí, así que sí, una de las cosas
es el color, así que seguiré adelante y lo haré.

Color correcto, pero ahora hay un problema, así
que tenemos color de fondo y color de borde, así que Marcaré eliminar eso y lo intentaré de
nuevo aquí si pasas el cursor sobre esto. uno ahora, si lo importa, todos deberían importarse automáticamente
para usted, las propiedades están bien Ahora podemos cambiarlos, podemos usar el
tamaño, digamos 50, y el color. Bueno, este debería ser nuestro
color de texto. Bueno, por ahora. aquí dice colores punto blanco o negro está
bien, ahora mismo el color de fondo para este colores de la aplicación color de fondo del botón de
punto  uh, ahora el color del borde para este botón olvídate de este primero piensa en este:
el color del borde y el color de fondo son Lo mismo, vale, entonces usamos este.

Bien, ahora
todo lo que tenemos que hacer es venir aquí. y usa esto para que el tamaño sea el tamaño y el ancho
también sea el tamaño porque son cuadrados ahora este color entonces este es el color de fondo,
así que este color de fondo ahora también toma color del borde a la derecha para que el borde borde
todo el borde punto todo ahora toma color, así que este es el color del borde que usaremos aquí
o aquí y también podemos usar ancho y Lo usaremos con 1.0, este es el solucionado, está bien,
así que ahora sigamos adelante y ejecútelo. Sí, creo. Tenemos un pequeño error aquí, veamos qué es este
error, aunque se esperaba.

Está bien, aquí. Bien, ahora de alguna manera digamos que cambiemos aquí
a colores. Rojo, asegurémonos de que todo esté bien. funcionando sí, está funcionando bien, perfecto, entonces nuestro
botón ya está funcionando y ahora esto es todo. Está bien, pero ahora, si regresas
a esta sección, verás Nuestro botón también debe contener
un niño, ya sea como texto o icono.

Derecho y también queremos poder pasarlo, por lo que
aquí ahora el texto o el icono son opcionales Está bien, cualquier cosa que pasemos debería mostrarse,
así que vendremos aquí y definiremos aquí la cadena. texto debido a que este texto es opcional,
podría ser texto o un ícono, ¿vale? ahora para el ícono es lo mismo ícono de datos ícono está
bien, tenemos que usar uno de ellos ahora, por supuesto, aquí necesitas implementarlos, así que haz este texto con puntos,
este ícono de punto, está bien, está bien.

Entonces, pero ¿cómo saber si estás
pasando un icono o un texto? entonces necesitamos pasar un valor booleano aquí,
está bien, entonces aquí pasaremos su ícono en general pasaremos falso si queremos usar un
texto. Vale, ahora tienes que venir aquí. aquí el toro es el icono, ahora aquí esto
es obligatorio o no es obligatorio porque en general, podríamos simplemente pasar un valor
falso, por lo que no siempre es necesario entonces el valor predeterminado sería falso, está
bien, entonces hacemos este punto es el ícono falso, está bien, sí Bueno, ahora eso se está poniendo interesante,
así que después de eso tendremos un hijo. Bien, entonces estamos usando un ícono o texto.
Vale, ahora si el ícono es falso.

Si es falso, entonces definitivamente usaremos un texto.
Bueno, aquí podemos usar el texto de la aplicación. y el texto es cualquiera que sea
el texto que se transmite desde aquí está bien, ahora podríamos
tener un error, eh, veamos Bien, ahora el error desapareció porque es opcional aquí,
por lo que debes usar un verificador nulo si ya sea que lo estés pasando o no, está bien, entonces, si es
falso, es un ícono que significa que estamos pasando texto. de lo contrario, lo que haremos usaremos el
ícono aquí, está bien, ahora el ícono es Cualquiera que sea el ícono que pasemos, está bien. Muy bien, ahora el color también cambia, por lo que
el color del ícono debe ser el color que deseemos. pasa como puedes ver aquí está bien,
lo mismo para el color del texto Ahora el color del texto es muy interesante. porque cambia según la reacción,
está bien, ahora aquí di color Está bien, por ahora sigue adelante con
colores.negro y lo cambiaremos muy pronto. y necesitas importar esta biblioteca Está bien, ahora es el momento mágico, vengamos aquí
incluso si no pasamos el icono.

Está bien. Ahora puedes seguir adelante y hacerlo,
pero arrojará un error. porque ya no vamos a pasar nada por aquí pero
dijimos el ícono de color y el texto Bueno, son opcionales ya
que los declaras aquí. Este texto y este icono deben tener un valor predeterminado.
Por ahora, digamos para texto. Hola, está bien, ahora sigamos adelante, ejecútelo
y verifiquemos que esté ahí, sí. Bueno, uno de los problemas con esto es que no está centrado,
así que envuélvalo alrededor del centro y rechace. Y lo mismo para este widget central. Ahora sigamos adelante
y ejecútelo ahora que está todo centrado.

Ahora, como no pasé ningún texto, estoy usando el valor
predeterminado para poder pasar un texto aquí. Bien, ¿cuál es el texto que quiero pasar?
Quiero pasar el texto que numera el index está bien, entonces haces un índice de texto
a cadena porque el índice es un número entero ahora usará el valor que le pasemos,
vale, perfecto, bueno, ahora realmente no se puede pasar un cero, así que lo que
haremos, simplemente vendremos aquí y haremos índice más uno, está bien, ahora sigamos adelante y hagámoslo.
Está bien, perfecto, ya está funcionando, pero ahora, si ves tiene algo de espacio, así que debemos cuidarlo
para hacerlo bien, nuestro botón ya está reutilizable, vale, podemos probarlo.

Si no quieres
usar este texto, quieres pasar un icono. Bien, entonces aquí podríamos hacer un ícono y podemos
pasar un ícono aquí para que hagas íconos punteados. decir íconos punto ¿podemos pasar algo? diga favorito, está bien ahora, si pasamos el ícono, también
debemos establecer el valor en ícono y configurarlo en Es verdadero; de lo contrario, obtendremos un error porque estamos
pasando un icono. El valor predeterminado es para texto. Bien, está funcionando, por lo que nuestro botón
es completamente reutilizable. Ojalá tenga sentido. Bueno, hagamos lo que hagamos, pero necesitamos
el espacio aquí, como ves, tiene un margen extra. Bien, ahora podemos envolverlo
alrededor de un contenedor. Bien, aquí hacemos margen y decimos contras e inserciones
solamente y el margen derecho dice 10. Ahora ejecútelo, funciona perfecto pero, por
supuesto, no queremos el icono aquí. Vale, queremos texto aquí, así que
indexa más uno en una cadena. Vale, perfecto, claro que también tenemos que cuidar
esta distancia por aquí, ahora es bonita. fácil, así que sigue adelante, copia y llega a este final
y copia y pega en lugar de cinco, quieres hacer 10. vale, ya se ve mejor, vale, a continuación veremos
cómo hacer clic en cada uno de ellos.

Y seleccione uno bien, ahora veremos cómo
trabajar en el índice seleccionado. significa que queremos seleccionarlos y cambiar el
color de fondo y el color del texto de esta manera Entonces, para hacer eso, debemos venir aquí
y queremos poder hacer clic en ellos. Para hacer eso primero necesitamos envolverlo
alrededor del widget y aquí usaremos inkwell Está bien, este y requiere un evento de toque. bien ahora por aquí Entonces, una vez que hagamos clic en esto, haremos clic en cierto
índice para que ese índice podamos guardarlo en algún lugar y Necesitamos guardarlo usando set state para que podamos Activar la reconstrucción. Primero debemos seguir adelante y
declarar una variable. Hagamos un índice int seleccionado.

Digamos que el índice seleccionado es similar; el valor predeterminado
será menos -1, lo que también significa que en realidad no Seleccionó cualquiera de ellos de todos modos, así que una vez que hagamos
clic en ellos, guardaremos el índice en el índice seleccionado. Está bien, está bien, pero ahora porque queremos. reactivar uh build, por lo que debemos configurarlo
en torno al estado establecido Vale, ahora sigue adelante, guárdalo, asegúrate de que no haya ningún
error, por supuesto, no pasará nada todavía porque estamos No cambiaré nada, pero ahora aquí en la casilla
hay una cosa si se selecciona cierto índice aquí. queremos cambiar el color ahora podemos hacer una verificación
aquí si seleccionamos el índice Así que aquí usaremos esta como nuestra condición,
así que si aquí indexamos lo que sea. el índice es si es igual al seleccionado, está
bien, entonces queremos cambiar el color Bueno, si se selecciona si esta condición es verdadera,
entonces usaríamos colores.blanco para el texto o para el icono realmente no importa, de lo contrario usaremos
negro ahora este usaremos la misma condición para los colores de fondo y borde, está bien, si está
seleccionado, entonces el color de fondo que queremos ser negro, está bien, los colores son puntos negros,
de lo contrario, es el color de fondo, que es este El mismo color de borde aquí, si está seleccionado,
queremos que el color del borde sea negro.

De lo contrario, debería ser el color de fondo que usamos
anteriormente, sigamos adelante y verifíquelo. pero por defecto no está seleccionado, pero ahora, si
lo haces, como ves, cambia ahora mismo, al usar esto, Solo estamos seleccionando un botón a la vez, pero ahora
tenemos un problema aquí, así que seleccione el índice color ahora ese es el color del texto si el índice es el
mismo que el índice seleccionado, queremos que sea blanco pero ahora no vemos el blanco, vemos el negro.
Ahora si llegas al botón de aquí botones arriba aquí, veamos, aquí ya tenemos un
color fijo, así que debemos cambiarlo, ¿vale? Necesitamos usar el color que estamos pasando aquí,
que es este, así que cambiémoslo. guardémoslo, está bien, como ves, ya cambió,
así que cambiémoslo perfecto. Así que también está funcionando, así que ahora volveremos a nuestra
página de detalles aquí para que esta parte esté terminada.

Así que para seleccionar en un índice solo para guardarlo, en
función de ese índice, haga una reconstrucción, está bien. Así que ahora echaremos un vistazo a este y también tiene
cierta distancia por aquí, por lo que necesitamos para cambiarlo, así que copie este aquí y póngalo
aquí y haremos tal vez 20 por ahora y Mira qué pasa y ahora podemos usar nuestra aplicación. Sube
texto de texto grande y aquí hacemos la descripción. y también podemos establecer el color con los colores
punto negro con opacidad 0.8 y tamaño 20. así que está perfecto ahora también necesitamos
usar el texto de nuestra aplicación para este Ahora vaya, vamos a intentarlo. Entonces, ¿qué haces? Simplemente usas
texto f. Bien, ahora se necesita un texto, por lo que el texto es. Ahora aquí también podemos configurar nuestro color para que los colores
de la aplicación digan el color del texto principal.

Así que aquí se muestran perfectos, pero ahora. Aquí podemos configurar un poco este tamaño
de cuadro, de modo que en lugar de 20 hagamos 10. Bien, ahora está bien, perfecto. Ahora tenemos que
ver cómo vamos a usar estas dos opciones aquí. Bueno, ahora este es un botón reutilizable. Ya creamos esta
mantequilla anteriormente para que podamos seguir adelante. y crea esto, pero ahora, si miras, mira este diseño,
definitivamente, esto es una implementación. Bien, entonces queremos rodar bien, eso es una cosa, pero
esto debería arreglarse en la parte inferior para que Lo que deberíamos hacer, también deberíamos usarlo dentro
del widget de posición.

Está bien, aquí está. Ahora solo tenemos un widget de dos posiciones, así que crearemos
nuestro widget de tercera posición aquí, ¿vale? widget de posición y aquí tendremos a nuestro hijo ahora dentro
del niño tendremos fila, ¿vale? Muy bien, ahora coloque el widget, bueno, lo haremos
más tarde, por ahora solo un cero inferior. ahora aquí tendremos niños y dentro de niños
podemos usar los botones de nuestra aplicación Bueno, lo que hicimos antes son los botones, así que aquí
estos son los parámetros que debemos proporcionar. Muy bien, el tamaño en este caso es 60
y el color, tenemos puntos de colores. diga wow color de texto 2 supongo y color de fondo haga
colores.blanco ahora el color del borde que colorea el color del texto también, ahora vamos a seguir
adelante y comprobarlo para ver el resultado.

Oh, bueno, está ahí y definitivamente no lo queremos así,
así que está ahí arriba 10 20, creo que es bueno. ahora a la izquierda, así que también hacemos a la izquierda
20, bien, ahora de esta manera todos están alineados al mismo uh, distancia, está bien, pero aquí, por supuesto,
no queremos un texto, queremos un ícono. Así que aquí sabemos que podemos configurar el
ícono booleano. Está bien, es cierto y si lo hacemos. También necesitamos pasar el ícono para que los íconos aparezcan como favoritos. o marca este como favorito ahora guárdelo y veamos el resultado.
Está bien, perfecto, pero creo que nuestro color de texto es Realmente no, este es el color que queremos. Tal
vez queramos el color uno en lugar de dos. Bueno, ahora está mucho más cerca, así que el
botón está ahí, ahora el botón siguiente. queremos dibujar es este este de aquí está bien, en realidad
ya creamos este botón que también está aquí, este botón de respuesta.
Bueno, reutilizaremos este botón de aquí. Bueno, ahora para reutilizar este botón, necesitamos
configurar algunos ajustes adicionales.

Condición verificación condicional aquí porque
antes vimos en esta sección la usamos Bueno, de todos modos, ahora sigamos
adelante e intentemos llamar a este botón. entonces lo llamaremos botones de respuesta de la aplicación
respuesta o botón de respuesta, veamos abotona este Así que ahora, si pasa el cursor sobre él,
tendremos pocas propiedades que podamos configúrelo ahora, esta vez queremos que responda, por lo que estableceríamos
que responde verdadero, está bien, que responde cierto y veamos creo Está bien, si responde verdadero, entonces también
queremos usar esta condición aquí. Bueno, ahora queremos terminar
esto con otro widget. vale y ese widget se llama flexible Está bien, ahora sigamos adelante, ejecútelo
y verifiquemos qué sucede. Vale, definitivamente tenemos algunos errores. Después de ser flexible,
todavía tenemos errores.

Ahora hay algunas formas de solucionarlo. Ocúpate de esto. Primero vendremos aquí
y estableceremos otra restricción. Simplemente vamos a la derecha, así que ahora vienes
aquí y, como ves, funciona bien más o menos así. Entonces, si tiene un widget flexible pero el widget principal
de los widgets flexibles debe tener restricciones y luego el widget flexible ocupará todo el espacio
disponible en el widget principal y Por supuesto, debemos cuidar el espacio aquí en
el cuadro de tamaño con, digamos, 20. Vale, sí, así, pero ahora hay otro problema:
también queremos mostrar el texto. Bien, en el diseño vamos a mostrar el texto, así que
aquí seguiremos adelante y haremos la aplicación. Texto bien, entonces el texto es un viaje de libros ahora y color. colores.blanco Está bien, ahora vamos a guardarlo. Está
ahí, pero ahora quiero que esté.

Empujado hacia atrás hacia el lado izquierdo y derecho, por eso
también podemos usar el widget central, lo siento, espacio entre pero si lo haces recuerda que este es un
botón reutilizable perderemos esta propiedad Para este, todavía queremos conservarlo, así
que aquí podemos configurar la condición. aquí para que la condición que podríamos establecer
en función de esto responda si responde verdadero, entonces alineamos el acceso principal con espacio de puntos
entre ellos, de lo contrario haremos la alineación del acceso principal centro bien y debería resolver el problema. Vamos
a seguir adelante y comprobarlo y verás que así fue. Ahora otro problema es que fue demasiado lejos para
llegar a este fin. De hecho, también lo hizo. pero esta es una imagen recuerda que la imagen
tiene un fondo un poco de fondo, está bien Sí, lo siento, la imagen está
un poco a izquierda y derecha. correctamente o como margen o relleno, así que eso es lo
que causa el problema, así que deshacernos de este Aquí, por supuesto, hay una cosa que debemos hacer primero
antes de deshacernos de este, también necesitamos para revisar este aquí también, si es responsivo,
mostraremos el texto; de lo contrario, es su contenedor vacío está bien, ahora definitivamente
podemos venir aquí y configurarlo en falso Está bien, veamos, está bien, si lo configuras
en falso, todavía ocupará todo el espacio.

Entonces, cómo resolver este problema aquí, así que
aquí, vayamos aquí si responde verdadero cierto y lo haremos veamos doble punto máximo infinito; de lo
contrario, es lo mismo que el ancho Está bien, pero el valor predeterminado es falso. Ahora
el otro problema es que tampoco pasamos aquí. El ancho predeterminado está bien, entonces podemos
tener un ancho predeterminado aquí, digamos 120. Bien, ahora funciona porque es el ancho
predeterminado, así que aquí es falso. vamos a usar este ancho predeterminado aquí ahora
si lo configuramos en verdadero, veamos Está bien, funciona, pero ahora volvemos
a nuestro problema anterior que estábamos temprano como si estuviera demasiado hacia este lado
izquierdo y hay relleno adicional con esta imagen Así que ahora aquí podemos envolverlo alrededor
de un contenedor y aquí podemos poner margen. Está bien, haremos solo inserciones de borde constante,
así que dejamos 20.

Está bien, ahora mismo. que debería arreglarse, está bien una vez más,
si vienes aquí si lo configuras en falso Bueno, nuestro botón de imágenes responde muy bien, por lo que
el blanco responde básicamente, esta variable de aquí es responsivo y también configuramos algunos parámetros adicionales aquí
el valor predeterminado está bien, está bien, perfecto Ahora tenemos estas tres páginas
listas y todas están funcionando. nuestra siguiente tarea sería comprender qué es
un qubit y en base a eso nos conectaremos Todas estas tres páginas utilizan el sistema
de gestión de estado cúbico. Hola a todos. En esta parte de este tutorial veremos
cómo usar qubit para la gestión del estado. o cómo entender la idea más básica sobre
la gestión estatal y luego combinaremos Todas estas páginas las hemos creado hasta ahora para nuestra
aplicación qubit, pero de todos modos primero las explicaré.

La idea básica la idea más básica y la comprensión
de cómo usar qubit en tu aplicación y qué es qubit Eso es lo que explicaré primero. Bueno, para
este. Bueno, puedes visitar mi sitio web aquí. Pondré un enlace a esto para darle una idea
básica de forma clara y sencilla. Debido a que la mayoría de las aplicaciones que he visto
son sitios web, no creo que tengan muy buenas Idea, pero de todos modos te explicaré cómo lo entiendo. Está
bien, entonces tu aplicación necesita un qubit o un qubit. paquete para la gestión estatal, así que aquí está su paquete
de palabras clave, una vez que haya puesto el paquete en la cola tu aplicación para que cúbica debería tener dos cosas
que deberías hacer: deberías tener estados y Deberías tener qubit, por lo que necesitas crear estados.
También necesitas crear qubit para este paquete y desde este paquete puedes entenderlo así y luego
tu interfaz de usuario interactuará con esto Esa es la idea más básica y tus estados
tendrán los datos que deseas reconstruir.

O lo siento, los datos que deseas cambiar y,
en función de ese cambio, deseas activar reconstruir la interfaz de usuario está bien, entonces esos datos deberían
estar aquí dentro de los estados, está bien, nuestro estado debería Tengo acceso a esos datos, ahora esos datos están
ahí y si algunos de los datos se modifican. o quieres reconstruir la interfaz de
usuario o mostrar algo nuevo en la pantalla entonces deberías usar la función
emit La función emit tendrá Mantenga o tendrá una idea sobre los estados.

Bien, ahora esta
función de emisión debería estar dentro del qubit. entonces creas un estado, el estado debe contener datos
y, debido a que están en el mismo paquete, qubit conocen los estados y luego emitirán estos estados.
El estado de emisión significa que oye, lo sé. quieres hacer algo nuevo o cambias la variable, así
que debo avisarle a la aplicación que lo haga Usaremos la función emit para hacerlo y nuestro paquete qubit
lo sabrá y volverá a dibujar la interfaz de usuario. Bien, esa es la idea más básica sobre
qubit y eso es lo que entiendo la idea más importante es que su ui qubit
y el repositorio se comunicarán con el servidor enviará una solicitud y obtendrá
una respuesta del servidor, está bien, entonces Además, nuevamente, el qubit debe tener su paquete o aplicación
de qubit.

El qubit debe tener qubit y estados. y otra idea que deberíamos saber para que nuestra aplicación
cúbica qubit debería tener un proveedor de bloques y el generador de bloques mientras usamos el proveedor de bloques,
podemos crear qubit y también mantendremos el qubit ahora el constructor de bloques comprobará
los qubits, lo siento, comprobarán el Los estados están bien y, en función de ellos, desencadenarán
algo, por lo que dos ideas importantes El proveedor de bloques creará y mantendrá nuestro
qubit y también nuestro generador de bloques. comprobará los estados y nos informará
qué estado queremos activar o queremos adelante, está bien, entonces es muy importante, está bien,
esa es la idea más básica sobre el concepto cúbico. Ahora seguiremos adelante y continuaremos, así que
después de esta imagen sabrás que primero debemos instalar este paquete, entonces necesitamos crear clases
para nuestros estados, también necesitamos crear clases para nuestro qubit, así que eso es lo que haremos
de acuerdo con esta imagen, así que vengamos aquí Vaya a este archivo, así que continúe e instale estos
tres paquetes y publique bien, así que ahora flutter.

Qubit es un subconjunto de bloque y el nombre del paquete es
un bloque de aleteo, está bien y también necesitamos otro paquete para trabajar con block y flutter y funcionan
prácticamente juntos, pero por supuesto podría funcionar de forma independiente con otros proyectos.
Explicaré qué es un poco más adelante ahora que Lo primero que queremos hacer es crear una nueva
carpeta o directorio y lo llamaremos qubit. y dentro de qubit queremos crear un archivo para nuestros estados,
así que lo llamaremos aplicación qubit States dot dart y crearemos otro archivo para nuestro qubit, así
que lo llamaremos aplicación qubits.dart Bueno, lo primero que dije al principio desde aquí
es que entendemos que primero debemos crear estados. eso es lo que haremos, aquí crearemos primero una
clase abstracta y el nombre de la clase es diga estados de qubit y extenderá
otro paquete o clase que sea igual veamos e-q-u-a equitativo, vale, te
explicaré por qué necesitamos esto.

Ahora, basándonos en esta clase, crearemos otras dos
clases. Bien, ahora esta es una clase abstracta. entonces otra clase podría extender esta clase también, de modo
que el nombre de la clase sea inicial estado inicial extiende los estados de qubits, ahora te pedirá
que hagas algo que anule un método cuál es este y lo quitaré y lo pondré
así y explicaré qué es esto Copiaré este y lo pondré aquí.
Le cambiaré el nombre. y ahora lo llamaremos estado de bienvenida, ¿cuál
es este estado inicial y para qué sirve esta clase? Bueno, cada aplicación de qubit debería tener
un estado inicial cuando la usemos por primera vez. Para crear un qubit, deberíamos pasar una clase de estado o
una función de estado, así que eso es lo que haremos aquí. vale, podría ser una clase, podría ser
una función, realmente no importa así que debemos inicializar esa en cada aplicación
de qubit, por eso tenemos esta y una vez hecho esto queremos
activar un nuevo estado el nombre de ese estado es estado bienvenido este estado
bienvenido sería responsable de mostrar esta página en la pantalla una vez que se ha realizado la inicialización,
por eso también tenemos esto podemos eliminarlo porque en realidad no le estamos
pasando ningún objeto, así que está bien.

¿Para qué sirve esto? Aquí en realidad pones
los datos que deberían cambiarse. Como dije antes, los estados deberían
contener datos si vienes aquí. entonces, los datos que deben cambiarse y esos datos deben
crear una reconstrucción de la interfaz de usuario entonces eso debería estar aquí, pero por ahora
no vamos a utilizar ningún dato porque esta página Realmente no va a hacer ninguna actualización dinámica
de datos al menos por ahora, en el futuro cambiaremos Es por eso que están vacíos. Si tuviera una variable,
diga intex y quiero que esta variable Estaré cambiando la aplicación y, en función de esta variable,
también quiero reactivar o activar una nueva compilación. pero lo declararé aquí y luego lo pondré aquí
para que si mi aplicación cambia esta variable Obtendré automáticamente una reconstrucción de esa parte para
la interfaz de usuario.

Bueno, espero que tenga sentido, pero No vamos a hacer nada de esto, así que lo mantendremos vacío,
así que con esto, de acuerdo con este archivo, nuestro Los estados se han creado por ahora y ahora
seguiremos adelante y crearemos qubit. o crear una clase para qubit que sea
la mejor manera de entender Así que aquí, en este archivo, crearemos una clase para
nuestro qubit. Lo llamaré qubits de aplicación de clase. y debería extenderse q bit, bien, ahora veamos,
te pide que importes este paquete ahora aquí. Te está pidiendo que inicialices el
superconstructor como dije antes aquí. Cada clase tendrá un estado inicial, así que este es
nuestro estado inicial. Quiero decir, lo siento cada vez. aplicación que usa qubit debe tener un estado inicial,
por lo que este es nuestro estado inicial entonces necesitamos llamar a nuestro estado inicial desde aquí,
así que lo llamaré estado inicial, así que esa es la clase Está bien y ya no necesitamos este.
Podemos dejarlo vacío.

Está bien, entonces con esto nuestro estado inicial estaría
listo, sí, y una vez que el estado inicial haya sido hecho en realidad para el estado inicial,
ya que ve que no sucede nada Bien, una vez que se haya completado el estado inicial, queremos
emitir un nuevo estado para mostrar la página de bienvenida. es por eso que aquí escribiremos emitir y aquí escribiremos
bienvenido pago bienvenido bienvenido estado este Entonces, primero se realizó la inicialización,
luego activaremos y el estado de ese estado. es este así es como funcionan primero este
y automáticamente lo llamaremos bien Ojalá tenga sentido, así que con esto terminamos de
extender nuestro qubit y usar este archivo ahora. En algún lugar podemos crear qubit porque nuestra
aplicación todavía no sabe que hay un qubit. en nuestra aplicación, por lo que debemos encontrar una manera de
hacerle saber a nuestra aplicación que vamos a usar qubit en este aplicación o interfaz de usuario, está bien, lo haremos
desde el punto de entrada de nuestra aplicación. que es main.dart. Bien, sabemos que hasta ahora
este ha sido el punto de entrada porque Debido a esto decimos esta interfaz de usuario ahora mismo,
este debería ser nuestro punto de entrada, ¿vale? Bueno, antes de seguir adelante e inyectar nuestro
qubit aquí, debemos hacer una cosa más.

Ahora, si vienes aquí, también debemos enviar
un tipo de estado para que llames aquí. qubit indica este bien porque dije antes que si
tenemos estados nuestro qubit de alguna manera saber que tenemos estados o clases estatales
como esta, ¿cómo sabe que sabe así? porque necesitas decir qué tipo de estados debería
tener mi qubit para que, en función de este, lo sepa Bueno, los estados vienen de aquí y son de este tipo.
Bueno, espero que tenga sentido ahora. Por aquí, lo que haremos, eliminaremos este, está
bien y usaremos el proveedor de bloqueo. Como dije antes, usamos el proveedor de bloques para crear. qubits está bien o inyectar qubits, así que aquí
llamaríamos qubits de aplicación a esta Bien, aquí si pasas el cursor sobre él, hay
un argumento obligatorio que debes crear. usa este y también verás que requiere una función.
Está bien, en nuestro caso queremos pasar el clase como una función, así que crea y cuál es nuestra función
de clúster aquí, que son los qubits de aplicaciones Bueno, es un error.

Lo
único que debemos hacer. Como puede ver desde aquí, se necesita un contexto,
por lo que debemos pasar el contexto. Bien, ahora el error debería desaparecer. y si pasas el cursor sobre
él, hay otro parámetro que podríamos usar ese es el niño pero,
por supuesto, esto es opcional pero aquí todavía podemos usarlo, por lo que debemos
pasar un niño que contenga todos estos qubits o que pueda acceder a los qubits o que pueda
comprobar los qubits o los estados, así Bueno, aún no tenemos este hijo, entonces, ¿qué tenemos
que hacer? Tenemos que seguir adelante y crear uno. Así que aquí llamaremos a crear un nuevo archivo
y lo llamaremos aplicación qubit logix. dot dart, está bien, entonces este es el archivo que debería
contener nuestros estados y verificar los estados. De todos modos, crearemos una clase con estado
aquí y la llamaremos estado para la clase.

La lógica del qubit de la aplicación está bien y
necesitamos importar algunas de las bibliotecas. y aquí en lugar de contenedor volverá andamio Ahora el andamio debería tener un cuerpo. Como vimos antes,
podemos usar el generador de bloques para crear o verificar. En realidad, para verificar los estados porque ya tenemos
estados aquí para que podamos verificarlos. pero para verificarlos necesitamos verificarlos a través del
generador de bloques, por lo que aquí implementaríamos o Continúe y cree un generador de bloques, así que el generador de bloques
está bien, ahora el generador de bloques debería tener ideas. sobre nuestros qubits y estados, así que aquí llamaremos qubits de aplicación
a este y estado de aplicación, lo siento, estados de qubit Este está bien, así que, como cualquier otro
constructor, necesita un constructor adecuado.

Está bien y, como cualquier otro constructor, se necesitan
dos parámetros para esta propiedad del constructor. El primero es el contexto, el otro es el estado. Así que cada vez que ves al constructor, se
necesita una propiedad del constructor y construir una propiedad debería tomar una función,
está bien, entonces toma una función aquí Entonces, una vez que tengamos este generador de bloques
usando este, podemos verificar los estados. Ahora vimos antes que cuando nuestro qubit se
crea por primera vez, hay un estado inicial. Esto se activa automáticamente y luego
activamos un nuevo estado. que es un estado bienvenido, pero ahora se ha
activado pero la aplicación no se enterará entonces tienes que encontrarlo y encontrarlo es muy fácil.
Cómo hacerlo, podemos hacerlo lógicamente aquí. entonces podríamos hacerlo si el estado es bienvenido,
estado bien, entonces devuelve algo, devuelve Qué página de bienvenida, entonces esta es la
página que regresamos o archivo o clase, ¿vale? si no encontramos nada por ahora devolveremos
un contenedor vacío si no hay estado encontrado, devolvemos el contenedor vacío,
así que una vez más, ¿qué sucede aquí? Este es el estado inicial que se activa automáticamente
y luego se activa el estado de bienvenida.

Bien, entonces este es este estado, este lo
encontramos, así que es solo un nombre. Esto sucede después del estado inicial, por lo
que podemos encontrar este nombre que es tan Es una pista para la aplicación. Esto está sucediendo ahora
mismo, así que esta es una etapa que está sucediendo. o si esto está sucediendo entonces llévame allí
o muéstrame esto o haz esto o haz aquello Entonces esto dice aquí otra comprensión simple,
solo algunos nombres de lo que está sucediendo.

Primero esto está sucediendo, este es el nombre y luego
esto está sucediendo y aquí está el nombre, ¿vale? Entonces, si esto sucede, muéstrame esto, muéstrame
aquello para que hagamos una verificación condicional. eso es lo que dijimos al principio usando el generador de bloques,
verificamos los estados mientras lo hacemos, emitimos los estados están bien, sigamos adelante y verifiquemos ahora,
es posible que tengamos un error, veamos qué sucede Está bien y dice ese dardo principal, así que sigamos adelante
y encontremos nuestra suciedad principal, que es esta, lo siento. así que supongo que nos estamos perdiendo, oh lo siento,
nos falta algo aquí, así que, como dije, ese bloque proveedor, por lo que debería crear nuestros qubits
y contenerlos, así que este es el que ves aquí. Tenemos qubits y estados, así que eso es lo que quiero decir con
mantener bien los qubits, así que debemos llamar a esta clase. por aquí, así que aquí llamaremos lógicas de qubit a la aplicación.
Está bien, este es un niño, así que crea el qubit.

Y mostrar la lógica usando dentro de este OK y en
base a eso hacer una verificación condicional Así que vamos a ejecutarlo y parece
que tenemos otro problema. De todos modos, reinicié mi aplicación y funcionó
bien. Eso es todo porque hay un cambio de estado. Entonces, a veces necesitas reiniciar tu aplicación y luego funcionó,
por lo que no hay problemas, así que sí, eso es. Así que aquí podemos activar una nueva página,
¿vale? usando este qubit. ¿No es excelente? es lo primero que hemos hecho, así que creamos
aquí varios estados y luego dentro del qubit Inicializamos el primer estado y luego activamos
otra emisión, lo que significa otro estado.

Bien, y luego aquí, usando el generador de bloques,
encontramos ese estado y, en función de ese estado, están redirigiendo, así que ahora mismo tengo entendido
que también funciona más como rutas que te indica Vaya aquí o vaya allí, verificación condicional.
Bueno, espero que lo haya entendido y esto es la idea más básica sobre qubits para que nuestra aplicación
esté funcionando ahora mismo, hemos cargado esta página usando Lógica y gestión del estado del qubit. Lo siguiente
que queremos hacer es cargar estos datos. estos datos del servidor los cargan y alguna otra información
y los muestran en la pantalla, está bien, todo Para hacer eso primero tenemos que seguir adelante
e instalar un paquete, así que si vienes aquí para este archivo sigue adelante e instala este paquete
http, sería responsable de cargar los recursos desde la red bueno primero crearemos un nuevo
directorio y lo llamaremos servicios Ahora aquí crearemos un nuevo archivo,
lo llamaremos servicios de datos dot dart. Bien, ahora aquí primero seguiremos adelante e importaremos
nuestro paquete uh http, así que veamos este.

Y hacemos como http que sabemos aquí crearemos una
clase y la llamaremos servicios de datos ahora, dentro de esta clase, primero tendremos una cadena
para nuestra URL base, por lo que la URL base y aquí escribiremos mi URL
base http mark.bslmm.com y hay un punto final para la API, así que esa es la API. Estoy
usando laravel, así que depende del tipo de respaldo. Al final lo usas de todos modos, así que ahora aquí también crearé
un nuevo método al que llamaremos obtener información y dentro información primero, declararé una variable o cadena para
mi URL de API URL de API y aquí el punto final es obtener lugares, así que esta es mi API real.

Ahora obtengo
lugares aquí, en base a esto, combinaré estos dos. este y este y crearé una solicitud de obtención
http, así que eso es lo que quiero hacer. ¿http dot está bien? Ahora se necesita un uri. Ese
es nuestro uri total, pero podemos pasarlo dentro. una función auxiliar que realiza una decodificación para su
análisis, por lo que podemos hacer la URL base más la API. URL, por lo que, basándose en esto, crea una solicitud
al servidor y luego devuelve algo para que el El tipo de retorno es http punto. La respuesta está bien, entonces
recibimos una respuesta del servidor y podemos llamarla res. para mantenerlo dentro de una variable, está bien, ahora
veamos y es posible que necesitemos usarlo porque aquí dice que devuelve el futuro, entonces, ¿qué
necesitas hacer? Tienes que esperar aquí. y si esperas, necesitas hacer un modificador de sincronización.
Está bien, perfecto, con esto obtenemos los datos del servidor bien, en realidad obtenemos el objeto aquí, el objeto
json dentro de él, ahora aquí necesitamos decodificar mucho antes de decodificarlo, en realidad debemos
asegurarnos de que estamos obteniendo Realmente responde a los datos del servidor.

Entonces usaríamos la cláusula try catch. Bien, ahora dentro
de ella haremos una verificación si res es igual a um. El código de estado es igual a 200, ahora http lo empaqueta
si obtiene datos del servidor y devuelve un código 200. y el nombre del código es como el nombre de la variable,
es tipo de estado o código de estado en realidad entonces, si el código de estado es igual a 200, eso significa que
los datos son correctos y la respuesta es correcta, entonces si el la respuesta es correcta, lo aceptamos, de lo contrario imprimimos
el error en la consola, está bien, eso es lo que hacemos Entonces, una vez que obtengas los datos, debes decodificarlos.
Está bien, ahora aquí quieres poner los datos decodificados en una lista que tendrá un tipo
dinámico y ahora lo llamaremos lista dentro de ella aquí necesitamos decodificar los datos, los datos
están dentro de esto ahora mismo, responde muchas cosas, así que solo queremos el
cuerpo de estos datos, así que json.decode código, por supuesto, necesitamos importar un archivo para esta
biblioteca, convertir la biblioteca, así que aquí lo hacemos dot body está bien, no, en realidad, ¿qué
es el cuerpo? Déjame mostrarte aquí Entonces tengo este cartero y este es mi uri total, como
puedes ver desde aquí.

Bueno, este es el cartero. y uri exactamente igual que este que tenemos, por lo que este
es el uri combinado. Bueno, ahora esto regresa. Puedo uh, prueba mi API para ver si funciona correctamente porque
responde enviándome datos o responde bien. Ahora, si ves aquí, esto es lo que obtengo
como cuerpo aquí, como puedes ver. el cuerpo es una lista de objetos, objetos json, está bien, entonces
devuelve objetos json, por lo que dentro del cuerpo el cuerpo está dentro de este cur, esto se coloca entre llaves aquí y este, como
puede ver, devuelve la descripción del nombre de identificación y otras muchas cosas, así que esto es lo que obtenemos ahora, necesitamos
decodificarlo por qué porque el control deslizante no entiende json, entiende el mapa, está bien, de todos
modos, primero debemos decodificar lo que obtengamos Es por eso que decodificamos y estamos decodificando el cuerpo,
bien una vez más, así que este es el cuerpo completo.

Lo estamos decodificando bien y primero lo pondremos
en una lista. Está bien, ahora lo convertiremos a mapa, entonces lo convertirá en lista, bien porque
si lo convertimos en mapa, lo tendremos más fácil. acceso a las propiedades subyacentes a ésta
y estamos haciendo todo esto porque Flutter no entiende json. Bien, ahora, después
de decodificarlo, lo pondremos aquí. y luego lo convertiremos a mapa para que nuestra aplicación
pueda usarlo bien. Para hacerlo, primero debemos Continúe y cree un modelo, así que aquí
dentro de él crearé un directorio y llámelo modelo y ahora aquí dentro crearé un
nuevo archivo lo llamaré modelo de datos datamodel.dart está bien, si lo viste ahora aquí, tenemos
esta propiedad, ID, nombre, descripción. precios gente empieza por supuesto no los necesitamos todos
necesitamos nombre descripción precio estrellas gente e img por ahora en el futuro podríamos
usar uh, también necesitamos la ubicación Y seleccionamos bien a las personas, así que sigamos
adelante y las declaremos muy rápidamente.

Así que aquí crearé una clase y el
nombre de la clase es modelo de datos. Bien, entonces tendremos una cadena con el nombre
y tendremos una cadena para nuestra img. para imagen y tendremos int para precio y para personas
para estrellas y cadena para descripción y transmitir para la ubicación Bien, ahora crearemos rápidamente el constructor para
este modelo de datos. Bien, ahora aquí. Entonces veamos si podemos hacerlo automáticamente. Parece que no podemos, así que lo que haremos
aquí es el nombre de escritorio requerido. Muy bien, hemos construido el constructor. Está bien,
ahora, como dije anteriormente desde el servidor. Obtenemos json, así que después de decodificarlo
queremos convertirlo en un objeto de mapa. Debido a que Flater entiende bien el mapa, para
hacerlo necesitamos declarar un nuevo método. se llama y el tipo de método es fábrica
y aquí hacemos el modelo de datos y aquí crearemos un método llamado desde json y lo que sea que obtenga datos de esta llamada aquí
está bien, sí, entonces los datos son más bien El formato del mapa está bien, así que si no sabes qué
es el formato del mapa, consulta mi otro tutorial.

Así que aquí tendremos la cadena y la dinámica.
Bueno, aquí queremos decir que aquí queremos decir que esta es nuestra clave
es la cadena y este valor es dinámico porque podría haber cualquier tipo de cadena de valor
entero o lo que sea, pero las claves siempre son cadena está bien, por eso escribimos
aquí cadena y dinámica Con suerte, ahora tiene sentido. Aquí
devolveremos nuestro modelo de datos. Bueno, como puedes ver, ya está
diseñado para ti, así que sería ahora, una vez que obtenga la respuesta a la solicitud
del servidor, obtendremos estas cosas como una llave, está bien, así que quieres agarrarlas y dársela
a halagar, eso es lo que haremos ahora, ¿vale? entonces aquí tendremos una variable y la
llamaremos json, está bien, así que envíe información a esta variable y esta variable
debe contener esta información aquí Estas claves aquí están bien, ahora podríamos acceder
a ellas, así que aquí escribiríamos json.

Bien, con esto hemos terminado con nuestro modelo de datos,
así que todo lo que tenemos que hacer es tomar el objeto y ponlo en json esta variable en realidad puedes
llamarla como quieras, es solo la convención Y asignaremos uno a uno a estas variables
aquí y luego podremos acceder a ellas. estas variables están bien, perfecto, ahora queremos
acceder a este archivo, aquí, servicios de datos. y dentro de él ahora todo está en la lista,
de la lista queremos convertirlos al mapa Ahora devolveremos una lista, está bien, entonces devolveremos la lista,
pero ahora, antes de regresar primero, la convertiremos en un mapa.

¿Por qué déjame decirte eso? Después de esto, esta lista debería
tener información como esta. Está bien, pieza por pieza. así esta sería la primera pieza y luego la segunda
pieza así pieza por pieza está bien, ahora cada e apuntaría a esta pieza determinada o me refiero
a ciertos datos como esta esta información otra e o la siguiente e debe tener información o apuntar
a esta, está bien para que puedas acceder bloque por bloque, bien ahora, cuando accedamos a ellos, los convertiremos
en un mapa para que podamos llamar al modelo de datos.

Como el primero, ahora simplemente podemos pasar
la e bien y luego lo convertiremos en lista Bien, con esto ya casi hemos terminado de
cargar los datos desde el servidor. Bueno, después de esto podremos cargar los datos, pero creo
que también necesitamos cambiar el tipo de devolución. porque no tenemos ningún tipo de devolución aquí,
pero devolvemos datos aquí mismo, por lo que devolvería futuro y aquí lista y aquí el tipo
es modelo de datos, está bien porque son datos tipo de modelo y ahora creo que también deberíamos tener una declaración
de devolución aquí, bien, modelo de datos de devolución y, por supuesto, debería ser un modelo de datos de tipo
lista y estar vacío si tenemos un error al devolverlo. vacío veamos por aquí vale ahora por aquí
también necesitamos otro si no es cierto o Si no puede cargar los datos correctamente, devolveremos
este ahora que el error desapareció. con esto la carga de datos sería exitosa pero ahora
necesitamos volver a nuestra aplicación cúbica Necesitamos crear dos estados más, ¿vale? Entonces, lo que
haré será simplemente seguir adelante y copiarlos.

Y pégalo allí, así que al primero
lo llamaremos estado de carga y el segundo está en estado cargado por lo que este estado se activará
cuando intentes cargar los datos. Tendremos un indicador circular y este estado
se activará una vez que hayamos Los datos se han cargado correctamente. Está
bien, por eso los necesitamos a ambos. Bueno, ahora tenemos que encontrar una manera
de llamarlos, ¿dónde están sucediendo? Para hacer eso primero, continuaremos con nuestro
qubit aquí y aquí crearemos un nuevo método. el tipo de método es nulo y diría obtener datos así de simple, está bien, sí, y ahora aquí. También intentaría una vez más cerrar
la cláusula catch uh, lo siento. Muy bien, ahora llamaremos a este desde algún lugar.
Está bien, una vez que llamemos a este primero. Primero queremos cargar o activar este estado, que es el estado
de carga. Está bien, así que aquí hacemos el estado de carga. Emitimos un estado de carga correcto, por lo que en ese momento
se estaría cargando bien ya que está cargando lo que podríamos hacer, podríamos llegar a nuestro archivo
lógico, que es veamos, no este, no este.

Este está bien, así que ya no lo necesitamos más. este
de aquí está bien, entonces aquí en realidad podríamos Haz una verificación condicional una vez más, así que lo
que haré será copiar, pegar este y colocarlo ahí mismo. Bien, ahora quiero comprobar qué tipo de estado es
si está cargado. Estado Bien, si está cargado. estado, entonces quiero llamar a una función o quiero
dibujar algo diferente aquí, así que si es estado cargado quiero dibujar un indicador circular, está
bien, aquí haría el centro, está bien niño indicador circular ok indicador de progreso
circular eso es todo, así es como lo llamaremos Entonces, una vez más, si vienes aquí, esto
sería responsable del estado de carga.

Veamos que no está cargado, se está cargando bien, así
que este sería el estado de carga responsable y ahora este estado está en nuestro qubit aquí, por lo que llamaremos
a esta función una vez que llamemos a esta función. desencadenará este estado y si se activa este
estado, este archivo aquí esta clase sucia poder presentarlo porque recorre todos los estados
y lo encuentra bien y una vez que lo encuentra funcionaría bien ahora, por supuesto, necesitamos encontrar
un lugar para llamar a esta función donde podamos Llámalo desde, por supuesto, podemos llamarlo desde nuestra
página de bienvenida aquí, como dijimos anteriormente. Entonces esta es nuestra página de bienvenida y la página de bienvenida
tiene un botón, este botón a la derecha, así que debemos encuentre este botón y dónde está este botón
este es el botón está bien, ahora este botón Deberíamos envolverlo dentro de un contenedor y como niño
está bien y luego le daremos un ancho, digamos con 200 y luego lo envolveremos alrededor de otro widget
y ese widget llamará al detector de gestos.

Vale, y se activa el evento de toque. Bien, dentro
del evento de toque llamaremos a esa función. la función que acabamos de crear aquí, por lo que
aquí este botón se activaría o se activaría Lo siento, activaría esta función y luego
esta función activará este estado de carga y Una vez que lo haga, podrá encontrarlo aquí, cargarlo
correctamente y mostrar este indicador. Así que aquí seguiremos adelante y simplemente llamaremos a
un proveedor de bloques de qubit para que bloquees al proveedor. apagado aquí, así que tenemos nuestra aplicación, por lo que nuestro nombre
de qubit es esta aplicación qubits, así que hacemos esta aplicación qubits bien y dentro de él necesitamos pasar un contexto
y luego podemos acceder al método que se llama Obtener datos está bien, así que si tienes algún tipo de método,
puedes acceder a ellos desde cualquier lugar desde tu vista.

Usar el proveedor de bloques está bien, así que,
como dije antes, brockport verifica los estados Bueno, el proveedor del bloque también puede llamar. Lo siento, como dije antes, el proveedor de bloques contiene
el qubit, así que ahora mismo es como un qubit. La forma en que entiendo cada función también es un qubit.
Está bien, contiene el qubit y puedo acceder a ellos. De todos modos, una cosa que podrías
hacer es seguir adelante y ejecutarlo.

Y funciona bien, se está cargando perfecto, así que inténtalo
una vez más, así que este es nuestro estado inicial. y si haces clic en esto, se cargará bien, eso significa
que ahora podemos cargar nuestros datos. Mientras se está cargando, dentro de este
tiempo podemos cargar nuestros datos. está bien, saquear, está bien, primero continuaremos y declararemos los datos
y los cargaremos dentro de este objeto de obtención de datos, está bien. Así que aquí hacemos servicios de datos finales y los
llamaremos datos simplemente los llamaremos datos. pero ahora, por supuesto, esta es una variable y la
variable final, por lo que necesitamos inicializar Dentro de esto, pero hay otra cosa importante
que debes saber bien aquí, ¿vale? Lo inicializaremos dentro de él y lo llamaremos requerido.
Este punto dice datos, está bien, no hay problema. pero ahora, si venimos aquí, tendremos un error aquí
porque también debemos pasar este por aquí.

Porque estás mencionando estás diciendo que
estás diciendo estás diciendo eso por aquí debería tomar datos y el tipo de datos es tipo de servicios de
datos, está bien, bien, después de esto tenemos que venir por aquí y también necesitamos pasar de nuestros qubits.
Está bien, por aquí, entonces necesitamos pasar datos. servicios de datos de servicios y ahora el error debería desaparecer,
entonces, ¿qué sucede aquí una vez que creamos por primera vez? En este qubit también estamos pidiendo que se cree un servicio
aquí, está bien, y un objeto del servicio. Ojalá tenga sentido y después de eso estaremos
aquí y luego podremos cargar los datos y ponlos en esta variable, está bien, entonces
pon los datos en esta variable que se llama uh Lo siento, primero tenemos que crear una variable,
la llamaremos tarde, lugares finales, ¿vale? Muy bien, ahora nuestros lugares donde esta variable
contendrá datos de esta, entonces data.get información, por lo que obtener información en realidad
está cargando la variable y toda la información del servidor correcto y luego lo colocamos en este.
Con suerte, ahora tendrá sentido si podemos cargue los datos y coloque este aquí ahora,
después de eso podremos activar un nuevo estado, pero recuerda que ahora debería suceder
algo interesante porque podrías necesitarlo.

Tenemos que esperar a que los datos estén bien, eso es
lo que vamos a hacer y luego sincronizamos aquí para están esperando los datos, una vez que se hayan cargado los
datos, la siguiente línea se ejecutará correctamente. de lo contrario no estará bien, entonces aquí emitiríamos un nuevo
estado. ¿Cuál es el estado que emitiríamos? Estado cargado estado cargado, este está bien, pero ahora los datos
se han cargado y necesitamos pasar los datos a este uno por aquí, así que lo pasaremos al estado cargado.
Ahora tenemos que volver a nuestro estado por aquí. Entonces este es el estado cargado ahora aquí. Bueno, estamos pasando los datos, por lo que debemos
capturarlos aquí para que tenga el estado cargado. dentro del constructor porque esta es una clase, así
que primero declararemos una variable y los datos viene aquí como una lista, así que hacemos el modelo de datos.
Está bien, eso es todo y el nombre de la variable es lugares.

Así que lo pondremos aquí, colocaremos este punto,
así que tomaremos los datos, está bien, ahora porque dijimos anteriormente que este tipo de lista se usa para activar
la creación automática de la interfaz de usuario, por lo que debemos Ponlo aquí ahora nuestra interfaz de usuario sabrá nuestro
qubit. Oh, hay nuevos datos, así que sigamos adelante. y reconstruya la interfaz de usuario si es necesario. Bien, una vez más,
¿qué está sucediendo aquí para que se llame a esta función? Luego estoy mostrando el estado de carga, por lo
que se cargaría aquí y luego al mismo tiempo. vez vendría aquí e intentaría cargar información
desde el servidor una vez que esté cargado activará este, ya que también actualizaremos
nuestro estado porque hemos obtenido datos, de modo que si obtiene datos, puede actualizar su estado.
Está bien, a medida que actualiza el estado en el que se encuentra.

También emitiéndolo correctamente, lo emitiste aquí porque
tienes esta función de emisión ahora mientras Si pudieras emitirlo aquí es lo interesante.
um, podrías venir aquí para ver. este archivo que se llama Este está bien, entonces sabemos que el estado emitido lo
podemos encontrar aquí, así que simplemente lo copiaremos. pégalo aquí, bien, ahora aquí podríamos buscar un nuevo
estado para que el nuevo estado esté cargado.

Ok ahora mientras si el estado ha sido cargado Entonces, lo que significa que estamos aquí, está bien, así que
podemos solicitar una nueva página, ¿cuál es la página o? ¿Dónde está la página a la que queremos ir? Queremos
ir a la página que se llama página de inicio. entonces esta es la página a la que
queremos ir, bien, entonces Lo que haremos, simplemente vendremos aquí
y llamaremos a la página de inicio. Bien, ahora tenemos que importarlo. así que detengamos eso Bueno, ejecutamos la aplicación y ahora tenemos
un pequeño problema una vez más. ahora viene de esta página de bienvenida aquí Así que ahora tenemos este botón. El botón responsivo
se está expandiendo. Usa flexible, si lo recuerdas. flexible siempre debe estar envuelto alrededor de
widgets de fila o columna, por eso recibimos esto error, así que ahora lo envolveremos alrededor de otro
widget y lo llamaremos aquí fila y, por supuesto, Tendremos que usar niños porque ahora somos una
fila aquí.

Los pondré alrededor de esto. Y ahora el error debería desaparecer. Ahora
volvamos a ejecutarlo una vez más. Bueno, ahora el error desapareció. Bueno, entonces sí,
ahora creemos que trabajamos en este botón de pestaña. y este botón de pestaña activaría obtener
datos y obtener datos vendría de aquí uh, nuestra aplicación de qubits aquí está bien, cargará
la información del servidor y activará Los lugares cargados están bien y luego, una vez que
hacemos clic en este botón, podemos ver que podremos cargue estos datos correctamente y una vez que carguemos estos
datos, si llega a la lógica de esta aplicación qubit, entonces Este estado cargado se ha activado, por lo que puedes ir a
nuestra página de inicio.

Eso es lo que esperamos. Vamos a ver, sí, los datos se cargaron y nos llevaron
hasta aquí, por supuesto, estos datos todavía están. No del servidor, pero podemos demostrar que nuestros
datos se han cargado desde el servidor. y luego venimos aquí, ¿cómo podemos hacer eso? um,
podemos ir a estos servicios de datos por aquí Y creo que podemos simplemente poner e imprimir
esta lista y veremos que se ha cargado. y luego lo dirigimos a esta página,
sigamos adelante y verifiquemos Bien, ahora hacemos clic en esto y veremos
que se ha cargado. Bien, entonces venimos. Aquí está bien, así es como funciona, la
carga de datos ha funcionado correctamente. Entonces, ¿qué debemos hacer ahora? Necesitamos ir
a nuestra página de inicio, buscar los datos y usar el datos cargados en lugar de este, está bien, entonces
todos los datos se han cargado y ahora al mismo tiempo Si vemos aquí, una vez cargado, el estado
se ha cargado. Estado cargado aquí. esto se ha llamado ahora aquí, estos accesorios se han actualizado
con nuevos valores, está bien, así que una vez más, si vemos el qubit de nuestra aplicación, así que aquí los cargamos
y luego emitimos el estado correcto y cuando cumplimos con los estado y los guardamos en nuestros estados aquí en estos accesorios,
así que ahora si usamos el generador de bloques estaríamos puedo acceder directamente a este accesorio, está bien,
ahora tenemos que ir a nuestra página de inicio aquí Ahora, si lo miras, el cuerpo, aquí tenemos, este cuerpo
contiene una columna, así que seguiré adelante.

Y simplemente corta este ahora aquí usaremos el generador
de bloques y ya aprendimos que usar bloques constructor podemos acceder a los estados, así que aquí
queremos acceder al estado porque queremos obtener el accesorios aquí como estos accesorios aquí de todos modos, así que
ahora se necesitan dos parámetros, el primero es la aplicación qubits para nuestro caso son qubits uh clase y el segundo son
los estados de qubit, está bien, estados de cúbits y supongo que necesitamos importar de lo contrario tendremos un error.
Vale, ahora por aquí.

Bien, estamos bien. Ahora te preguntamos si necesitas
una propiedad de constructor que cumpla funciones y El primer parámetro es un contexto y el segundo es
el estado. Ahora podemos acceder a este estado. el estado de nuestro qubit está bien, por eso necesitamos
el generador de bloques ahora, aquí devolveremos nuestro columna la que acabo de copiar antes o la corté
bien para que ahora no haya ningún error Bueno, aquí hay otra cosa interesante que podríamos
hacer. De hecho, podemos terminar todo esto una vez. De nuevo, esta es la declaración if else, solo asegúrate
de que el estado esté ahí, ¿cómo podemos hacer eso? entonces podemos verificar si el estado está cargado porque
en este momento los datos deberían estar cargados todos Está bien, si el estado es un estado cargado, entonces
haz otra cosa, haz otra cosa si no existe este estado.

Significa que tenemos el estado incorrecto o que algo salió
mal, así que solo diga mostrar contenedor vacío pero, por supuesto, puedes escuchar mucho más:
no tiene que ser un contenedor vacío y más aquí devolveremos lo que acabamos de cortar antes,
vale, bueno, la otra cosa es que ahora porque de esta palabra clave de estado podemos acceder a los accesorios
desde el qubit indica esta clase, así que aquí declararé un nueva variable la llamaré información y aquí haría lugares de
puntos de estado de estrella, como ves, podemos acceder a ella.

Y todo está bien ahora esta información
contiene esta lista aquí Entonces te devuelve la lista. Ahora, lo que podrías hacer.
Podríamos seguir adelante y comenzar a cambiar nuestro uh información, entonces el primer lugar que queremos cambiar
es aquí, así que ahora en lugar de estático 3, haría información sobre la longitud del punto, está bien,
ese es uno y el otro aquí ahora en lugar de tener En este caso, quiero usar una imagen de red, no una
imagen de activo, porque provienen de la red.

Entonces hacemos una imagen de red y ahora toma la ruta.
En mi caso, todas mis fotos se guardan en http uh. marque el punto bsl hecho y dentro de la carpeta de cargas, está
bien, entonces esta es la carpeta para mis imágenes y así desde Aquí puedo recuperar las imágenes que me han pasado a través
de esta lista de diapositivas, como puedes ver. Todo lo que necesito hacer ahora es agregar este. Está bien, entonces,
lo que haré. Seguiré adelante con más e información. y aquí información, veamos después de hacer información, podemos
acceder al índice, está bien, índice ahora aquí podríamos hacer img está bien, entonces para cierto índice obtenemos
el ing bien y debería funcionar bien ahora, ya sea funcionando o no, podemos seguir adelante, cargarla y ver
qué sucede ahora que cargamos nuestra aplicación y Esto comenzó desde el principio, así que en este momento
tenemos dos, dos estados han sido emitidos, uno.

Es el estado inicial, el otro es el estado bienvenido. Ahora, una
vez que hagamos clic en esto, emitiremos un nuevo estado y eso sería nuestro estado cargado, está bien, sigamos adelante
y verifíquelo. Sí, estos datos provienen de todos. servidor, ¿no es increíble? Vale, sí, ya
hemos terminado con nuestra aplicación. Quiero decir, casi terminé, no lo he dicho todavía, así que
sí, está funcionando, es increíble, me siento bien porque Han pasado casi cuatro horas, diría chicos, y gracias
por estar conmigo durante tanto tiempo. Y, por supuesto, en el futuro también veremos cómo
actualizar esta información usando qubit. Ahora lo siguiente que queremos hacer es poder
hacer clic en esto e ir a una nueva página. y mostrar esta información relacionada para una imagen en particular,
está bien, para hacer eso primero debemos ir a nuestro estados del qubit de la aplicación aquí y
aquí crearemos un nuevo estado y para este Primero continuaremos y copiaremos este y en lugar del
estado cargado ahora queremos ir al estado detallado.

Ok, estado de detalle, significa la página de detalles
porque queremos hacer clic en cierta imagen. y ve a nuestra página digital, por eso establecí
el estado detallado y lo cambiaré. Aquí ahora, una vez que llamo a este estado, lo que significa
que cuando emito este estado, en ese momento pasaré esto, uh. modelo de datos está bien como una lista que estoy
pasando, voy a pasarlo bien, por eso tengo esto prop que es diferente de este porque este
incluye todo y este solo incluye una determinada lista de nuestra uh una vez un determinado
niño de la lista está bien, ahora el Se ha creado el estado. Ahora continuaremos con los qubits de
nuestra aplicación y para este estado crearemos uno. Nueva imagen o función de emisión,
eso es lo que entendería. Vale, está bien, entonces, ¿cómo hacerlo? Aquí
lo llamaré página de detalles como esa y Por supuesto, obtendrá información de la función
de llamada y enviará el modelo de datos. y los datos están bien, este sería
el tipo que enviaría está bien y necesitamos importarlo, de lo contrario obtendremos
un error está bien, bueno, otra cosa aquí también Necesito encargarme de esto y lo haremos más tarde.

De todos modos,
me lo perdí la última vez, así que ahora aquí simplemente emitir un nuevo estado para que ese estado se llame estado detallado,
está bien, el que acabamos de crear, estado detallado Está bien, y toma esta información que se llama
datos, así que eso es lo que pasamos allí y Hemos terminado de crear el qubit y bueno, tenemos
este error, eso se debe a que si vienes aquí y ves Bueno, es una lista, pero solo estamos pasando un niño
de la lista, por lo que no necesitamos crearlo.

Como una lista aquí, me refiero a envolverla alrededor
de la lista, no así porque solo estamos pasando uno de los elementos ahora si vienes aquí uh lo
siento si vienes aquí a los qubits los datos este error desapareció, así que es bueno, ahora nuestro
qubit ha sido creado y nuestro estado ha también se ha creado, así que ahora es el momento de llamarlo,
podemos llamarlo desde nuestra página de inicio. Ahora llama desde donde definitivamente podemos
llamarlo, supongo que desde este contenedor. aquí porque queremos que se pueda hacer clic en este contenedor,
este contenedor contiene nuestra imagen, así que Iré aquí y lo que haré. Seguiré adelante
y lo envolveré alrededor de un nuevo widget y este es un detector de gestos, también puedes hacer
tintero, realmente no importa, así que aquí Lo siento al tocar, está bien, por lo que se necesita enderezar el evento en la pestaña. está bien Está bien y debería estar aquí.

Bien, ahora la flecha se ha ido, así que lo que hará
será volver a utilizar el proveedor de bloqueo. para acceder al qubit, eso es lo que aprendimos,
así que bloqueas al proveedor puntee usando, necesita usar la función de apagado
y aquí se necesita el qubit, ¿cuál es su qubit? aplicación qubits codos este y luego también
toma contexto el contexto actual y después de eso podemos acceder a lo que queramos desde
nuestro qubit, así que desde nuestro qubit queremos acceder a una función que se llama página
de detalles, ésta está bien y la pasaremos uno de los elementos de nuestro índice o de
la lista, entonces, cómo pasarlo, recuerde Tenemos esta información y usando información podemos pasar
un índice determinado, lo que significa que para ese índice Estamos pasando todo el elemento.

Bien, ahora estamos bien,
así que con suerte, si seguimos adelante y ejecutamos. Si deberíamos poder pasar a una nueva página,
está bien, sigamos adelante y hagámoslo. Así que lo ejecutaremos desde el principio y nos aseguraremos
de que todo esté bien y que no haya errores. Ahora haz clic aquí. entonces los datos se han cargado y no hay ningún
error. Ahora queremos poder hacer clic en eso. Así que sigamos adelante y hagamos clic. Parece que
nuestro clic realmente no funcionó. Veamos. Creo que estamos en el lugar equivocado.
Lo siento mucho. ¿Qué haré? Copiaré este. y luego haré ctrl z para volver vamos a ver Bueno, entonces este no es el lugar, creo que debería
haber estado aquí, por aquí.

Bueno, entonces este. y dentro de esto este es el contenedor
este es el lugar que cambiamos Lo siento, pero ahora de todos modos aquí haremos
el detector de gestos una vez más y haremos gestos. detector y ahora aquí simplemente pondré lo
que copié. Ahora lo ejecutaré una vez más. Haré clic en esto y ahora haré clic en esto  está
bien, sí, bueno, ya es necesario, ¿ahora qué? sucedió aquí cuando hiciste clic en esto
uh  intentó venir aquí y qué pasó Así que hagámoslo paso a paso, desde este qubit intentamos
llamar a esta función una función de qubit.

Entonces todos nuestros qubits están aquí. Ahora
vino aquí y emitió este estado y al mismo tiempo. guardó esta información de datos en nuestros estados aquí,
está bien, ahora se suponía que íbamos a ver esto cosa en la página de detalles, pero la página de detalles
no está allí. Lo que pasó es porque en nuestro Lógica del qubit de la aplicación, no la estamos buscando y la
redireccionamos a una nueva condición o nueva página, ¿vale? Por eso sucedió, para que podamos resolverlo fácilmente,
simplemente copiaremos cualquiera de ellos y Aquí lo pondré bien después de copiarlo
ahora, simplemente haré otra prueba aquí. Entonces diré que si el estado es estado detallado, está bien,
recuerda, entonces el nombre de este estado es detalle. una vez que emites desde aquí, ese es el estado
detallado de todos modos, así que ahora Vienes aquí y luego lo redirigiremos a una página de
detalles. Está bien, entonces página de detalles, sí. Está bien, ahora adelante, ejecútalo y definitivamente funcionará.
Ven aquí.

Está bien, todo está bien. y ahora, si haces clic en esto, debería funcionar, por lo que te
llevará a una nueva página, por supuesto, si haces clic en Esto no se puede volver atrás, lo primero de lo que nos ocuparemos
ahora es de regresar desde la página de detalles. Necesitamos volver a la página anterior.
Para hacerlo, primero debemos entender. un concepto aquí, una vez que hacemos clic en
él, solo queremos volver a la página anterior y en la página anterior se han cargado todos los datos,
por lo que no queremos cargar nada que simplemente quiero volver a la página anterior ahora el estado de
la página anterior está cargado estado bien, ahora Ya tenemos el estado cargado aquí, que es este, por lo que
necesitamos encontrar una manera de emitirlo una vez más.

Estado en este botón, haga clic en Aceptar, eso es lo que debemos
hacer y es bastante fácil, simplemente podríamos ven aquí y escribe una nueva función, podemos decir
vete a casa, está bien y aquí emitiremos cargado estado bien estado cargado y estado cargado toma uh esta
lista cuáles son los lugares en los que estamos pasando y una vez más estos lugares vienen desde aquí, está bien,
entonces todo lo que tenemos que hacer ahora en nuestro qubit desde un proveedor de bloques necesitamos llamar a
esta función, devolverá o emitirá este estado Bien, una vez que emita este estado, podemos encontrarlo
fácilmente aquí porque ya está aquí en casa.

Página está bien, así que no necesitamos cambiar aquí, así
que para esta todo lo que tenemos que hacer y todo lo que hicimos Esto es todo, así que ahora tenemos que ir a nuestra
página de detalles y a la página de detalles aquí. uh, veamos una cosa que tenemos que hacer uh, necesitamos encontrar este botón aquí.
Creo que este botón está aquí, veamos. Vale, debería estar dentro de este botón de icono
de sí, como ya vemos, lo tenemos sin presionar. um evento así que por aquí sigamos adelante y llamar al proveedor de bloqueo porque sabemos que al
usar el proveedor de bloqueo podemos acceder al uh, los qubits o las funciones de qubit están bien, así
que aquí llamaremos qubits a las aplicaciones y se necesitan contexto y desde el contexto podemos acceder a un método,
por lo que en nuestro caso se llama ir a casa Está bien, todo está bien, así que después
de hacer clic en esto queremos volver.

Así que sigamos adelante y ejecútelo
para ver si todo funciona bien o no. se cargó ahora cargo este ahora haz clic en
este sí, volvió haces clic en este se fue atrás está bien, perfecto, entonces significa que ya está
funcionando bien y también, como ves, al usar esto sistema de gestión estatal a pesar de que cargamos estos
datos hace mucho tiempo en otro lugar, pero vamos volvemos y todavía vemos los datos, todavía están allí.
Está bien, entonces esto es perfecto hasta ahora, muy bien. y ahora, una vez que hacemos clic en esto, queremos
cambiar la imagen que realmente no queremos ver. uh, esta imagen estática, así
que ahora aquí estamos en esta. Así que una vez más si queremos acceder
a todo desde este estado aquí desde aquí tenemos que ajustarlo una vez
más usando uh block builder, ¿vale? Simplemente veamos, simplemente cortaré este, está bien,
ahora haré el generador de bloques, está bien y El generador de bloques toma dos parámetros que conocemos,
así que eliminaremos este primero o, en realidad, Puedo hacerlo aquí, así que el primero es qubits de aplicación,
el segundo es qubit, estado de qubits, está bien, sí.

Oh lo siento ahora aquí se necesitan dos parámetros, el primero es
el contexto, el segundo es el estado, está bien y luego regresar y después de regresar, uh, podemos decir aquí
regresar al andamio, está bien, el que copiamos anteriormente Está bien y el error debería desaparecer ahora
debido a este ahora podemos acceder al estado. debido a esto ahora a qué estado queremos
acceder queremos acceder al estado que es incluido aquí está bien, ahora veamos,
creo que usando esto puedes acceder todo el estado, por lo que queremos acceder a un determinado
estado y me refiero a todos los estados, creo que este y a este puedes acceder a todos ellos, pero
en este caso solo queremos acceder a este Entonces, ¿cómo acceder a eso, pero el que contiene
esto es que el nombre del estado es? estado de detalle correcto, así que necesitamos encontrar el estado
de detalle aquí, así que lo que podríamos hacer sería detalle estado y detalle aquí estado
como detalles pequeño estado Bien, ahora esto debería incluir nuestro estado,
así como la información encapsulada.

Dentro de esto, está bien, ahora
es el momento de seguir adelante. y primero queremos cambiar este para que
en lugar de esto usemos la imagen de red y ya sabemos que ya no necesitamos
este, así que usaremos http uh marca punto bsl.com sube ahora aquí así que
haz clic aquí detalle punto uh lugar punto img está bien, perfecto, ahora copia esto, quiero decir,
reinícialo, recarga en caliente, perfecto, ¿no es increíble? Ok, ya está funcionando, haz clic en esta
imagen.

Haz clic en esto y verás esto. imagen para que todo esté funcionando bien ahora.
Bueno, simplemente copiaré esta aquí porque necesito reutilizarlo y cambiaré todos
los demás lugares donde necesitemos cambiar veamos los lugares donde necesitamos cambiar definitivamente
el primer lugar aquí fila Entonces, en lugar de esto, simplemente
pasaremos este, está bien, y uh. entonces la cantidad en lugar de esto por supuesto aquí no
necesitamos esta imagen aquí necesitamos el nombre ahora Aquí tenemos que hacer una concatenación.

Creo que
lo llaman y aquí colocamos el precio punto. y sigamos buscándolos y creo que está bien, tenemos
que convertirlo en cadena para que funcione porque devuelve int aquí está bien,
estamos bien con eso y aquí es lo mismo Así que aquí haremos la ubicación de este punto. Estamos
bien y veamos aquí el número de estrellas. Así que aquí podemos simplemente hacer estas estrellas de puntos. Está bien, y el total es cinco. Está bien, en realidad
deberían ser cinco. ¿Qué más hay aquí ahora? esto no cambia la descripción no cambia y también
necesitamos cambiar esta aquí a lo largo texto, ya no lo necesitamos, así que seguiré adelante
y simplemente lo eliminaré. Ahora lo pondré. Es este y aquí la descripción. Bien,
ahora sigamos adelante y ejecútelo. Sí, increíble, toda esta información cambió rápidamente,
de inmediato, está bien, ahora ven aquí. Haga clic en esto. Sí, verá un tipo diferente
de información. Diferentes estrellas. Puedes hacer clic en esto. Parece
que tenemos un poco de ¿qué es? Problema de desbordamiento de 11 píxeles.

Ahora bien, este número
es demasiado grande, así que hay una forma de solucionarlo. problema, o los cambias, está bien, cambia el tamaño
de fuente o cambia esto en la parte posterior Entonces, ¿qué haré? Seguiré adelante y veré, déjame ver,
verifique a los demás, sí, entonces el problema es ahora. Este nombre es demasiado largo, así que hay una forma de encargarnos
de esto en lugar de hacerlo en la parte de atrás. uh sí, creo que iría aquí y esta es mi parte
trasera uh, creo que este es el lugar donde está causando un problema, así que no quiero reducir
el tamaño del texto. Lo haré aquí, campo de hielo y Envíalo ahora, ven a nuestra aplicación aquí. uh,
hagamos una recarga, carga todo desde cero. Ok, ahora haz clic en esto. Vaya, creo que lo hice
en el lugar equivocado. Solo haz clic en esto. El hielo llena la avenida, oh, creo que veamos.
Lo cambié al lugar equivocado, así que aquí en realidad necesito cambiarlo
aquí este es el nombre, ¿vale? Ahora debería funcionar, volvamos a
nuestra aplicación aquí.

Y por cierto, si quieres un tutorial sobre este back-end,
házmelo saber que estoy planeando hacerlo. uno, pero depende de cuánto lo quieran, así que
vamos a cargarlo, así que aquí haré clic. En esto ahora está perfecto, así que todo está funcionando,
incluida esta descripción, como queríamos. Muy bien, hasta ahora todo bien y si aprendes
algo, no olvides suscribirte y Aprieta el botón Me gusta y comparte este artículo o este tutorial
de todos modos, así que la siguiente parte de este tutorial Veremos cómo trabajar en esto y enviaremos una solicitud de
publicación a nuestro servidor y guardaremos la información. y luego recargamos y veremos la información
que se guardó, la vemos bien Muchas gracias. Antes de terminar aquí, en
esta parte creo que me falta otra parte. aquí ahora, como verás, si continúas y lo ejecutas,
definitivamente no verás la barra inferior. y todo lo demás sigue igual y también
funcionan como esperábamos.

Pero ahora, ¿dónde está nuestra barra inferior? Bueno, aquí está
el problema, así que una vez que confirmemos el estado cargado vamos directamente a la página de inicio, en realidad deberíamos
ir a nuestra página principal, está bien, esto es nuestra página principal que aprendimos temprano y dentro de la página
de manual tenemos una barra de navegación inferior como esta y en la lista de páginas la primera es la página de inicio
y ese también es nuestro índice predeterminado índice 0 que se hace cargo aquí y también aquí, está bien, entonces
todo lo que tenemos que hacer es simplemente venir aquí y en lugar de página de inicio la llamaremos página principal.
Vale, y página principal la llamaremos página de inicio.

Y asegúrese de importar la biblioteca, está bien, sigamos
adelante y ejecútelo, está bien, sí, y ahora Debería funcionar, así que nuestra navegación inferior, pero esta es la página
de inicio, la página de búsqueda de la página de la barra y la página de mí. Aunque ahora todos funcionan, sí, sí, perfecto,
así que esto es todo lo que esperábamos. Espero que hayas aprendido algo, así que no olvides
presionar el botón Me gusta, gracias.

As found on YouTube