finger_painter

Description:

finger painter

Painting package that let you finger paint with different brushes and different blend modes. The result can be read as a bitmap or list of Points to be used ie on a Map.
Features #


Getting started #
The usage is simple: put the Painter() widget into your widget tree then use PainterController()
to control its parameters and to get current painting image and/or drawn points.
Try online
Features #

3 kinds of pens
min and max stroke width for paintbrush strokes
get the last drawing image and drawing points
set a background widget (like Google Map)
set background color
uses image blending modes while painting

Usage #
initialize the painter controller ie in the initState():
@override
void initState() {
super.initState();
painterController = PainterController()
..setPenType(PenType.pencil)
..setStrokeColor(Colors.black)
..setMinStrokeWidth(3)
..setMaxStrokeWidth(10)
..setBlurSigma(0.0)
..setBlendMode(ui.BlendMode.srcOver);
}
copied to clipboard
insert Painter() widget somewhere in your widget tree:
Painter(
controller: painterController,
backgroundColor: Colors.green.withOpacity(0.4),
size: const Size(300, 300),
child: Image.asset(...),
onDrawingEnded: (Uint8List bytes) async{
...
},
// the child could be ie a Google Map
// PS: the [backgroundColor] and child are not rendered in the resulting image
child: Image.asset('assets/...'),
),
copied to clipboard
Full example
📜 Painter widget properties #



Properties
Required
Default
Description




key
false

Widget key.


controller
false

Get and set Painter parameters (see PainterController below).


backgroundColor
false
Colors.transparent
Color of the active painting area.


size
false

Size of painting area. If not set it takes the child area. If also the child is not set, it will take the available size from the parent.


child
false

Child Widget to put as the background of the painting area


onDrawingEnded
false

Callbackd that returns the last drawing as Uint8List filled with uncompressed BMP 32 bpp format. Here it's possible to get the drawn point with controller.getPoints()



📜 PainterController #



Method
return type
Description




getState()
PenState?
Get the penType, strokeColor, strokeMinWidth, strokeMaxWidth, blendMode.


getImageBytes()
Uint8List?
Get current drawing image as uncompressed 32bit BMP Uint8List.


getPoints()
List<Offset>?
Get the point list drawn.


clearContent({Color? clearColor})

Clear current drawings with [clearColor] color. Default is transparent.


setPenType(PenType type)

Set pen type: pencil, paintbrush, paintbrush2.


setBlendMode(ui.BlendMode mode)

Set the painting blending mode. ui.BlendMode.dstOut can be used as an eraser pen.


setStrokeColor(Color color)

Set stroke color.


setMinStrokeWidth(double width)

Set the minimum stroke width.


setMaxStrokeWidth(double width)

Set the maximum stroke width.


setBlurSigma(double sigma)

Set the blur. 0 means no blur.


setBackgroundImage(Uint8List image)

Set the background image. The painting will not modify this image.



📜 PenState #



Method
Default
Description




penType
PenType.paintbrush
enum with pencil, paintbrush, paintbrush2.pencil: constant stroke width using strokeMinWidth paintBrush: variable stroke width. Near strokeMinWidth when moving slowly, near strokeMaxWidth when moving fast. paintBrush2: variable stroke width. Near strokeMaxWidth when moving slowly, near strokeMinWidth when moving fast.


strokeColor
Colors.black
pen color


strokeMinWidth
3
Pen width when moving slowing.


strokeMaxWidth
10
Pen width when moving fast.


blurSigma
0
Blur stroke.


blendMode
ui.BlendMode.srcOver
Painting blending mode. See ui.BlendMode



⚠️ Note on web #
The html renderer running on Web is not supported and using it will not save the drawing.
https://github.com/flutter/flutter/issues/42767
Hence when using this package on web, the canvaskit renderer must be used, ie:
flutter run -d chrome --web-renderer canvaskit