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 months 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 (10 months ago)
- Default Branch: main
- Last Pushed: 2025-03-06T12:25:32.000Z (4 months ago)
- Last Synced: 2025-04-05T04:12:54.158Z (3 months ago)
- Topics: blur, flutter, ui
- Language: Dart
- Homepage:
- Size: 186 KB
- Stars: 158
- Watchers: 3
- Forks: 9
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# SoftEdgeBlur
[](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
|  |  |
|--------------------------------------|--------------------------------------|
|  |  |
## 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/