Sombreados en Flutter (1ª Parte)

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.

¿Qué es ShaderMask?

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.

• LinearGradient: Crea un efecto de degradado lineal, donde los colores se mezclan a lo largo de una línea recta.
• RadialGradient: Crea un efecto de degradado radial, donde los colores se extienden desde un punto central hacia afuera en forma circular.
• SweepGradient: Crea un efecto de degradado en barrido, donde los colores se distribuyen en forma de arco alrededor de un punto central.

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

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.

Creando un atardecer – LinearGradient

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,
      ),
    ),
  ),
),

Difuminando la imagen – RadialGradient

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