En este artículo exploraremos el uso de ShaderMask en Flutter y aprenderemos sobre la propiedad blendMode, que nos permite aplicar diferentes efectos de mezcla en ShaderMask. Más delante, os contaré cómo utilizar estas herramientas para mejorar nuestras imágenes y crear efectos visualmente atractivos en nuestras aplicaciones Flutter.
Arrancamos centrándonos en ShaderMask y cómo utilizarlo en Flutter.
Es un widget que aplica un efecto de sombreado a un widget hijo utilizando diferentes tipos de gradientes, tales como LinearGradient, RadialGradient y SweepGradient. Estos gradientes se pueden utilizar como sombreadores en el widget ShaderMask para aplicar efectos visuales al widget secundario.
Sin embargo, esto no es suficiente para utilizar ShaderMask. También necesitamos aplicar algunos efectos adicionales a la imagen para mejorarla aún más, y para ello utilizaremos la propiedad blendMode.
BlendMode es una propiedad que se utiliza para aplicar diferentes efectos de mezcla en ShaderMask. Los efectos de BlendMode se basan en los conceptos de origen y destino. Todos los tipos de efectos de mezcla se aplican en función de estos dos términos. Puedes aprender más sobre estos términos en detalle aquí https://api.flutter.dev/flutter/dart-ui/BlendMode.html
A continuación, os muestro un par de ejemplos aplicando la propiedad blendMode y diferentes gradientes.
ShaderMask( blendMode: BlendMode.color, shaderCallback: (rect) { return const LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [Colors.white54, Colors.orangeAccent]) .createShader(rect); }, child: Center( child: SizedBox( width: double.infinity, height: double.infinity, child: Image.asset( "assets/image_original.jpg", fit: BoxFit.cover, ), ), ), ),
ShaderMask( blendMode: BlendMode.dstOut, shaderCallback: (rect) { return const RadialGradient( radius: 1, tileMode: TileMode.clamp, stops: [0, 1], colors: [ Colors.transparent, Colors.white, ], ).createShader(rect); }, child: Center( child: SizedBox( width: double.infinity, height: double.infinity, child: Image.asset( "assets/image_original.jpg", fit: BoxFit.cover, ), ), ), ),
Con esto finalizamos la primera parte sobre sombreados.
Para la segunda os lo explicaré más a fondo. Es un tema bastante complejo y que requiere conocimientos de matemáticas, lenguaje glsl y en concreto para flutter saber manejar correctamente CustomPainter.
Mientras tanto, si no puedes esperar, hay documentación oficial para ir abriendo boca 👉 https://docs.flutter.dev/ui/advanced/shaders
Este sitio web utiliza cookies para que tengas la mejor experiencia de usuario. Si continuas navegando, estás dando tu consentimiento para aceptar las cookies y también nuestra política de cookies (esperemos que no te empaches con tanta cookie 😊)