Created
December 19, 2020 23:29
-
-
Save ardera/6b9787b7ae26bfb3e42459728dea4de3 to your computer and use it in GitHub Desktop.
A simple flutter widget for viewing where the screen is being touched.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class TouchPositionPainter extends CustomPainter { | |
| TouchPositionPainter(this.points); | |
| final Set<Offset> points; | |
| static final _whitePaint = Paint() | |
| ..color = Colors.white | |
| ..style = PaintingStyle.fill; | |
| static final _blackPaint = Paint() | |
| ..color = Colors.black | |
| ..strokeWidth = 3 | |
| ..style = PaintingStyle.stroke; | |
| @override | |
| void paint(Canvas canvas, Size size) { | |
| for (final p in points) { | |
| canvas.drawCircle(p, 25, _whitePaint); | |
| canvas.drawCircle(p, 25, _blackPaint); | |
| } | |
| } | |
| @override | |
| bool shouldRepaint(covariant TouchPositionPainter oldDelegate) { | |
| return oldDelegate.points != points; | |
| } | |
| } | |
| class TouchPositionOverlay extends StatefulWidget { | |
| TouchPositionOverlay({this.child}); | |
| final Widget child; | |
| @override | |
| State<StatefulWidget> createState() { | |
| return TouchPositionOverlayState(); | |
| } | |
| } | |
| class TouchPositionOverlayState extends State<TouchPositionOverlay> { | |
| final points = <int, Offset>{}; | |
| @override | |
| Widget build(BuildContext context) { | |
| return Listener( | |
| onPointerDown: (e) => setState(() => points[e.pointer] = e.localPosition), | |
| onPointerMove: (e) => setState(() => points[e.pointer] = e.localPosition), | |
| onPointerUp: (e) => setState(() => points.remove(e.pointer)), | |
| child: Stack( | |
| children: [ | |
| widget.child, | |
| Positioned( | |
| left: 0, right: 0, | |
| top: 0, bottom: 0, | |
| child: CustomPaint( | |
| foregroundPainter: TouchPositionPainter(points.values.toSet()), | |
| ), | |
| ) | |
| ], | |
| ), | |
| ); | |
| } | |
| } | |
| /// hook it up using the [MaterialApp.builder] property like this: | |
| /// ```dart | |
| /// MaterialApp( | |
| /// builder: (context, child) => TouchPositionOverlay(child: child) | |
| /// ) | |
| /// ``` |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment