SoftEdgeBlur

A Flutter package that provides a customizable soft progressive blur effect for widgets.

Example video

https://github.com/user-attachments/assets/3a708b6d-5ed0-4717-a3c7-313c4ed7e2b6

Example images

Usage

Import the package in your Dart code:

import 'package:soft_edge_blur/soft_edge_blur.dart';

Wrap any widget with SoftEdgeBlur to apply the blur effect:

return SoftEdgeBlur(
  edges: [
    EdgeBlur(
      type: EdgeType.topEdge,
      size: 1000,
      sigma: 30,
      controlPoints: [
        ControlPoint(
          position: 0.5,
          type: ControlPointType.visible,
        ),
        ControlPoint(
          position: 1,
          type: ControlPointType.transparent,
        )
      ],
    )
  ],
  child: YourWidget(),
);

Customization

You can customize the following properties for each edge:

Edge Type

Specify which edges to apply the blur effect:

EdgeType.topEdge
EdgeType.bottomEdge
EdgeType.leftEdge
EdgeType.rightEdge

You can apply blur to multiple edges simultaneously.

Edge Size

Set the size of the blurred area. This determines how far the blur effect extends from the edge of the widget.

Blur Sigma

Adjust the intensity of the blur effect.

Tint Color

Apply a tint color on top of the blurred area.

Control Points

Define points to control the blur gradient along the edge. Each control point has two properties:

position: A value between 0.0 and 1.0, representing the position along the edge.
type: Either ControlPointType.visible or ControlPointType.transparent.

Try it live here

https://soft_edge_blur.codemagic.app/