Bogotá, Colombia
hola@jairofernandez.me

Flutter – Opacidad

Blog personal

Agregar opacidad a un elemento resulta muy simple, usando el widget “Opacity”.

Ejemplo de opacidad
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        elevation: 10,
        actions: <Widget>[
          new IconButton(
            icon: Icon(Icons.menu),
            color: Colors.white,
            alignment: Alignment.bottomLeft
          )
        ],
        iconTheme: IconThemeData(
          color: Colors.white
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Opacity(
              child: const Text('Example of opacity'),
              opacity: 0.0,
            )
          ],
        ),
      )
    );
  }
}

También podemos agregar opacidad a una imagen, si solo se necesita agregar opacidad a un elemento puedes usar directamente Color.fromRGBO, cuyo último parámetro es la opacidad.

 Image.network(
     'https://picsum.photos/500?image=9',
      color: Color.fromRGBO(255, 255, 255, 0.5),
      colorBlendMode: BlendMode.saturation
  )

Más información https://docs.flutter.io/flutter/widgets/Opacity-class.html

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.