Yo sé que ya hemos trabajado con El Conteiner lo hemos usado un par de ocasiones pero quiero introducirles.
Ahora lo que es el animais conteiner que nos va a permitir a nosotros poder animar cualquier cambio
que sufra un contenedor de una manera muy bonita.
Es más si usted lo corãn en su dispositivo móvil van a notar que se mueve a una transición súper suave.
Muy bonito el ejercicio que me gustó para practicar este ejemplo se encuentra en la documentación del
poder.
Yo les voy a dejar el material juntó 15 ambos juntos en Cookbook animais Properties o container.
Yo les dejo este enlace no aterrar todo para que vengan aquí directo yo lo que quiero es que nosotros
creamos esta este ejercicio en el cual ustedes al tocar ese botón de abajo se fue en acción.
Vamos a cambiar las propiedades de ese animaré que contenga.
Ok entonces manos a la obra vamos a crear este ejercicio.
Les voy a pedir que como siempre hay que crearse la carpeta en el archivo hay que hacer un par de cosas
con la opción de navegación acá y manos a la obra.
Empecemos creando la página.
Click derecho nuevo archivo.
Si esto se deja clic derecho nuevo archivo y éste se llama animais.
Un bajo conteiner punto Tarth y presionã.
Esto va a ser un Steinfeld widget porque las propiedades de ese contenedor yo las voy a tener que cambiar.
Para eso escribimos el shortcuts St.
Full widget ese que está ahí no Tapp esto me crea el Estado fue Widget y su manejador de Estado así
que esto se va a llamar any Noiret conteiner Patch.
Es esto un poquito para el lado para que lo puedan ver y aquí lo tenemos animaré y contiene Page se
extiende el widget aquí se crea el Estado y tenemos nuestro estado perfecto muy rápido ya lo tenemos
implementado por m para el paquete de material y ahora si ya está funcionando toda esta parte.
Antes de hacer otra cosa antes de trabajar con esto necesito que aparezca la opción del menú.
Para eso tendríamos que irnos a los assets a la data menu options justo bajo la ruta voy a poner una
coma enter llaves y pueden copiarse todas estas propiedades.
Noten que la sintaxis tiene que estar bien tiene que ser un Jayson balidos y que mucho cuidado a la
hora de modificar esto la ruta a la cual vamos a llamar va a ser animaré conteiner.
Esto copia no porque lo vamos a usar pronto el ícono que vamos a utilizar es el donut o la dona Lark
pero ustedes pueden poner cualquier ícono que desean aquí poner any Maire containing perfecto.
Si yo grabo los cambios y hago un Jock mi Start para que vuelva a leer mi archivo Jayson debería de
aparecer la opción animais y conteiner pero el icono no aparece y tampoco la ruta va a funcionar me
debía llevar a la alerta se acuerda porque no está definida esa ruta en mi archivo de ruta.
Entonces lo vamos a hacer rápidamente que voy a explorar esta línea aquí va a ser animais y conteiner
y me va a llevar a la página animaré conteiner Veitch apuntó.
El punto o como punto hay que importarse esa clase extra acá lo voy a poner aquí el final ok y grabo
los cambios para que aparezca el icono.
Entonces tengo que modificar mis utilidades ok mis utilidades y el ícono que yo estaba utilizando.
Voy a volver a abrir el menú Options Lords Lord Larcher o la dona grande hoy conjuntó y el icono de
la Dona voy a grabar los cambios aquí debería de aparecer el icono en breve.
Voy a cerrarlo otro Start.
Vamos a ver si aparece o qué hago ahora si estaba pensé que no iba a aparecer y si yo hago clic en ella
en esta página obviamente no aparece nada porque no tengo nada definido acá más que un container pero
hoy estamos listos.
Empecemos creando nuestros CAFO CAFO que parentesis punto y coma Enter.
Nuestro APAP avá el título que va a tener un texto que diga any Maigret conteiner.
Nada del otro mundo vamos a colocar aquí un body.
Todo esto ya lo hemos hecho.
Por eso lo estoy haciendo rápido porque ya lo hemos hecho quién sabe cuántas veces voy a colocar un
center y aquí dentro del Center voy a colocar mi container un container común y corriente pero siempre
con su chip que un.
Pero siempre va a ser un contenedor normal.
Ya lo vamos a ver funcionando.
Ok.
Entonces si yo hago los cambios no va a aparecer nada porque el contenedor por defecto es transparente
y todas las cosas vamos a creamos un par de propiedades aquí en l'Estat.
Aquí en mi clase estoy voy a crearme las siguientes propiedades Dovio y un bajo width y el wifi va a
ser de un 50 .0 pixeles.
Ese es el ancho que va a tener va a tener un doble también del height que un bajo height HT de unos
50 píxeles también punto y coma.
También podemos configurar el color entonces color que bajo color Pausoka y ensalzamos el color por
defecto con los puntos PIC o el color que ustedes quieran.
Para inicializar ok.
Y por último podríamos también configurar lo que es el borde radios que ya lo hemos venido usando bastantes
bueno en bastantes ocasiones especialmente en la parte de las tarjetas.
Entonces bordes Radius pero el geometric para especificar esa propiedad de un bajo border radius así
lo voy a poner voz de radios igual de radios oponerle aquí MDO circulan punto circular de unos 8.0 Punto
y Coma ok.
Estas propiedades son las que yo voy a establecerse al contenedor que tengo acá.
Para eso voy a comenzar va a tener un bajo Wits que luego vamos con el height y un bajo mi osti un bajo
me está matando acá height Enter.
Y ahora para el color y el borde Radius necesito colocarlos dentro de la propiedad de correction que
recibe un box de correction Box de box de Enter y de otros Box ecorregión si tenemos el poder de radios
que está esperando un bot de radio geometric que es lo que yo definía Kerrigan entonces Villón bajo
por de Radius Koma tenemos nuestro color y un bajo color voy a grabar los cambios y deberíamos de ser
capaces de ver esa caja de esa manera.
Perfecto entonces yo les voy a dejar de tarea de tarea en este preciso instante que coloquen el florín
Aksum Boron al escalafón que le pongan cualquier ícono que quieran yo lo voy a poner uno de play y que
al tocar ese botón llamen el set esté y Kamin cualquiera de estas propiedades.
Empecemos con estas dos o pueden cambiar de color también juegan cambiando cualquiera de estas tres
propiedades.
Cuando yo haga clic en ese botón simplemente recuerden que tienen que llamar el set State porque estoy
cambiando el estado y necesito que se redibujar.
Entonces Kamin estas propiedades en el florín Action Boron que ustedes tienen que poner dentro de él
es CAFO yo lo voy a poner acá.
Recuerden Florín Action tiene que venir ahí porque le pasa el video intenten hacer esto ustedes en este
instante pasa ya.
Lo lograron hacer tuvieron algún inconveniente.
Vamos a hacerlo juntos para tener la misma solución.
Aquí voy a colocar un florín Auction botón Enter para tener su Chilet tap y aquí va a ser un icono de
hoy concepto Play Harrow ese Istari y en él hombres voy a llamar un método bueno si ustedes lo definieron
ahí está bien pero el llamar a un método llamar llamado cambiar la forma o el nombre que ustedes le
dieron está bien.
Voy a implementar este método justo abajo donde cierra el método Bigott parentesis abre y cierro llaves
esto no regresa nada va a ser un Veidt y les había dicho que necesito que cambiaran el ancho y alto
y si quieren el color también de esa caja entonces voy a poner aquí un Witz el Wink va a ser igual a
lo teníamos 50.
Voy a ponerle más igual más igual 50 para incrementarlo en 50 puntos cero pixeles.
Lo mismo voy a hacer con el ID y un bajo height ok.
Y voy a cambiar el color entonces bajo color va a ser igual a Colors Colors o lo voy a poner así.
Recuerden que para que eso se aplique tengo que llamar el set stated.
Si ustedes lo dejaron así está bien porque la función sextete se va a volver a disparar y va a notar
los cambios y se va a volver a redibujar así que no hay problema ya lo vamos a cambiar en breve voy
a grabar los cambios tocó el botón y se aplica perfecto.
Si lo vuelvo a tocar va a seguir creciendo porque se está incrementando de esta manera pero se aplica
en el mismo instante en que un solo no hay ninguna animación ni ninguna transición es normal que todas
estas opciones o todas las modificaciones que hagamos a las propiedades vayan dentro del set stated
entonces también esa es una solución correcta.
Me voy a grabar los cambios ya tengo la acción básica pero yo quiero utilizar una función Random que
ya viene en los paquetes de Dart.
Vamos a ver voy a crearme el objeto random final random.
Va a ser igual a random parentesis punto y coma este random tengo que importarlo de un paquete de Tarth
que se llama dar más voy a seleccionarlo enter y es este acá lo voy a colocar abajo del material perfecto.
Eso sería todo para ya poder utilizar el random el random me va a permitir a mí poder hacer eso que
les estoy diciendo generar números de manera aleatoria.
Voy a decir que va a ser un random punto y el random trabaja con enteros y trabaja con dobles pero voy
a trabajar mediante un entero el siguiente entero y me pide cuál es el número máximo empezando en cero
en este caso voy a decir que el máximo va a ser de 300 y tengo que pasar a un tuto para extraerlo si
hubiéramos hecho Next.
Pero de esta manera generó números enteros.
Voy a copiar esta misma instrucción y la voy a pegar aquí abajo.
Si yo grabo los cambios y toco el botón van a notar que la caja va a cambiar su ADN su ancho y alto
de manera aleatoria basado en la condición que estoy poniendo acá ok.
El color es más interesante aún porque el color tiene una opción llamada Color punto from RGB o si se
preguntan que significa RGB o Red Green Blue y la opacidad.
Qué tan transparentes quieren que sea el elemento.
Entonces ven que aquí recibí un red recibe un ring un blue y la opacidad la opacidad la voy a dejar
en uno porque no la quiero cambiar y el Red voy a copiar esta línea también la voy a copiar sólo hasta
el INT.
Y si yo dejo el mouse encima de la función quiero que noten que recibe int R Image impe y son números
que van desde cero hasta 2:55.
Entonces puedo hacerlo acá hasta 2:55 copiar esta línea lo voy a mandar acá y de esta manera también
grabo los cambios y de esa manera voy a generar colores aleatorios.
Todos son colores aleatorios excelente y para el borde de radios que tal vez es lo más difícil porque
yo necesito generar un bot de radio circular también aunque yo creo que ustedes ya lo podrían hacer
con lo que hemos visto pero voy a decir que el bot de radios va a ser igual a un nuevo border radius
circular y ahora necesito el RADIUS.
Voy a poner el random punto NEX int y lo voy a manejar de 0 a 100 y lo que me está bueno me está marcando
un error porque lo que yo necesito mandar es un doble.
Entonces punto tu dopo tu vista.
No se olviden del punto y coma al final grabo los cambios y esto debería hacer que también los bordes
redondeados tengan diferentes propiedades de diferente forma.
Aquí tal vez no se ve.
Pareciera que siempre es el mismo pero sí lo está cambiando lo están cambiando de manera aleatoria pero
no lo vemos muy bien ahora qué bonito todo esto Fernando pero no hemos hablado de el animais contained.
Ok aquí está nuestro contenedor que es el encargado de hacer esto es nuestro contenedor que básicamente
es lo que estamos viendo en pantalla.
Si yo cambio este container así como está ese container lo voy a cambiar por un animaré container.
Noten que casi todas las propiedades me las acepta pero me está marcando un error porque necesita el
parámetro del duration el duration es requerido ese duration es que tanto o cual es la cantidad de tiempo
que va a tardar en cambiar su estado anterior al nuevo estado pero lo va a animã entonces por eso me
lo está pidiendo siempre dentro del enumeré container.
Voy a colocar esa propiedad llamada duration duration recibe un objeto de tipo duration en el cual yo
puedo especificar si quiero que dure milisegundos días horas o un montón de propiedades pero yo lo voy
a manejar en segundos quiero que dure un segundo.
Si yo grabo los cambios vamos a ver qué sucede ahora toco el botón y se anima con una manera bonita
ok.
Pero pudiera ser que alguien diga pero eso está muy lento está muy lento se lo pueden acelerar perfectamente
pero quiero introducirles a ustedes un nuevo tema acá en la documentación de flores.
Busquen Curves y presiona Enter tus Korps son animaciones predefinidas en floreo.
Vamos a buscar a ver si esta es la clase exactamente caí en el ejemplo y aquí tenemos diferentes formas
de Korps y aquí tenemos cuál es el nombre de dicho Kurt mentalizarse que son diferentes efectos pregrabados
para hacer animaciones un poco más elegantes.
Por ejemplo este Poussin como que rebota y al final hace la animación tenemos el ADT que hace el rebote
final tenemos el que la curva se desacelera o sea que empieza rápido y al final se desacelera ustedes
pueden ver ahí los ejemplos y hay muchos muchos muchos muchos ya preconfigurados para que ustedes usen
el que mejor les plazca.
En caso de que no quieran gastar menos energía creando sus animaciones personalizadas entonces para
definir un color entonces todos los elementos que se animan por lo general tienen este Culp aquí de
Curves Korps punto y voy a seleccionar el que me interese yo voy a seleccionar un fast out o sea que
se salga rápido pero empieza lento.
Voy a grabar los cambios y vamos a probarlo ok.
Se ve mucho mejor que antes pero recuerden que todo depende de la animación que ustedes quieran y del
efecto que quieran lograr en su aplicación.
Bueno podemos acelerarlo podemos reponerlos poquito más lento y puedes jugar con las propiedades como
ustedes quieran Kamil lo que sea.
Diviértanse con esto este ejercicio a mí en lo personal me gustó mucho y ven qué fácil es cambiar un
container por un animaré container.
Básicamente la única propiedad que hay que agregarle es el duration y eso es todo.
Si quieren que se mire más bonito le agregan los Korps y eso sería todo.
Los veo en la siguiente clase.