title: Performant blur/opacity in Flutter?
body: <p>I love the blurry frost effect using a BackdropFilter (see <a href="https://stackoverflow.com/questions/43550853/how-do-i-do-the-frosted-glass-effect-in-flutter">this</a>).</p>
  
  <p>However, because the BackdropFilter has Opacity and because the widget I'm blurring also has Opacity, the performance is horrendous. This is also because I redraw my widgets a few times a second, but that shouldn't be an issue given Flutter can go 60fps?</p>
  
  <p>I turned on <a href="https://flutter.io/docs/testing/ui-performance#checking-for-offscreen-layers" rel="noreferrer">checkerboardOffscreenLayers</a> and see checkerboards for miles. :O
  The checkerboards happen due to <code>blurScreen</code>, not due to <code>widgetToBlur</code> but <code>widgetToBlur</code> does slow down performance probably because (in my real code, not this example) it's calling setState() multiple times a second.</p>
  
  <p>Is there a more performant way to make blurs/opacities? The link above says to apply opacity to widgets individually. I can't do that with the blur though (<code>blurScreen</code> below), because the BackdropFilter has to be stacked on top of my widget-that-does-the-redrawing.
  I removed the blur effect and my performance is way better (no checkerboards, app doesn't crash).</p>
  
  <p>build() code in question:</p>
  
  <pre><code>final widgetToBlur = Container(
    child: Opacity(
      opacity: 0.3,
      // In my actual code, this is a Stateful widget.
      child: Text('Spooky blurry semi-transparent text!'),
    ),
  );
  
  final blurScreen = BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
    child: Container(
      decoration: BoxDecoration(
        color: _backgroundColor.withOpacity(0.3),
      ),
    ),
  );
  
  return Container(
    child: Stack(
      children: &lt;Widget&gt;[
        widgetToBlur,
        blurScreen,
        Text('This is in front of the blurred background'),
      ],
    ),
  );
  </code></pre>