Flutter How to get uber or ola like car icon moving on google maps
For this kind of apps you need a source to receive location from in real-time [ you can use node.js and socket.io for backend ], like driver app [in driver app listen for location changes], You don't need animation for markers while receiving live location from the driver app call the method that adds marker on the map use driver's unique id as marker id every time you call updateDriverMarkersWithCircle() method, here is the method that I used for this purpose, it gets called every time the drivers' location is received, this method will update the marker if the received data has same id(which will look like moving cars) else it will add a new marker on the map using driver's id: here is the output image
void updateDriverMarkersWithCircle( Map newLocalData ) async{
final Uint8List markerIcon = await getBytesFromAsset('assets/images/yellow_car.png', 180);
LatLng latLng = LatLng( newLocalData['lat'], newLocalData['long'] );
_markers.add(
Marker(
markerId: MarkerId( newLocalData['id'].toString() ),
position: latLng,
rotation: newLocalData['heading'].toDouble(),
draggable: false,
zIndex: 2,
flat: true,
anchor: Offset(0.5, 0.5),
icon: BitmapDescriptor.fromBytes( markerIcon ))
);
_circles.add(
Circle(
circleId: CircleId(newLocalData['id'].toString()),
radius: newLocalData['accuracy'].toDouble(),
zIndex: 1,
strokeColor: Colors.blue,
center: latlng,
fillColor: Colors.blue.withAlpha(70)
)
);
}
Saikumarreddy atluri
Iam siakuma. I don't love coding, i hate peoggramming all the above are false including name 😄😄😄
Updated on December 14, 2022Comments
-
Saikumarreddy atluri over 1 year
I am working on a bus tracking app in flutter but struck at making an moving bus icon animation with google_maps_flutter i tried using markers but it doesn't have any animation on marker i dont how to tackle this situation is there anything to make moving anmation with markers in maps