Car Animation in Google Map π
Animate car marker in Google map using Flutter
There are times when we have to animate the map marker from one location to another location. Google map SDK for Flutter does not provide any inbuilt functionality to do the same.
Requirement π
We need to create Google key before to use it in our app. You can follow the steps below to generate the key and set up the Google map plugin. Also follow the individual platform setup for android and iOS π
π https://pub.dev/packages/google_maps_flutter
We will also use StreamBuilder
to update the UI of the map. You can learn more about that below π
π https://api.flutter.dev/flutter/widgets/StreamBuilder-class.html
Checkout the below article for Google map setup and styling π
Add Google Map πΊ
Now we will add add the Google map widget to our screen. First, letβs create a basic home screen in our Flutter app.
Now we will add the Google map widget to our home screen. We will wrap the widget in StreamBuilder
to update its UI.
Above we have created a Google map widget with some of its properties like initialCameraPosition
which will set the initial position of the camera on the map. We have also set some UI flags like mapToolbarEnabled
, myLocationEnabled
, zoomControlsEnabled
, etc. to change default map behavior. You can change this flags according to your requirement.
Note: The map widget is wrapped around
StreamBuilder
ofMarker
. ThisMarker
object which will contain marker data like location, image etc. We will update this stream to update the UI of the map.
After you run the app, it will show google map in the home screen with the map at the initial position defined in the widget.
Create Marker π
Now we will add a custom marker to the map. We will define the latitude
, longitude
and image of the marker.
First, we will initiate the marker with current location
Note: We are using custom icon for marker. You can define your own image if you want using asset folder of the project.
Now we will update the UI of the map using StreamBuilder
to show the marker on the map. We will update the UI ininitState()
of the home screen.
Animate Marker π
We have already added one marker to the map, we will move the marker from one position to another.
We will use Flutter Tween animation
class. You can learn more about Tween
below π
π https://api.flutter.dev/flutter/animation/Tween-class.html
We will update the value of Tween
from 0 to 1, during the animation we will update the location of the marker. We will calculate the new location of the marker on every animation callback.
βοΈ Letβs create animation Utility method for car animation.
First, we will calculate the Bearing
of the icon. This will animate the icon in correct orientation according to our drop point. Then we will add our initial marker to the map.
Note: We are calculating the
Bearing
to rotate the icon in the correct direction. If we donβt put rotation on the marker, then the icon will move perpendicular to the screen.
βοΈ We will now create animation controller for our Tween animation
.
Finally, we can animate the marker according to our animation values. The animation value will change from 0 to 1. During this, we will update the new location of the marker.
On every animation callback, we update marker location, then move the Google camera to the new marker location. This keep the animation in frame of Google map.
Let use the above create method to update our marker and see the magic πͺ
Full Code π
Check full code implemented in our previous home screen
We have now successfully implemented the car animation in Google map. You can use the above method to easily animate the maker. Just pass the start and end point to the method, and it will take care of the rest.
Thank you, and I hope this article helped you in some way. If you like the post, please support the article by sharing it. Have a nice day!π
I am an mobile enthusiast π±. My expertise is in Flutter and Android development, with more than 5 years of experience in the industry.
I would love to write technical blogs for you. Writing blogs and helping people is what I crave for π .You can contact me at my email(abdulrehman0796@gmail.com) for any collaboration π
π LinkedIn: https://www.linkedin.com/in/abdul-rehman-khilji/