{"id":13549373,"url":"https://github.com/nateshmbhat/touchable","last_synced_at":"2025-04-05T14:09:37.898Z","repository":{"id":43708133,"uuid":"253950471","full_name":"nateshmbhat/touchable","owner":"nateshmbhat","description":"The only flutter library to add gestures and animations to custom shapes you draw on your canvas.","archived":false,"fork":false,"pushed_at":"2023-10-19T16:31:53.000Z","size":6536,"stargazers_count":234,"open_issues_count":29,"forks_count":79,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-29T13:11:40.696Z","etag":null,"topics":["canvas","custom-paint","custom-painter","custompaint","custompainter","dart","draw","flutter","paint","shapes","touchable"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/touchable","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nateshmbhat.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-04-08T01:07:38.000Z","updated_at":"2024-11-27T14:07:18.000Z","dependencies_parsed_at":"2024-03-16T21:57:57.559Z","dependency_job_id":"0511655f-b692-44cf-bd07-57a63893dbe1","html_url":"https://github.com/nateshmbhat/touchable","commit_stats":{"total_commits":108,"total_committers":5,"mean_commits":21.6,"dds":0.06481481481481477,"last_synced_commit":"c6803d669569c2b13499f09575ca42be68e90185"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nateshmbhat%2Ftouchable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nateshmbhat%2Ftouchable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nateshmbhat%2Ftouchable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nateshmbhat%2Ftouchable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nateshmbhat","download_url":"https://codeload.github.com/nateshmbhat/touchable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247345856,"owners_count":20924102,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","custom-paint","custom-painter","custompaint","custompainter","dart","draw","flutter","paint","shapes","touchable"],"created_at":"2024-08-01T12:01:21.169Z","updated_at":"2025-04-05T14:09:37.878Z","avatar_url":"https://github.com/nateshmbhat.png","language":"Dart","readme":"\u003cp align=\"center\"\u003e\n\u003cimg width=\"200\" src=\"https://raw.githubusercontent.com/nateshmbhat/touchable/master/.github/logo.svg\"/\u003e\n\u003c/p\u003e\n\u003ch2 align=\"center\"\u003e Flutter library to bring your CustomPainter 🎨 to Life ✨⚡️ \u003c/h2\u003e\n\n\n[![](https://img.shields.io/pub/v/touchable)](https://pub.dev/packages/touchable)\n[![](https://img.shields.io/badge/package-flutter-blue)](https://github.com/nateshmbhat/touchable)\n[![](https://img.shields.io/github/license/nateshmbhat/touchable)](https://github.com/nateshmbhat/touchable)\n[![](https://img.shields.io/github/stars/nateshmbhat/touchable)](https://github.com/nateshmbhat/touchable)\n[![](https://img.shields.io/github/forks/nateshmbhat/touchable)](https://github.com/nateshmbhat/touchable)\n[![](https://img.shields.io/twitter/url?style=social\u0026url=https%3A%2F%2Fgithub.com%2Fnateshmbhat%2Ftouchable)](https://twitter.com/intent/tweet?text=Wow:\u0026url=https%3A%2F%2Fgithub.com%2Fnateshmbhat%2Ftouchable)\n[![](https://img.shields.io/github/languages/code-size/nateshmbhat/touchable)](https://github.com/nateshmbhat/touchable)\n[![](https://img.shields.io/badge/author-nateshmbhat-green.svg)](https://github.com/nateshmbhat)\n\n\n\n\n#### `touchable` library gives you the ability to add various **gestures** and animations to each **Shape** you draw on your canvas in the CustomPainter\n\u003cbr /\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://i.imgur.com/0Ft9FHJ.gif\"/\u003e\n\u0026nbsp; \u0026nbsp;\n\u0026nbsp; \u0026nbsp;\n\u0026nbsp; \u0026nbsp;\n\u003cimg src=\"https://i.imgur.com/Un41cTo.gif\"/\u003e\n\u003c/p\u003e\n\n\n## Index : \n- [Why Use Touchable ?](#why-use-touchable)\n- [Installation](#installation)\n- [Usage](#usage)\n- [How it works](#how-touchable-works)\n- [Road Map 🗺](#road-map)\n- [Links](#links)\n\n\n\n## Why Use **Touchable** ? \n- The CustomPainter lets you **only draw** shapes on the canvas. But most would want to let user interact with the drawings.\n\n- Add all kinds of **gesture callbacks to each drawing** to give interaction capability to the shapes you draw on the canvas.\n- Animating individual shapes has never been this easy.\n- Auto Handles the painting style (`filled ▮` , `stroke ▯`) and detects touch accordingly.\n- Handles Painting **stroke width**. So if your shapes are painted thick , we still got it covered ✓\n- Supports **clipping** and different **clipping modes** for the drawings. \n- Supports HitTestBehavior for each shape.\n- Simple and Easy API. Just wrap your `CustomPaint` with `CanvasTouchDetector` and use the `TouchyCanvas` in your painter.\n\n\n\u003e With touchable , you get what the normal canvas always missed : **touchability** 😉\n\n\n## Installation\nAdd the `touchable` package as dependency in your `pubspec.yaml`\n```dart\ndependencies:\n  touchable:\n```\n\n\n\n---\n\n## Usage\n\n- Just Wrap your `CustomPaint` widget with `CanvasTouchDetector`. It takes a `builder` function as argument that expects your `CustomPaint` widget as shown below.\n\n```dart\nCanvasTouchDetector(\n    builder: (context) =\u003e \n        CustomPaint(\n            painter: MyPainter(context)\n        )\n)\n```\n+ 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.\n\n```dart\nvar myCanvas = TouchyCanvas(context,canvas);\nmyCanvas.drawRect( rect , Paint() , onTapDown: (tapDetail){\n    //Do stuff here. Probably change your state and animate\n});\n```\n\n### MyPainter example :\n\n```dart\nclass MyPainter extends CustomPainter {\n\n  final BuildContext context ;\n  MyPainter(this.context); // context from CanvasTouchDetector\n\n  @override\n  void paint(Canvas canvas, Size size) {\n    var myCanvas = TouchyCanvas(context,canvas); \n\n    myCanvas.drawCircle(Offset(10, 10), 60, Paint()..color=Colors.orange ,\n        onTapDown: (tapdetail) {\n         print(\"orange Circle touched\");\n       },\n        onPanDown:(tapdetail){\n          print(\"orange circle swiped\");\n        } \n    );\n\n    myCanvas.drawLine(\n        Offset(0, 0),\n        Offset(size.width - 100, size.height - 100),\n        Paint()\n          ..color = Colors.black\n          ..strokeWidth = 50, \n        onPanUpdate: (detail) {\n            print('Black line Swiped'); //do cooler things here. Probably change app state or animate\n    });\n  }\n}\n```\n\n#### Read the article on Medium : [Bring Your CustomPainter to Life using Touchable](https://medium.com/flutter-community/bring-your-custompainter-paintings-to-life-in-flutter-using-touchable-c2413cd1897)\n\n---\n\u003cbr /\u003e\n\n## How Touchable Works \nWhen 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. \n\nWhen 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.\n\n\n## Road Map\n- [x] Basic Shape Detection\n  - [x] Line\n  - [x] Rectangle (Rect)\n  - [x] Circle \n  - [x] Oval or Ellipse\n  - [x] Arc\n    - [x] segment\n    - [x] sector \n  - [x] Rounded Rectangle (RRect)\n  - [x] Custom Path [only supports opaque hittest]\n  - [x] Points (PointMode.points , PointMode.lines , PointMode.polygon)\n  - [ ] Vertices\n    - [ ] Traingle\n    - [ ] Traingle Strip\n    - [ ] Traingle Fan\n- [x] Support for proper edge detection based on the Paint object properties :\n  - [x] Paint style\n  - [x] Stroke Width\n  - [ ] Stroke Cap\n    - [x] StrokeCap to draw Points\n    - [ ] `StrokeCap.round` for lines with huge width.\n- [x] Support Clipping and clipping modes\n  - [x] ClipRect\n    - [x] intersect mode [Touch detection enabled only inside the clipped region]\n    - [x] difference mode [Touch detection enabled only outside the clipped region]\n  - [x] ClipRRect\n  - [x] ClipPath\n- [x] Support for HitTestBehavior\n- [ ] Make the touch detection handling to run in a seperate isolate.\n- [ ] Support for translation , rotation , scaling and skewing transformations that needs some vector math\n\n\n## Links\n+ [Touchable Docs](https://pub.dev/documentation/touchable/latest/)\n+ [Pub Dev](https://pub.dev/packages/touchable)\n+ [Other Dart/Flutter Packages](https://pub.dev/packages?q=email%3Anateshmbhat1%40gmail.com)\n+ [HomePage](https://github.com/nateshmbhat/touchable)\n+ [My Github Page](https://github.com/nateshmbhat)\n","funding_links":[],"categories":["Dart"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnateshmbhat%2Ftouchable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnateshmbhat%2Ftouchable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnateshmbhat%2Ftouchable/lists"}