stack_blur

Description:

stack blur

stack_blur #
The Dart library for blurring images with the Stack blur algorithm.
The Stack blur works fast and looks good.
It is a compromise between Gaussian blur
and 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 library #
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));
}
copied to clipboard
Use with Flutter and bitmap library #
Flutter images have the same RGBA pixel buffer. You can get it in a rather non-obvious
way through ImageStreamListener.
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<Image> 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<ui.Image>();
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());
}
copied to clipboard