bitmap_canvas

Description:

bitmap canvas

Render bitmap pixels with canvas-style APIs.


This project is a Flutter Bounty Hunters proof-of-concept. Need more capabilities? Fund a milestone today!


bitmap_canvas is a package that provides easy-to-use APIs for pixel painting with Dart, along with widgets to easily display those paintings.



In the wild #
bitmap_canvas is the renderer for flutter_processing.
Examples #
Paint animated static noise, where every pixel has a random brightness.
Widget build(context) {
// BitmapPaint is like CustomPaint, except that you can paint
// individual pixels, too.
return BitmapPaint(
size: const Size(100, 100),
painter: BitmapPainter.fromCallback((bitmapContext) async {
final canvas = paintingContext.canvas;
final size = paintingContext.size;
final random = Random();

await canvas.startBitmapTransaction();

for (int x = 0; x < size.width; x += 1) {
for (int y = 0; y < size.height; y += 1) {
// This is where we paint an individual pixel.
canvas.set(x: x, y: y, color: HSVColor.fromAHSV(1.0, 0, 0, random.nextDouble()).toColor());
}
}

await canvas.endBitmapTransaction();
}),
);
}
copied to clipboard
Why do we need a bitmap canvas in Flutter? #
Flutter is built on top of SKIA, a portable rendering system, which supports hardware acceleration with shaders.
You might wonder, if we want to paint individual pixels, shouldn't we use shaders? Software rendering is so slow!
There are a few reasons that you might choose software rendering (i.e., painting pixels with Dart) over shaders:

Learning how to paint pixels in Dart is easier than with a shader language, like GLSL.
Shaders can't implement every style of pixel painting. For example, any pixel painting where one pixel depends on the value of another pixel is unsupported in shaders.
Flutter doesn't fully support custom shaders, which means that most pixel painting behaviors can't be implemented with shaders in Flutter.