Problem when I draw polyline on Google maps Flutter

Question

I am using google_maps_flutter with flutter_polyline_points packages to load google map and draw polylins between A and B points. the map is loaded and polyline is drew between A and B correctly, but an extra direct line between A and B is Also drawing, I don't know what I have done wrong. this is my code

import 'dart:async';
import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:flutter/services.dart';
import 'package:location/location.dart';
import 'package:shipbay/moving/pages/dashboard/dashboard.dart';
import 'package:shipbay/moving/pages/tracking/search.dart';
import 'package:shipbay/shared/components/slide_left_route.dart';
import 'package:shipbay/shared/services/colors.dart';
import 'package:firebase_database/firebase_database.dart';
import 'package:flutter_polyline_points/flutter_polyline_points.dart';
import 'package:shipbay/shared/services/settings.dart';

class Tracking extends StatefulWidget {
  final trackingNumber;
  const Tracking({Key key, this.trackingNumber}) : super(key: key);

  @override
  _TrackingState createState() => _TrackingState();
}

class _TrackingState extends State<Tracking> {
  //polyline point
  double _originLatitude, _originLongitude;
  double _destLatitude, _destLongitude;
  Map<MarkerId, Marker> markers = {};
  Map<PolylineId, Polyline> polylines = {};
  List<LatLng> polylineCoordinates = [];
  PolylinePoints polylinePoints = PolylinePoints();
  //realtime db
  final DBRef = FirebaseDatabase.instance.reference();

  //search togal for popup
  bool _isSearchProcessing = false;

  StreamSubscription _locationSubscription;
  GoogleMapController _mapController;
  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    if (_locationSubscription != null) {
      _locationSubscription.cancel();
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _isSearchProcessing
          ? Center(
              child: CircularProgressIndicator(),
            )
          : Stack(children: [
              GoogleMap(
                mapType: MapType.normal,
                initialCameraPosition: CameraPosition(
                  target: LatLng(37.42796133580664, -122.085749655962),
                  zoom: 14.4746,
                ),
                myLocationEnabled: true,
                tiltGesturesEnabled: true,
                compassEnabled: true,
                scrollGesturesEnabled: true,
                zoomGesturesEnabled: true,
                zoomControlsEnabled: false,
                markers: Set<Marker>.of(markers.values),
                polylines: Set<Polyline>.of(polylines.values),
                circles: Set.of((circle != null) ? [circle] : []),
                onMapCreated: _onMapCreated,
              ),
              Container(
                margin: EdgeInsets.only(top: 40),
                child: IconButton(
                    onPressed: () {
                      _closeMap(context);
                    },
                    icon: Icon(Icons.close, color: primary)),
              )
            ]),
      floatingActionButton: FloatingActionButton(
          backgroundColor: primary,
          child: Icon(Icons.location_searching),
          onPressed: () {
            _searchDialog(context);
          }),
    );
  }

  void _onMapCreated(GoogleMapController controller) async {
    _mapController = controller;
  }

  _searchDialog(context) {
    showDialog(
      context: context,
      builder: (_) => AlertDialog(
        contentPadding: EdgeInsets.zero,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(10.0),
          ),
        ),
        content: Builder(
          builder: (context) {
            return Search(query: widget.trackingNumber);
          },
        ),
      ),
    ).then(
      (value) {
        if (value != null) {
          _initMarkers(value['address']);
          setState(() {});
        }
      },
    );
  }


//initialized marker and polylines
  _initMarkers(data) {
    _originLatitude = double.parse(data[0]['latitude']);
    _originLongitude = double.parse(data[0]['longitude']);
    _destLatitude = double.parse(data[1]['latitude']);
    _destLongitude = double.parse(data[1]['longitude']);

    /// origin marker
    _addMarker(LatLng(_originLatitude, _originLongitude), "Pickup",
        BitmapDescriptor.defaultMarker);

    /// destination marker
    _addMarker(LatLng(_destLatitude, _destLongitude), "Destination",
        BitmapDescriptor.defaultMarkerWithHue(118));

    _getPolyline(data[0]['formatted_address']);
  }

//get cordinates
  _getPolyline(pickupAddress) async {
    PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
      mapKey,
      PointLatLng(_originLatitude, _originLongitude),
      PointLatLng(_destLatitude, _destLongitude),
      travelMode: TravelMode.driving,
      //wayPoints: [PolylineWayPoint(location: "$pickupAddress")],
    );

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

//polyling functions

  _addPolyLine() {
    PolylineId id = PolylineId("poly");
    Polyline polyline = Polyline(
        polylineId: id, color: Colors.blue, points: polylineCoordinates);
    polylines[id] = polyline;
    setState(() {});
  }

//add pickup and destination markers
  _addMarker(LatLng position, String id, BitmapDescriptor descriptor) {
    MarkerId markerId = MarkerId(id);
    Marker marker = Marker(
      markerId: markerId,
      icon: descriptor,
      position: position,
      infoWindow: InfoWindow(
        title: "$id",
      ),
    );
    markers[markerId] = marker;
  }
}

First I search an order and get it's pickup and destination location as (lat&lng). The only problem I have is extra direct line between A an B.

Answer 1

I know it's late but I had the same problem, and my solution was to empty the List<LatLng> polylineCoordinates variable before continue adding the LatLng points in the _getPolyline() method. It would look like this:

_getPolyline(pickupAddress) async {
  PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
    mapKey,
    PointLatLng(_originLatitude, _originLongitude),
    PointLatLng(_destLatitude, _destLongitude),
    travelMode: TravelMode.driving,
    //wayPoints: [PolylineWayPoint(location: "$pickupAddress")],
);
  if (result.points.isNotEmpty) {
    polylineCoordinates = []; // EMPTY THE VARIABLE <---------
    result.points.forEach((PointLatLng point) {
      polylineCoordinates.add(LatLng(point.latitude, point.longitude));
  });
}
  _addPolyLine();
}

I don't know why this happens but it can solve the problem, hopefully someone else who has this problem can found it useful. Greetings.