I want to place a draggable widget (a Helper marker) on the map's marker click to simply change the location of the marker by dragging the helper marker. The screen Offset - dx,dy and gMap's ScreenCordinates - dx, dy are different.
var pos = await _controller!.getScreenCoordinate(latLng); gives some coordinates, if i give the coordinates to a Positioned ( top: pos.dy, left: pos.dx, child: helperMarker) like this, the positioned widget is not placed on my expected location.
Related
Am new to flutter and i need to get x axis y axis value of particular place of the image.i have put the image in container and i need to mark one corner of the container image position as (0,0) when I click the any part or place of the image I need to get x axis and y axis value of the clicked position. I don't know how to do it. Please any one help me to do that. Thanks in advance
Use GestureDetector to track mouse position.
// variables (or states based on your needs) to store positions
double x = 0.0;
double y = 0.0;
// a function to update mouse pointer position (location)
void updatePosition(TapDownDetails details) {
setState(() {
x = details.globalPosition.dx;
y = details.globalPosition.dy;
});
}
// image widget
GestureDetector(
onTapDown: updatePosition,
child: Image.asset(yourImagePathHere)), <-- change it to your image path
),
I need to calculate the distance from the bottom of a screen to a container.Is it possible to calculate distance from bottom of a screen to Container and distance from top of a screen to container in separately?
I got the distance from top like this,
RenderBox box = keyGlobal.currentContext!.findRenderObject() as RenderBox;
Offset position = box.localToGlobal(Offset.zero); //this is global position
double y = position.dy;
Is it possible to get distance from bottom?
I am trying to get the latlng coordinates of the bottom left and top right corners of an svg element (orange box in the picture) I overlayed on top of the map. However, the latlng coordinates I am getting from transforming the pixel coordinates is off by a wide margin.
Coordinates I should be getting from this view:
BL: [-18.9, -39.1],
TR: [48.8, 39.3]
Coordinates I am actually getting:
BL: [-30.3, 127.0],
TR: [40.9, 205.9]
This is the code I am using to determine the pixel position:
this.navigation.on('moveend zoomend', () => {
const bounds = L.DomUtil.get("compBorder")!.getBoundingClientRect();
const bl1 = L.point(bounds.left, bounds.bottom)
const tr1 = L.point(bounds.right, bounds.top)
const bl = this.navigation.layerPointToLatLng(bl1);
const tr = this.navigation.layerPointToLatLng(tr1);
this.cs.setBlTr([bl.lat, bl.lng], [tr.lat, tr.lng]);
this.cs.setCenter(this.navigation.getCenter());
this.cs.setZoom(this.navigation.getZoom());
});
From what I am seeing it doesn't seem to make a difference whether I use the layerPointToLatlng() or the containerPointToLatlng() function.
I am making a painter and when I am detect the point I want to draw in zooming mode in the interactive viewer it gets the wrong offset so I need the panning in the x-coordinate and the y-coordinate to have the correct offset
Use GestureDetector onPanUpdate Method to get change of finger-swipe and current finger coordinates
onPanUpdate: (pan){
print('Change In X:${pan.delta.dx}');
print('Change In Y:${pan.delta.dy}');
print('Global X Coordinate:${pan.globalPosition.dx}');
print('Global Y Coordinate:${pan.globalPosition.dy}');
print('Local x Coordinate:${pan.localPosition.dx}');
print('Local Y Coordinate:${pan.localPosition.dy}');}
I am struggling to understand the properties delta, globalPosition, localPosition and primaryDelta of DragUpdateDetails. I read the documentation for DragUpdateDetails but it didn't really help much.
I found some question asked: What is primaryDelta and delta in DragUpdateDetails and What is the difference between globalposition and localposition in flutter?. First one has no answer whereas second one only has explanation for globalPosition and localPosition.
This is a sample code for dragging a container:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
double _xPosition = 0;
double _yPosition = 0;
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: SafeArea(
child: Container(
child: Stack(
children: [
Positioned(
top: _yPosition,
left: _xPosition,
child: GestureDetector(
onPanUpdate: (DragUpdateDetails e) {
setState(() {
_xPosition += e.delta.dx;
_yPosition += e.delta.dy;
});
},
child: Container(
height: 200,
width: 200,
color: Colors.black,
),
),
)
],
),
),
),
),
);
}
}
In this example why are we using delta but not globalPosition or localPosition. I mean of course dragging will not work as expected but how to know when to use delta or globalPosition or localPosition?
Can someone provide me a quick explanation for these properties? It would really mean a lot. Thanks!
According to the Source code of DragUpdateDetailsclass:
delta → Offset
The amount the pointer has moved in the coordinate space of the event receiver since the previous update
Meaning, The distance covered by dragging since the last pointer contact. Delta gives dx for horizontal distance and dy for vertical distance.
primaryDelta → double
The amount the pointer has moved along the primary axis in the coordinate space of the event receiver since the previous update
primaryDelta gives the absolute distance in only one primary direction of dragging, meaning if the drag is primarily in horizontal axis(GestureDragUpdateCallback + Horizontal only) then this value represents the drag distance in the horizontal axis. If the drag in is vertical axis (GestureDragUpdateCallback + Vertical only) then this value represents the drag amount in the vertical axis.
Note: if the GestureDragUpdateCallback is for a two-dimensional drag (e.g., a pan), then this value is null.
globalPosition → Offset
The pointer's global position when it triggered this update.
The position of the pointer on the screen with reference to the whole screen area and origin point at the top-left corner of the screen. Global Position gives x for horizontal co-ordinate and y for vertical co-ordinate
localPosition → Offset
The local position in the coordinate system of the event receiver at which the pointer contacted the screen.
The position of the pointer just like the global position, except the referential frame being the widget/render object instead of the whole screen. Here, The widget is the one that has received the pointer contact.
Explanation with respect to the example code
According to the example code that is provided, I can safely say that when you are dealing with the positioning of any draggable widget you must have an initial position.
For the initial position, globalPosition or localPosition can be used. Which one to use is specific to the widget tree and use of the app.
Once the initial position is set, you can use delta or primaryDelta to find the new position for the draggable widget to move to when dragged by following formula:
newXPosition = initialXPosition + (dx or primaryDelta in horizontal axis)
newYPosition = initialYPosition + (dy or primaryDelta in vertical axis)
One thing to keep in mind while using delta and primaryDelta is that, if the widget can/should recognize the drag events in both axis, only delta will be provided, primaryDelat will be null.
Otherwise, if only one direction drag is expected then using only primaryDelta will work as expected, at this point delta will have only one value as a non-zero value and other as 0 based on which direction the drag is to be recognized.
Let me know if you have any other questions about this in the comments.