Get Tap Position Relative to Widget

Question

I\'m trying to make a Flutter widget to set a temperature, meant to look like a thermostat knob. I\'ve extended CustomPainter to actually draw this on the screen and now I\'

Answer 1

You can convert global coordinates to local coordinates using the RenderBox.globalToLocal method. To get the RenderBox, you can call findRenderObject on the BuildContext.

--- a/lib/widgets/temp_picker.dart
+++ b/lib/widgets/temp_picker.dart
@@ -41,7 +41,12 @@ class _TempPickerState extends State<TempPicker> {
     return new Container(
       constraints: new BoxConstraints.expand(),
       child: new GestureDetector(
-        onPanUpdate: (details) => setState(() => _tapPos = details.globalPosition),
+        onPanUpdate: (details) {
+          setState(() {
+            RenderBox box = context.findRenderObject();
+            _tapPos = box.globalToLocal(details.globalPosition);
+          });
+        },
         child: new CustomPaint(
           painter: new _TempPainter(
             minValue: widget.minValue,

This isn't quite right though, because it could behave unexpectedly when the device rotates and the size of your TempPicker widget changes. Instead of storing the local offset in _tapPos, I would recommend that you compute and save the results of getAngleFromPosition in onPanUpdate and pass that angle value to your _TempPainter constructor. That way, the angle will remain unchanged when the screen dimensions change, as long as the user isn't currently touching the screen.