Performance issues with Backdrop blur

[justbetterApps]

I am trying to achieve the apple music style faded blur effect on the animated album art, so for that i have to use a video player, i tried video_player package and i tried to blur some part of it with child blur which makes the video static so tried backdrop blur effect which is awful for performance, is there any suggestion from you, i am trying to run m3u8 small videos in loop with a slight blur effect on the footer, but the performance is so bad. Looking forward from you

[AdamskiMarcin]

Hello,

I've looked into this issue and was able to reproduce it. You are correct that the video widget from video_player package can appear frozen when wrapped with child blur in animatedSampler mode.

The reason is that video_player normally renders video using a Flutter Texture. New texture frames can be provided without triggering a corresponding framework repaint or rebuild of the widget. As a result, AnimatedSampler is not notified that the child has visually changed and it continues displaying the previously rendered frame.

Please note that the video player must use VideoViewType.textureView in order to work with Inspire Blur. VideoViewType.platformView is not compatible, as platform views are composed separately and their rendered content is not available to Inspire Blur for sampling.

Possible solutions

1. Using Inspire.backdropBlur

In principle, this should work reliably, as it operates on the already composited backdrop, rather then capturing the video player as a child.

In my testing setup, I haven't noticed a significant performance drop. However, it has to be noted that performance strongly depends on the device used, size of the blurred region and blur sigma.

There are ongoing initiatives to improve the general performance of Inspire Blur and there is still a lot of room to optimize it further. Because video is an edge case for performance (as it forces the blur to repaint the effect continuously frame-by-frame), I will consider adding further improvements for this special case.

2. Using Inspire.childBlur (InspireBlurMode.animatedSampler) + layoutInvalidationKey

This technically works by continuously invalidating the sampled child widget while the video is playing, causing the AnimatedSampler to capture and apply the effect on new video frames.

However, I would not recommend this approach due to its poor performance. AnimatedSampler needs to keep rendering the child to an Image that can be sampled by the shader. Doing so frame-by-frame eliminates the performance benefit of the texture-based video rendering path. Thus, I'd consider animatedSampler as simply the wrong tool for the job.

3. Using Inspire.childBlur (InspireBlurMode.imageFilter)

This is the recommended solution.

Unlike AnimatedSampler, imageFilter applies the shader as an image filter in the Flutter rendering pipeline. It does not need to capture the child to an Image on every new video frame. This allows the texture updates from the video player to be rendered with the blur effect applied on top of it without any manual invalidation. The integration is much more seamless and works out of the box.

Here is a minimal working example:

class _BlurredVideoPlayer extends StatefulWidget {
  const _BlurredVideoPlayer();

  @override
  State<_BlurredVideoPlayer> createState() => _BlurredVideoPlayerState();
}

class _BlurredVideoPlayerState extends State<_BlurredVideoPlayer> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: SizedBox(
        width: 300,
        height: 170,
        child: Inspire.childBlur(
          mode: InspireBlurMode.imageFilter,
          config: InspireBlurConfig.leftToRight(sigma: 21),
          child: const _VideoPlayer(),
        ),
      ),
    );
  }
}

class _VideoPlayer extends StatefulWidget {
  const _VideoPlayer();

  @override
  State<_VideoPlayer> createState() => _VideoPlayerState();
}

class _VideoPlayerState extends State<_VideoPlayer> {
  late final VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();

    _controller = VideoPlayerController.networkUrl(
      Uri.parse(
        'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4',
      ),
      viewType: VideoViewType.textureView,
    )..initialize().then((_) {
        if (mounted) {
          setState(() {});
        }
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: _controller.value.isInitialized
            ? AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: VideoPlayer(_controller),
              )
            : const SizedBox.shrink(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _controller.value.isPlaying
                ? _controller.pause()
                : _controller.play();
          });
        },
        child: Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

[justbetterApps]

Hi there,

Backdrop filter has awful performance, I was looking into blurring algorithms and found out that any sigma value over 15-20 causes huge spikes on Render thread in profile mode, since I am targeting the Apple Music styled progressive blur on the player UI, its blur strength is as close as 0 -> 150 (analogous to flutter sigma value), and 150 sigma in current flutter packages is beyond usable, so I dug deeper into it and found some information on how apple does it so smoothly, they use something similar to "Dual Kawase blur" technique instead of Gaussian blur, kawase works way faster than gaussian, so i hope you guys can manage to shift to Kawase dual blur then it would make the performance go 10x the current one, but yes flutter rendering pipeline works differently than the native OS, so it would require some deep kernel level codes, which I am not sure of, I did try to play with some shaders using the Kawase Dual Blur in a single pass, so for the real technique we need to perform multiple passes for quality blur and performs way better than single pass and gaussian blur.

Thank you