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));
}

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());
}