Es momento de realizar el último diseño que tenemos acá que es este día aquí vamos a comenzar con los
gradientes y los colores de fondo.
Hay varias cosas que hacer acá pero para comenzar necesitamos una página.
Para eso vamos a hacer click en pellet click derecho nuevo archivo se va a llamar botones de un bajo
Ph.D Dart que ustedes quieran darle.
Es muy importante el importe material.
STL es widget para declararnos un botones Page así le va a suponer entrar aquí adentro ya saben es CAFO
CAFO.
Luego vamos a borrar esto enter con su Body Center.
Tenemos un text y Hola Peach.
Cualquier cosa que ustedes quieran.
Ya tenemos la página creada.
Vámonos a nuestro Main y definamos una nueva ruta o va a llamar.
Botones Tones.
Y aquí sería botones Pach.
La cual me está marcando un error porque tengo que importarla la importamos.
Voy a asegurarme de que esté al final perfecto.
Grabo los cambios y también voy a colocar que el inicial robot va a ser botones.
Ahora si grabo los cambios y voy a hacer un Ristar para que tome esta página o esta ruta debería decir
hola Peach porque ya estamos en el botón Peach.
Ok aquí vamos a comenzar siempre dentro de nuestros CAFO en lugar de este Center.
Voy a comenzar con un widget en particular llamado L'Estaca el mismo stack que usamos en el video pasado.
Ustedes saben que el stack recibe una colección de hijos o sea su Children es una colección de widgets
y empecemos con el primer widget que sería el fondo de la aplicación.
Fondo a una coma.
Y vamos a implementar este método.
El fondo de la aplicación va a ser algo travieso un widget porque esto tiene que ser una lista de widgets
se va a llamar fondo app abro y cierro llaves no voy a ocupar ningún argumento pero tengo que ser un
ratón de algo.
Ok vamos a comenzar acá.
Si miramos el diseño que yo les pasé en el archivo PDF tenemos dos cosas importantes que se ignoran
los botones estos cuadraditos y noreñense enfoquémonos en el fondo tenemos algo que parece un container
con bordes redondeados que es rosado y tiene un gradiente y también abajo de él tenemos otro gradiente
noticia que empieza como un morado muy oscuro hasta Omoa un morado semi oscuro y ese es el gradiente
que va al fondo olvidense también de este tabs o este por una viguetas un bar.
Lo importante es esta caja rosada y el gradiente en el fondo.
Empecemos con el gradiente del fondo porque es lo que está más al final de lo que es el stack.
Entonces vamos a regresar acá voy a declararme de la siguiente manera voy a crearlo voy a creerme algo
llamado final gradiente y esto va a ser igual a un contenido tener parentesis puntico con contenia pero
no creen en la idea que quiero hacer es que como son dos partes lo que es el gradiente y la Caja Rosada
lo quiero separar en dos partes para que sea más fácil trabajar ese gradiente y hacer acción de otro
Stack Stack porque tengo que colocar estos dos elementos tanto la caja rosada como el gradiente tienen
que estar uno encima de otro.
Por eso es un stack entre las que tendríamos el Children enter y voy a colocar acá el gradiente si yo
hago los cambios van a notar que nada pasa o no estamos viendo absolutamente nada porque no tenemos
la configuración del gradiente y lo que acabo de hacer es para que cuando yo empiece a modificar mi
gradiente lo vaya viendo en pantalla que vamos a empezar con el container haciéndolo del ancho y alto
de la pantalla.
Entonces un huir de un punto Infinity y un hit de un punto infinito y también voy a colocar un Declaration
porque necesito ser el gradiente y cambiar el color de varias cosas.
Recuerde que un container lo que se recibe en Declaration es algo de tipo Boks Declaration bueno aquí
algo que sé que se extienda del box bueno del Recreation en este caso sería un box Declaration tap enter
en el box te voy a colocar lo que es el gradiente tap y yo sé que esta la primera vez que lo usamos
pero el gradiente está esperando una clase que extienda de gradiente y esa en particular la que me sirve
a mí porque yo quiero un gradiente lineal vamos a revisarlo un gradiente lineal que es que empieza de
un lugar y termina en otro pero se nota que es una línea recta que es consecutivos y paralelo si puedes
mirar Anjel gradientes como circular entonces hay un gradiente circular también pero vamos a trabajar
con el Linear gradiente.
Ese es el que estoy buscando Enter.
Si dejamos el Maudos encima del gradiente lineal me pide que hay argumentos como los colores que son
requeridos.
También me pide donde es que inicia y donde que termina ya vamos a ver esa parte por los momentos completemos
el requerimiento de los colores.
Colors y los colores son simples colores que ya hemos estado utilizando como por ejemplo Colors punto
Red y Colors punto vlog y grabo los cambios.
Vamos a ver qué sucede.
Por defecto el gradiente tiende a ser lineal en modo horizontal pero yo estoy buscando un gradiente
de modo vertical cómo podemos hacer ese cambio.
Tendríamos que definir lo que es el Beguin donde es que empieza y también tendremos que definir lo que
es el ente en qué punto termina qué hay para el bikini.
Es exactamente lo mismo ocupamos especificar el offset.
Estos son aunaba bastante complicado.
Déjenme escribirlo ya les explico Frictional upset.
Ok me dice dónde empieza su punto x y dónde es que empieza en su punto G.
Tendríamos que pensar que esta esquina de aquí arriba es la posición cero cero porque estoy al puro
inicio de la coordenada x y al inicio de la coordenada este de acá sería la coordenada 1 en X Y también
sería la coordenada cero en yé porque todavía sigo al puro inicio de la yé.
Si me voy aquí abajo esa sería la coordenada 0 en X y sería la coordenada 1 en yé porque estoy al final
del Yi.
Si me voy hasta acá esta sería la coordenada 1 en x y 1 ñ porque estoy al final de la X y estoy al final
de la noche.
Entonces si yo quiero que el gradiente empiece por acá entonces puedo definirlo como un 0 0 o sea un
0.0.
Quiero que me hice al puro inicio acá y en la posición en qué posición de mi eje en qué quiero que empiece
a difuminarse ese gradiente.
Digamos que lo quieren 0.6 0.6 sería como el 60 por ciento de la pantalla algo así lo podríamos ver
pensé esto porque el reciben lo mismo recibe otro Frictional ófset en la cual también voy a especificar
en dónde es que termina.
O sea yo quiero que termine en el cero serosa quiero que termine aquí y en la posición yé.
En qué parte quiero que termine.
En mi caso quiero que termine aquí al final al final de todo de todo.
Mi pantalla entonces sería la coordenada 1.0.
Si yo grabo los cambios tendremos ese efecto.
Es más o menos el 60 por ciento de la pantalla y aquí es donde empieza el gradiente.
Si nosotros jugamos con estos valores y pongo un 0.5 quiere decir que empiece por ahí de la mitad si
pongo un 4 sería como un 40 por ciento y así ustedes pueden ir jugando con los valores.
Pero a mí me parece parecido me parece acertado que ponga un 0.6.
Eso sería más que suficiente.
Pero los colores yo no los quiero así yo quiero que sean los colores que están acá.
Yo ya me tomé la tarea de extraer esos colores o los colores más parecidos y lo vamos a definir acá
se los voy a dar RGB o y voy a especificar 52 54 101 1.0 OK y el de abajo color punto from RGB o Tapp
y 35 37 57 1.0.
Estos son los que vamos a usar son muy parecidos a los colores que están acá no puede ser que no sean
exactamente los mismos pero bueno ustedes podrían buscar exactamente los que están ahí y aplicarlos.
Ok entonces ya tenemos la primera parte de nuestra pantalla que es el gradiente.
Todavía nos queda cambiar los colores de aquí arriba porque si se fijan son blancos y aquí los tengo
en color negro.
Pero ya llegaremos a eso creo que nos da tiempo de trabajar con la caja rosada.
Entonces hagámoslo de una vez.
Final caja rosa o caja rosada y esto va a ser un container.
Otro container entre el punto y coma.
También esta caja rosada la voy a colocar justo después de gradiente y grabo los cambios.
Deberíamos de ver que nada sucede y lo esperado.
No estamos poniendo nada en el container y bueno qué es lo que quiero que tenga este container.
Podría sacar las dimensiones dinámicas dependiendo del ancho de la pantalla.
Y aquí ustedes pueden jugar con esto.
Yo voy a trabajar con este Geir estático de no sé sádico perdón de unos 360 puntos cero.
Y también voy a decir que el va a tener unos 360 puntos pero también es un cuadrado.
También trabajamos con el Declaration de tipo box Declaration enter y pongamos un color voy a poner
color colors pink ya le vamos a aplicar un gradiente lo que necesito es que por lo menos miremos la
caja que ahí está nuestra caja.
Obviamente no se ve mucho como esto pero bueno ya vamos a llegar a eso.
Qué más tengo que hacer con esta caja.
Por ejemplo necesitamos los bordes redondeados y para eso puedo poner un borde Radius de un borde Rádio
circular y pongamos un 5 50 puntos cero no es más pronunciado.
Entonces que ustedes pueden jugar con estos valores hasta que tengan el efecto que desean.
Pareciera que un 80 90 da la impresión que ese es el bueno.
La ubicación correcta ahora cómo hago para girar esta acá.
Cómo hago para girar todo este contenedor porque si se fija es ese mismo cuadrado pero está en otra
posición como girado para eso ya nos ofreció un widget llamado el transporte que tiene un constructor
llamado Rostain.
Entonces aquí voy a voy a tener que crearme un nuevo widget.
Lástima que no lo puedo será bueno importar como siempre lo he estado haciendo y voy a hacer aquí un
Transform punto Botet enter y el Rothe me pide una coordenada acá un ángulo un ángulo y por ejemplo
me dice que podría ser de menos más un topillos de la posición Pi porque todo esto se trabaja en radianes
y la verdad yo no soy muy bueno radianes pero ya le voy a dar un ejemplo de cómo pueden hacerlo ustedes
y así se gira esto podríamos tomar el ejemplo y decir que el ángulo va a ser de menos Pi.
Entre que entre 5.0 el PI si ustedes ven el cursor encima y presionan punto me dicen que tengo que importar
ese objeto de más o de dar puntos más.
Así que lo vamos a hacer asegúrese de que le importen de ahí también.
Yo lo voy a bajar acá está mi punto más y eso ofrece ciertas opciones y funciones propias de operadores
matemáticos raíces cuadradas y otro montón de cosas muy parecido al objeto más de JavaScript y Transform.
También recibe un chip este chip va a ser todo nuestro container entonces lo voy a cortar y no voy a
poner a lo pego déjeme arreglar las tabulación no va un puntico ahí y ahora está aquí abajo que voy
a grabar los cambios y vamos a ver qué tal está como está bien o sea ese es el ángulo más o menos que
yo necesito.
Pueden jugar ustedes como poniendolo en un uno que sería la posición normal 2 casi no se movió un 3
4 y en mi caso yo lo voy a dar con un 5 ustedes pueden jugar con los valores para que quede exactamente
como ustedes desean.
Si se fijan como que el cuadro o mi contained estará un poco más arriba de lo normal porque tengo este
espacio y este espacio no se ve acá.
Cómo puedo hacer eso.
Bueno voy a regresar aquí como está en mi stack que yo puedo seguir agregando el widget a la caja rosa
pero no quiero complicarlo un poquito más simplemente quiero ubicar esta caja rosa en una subirlo un
poco básicamente y puedo envolver esta caja rosa con 4 puntos en punto y voy a envolverlo.
Ver página donde está agregando un container un chip en un Willa arriba bueno no está.
Entonces podía hacerlo manualmente que tomo mucho voy a usar un Willys llamado positioning position
el cual me permite a mí ubicar un elemento ya con coordenadas específicas o cuando yo ya sé dónde tiene
que ir ese elemento.
Si dejo el cursor encima me pide vamos a ver dónde está me pide que tienen que tener un chip a fuerza.
Entonces chau chau él dos puntos y aquí va la caja rosa.
Ahora si yo lo dejo así este posiciones no hace absolutamente nada.
No sucedió ningún cambio pero si ahora le digo que quiero que esté en el top y le voy a restar 100 píxeles
al top grabo los cambios.
Entonces la caja sube un poco más podríamos probar con 200 pero creo que eso subiría mucho.
Me parece que sí es correcto lo último que me falta es los colores de porque tienen un gradiente ahí
entonces vamos a implementar el gradiente quiten este color Pink y implementemos el gradiente que sería
un de un gradiente lineal que tiene sus colores.
Eso es un listado color punto from RGB o sería 2 36 98 188 y 1.0 el otro color.
Vamos a ponerlo vamos a hacer lo mismo color punto RGB o aquí sería 2 41 Tapp 142 Tapp 172 Tapp 1.0
y gravó los cambios eso debería ser que quede más o menos parecido.
No es el mismo pero se parece se parece lo vamos a dejar así.
Ya tenemos nuestro fondo de la aplicación y vamos a continuar con el siguiente video.