Tabla de Contenido
Introducción
En algunas ocasiones necesitamos ocultar un widget sin que desaparezca del árbol de widgets o simplemente hacer que su color sea un poco más opaco. Para estos casos Flutter nos brinda un widget Opacity y otro con su versión animada si así lo requerimos AnimatedOpacity.
Opacity
Este widget hace que su child sea transparente cuando el valor de su propiedad opacity es 0.0. Los posibles valores van desde 0.0 a 1.0. Pinta al child en un búfer intermedio. Este búfer tiene un fondo transparente.
propiedades
opacityes la propiedad que da el nivel de opacidad entre 0.0 y 1.0, siendo 0.0 totalmente transparente.childes el widget hijo al cual se le aplicará la opacidad.
AnimatedOpacity
Para animar un widget Opacity se puede usar el widget AnimatedOpacity, el cual cambia automáticamente la opacidad del child durante un tiempo determinado.
propiedades
durationes la duración en unidad de tiempo, se apoya en la clase Duration la cual recibe como parámetro el tiempo que se tomará para animar la opacidad en el widget hijo.opacityes la propiedad que da el nivel de opacidad entre 0.0 y 1.0, siendo 0.0 totalmente transparente.curvees la forma que queremos usar para animar la opacidad mientras se ejecuta el tiempo de duración. Se apoya en claseCurvepara esta animación.childes el widget hijo al cual se le aplicará la opacidad.
Consideraciones de rendimiento
- Si se requiere simplemente dejar una imagen transparente es recomendable usar una Imagen y poner el color transparente
Color.fromRGBO(255, 0, 0, 0.5)que es mucho más eficiente que unOpacity. - Su uso no es tan eficiente para la aplicación ya que debe dibujar el
childen un búfer intermedio.
Ejemplos
- Tenemos tres widgets de
Opacity. El primero y el tercero son unOpacitycon un child que es unContainerde diferente color que a su vez tienen unchild Image. El segundo es unOpacityque tiene como child unImage.networkdirectamente. Podemos ver diferentes usos.
- Para este otro ejemplo, tenemos un
StatefulWidget, con unContaineren el cual usamos la propiedad del colorwithOpacitypara modificar su opacidad también junto con elchildque es unOpacityque tiene como hijo unImage.networky lo cambiamos con unElevatedButton.
- Para este último ejemplo es básicamente el mismo anterior, cambiando simplemente el widget
Opacitypor elAnimatedOpacity.
Conclusión
En conclusión, tenemos en Opacity un widget muy útil para hacer desvanecidos del color de otro widget, siempre y cuando sea esto lo que se quiere. En caso de querer simplemente hacer algo transparente pero que siga ocupando un espacio entonces es recomendable usar el color transparente directamente.
¡Gracias por leer!
