https://github.com/rtmigo/stack_blur_dart
Dart library with stack blur algorithm for RGBA images
https://github.com/rtmigo/stack_blur_dart
blur dart filter flutter image image-processing imaging
Last synced: about 1 month ago
JSON representation
Dart library with stack blur algorithm for RGBA images
- Host: GitHub
- URL: https://github.com/rtmigo/stack_blur_dart
- Owner: rtmigo
- License: mit
- Created: 2021-12-25T21:54:48.000Z (over 4 years ago)
- Default Branch: staging
- Last Pushed: 2021-12-26T20:42:35.000Z (over 4 years ago)
- Last Synced: 2025-06-17T08:44:05.071Z (about 1 year ago)
- Topics: blur, dart, filter, flutter, image, image-processing, imaging
- Language: Dart
- Homepage: https://pub.dev/packages/stack_blur
- Size: 4.52 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://pub.dev/packages/stack_blur)
[](https://pub.dev/packages/stack_blur/score)
# [stack_blur](https://github.com/rtmigo/stack_blur_dart)
The Dart library for blurring images with the Stack blur algorithm.
The [Stack blur](https://underdestruction.com/2004/02/25/stackblur-2004/) works fast and looks good.
It is a compromise between [Gaussian blur](https://en.wikipedia.org/wiki/Gaussian_blur)
and [Box blur](https://en.wikipedia.org/wiki/Box_blur).
This library modifies a raw buffer containing RGBA pixels. This is "low-level", but universal and
does not impose external dependencies.
## Use with [image](https://pub.dev/packages/image) library
```dart
import 'dart:io';
import 'package:image/image.dart'; // third-party library
import 'package:stack_blur/stack_blur.dart';
void main() {
// loading image from file
final image = decodeImage(File('source.png').readAsBytesSync())!;
Uint32List rgbaPixels = image.data;
// blurring image pixels with blur radius 42
stackBlurRgba(rgbaPixels, image.width, image.height, 42);
// saving image to file
File('blurred.png').writeAsBytesSync(encodePng(image));
}
```
## Use with Flutter and [bitmap](https://pub.dev/packages/bitmap) library
Flutter images have the same RGBA pixel buffer. You can get it in a rather non-obvious
way through `ImageStreamListener`.
``` dart
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:bitmap/bitmap.dart'; // third-party library
import 'package:stack_blur/stack_blur.dart';
Future blurAsset(String assetName) async {
ImageProvider provider = ExactAssetImage(assetName);
// Rain dance to get RGBA pixels from image
final ImageStream stream = provider.resolve(ImageConfiguration.empty);
final completer = Completer();
late ImageStreamListener listener;
listener = ImageStreamListener(
(frame, _) {
stream.removeListener(listener);
completer.complete(frame.image);
},
onError: (error, stack) {
stream.removeListener(listener);
completer.completeError(error, stack);
});
stream.addListener(listener);
ui.Image image = await completer.future;
ByteData rgbaData = (await image.toByteData(format: ui.ImageByteFormat.rawRgba))!;
// These are the pixels we needed
Uint32List rgbaPixels = rgbaData.buffer.asUint32List();
// Now we can blur the image buffer
stackBlurRgba(rgbaPixels, image.width, image.height, 42);
// We use a third-party 'bitmap' library to turn the buffer into a widget
final bitmap = Bitmap.fromHeadless(
image.width, image.height,
rgbaPixels.buffer.asUint8List());
return Image.memory(bitmap.buildHeaded());
}
```