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

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?
Why is this icon being clipped?

Categories

HOME
matlab
module
jsessionid
blogs
jsonschema
quickblox
chronicle
prometheus
addeventlistener
httpbuilder-ng
delphi-xe7
mvvm-light
whitespace
telerik
identifier
sql-server-express
higher-order-functions
lighttpd
export-to-excel
accumulo
vast
html-email
hp-alm
advantage-database-server
atg
broker
ssms-2014
burp
epicorerp
fat-free-framework
scalability
apscheduler
operator-keyword
silverlight-5.0
python-behave
udid
mobile-center
scatter-plot
html-select
groove
chai
hamcrest
presto
jdom-2
msal
flags
dxgi
easy-digital-downloads
stateful
projection
using
angularjs-routing
virtualmin
docker-swarm-mode
azure-cdn
asyncsocket
sharpziplib
database-cleaner
node.js-tape
playback
waf
ifc
jeditorpane
callkit
nsd
redux-framework
ultratree
flattr
qlpreviewcontroller
js-of-ocaml
win32com
kinto
python-dragonfly
polygons
scalariform
horizontalscrollview
knockout-mvc
sendto
subdirectory
bunny
magento-1.6
ituneslibrary
dotliquid
scala-pickling
disabled-input
llblgenpro
apache-commons-dbcp
pligg
rte
nsimageview
asp.net-authentication
square-cube
osmf
hudson-plugins
cocosbuilder
code-structure
expression-encoder-sdk
gemstone
emacs-ecb
geneva-framework
sqlitemanager
sqlprofileprovider

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