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.
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.
- 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
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);
}
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/...'),
),
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. |
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() | Clear current drawings. | |
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. |
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 *** |
The html renderer running on Web is not supported and using it will not save the drawing. flutter/flutter#42767
Hence when using this package on web, the canvaskit renderer must be used, ie: flutter run -d chrome --web-renderer canvaskit