Display an animation of an arc connecting two points on a google map with flutter.

Get the coordinates of the screen corresponding to the latitude and longitude of google map.

Use getScreenCoordinate of GoogleMapController. If you pass in the latitude and longitude, you can get the x-coordinate and y-coordinate in pixels, with the upper left corner of the google map display area as (0,0).

Find the coordinates of the arc connecting the two points.

Using the obtained (x,y) of the arc start and end points, find the coordinates for drawing the arc.
The calculation formula is as follows. Use the trigonometric function to find it.

Final tasks

Now, let’s draw an arc that will overlay the google map while changing the _angle in AnimationController. No explanation will be necessary for flutter engineers.Please see the source.

Note

About the pixel value of getScreenCoordinate

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store