CODEWITHSUNDEEP
androidflutterdartmapsflutter-animation
Saikumarreddy atluri
Saikumarreddy atluri

Reputation: 549

Flutter How to get uber or ola like car icon moving on google maps

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

Upvotes: 4

Views: 4573

Answers (1)

Hayatullah Farahi
Hayatullah Farahi

Reputation: 91

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)
           )
        );
  }

Upvotes: 6

Related Questions