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