title: Understanding Flutter's ShaderMask
body: <p>I am trying to understand how <code>ShaderMask</code> works. If I follow the example on the <code>ShaderMask</code> docs <a href="https://api.flutter.dev/flutter/widgets/ShaderMask-class.html" rel="nofollow noreferrer">here</a>:</p>
  
  <pre class="lang-dart prettyprint-override"><code>ShaderMask(
    shaderCallback: (Rect bounds) {
      return RadialGradient(
        center: Alignment.topLeft,
        radius: 1.0,
        colors: &lt;Color&gt;[Colors.yellow, Colors.deepOrange.shade900],
        tileMode: TileMode.mirror,
      ).createShader(bounds);
    },
    child: const Text('I’m burning the memories'),
  )
  </code></pre>
  
  <p>I get this:</p>
  
  <p><a href="https://i.stack.imgur.com/8ZNYO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8ZNYO.png" alt="ShaderMask example output"></a></p>
  
  <p>(the double lines below <code>Text</code> are apparently an indication of a lack of a <code>Theme</code>)</p>
  
  <p>Then If I surround this same <code>ShaderMask</code> in a <code>Scaffold</code> I get this:</p>
  
  <pre class="lang-dart prettyprint-override"><code>Scaffold(
        body: Center(
          child: ShaderMask(
            shaderCallback: (Rect bounds) {
              return RadialGradient(
                center: Alignment.topLeft,
                radius: 1.0,
                colors: &lt;Color&gt;[Colors.yellow, Colors.deepOrange.shade900],
                tileMode: TileMode.mirror,
              ).createShader(bounds);
            },
            child: const Text('I’m burning the memories'),
          ),
        ),
      );
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/OdGRH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OdGRH.png" alt="ShaderMask with Scaffold"></a></p>
  
  <p>It's all gone! the <code>ShaderMask</code> appears to have been just ignored, and there's no mention on the docs about this behavior, <strong>why does the <code>Scaffold</code> ""disables"" the <code>ShaderMask</code></strong>?</p>