jonaird/motion_blur

motion_blur

This is a package for adding motion blur to moving widgets. It supports translation and scaling blur but not rotational blur. This package uses shaders and thus will not work with platform views.

Getting started

To use motion_blur add it as a dependency in your pubspec file:

dependencies:
    motion_blur:

Then add the motion blur shader under the flutter section:

flutter:
    shaders:
        - packages/motion_blur/shaders/motion_blur.glsl

Usage

To use, simply wrap the moving widget in a MotionBlur widget:

MotionBlur(
    child: MovingWidget()
)

Make sure to provide enough padding in the moving widget such that the motion blur does not get cut off as the shader is not able to paint beyond the size of its child.

You can also control the intensity of the motion blur by providing a double value where 1.0 is exact interpolation between a frame and the previous frame:

MotionBlur(
    intensity:1.5,
    child: MovingWidget()
)

Additional information

Unfortunately due to an issue in CanvasKit the performance on web is currently quite suboptimal. Performance can be improved by only using motion blur with small widgets and adding --dart-define=BROWSER_IMAGE_DECODING_ENABLED=false to your build command.