sketcher package example – hand drawing widget

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