search

nateshmbhat / touchable

The only flutter library to add gestures and animations to custom shapes you draw on your canvas.
https://pub.dev/packages/touchable
Mozilla Public License 2.0
233 stars 79 forks source link
canvas custom-paint custom-painter custompaint custompainter dart draw flutter paint shapes touchable

readme

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 ?

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

Installation

Add the touchable package as dependency in your pubspec.yaml

dependencies:
  touchable:

Usage

CanvasTouchDetector(
    builder: (context) => 
        CustomPaint(
            painter: MyPainter(context)
        )
)
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

  @override
  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");
       },
        onPanDown:(tapdetail){
          print("orange circle swiped");
        } 
    );

    myCanvas.drawLine(
        Offset(0, 0),
        Offset(size.width - 100, size.height - 100),
        Paint()
          ..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

Links