flutter


Get Tap Position Relative to Widget


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'm trying to set the grab functionality so the user can rotate it.
I can use a GestureDetector widget to get a callback when the user touches the screen, but I need to know where it is relative to the center of the knob. Unfortunately, the position provided by the GestureDetector is in absolute coordinates while the canvas works relative to the origin of the widget. Is there a way I can convert one of these coordinates to the other?
That means I need either:
1) A way to get the tap position relative to the CustomPainter widget
2) A way to get the absolute position of the CustomPainter widget
I am unable to find an API which can provide either of these. Does such an API exist?
Context: https://github.com/dgp1130/thermo/blob/master/lib/widgets/temp_picker.dart
The way it is currently, rotating the thermostat works, but the "center" of the touch is actually about halfway above the real center because of the height of the app bar.
Thanks
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.

Related Links

PageStorage in Flutter - how does it work?
How to select Development team for iOS app created in Flutter
Sizing elements to percentage of screen width/height
Animated Widget only animates once
How can I dial the phone from Flutter?
How do I open a web browser (URL) from my Flutter code?
Unable to install Flutter on my windows machine
PageView with horizontal, non-filled children
How to navigate between flutter screen to native(android/ios) screens
Creating raw image from Widget or Canvas
The equivalent of wrap_content and match_parent in flutter?
Is there an AdMob or other ad service SDK for Flutter apps
How can I access the contents of a StatefulWidget's State during a unit test?
How can I tightly wrap a Column of widgets inside a Card?
What's the reason for “async” in testWidgets methods?
How can I inherit a StatefulWidget's State?

Categories

HOME
sqlite
performance-testing
module
tags
direction
azure-web-sites
wxpython
feed
arm
ibm-midrange
spacemacs
asp.net-mvc-3
intl
librsvg
graphengine
editor
plots.jl
rgb
orchardcms-1.10
installer
records
gyroscope
collision
contains
jpos
scalability
number-formatting
gosublime
haxm
edit-distance
spring-data-cassandra
angular-xeditable
extjs4
logicblox
easy-digital-downloads
stateful
nscalendar
sql-insert
android-calendar
scoring
domdocument
stroke
jvm-arguments
ocsp
webtrends
telecommunication
app-engine-ndb
uploadify
bash-completion
mutation
okuma
docklight
occam-pi
skrollr
administrator
session-replication
rdotnet
monkeyrunner
xsb
multiscreen
newsql
swift-array
reactive-cocoa-3
conditional-statements
android-design-library
excel-charts
mysql5
mpj-express
django-postgresql
mui
publish-actions
before-save
directcompute
image-scaling
declspec
blazeds
qdebug
visual-assist
sparc
cloud-hosting
cocosbuilder
libavg
program-files
azure-role-environment
retain
having
run-length-encoding

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App