Flutter ShaderMask and BlendMode – some fun demos

The Demo code github.com/wuweijian19…

Transparent text text effect

ShaderMask(
  blendMode: BlendMode.srcOut,
  shaderCallback: (bounds) {
    return LinearGradient(
      colors: [Colors.black, Colors.black],
    ).createShader(bounds);
  },
  child: Container(
    width: double.infinity,
    height: 50,
    color: Colors.transparent,
    alignment: Alignment.center,
    child: Text(
      'Hello World',
      style: Theme.of(context).textTheme.headline4.copyWith(
            color: Colors.white,
          ),
    ),
  ),
)
Copy the code

Gradient text effect

Effect of the lyrics

It’s animated, it’s kind of lyrics scrolling.