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
CustomPaintwithCanvasTouchDetectorand use theTouchyCanvasin your painter.
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
- Just Wrap your
CustomPaintwidget withCanvasTouchDetector. It takes abuilderfunction as argument that expects yourCustomPaintwidget as shown below.
CanvasTouchDetector(
builder: (context) =>
CustomPaint(
painter: MyPainter(context)
)
)- Inside your
CustomPainterclass'spaintmethod , create and use theTouchyCanvasobject (using thecontextobtained from the CanvasTouchDetector andcanvas) 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
@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
- Basic Shape Detection
- Line
- Rectangle (Rect)
- Circle
- Oval or Ellipse
- Arc
- segment
- sector
- Rounded Rectangle (RRect)
- Custom Path [only supports opaque hittest]
- Points (PointMode.points , PointMode.lines , PointMode.polygon)
- Vertices
- Traingle
- Traingle Strip
- Traingle Fan
- Support for proper edge detection based on the Paint object properties :
- Paint style
- Stroke Width
- Stroke Cap
- StrokeCap to draw Points
-
StrokeCap.roundfor lines with huge width.
- Support Clipping and clipping modes
- ClipRect
- intersect mode [Touch detection enabled only inside the clipped region]
- difference mode [Touch detection enabled only outside the clipped region]
- ClipRRect
- ClipPath
- ClipRect
- 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