Using OverlayBlur brings Flutter rendering to knees

[davbaron]

I was trying to use flushbar as a HUD, with my own activityindicator (in place of the Icon widget). All worked great until I introduced OverlayBlur. Once I added a blur value, frames-per-second dropped to near zero, and so my activityindicator essentially stopped animating.

After some research on the web it appears that using a BackdropFilter with blur does in fact slow down Flutter quite a bit, i.e., this is not Flushbar's issue.

My solution was to add another option for the overlay... within flushbar_route.dart, where Andre tests for a positive value for overlayBlur, I added an 'else if' block for testing for a non-transparent overlayColor. Thus, if overlayBlur == 0 and overlayColor != Colors.Transparent, I display a decorated box with a color = overlayColor. It works great - my underlying content is 'greyed out' a bit (thanks to alpha'd grey color overlay above it) and my users cannot touch anything below the overlay.

@AndreHaueisen , Pull Request aside, here is the code I added at line 94:

} else if (flushbar.overlayColor != Colors.transparent) {
      overlays.add(
        OverlayEntry(
          builder: (BuildContext context) {
            return GestureDetector(
              onTap: flushbar.isDismissible ? () => flushbar.dismiss() : null,
              child: DecoratedBox(decoration: new BoxDecoration(
                color: flushbar.overlayColor,
              )),
            );
          },
          maintainState: false,
          opaque: opaque
        ),
      );
    }

What do you think about adding this 'option' to the code? The API remains the same - the only difference is now you can have a zero value for blur, but still get a colored/blocking overlay. I'm using my own copy of it right now but would prefer to reference yours.

Hope this helps...

-David