https://github.com/rahiche/soft_edge_blur

A Flutter package that provides a customizable soft edge blur effect for widgets.
https://github.com/rahiche/soft_edge_blur

blur flutter ui

Last synced: 3 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/rahiche/soft_edge_blur
• Owner: Rahiche
• License: mit
• Created: 2024-09-10T22:00:50.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-09-28T15:17:14.000Z (3 months ago)
• Last Synced: 2024-12-29T10:07:57.600Z (3 days ago)
• Topics: blur, flutter, ui
• Language: Dart
• Homepage:
• Size: 175 KB
• Stars: 139
• Watchers: 3
• Forks: 7
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        

 ![banner](https://github.com/user-attachments/assets/b69f6970-4ce7-4d93-a8e7-fa7b4a06416e)

 # SoftEdgeBlur

[![pub package](https://img.shields.io/pub/v/soft_edge_blur.svg)](https://pub.dev/packages/soft_edge_blur)

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



## Demos

## Map - with control points

| ![](https://i.imgur.com/ZHTocas.png) | ![](https://i.imgur.com/ejYRoGu.png) |

|--------------------------------------|--------------------------------------|

| ![](https://i.imgur.com/2B4RJo2.png) | ![](https://i.imgur.com/lrVGtHU.png) |

## Airbnb Card with tint color



## Music play list with tint color



## Wallpapers grid with tilemode 



## Usage

Import the package in your Dart code:

```dart

import 'package:soft_edge_blur/soft_edge_blur.dart';

```

Wrap any widget with `SoftEdgeBlur` to apply the blur effect:

```dart

return SoftEdgeBlur(

  edges: [

    EdgeBlur(

      type: EdgeType.topEdge,

      size: 100,

      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/