Add distance to map lat lang

android/app/src/main/AndroidManifest.xml

@@ -49,6 +49,6 @@
             android:name="flutterEmbedding"
             android:value="2" />
        <meta-data android:name="com.google.android.geo.API_KEY"
-           android:value="AIzaSyBOigf-qg4v_aD0Jrx2wFOMNzObxXrfDEM"/>
+           android:value="AIzaSyDJpK9RVhlBejtJu9xSGfneuTN6HOfJgSM"/>
     </application>
 </manifest>

lib/location_controller.dart

@@ -18,7 +18,7 @@ class LocationController<T> extends GetxController {
   /*final Rx<LatLng?> locationPosition =
       const LatLng(12.90618717, 77.5844983).obs;*/
   final Rx<LatLng?> locationPosition =
-      const LatLng(17.491659, 78.391983).obs;
+      const LatLng(0, 0).obs;
 
   bool locationServiceActive = true;
 

lib/order_tracking_page.dart

@@ -1,10 +1,13 @@
 import 'dart:async';
 import 'dart:developer';
+import 'dart:math';
+
 
 import 'package:flutter/material.dart';
 import 'package:flutter_polyline_points/flutter_polyline_points.dart';
 import 'package:get/get.dart';
 import 'package:google_maps_flutter/google_maps_flutter.dart';
+import 'package:location/location.dart';
 
 import 'location_controller.dart';
 
@@ -26,22 +29,16 @@ class OrderTrackingPageState extends State<OrderTrackingPage> {
   PolylinePoints polylinePoints = PolylinePoints();
   double latitude=0;
   double longitude=0;
+  LocationData? currentLocation;
 
-  String googleAPiKey ="AIzaSyBOigf-qg4v_aD0Jrx2wFOMNzObxXrfDEM";
+  String googleAPiKey ="AIzaSyDJpK9RVhlBejtJu9xSGfneuTN6HOfJgSM";
 
   Set<Marker> markers = {};
   Map<PolylineId, Polyline> polylines = {};
 
   LatLng startLocation = const LatLng(17.416806,78.4521704);
-
-
   LocationController locationController = Get.put(LocationController());
-
+  double distance = 0.0;
-
-
-
-
-
 
   @override
   void initState() {
@@ -52,7 +49,7 @@ class OrderTrackingPageState extends State<OrderTrackingPage> {
 
     ever<LatLng?>(locationController.locationPosition, (value) {
       if (value != null) {
-        log("${value.latitude} ${value.longitude}");
+       // log("${value.latitude} ${value.longitude}");
         var latitude = value.latitude;
         var longitude = value.longitude;
         startLocation = LatLng(latitude, longitude);
@@ -61,6 +58,7 @@ class OrderTrackingPageState extends State<OrderTrackingPage> {
     });
 
     getDirections(endLocation); //fetch direction polylines from Google API
+
   }
 
   getDirections(endLocation) async {
@@ -100,8 +98,24 @@ class OrderTrackingPageState extends State<OrderTrackingPage> {
         polylineCoordinates.add(LatLng(point.latitude, point.longitude));
       }
     } else {
-      log(result.errorMessage ?? "Something went wrong");
+     // log(result.errorMessage ?? "Something went wrong");
+    }
+
+//polulineCoordinates is the List of longitute and latidtude.
+    double totalDistance = 0;
+    for(var i = 0; i < polylineCoordinates.length-1; i++){
+      totalDistance += calculateDistance(
+          polylineCoordinates[i].latitude,
+          polylineCoordinates[i].longitude,
+          polylineCoordinates[i+1].latitude,
+          polylineCoordinates[i+1].longitude);
     }
+    print(totalDistance);
+
+    setState(() {
+      distance = totalDistance;
+    });
+
     addPolyLine(polylineCoordinates);
   }
 
@@ -109,9 +123,9 @@ class OrderTrackingPageState extends State<OrderTrackingPage> {
     PolylineId id = const PolylineId("poly");
     Polyline polyline = Polyline(
       polylineId: id,
-      color: Colors.red,
+      color: Colors.deepPurpleAccent,
       points: polylineCoordinates,
-      width: 4,
+      width: 8,
     );
     polylines[id] = polyline;
 
@@ -125,10 +139,24 @@ class OrderTrackingPageState extends State<OrderTrackingPage> {
     setState(() {});
   }
 
+
+  double calculateDistance(lat1, lon1, lat2, lon2){
+    var p = 0.017453292519943295;
+    var a = 0.5 - cos((lat2 - lat1) * p)/2 +
+        cos(lat1 * p) * cos(lat2 * p) *
+            (1 - cos((lon2 - lon1) * p))/2;
+    return 12742 * asin(sqrt(a));
+  }
+
+
+
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      body: GoogleMap(
+      body: Stack(
+        children: [
+          GoogleMap(
             //Map widget from google_maps_flutter package
             zoomGesturesEnabled: true,
             //enable Zoom in, out on map
@@ -137,6 +165,7 @@ class OrderTrackingPageState extends State<OrderTrackingPage> {
               target: startLocation, //initial position
               zoom: 8.0, //initial zoom level
             ),
+
             markers: markers,
             //markers to show on map
             polylines: Set<Polyline>.of(polylines.values),
@@ -149,7 +178,30 @@ class OrderTrackingPageState extends State<OrderTrackingPage> {
                 mapController.complete(controller);
               }
             },
+
           ),
+
+          const SizedBox(
+            height: 95,
+          ),
+
+          Positioned(
+              bottom: 100,
+              left: 50,
+              child: Container(
+                  child: Card(
+                    child: Container(
+                        padding: EdgeInsets.all(20),
+                        child: Text("Total Distance: " + distance.toStringAsFixed(2) + " KM",
+                            style: TextStyle(fontSize: 20, fontWeight:FontWeight.bold))
+                    ),
+                  )
+              )),
+        ],
+      )
+
+
     );
+
   }
 }