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 clase Curve para esta animación. También revisar las diferentes curvas que se pueden utilizar aquí.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 un Opacity.
- 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 un Opacity con un
childque es un Container de diferente color que a su vez tienen unchildImage. El segundo es un Opacity que tiene comochildunImage.networkdirectamente. Podemos ver diferentes usos.
- Para este otro ejemplo, tenemos un StatefulWidget, con un Container en el cual usamos la propiedad del color
withOpacitypara modificar su opacidad también junto con elchildque es un Opacity que tiene como hijo unImage.networky lo cambiamos con un ElevatedButton.
- Para este último ejemplo es básicamente el mismo anterior, cambiando simplemente el widget Opacity por el AnimatedOpacity.
Código fuente
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 este artículo!!!