A simple flutter widget to paint with your fingers.
The widget supports:
- Changing fore- and background color
- Changing the thickness of lines you draw
- Exporting your painting as png
- Undo drawing a line
- Redo drawing a line
- Clearing the hole drawing
- After calling 'finish()' on a PainterController you can't draw on this painting any more
- To create a new painting after finishing the old one simply create a new PainterController
- Calling 'finish()' for the first time will render the drawing. Successive calls will then return a cached version of the rendered picture
class ExamplePage extends StatefulWidget {
@override
_ExamplePageState createState() => _ExamplePageState();
}
class _ExamplePageState extends State<ExamplePage> {
bool _finished = false;
PainterController _controller = _newController();
@override
void initState() {
super.initState();
}
static PainterController _newController({String history = ''}) {
PainterController controller =
PainterController(history: history, compressionLevel: 4,);
controller.thickness = 5.0;
controller.backgroundColor = Colors.green;
return controller;
}
String history = '';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: AspectRatio(aspectRatio: 1.0, child: Painter(_controller)),
),
floatingActionButton: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
FloatingActionButton(
child: const Icon(Icons.undo),
onPressed: () {
setState(() {
_controller.undo();
});
},
),
FloatingActionButton(
child: const Icon(Icons.redo),
onPressed: () {
setState(() {
_controller.redo();
});
},
),
FloatingActionButton(
child: const Icon(Icons.restore),
onPressed: () {
setState(() {
_controller = _newController(history: history);
});
},
),
FloatingActionButton(
child: const Icon(Icons.delete),
onPressed: () {
setState(() {
history = _controller.history;
_controller.clear();
});
},
),
FloatingActionButton(
child: const Icon(Icons.navigate_next),
onPressed: () {
},
),
],
),
);
}