Color the section of a polyline between waypoints - Flutter

Viewed 49

I am trying to have a system where a user can go from a starting point to the finish with several stops (Waypoints) on the way. The polyline that gets returned (polylineCoordinates) is composed of ~300 LatLong points and I do not know where to cut it in order to color the section differently as an independent polyline. I was thinking to find closest points to my waypoints, and manualy assign them as breaking points, but it seems unelegant and increases the complexity quite a bit.

I am using: package:flutter_polyline_points/flutter_polyline_points.dart

Illustration of what I want to achieve (top current outcome, bottom desired outcome): enter image description here

Here is the code responsible for making one polyline which I desire to "cut-up".

  List<PolylineWayPoint> waypoints = [];
  for (var i = 0; i < active.length; i++) {
    waypoints.add(PolylineWayPoint(
        location:
            "${active[i].coord.latitude},${active[i].coord.longitude}"));
  }
  PolylinePoints polylinePoints = PolylinePoints();
  PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
      googleApiKey,
      PointLatLng(start.latitude, start.longitude),
      PointLatLng(end.latitude, end.longitude),
      travelMode: enums.TravelMode.walking,
      wayPoints: waypoints,
      optimizeWaypoints: true
      );
  if (result.points.isNotEmpty) {
    List<LatLng> polylineCoordinates = [];
    result.points.forEach((PointLatLng point) {
      polylineCoordinates.add(LatLng(point.latitude, point.longitude));
      
    });
    routes.add(Polyline(
          polylineId: PolylineId("Poly1"),
          color: Colors.red,
          points: polylineCoordinates
          ));
  }
0 Answers
Related