How to put a widget over the flutter poly line points

Viewed 292

I was working with the integration of google maps in a flutter application. I have added multiple markers in the app. Also, I have added directions between two markers using flutter_polyline_points. The problem is how can I put a widget over the polyline points to show the distance or estimated time to travel which I have calculated using Distance metrics API.

Google maps

child: GoogleMap(
                  mapType: MapType.normal,
                  markers: Set<Marker>.of(markerData.values),
                  onMapCreated: _onMapCreated,
                  initialCameraPosition: CameraPosition(
                    target: _center,
                    zoom: 15.0,
                  ),
                  // zoomControlsEnabled: false,
                  mapToolbarEnabled: true,
                  myLocationButtonEnabled: true,
                  myLocationEnabled: true,
                  polylines: Set<Polyline>.of(polylines.values),
                ),

Markers

  void initMarkers(markerDetails, markerId) async {
    final markerIdVal = markerId;
    final MarkerId markerIdData = MarkerId(markerIdVal);
    final Marker marker = Marker(
        markerId: markerIdData,
        position: LatLng(markerDetails["latitude"], markerDetails["longitude"]),
        icon: await BitmapDescriptor.fromAssetImage(
            ImageConfiguration(devicePixelRatio: 2.5),
            'assets/images/marker.png'),
        infoWindow:
            InfoWindow(title: markerDetails["title"], snippet: distanceToLocation),
        onTap: () {
          _handleMarkerTap(
              LatLng(markerDetails["latitude"], markerDetails["longitude"]));
        });
    setState(() {
      markerData[markerIdData] = marker;
    });
  }

Polyline points

//Get polyline
  void _getPolyline(latitude, longitude) async {
    List<LatLng> polylineCoordinates = [];

    PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
      "MY_API_KEY",
      PointLatLng(13.0323, 77.57),
      PointLatLng(latitude, longitude),
      travelMode: TravelMode.walking,
    );

    if (result.points.isNotEmpty) {
      result.points.forEach((PointLatLng point) {
        polylineCoordinates.add(LatLng(point.latitude, point.longitude));
      });
    } else {
      print(result.errorMessage);
    }
    _addPolyLine(polylineCoordinates);
  }

  //Add polylines to the map
  _addPolyLine(List<LatLng> polylineCoordinates) {
    PolylineId id = PolylineId("poly");
    Polyline polyline = Polyline(
      polylineId: id,
      color: Colors.deepOrange,
      points: polylineCoordinates,
      width: 3,
      patterns: [PatternItem.dash(15), PatternItem.gap(10)],
    );
    polylines[id] = polyline;
  }

This is what I'm trying to achieve

0 Answers
Related