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

An animation of an arc connecting two points on a google map with flutter. This is an image of an airplane flight path.
First, the completed image. Tokyo Tower and Sky Tree are connected by a circular arc.

The following two points are important.

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

Find the coordinates of the arc connecting the two points.

Note that we will not be using google map polyline.
This is useful when we don’t want to spend money on the Directions API to draw polyline, but want to create a nice UI.

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).

Now we have the (x,y) of the arc start and end points.
This is the only role of google map. We will not use polyline.

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.

[Variable description]
Start point : (_sx,_sy)
End point : (_ex,_ey)
Coordinates to draw the arc : (x,y)
θ : _angle

Get all the coordinates of the arc by varying _angle from 0 to 3.14.

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

In android, you can’t use the value you get as it is.
You can get the dp of the screen by dividing by MediaQuery.of(context).devicePixelRatio.

In iOS, you can use the value you get as is.

About the stability of getScreenCoordinate

On android, you can always get a stable and accurate value, but on iOS, you may get a value with a ridiculous number of digits, and you may not be able to draw an arc. Currently, the cause is unknown.

Disable google map zoomGesturesEnabled

The arc is misaligned when zoomed.