sketcher package provides a widget that allows users to make handwriting over it.
Start by including the sketcher package with sketcher: ^1.0.4
.
Then the drawing widget can be shown on a screen by adding Sketch
widget to a parent widget. It requires SketchController
and ScrollController
.
SketchController _sketchController = SketchController(); ScrollController _scrollController = ScrollController(); Sketch(controller: _sketchController, scrollController: _scrollController)
Here is a screen with these tools, pencil, color picker, and eraser:

class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); } class _HomePageState extends State<HomePage> { SketchController _sketchController = SketchController(); ScrollController _scrollController = ScrollController(); @override void initState() { super.initState(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Sketch'), ), body: SafeArea( child: Stack( fit: StackFit.expand, children: [ Sketch( controller: _sketchController, scrollController: _scrollController), Align( alignment: Alignment.bottomCenter, child: Container( width: double.infinity, color: Colors.blueAccent, child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ IconButton( icon: Icon(Icons.format_paint), color: Colors.white, onPressed: () { setState(() { _sketchController.setActiveTool(SketchTool.Pencil); }); }), IconButton( icon: Icon(Icons.delete_outline_rounded), color: Colors.white, onPressed: () { setState(() { _sketchController.setActiveTool(SketchTool.Eraser); }); }), IconButton( icon: Icon(Icons.cancel), color: Colors.white, onPressed: () { setState(() { _sketchController.setActiveTool(SketchTool.None); }); }), ], ), ), ), ], )), ); } }