Understanding Flutter's ShaderMask

Question

I am trying to understand how ShaderMask works. If I follow the example on the ShaderMask docs here:

ShaderMask(
  shaderCallback: (Rect bounds) {
    return RadialGradient(
      center: Alignment.topLeft,
      radius: 1.0,
      colors: <Color>[Colors.yellow, Colors.deepOrange.shade900],
      tileMode: TileMode.mirror,
    ).createShader(bounds);
  },
  child: const Text('I’m burning the memories'),
)

I get this:

(the double lines below Text are apparently an indication of a lack of a Theme)

Then If I surround this same ShaderMask in a Scaffold I get this:

Scaffold(
      body: Center(
        child: ShaderMask(
          shaderCallback: (Rect bounds) {
            return RadialGradient(
              center: Alignment.topLeft,
              radius: 1.0,
              colors: <Color>[Colors.yellow, Colors.deepOrange.shade900],
              tileMode: TileMode.mirror,
            ).createShader(bounds);
          },
          child: const Text('I’m burning the memories'),
        ),
      ),
    );

It's all gone! the ShaderMask appears to have been just ignored, and there's no mention on the docs about this behavior, why does the Scaffold ""disables"" the ShaderMask?

Answer 1

You are missing - blendMode property

More info on - blendMode property

working code:

    Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ShaderMask(
          blendMode: BlendMode.srcATop,  // Add this
          shaderCallback: (Rect bounds) {
            return RadialGradient(
              center: Alignment.topLeft,
              radius: 1.0,
              colors: <Color>[Colors.yellow, Colors.deepOrange.shade900],
              tileMode: TileMode.mirror,
            ).createShader(bounds);
          },
          child: const Text('I’m burning the memories'),
        ),
      ),
    );
  }