Flutter library to bring your CustomPainter 🎨 to Life ✨⚡️

touchable library gives you the ability to add various gestures and animations to each Shape you draw on your canvas in the CustomPainter


Index :

Why Use Touchable ?

  • The CustomPainter lets you only draw shapes on the canvas. But most would want to let user interact with the drawings.

  • Add all kinds of gesture callbacks to each drawing to give interaction capability to the shapes you draw on the canvas.

  • Animating individual shapes has never been this easy.

  • Auto Handles the painting style (filled ▮ , stroke ▯) and detects touch accordingly.

  • Handles Painting stroke width. So if your shapes are painted thick , we still got it covered ✓

  • Supports clipping and different clipping modes for the drawings.

  • Supports HitTestBehavior for each shape.

  • Simple and Easy API. Just wrap your CustomPaint with CanvasTouchDetector and use the TouchyCanvas in your painter.

With touchable , you get what the normal canvas always missed : touchability 😉


Add the touchable package as dependency in your pubspec.yaml



  • Just Wrap your CustomPaint widget with CanvasTouchDetector. It takes a builder function as argument that expects your CustomPaint widget as shown below.
    builder: (context) => 
            painter: MyPainter(context)
  • Inside your CustomPainter class's paint method , create and use the TouchyCanvas object (using the context obtained from the CanvasTouchDetector and canvas) to draw any shape with different gesture callbacks.
var myCanvas = TouchyCanvas(context,canvas);
myCanvas.drawRect( rect , Paint() , onTapDown: (tapDetail){
    //Do stuff here. Probably change your state and animate

MyPainter example :

class MyPainter extends CustomPainter {

  final BuildContext context ;
  MyPainter(this.context); // context from CanvasTouchDetector

  void paint(Canvas canvas, Size size) {
    var myCanvas = TouchyCanvas(context,canvas); 

    myCanvas.drawCircle(Offset(10, 10), 60, Paint()..color=Colors.orange ,
        onTapDown: (tapdetail) {
         print("orange Circle touched");
          print("orange circle swiped");

        Offset(0, 0),
        Offset(size.width - 100, size.height - 100),
          ..color = Colors.black
          ..strokeWidth = 50, 
        onPanUpdate: (detail) {
            print('Black line Swiped'); //do cooler things here. Probably change app state or animate

Read the article on Medium : Bring Your CustomPainter to Life using Touchable

How Touchable Works

When you draw shapes on the canvas (TouchyCanvas) , it keeps track of the dimensions of each shape you draw and their painting style , stroke , order , clippings etc.

When user performs any gesture on the screen , based on the location of the gesture , the appropriate shape is selected from the lot taking clipping regions , paint , hitTest behaviour etc into account in an optimized way. Callbacks of the corresponding shapes (one or more depending on the hitTest behavior) are executed.

Road Map

  • x Basic Shape Detection
    • x Line
    • x Rectangle (Rect)
    • x Circle
    • x Oval or Ellipse
    • x Arc
      • x segment
      • x sector
    • x Rounded Rectangle (RRect)
    • x Custom Path only supports opaque hittest
    • x Points (PointMode.points , PointMode.lines , PointMode.polygon)
    • Vertices
      • Traingle
      • Traingle Strip
      • Traingle Fan
  • x Support for proper edge detection based on the Paint object properties :
    • x Paint style
    • x Stroke Width
    • Stroke Cap
      • x StrokeCap to draw Points
      • StrokeCap.round for lines with huge width.
  • x Support Clipping and clipping modes
    • x ClipRect
      • x intersect mode Touch detection enabled only inside the clipped region
      • x difference mode Touch detection enabled only outside the clipped region
    • x ClipRRect
    • x ClipPath
  • x Support for HitTestBehavior
  • Make the touch detection handling to run in a seperate isolate.
  • Support for translation , rotation , scaling and skewing transformations that needs some vector math



Touchable is flutter library to add various gesture callbacks to each Shape you draw on your canvas in your CustomPainter