بتاريخ 27 دقائق مضت قال مصطفى امين2:

شكرا على اجابتك ولكن اقصد النقل من تطبيق الى اخر عن طريق server

من جانب السيرفر فإن MQTT هي من أقوى تقنيات الوقت الفعلي والتي تعتمد عليها أغلب شركات العالم مثل أمازون وجوجل وغيرها . حيث توفر أداء عالي وتكلفة أقل والكثير من الميزات 

Flutter Google Map مع تتبع الموقع المباشر - أسلوب أوبر

الإعداد الأولي 
تأكد من إعداد بيئتك وفقًا لذلك لتمكين تتبع الموقع على كل من IOS و Android باتباع الخطوات الواردة في README الخاص بالحزمة فيما يتعلق بملف بيان Android و iOS Info.plist.

بمجرد الإعداد ، تبدو التبعيات مثل 

....
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  flutter_polyline_points: ^1.0.0
  google_maps_flutter: ^2.1.7
  location: ^4.4.0
...

خريطة جوجل 🗺

قم بإنشاء StatefulWidget يسمى OrderTrackingPage مع فئة الحالة المقابلة ، حيث قمت باستيراد الحزم المطلوبة بالإضافة إلى بعض المصدر الثابت وموقع الوجهة 

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
class OrderTrackingPage extends StatefulWidget {
  const OrderTrackingPage({Key? key}) : super(key: key);
@override
  State<OrderTrackingPage> createState() => OrderTrackingPageState();
}
class OrderTrackingPageState extends State<OrderTrackingPage> {
  final Completer<GoogleMapController> _controller = Completer();
static const LatLng sourceLocation = LatLng(37.33500926, -122.03272188);
  static const LatLng destination = LatLng(37.33429383, -122.06600055);
@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ... GoogleMap widget will be here ...,
    );
  }
}

أنشئ أداة GoogleMap وعيّن موقع الكاميرا الأولي على موقع المصدر. تحتاج الخريطة إلى التكبير قليلاً ، لذا اضبطها على 13.5.

نحتاج إلى علامة / دبوس لفهم الموقع الدقيق. تحديد علامة وتعيين موضعها إلى موقع المصدر. للوجهة ، أضف علامة / دبوس آخر.

GoogleMap(
  initialCameraPosition: const CameraPosition(
    target: sourceLocation,
    zoom: 13.5,
  ),
  markers: {
    const Marker(
      markerId: MarkerId("source"),
      position: sourceLocation,
    ),
    const Marker(
      markerId: MarkerId("destination"),
      position: destination,
    ),
  },
  onMapCreated: (mapController) {
    _controller.complete(mapController);
  },
),

رسم اتجاه الطريق 〰
الشيء التالي الذي أريد القيام به هو رسم خط من الوجهة إلى المصدر. قم بإنشاء قائمة فارغة تسمى polylineCoordinates. قم بإنشاء مثيل من PolylinePoints ووظيفة غير متزامنة تسمى getPolyPoints. تقوم طريقة getRouteBetweenCoordinates بإرجاع قائمة النقاط متعددة الخطوط. كانت مواقع مفتاح Google API والمصدر والوجهة مطلوبة. إذا لم تكن النقاط فارغة ، نقوم بتخزينها في إحداثيات متعددة الخطوط.

List<LatLng> polylineCoordinates = [];
void getPolyPoints() async {
  PolylinePoints polylinePoints = PolylinePoints();
PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
    google_api_key, // Your Google Map Key
    PointLatLng(sourceLocation.latitude, sourceLocation.longitude),
    PointLatLng(destination.latitude, destination.longitude),
  );
if (result.points.isNotEmpty) {
    result.points.forEach(
      (PointLatLng point) => polylineCoordinates.add(
        LatLng(point.latitude, point.longitude),
      ),
    );
    setState(() {});
  }
}

على initState استدعاء getPolyPoints

@override
void initState() {
  getPolyPoints();
  super.initState();
}

العودة إلى أداة GoogleMap ، حدد الخطوط المتعددة.

GoogleMap(
...
  polylines: {
    Polyline(
      polylineId: const PolylineId("route"),
      points: polylineCoordinates,
      color: const Color(0xFF7B61FF),
      width: 6,
    ),
  },
),

تحديثات الموقع في الوقت الحقيقي على الخريطة 🔴
نصل الآن إلى الجزء الأكثر إثارة ، نحن بحاجة إلى موقع الجهاز. إنشاء متغير nullable يسمى currentLocation. ثم تقوم دالة تسمى getCurrentLocation، Inside، بإنشاء مثيل للموقع. بمجرد أن نحصل على الموقع ، قم بتعيين الموقع الحالي ليكون مساويًا للموقع. عند تغيير الموقع ، قم بتحديث الموقع الحالي. اجعلها مرئية للخريطة المسماة setState.

LocationData? currentLocation;
void getCurrentLocation() async {
    Location location = Location();
location.getLocation().then(
      (location) {
        currentLocation = location;
      },
    );
GoogleMapController googleMapController = await _controller.future;
location.onLocationChanged.listen(
      (newLoc) {
        currentLocation = newLoc;
googleMapController.animateCamera(
          CameraUpdate.newCameraPosition(
            CameraPosition(
              zoom: 13.5,
              target: LatLng(
                newLoc.latitude!,
                newLoc.longitude!,
              ),
            ),
          ),
        );
setState(() {});
      },
    );
  }

تأكد من استدعاء getCurrentLocation على initState.

void initState() {
  getPolyPoints();
  getCurrentLocation();
  super.initState();
}

إذا كان CurrentLocation فارغًا ، فسيتم عرض نص التحميل. أيضًا ، أضف علامة / دبوسًا آخر للموقع الحالي بالإضافة إلى تغيير موضع الكاميرا الأولي إلى الموقع الحالي.

body: currentLocation == null
  ? const Center(child: Text("Loading"))
  : GoogleMap(
      initialCameraPosition: CameraPosition(
        target: LatLng(
            currentLocation!.latitude!, currentLocation!.longitude!),
        zoom: 13.5,
      ),
      markers: {
        Marker(
          markerId: const MarkerId("currentLocation"),
          position: LatLng(
              currentLocation!.latitude!, currentLocation!.longitude!),
        ),
        const Marker(
          markerId: MarkerId("source"),
          position: sourceLocation,
        ),
        const Marker(
          markerId: MarkerId("destination"),
          position: destination,
        ),
      },
      onMapCreated: (mapController) {
        _controller.complete(mapController);
      },
      polylines: {
        Polyline(
          polylineId: const PolylineId("route"),
          points: polylineCoordinates,
          color: const Color(0xFF7B61FF),
          width: 6,
        ),
      },
    ),

بتاريخ 10 دقائق مضت قال Ahmed Sadek:

Flutter Google Map مع تتبع الموقع المباشر - أسلوب أوبر

الإعداد الأولي 
تأكد من إعداد بيئتك وفقًا لذلك لتمكين تتبع الموقع على كل من IOS و Android باتباع الخطوات الواردة في README الخاص بالحزمة فيما يتعلق بملف بيان Android و iOS Info.plist.

بمجرد الإعداد ، تبدو التبعيات مثل 

....
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  flutter_polyline_points: ^1.0.0
  google_maps_flutter: ^2.1.7
  location: ^4.4.0
...

خريطة جوجل 🗺

قم بإنشاء StatefulWidget يسمى OrderTrackingPage مع فئة الحالة المقابلة ، حيث قمت باستيراد الحزم المطلوبة بالإضافة إلى بعض المصدر الثابت وموقع الوجهة 

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
class OrderTrackingPage extends StatefulWidget {
  const OrderTrackingPage({Key? key}) : super(key: key);
@override
  State<OrderTrackingPage> createState() => OrderTrackingPageState();
}
class OrderTrackingPageState extends State<OrderTrackingPage> {
  final Completer<GoogleMapController> _controller = Completer();
static const LatLng sourceLocation = LatLng(37.33500926, -122.03272188);
  static const LatLng destination = LatLng(37.33429383, -122.06600055);
@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ... GoogleMap widget will be here ...,
    );
  }
}

أنشئ أداة GoogleMap وعيّن موقع الكاميرا الأولي على موقع المصدر. تحتاج الخريطة إلى التكبير قليلاً ، لذا اضبطها على 13.5.

نحتاج إلى علامة / دبوس لفهم الموقع الدقيق. تحديد علامة وتعيين موضعها إلى موقع المصدر. للوجهة ، أضف علامة / دبوس آخر.

GoogleMap(
  initialCameraPosition: const CameraPosition(
    target: sourceLocation,
    zoom: 13.5,
  ),
  markers: {
    const Marker(
      markerId: MarkerId("source"),
      position: sourceLocation,
    ),
    const Marker(
      markerId: MarkerId("destination"),
      position: destination,
    ),
  },
  onMapCreated: (mapController) {
    _controller.complete(mapController);
  },
),

رسم اتجاه الطريق 〰
الشيء التالي الذي أريد القيام به هو رسم خط من الوجهة إلى المصدر. قم بإنشاء قائمة فارغة تسمى polylineCoordinates. قم بإنشاء مثيل من PolylinePoints ووظيفة غير متزامنة تسمى getPolyPoints. تقوم طريقة getRouteBetweenCoordinates بإرجاع قائمة النقاط متعددة الخطوط. كانت مواقع مفتاح Google API والمصدر والوجهة مطلوبة. إذا لم تكن النقاط فارغة ، نقوم بتخزينها في إحداثيات متعددة الخطوط.

List<LatLng> polylineCoordinates = [];
void getPolyPoints() async {
  PolylinePoints polylinePoints = PolylinePoints();
PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
    google_api_key, // Your Google Map Key
    PointLatLng(sourceLocation.latitude, sourceLocation.longitude),
    PointLatLng(destination.latitude, destination.longitude),
  );
if (result.points.isNotEmpty) {
    result.points.forEach(
      (PointLatLng point) => polylineCoordinates.add(
        LatLng(point.latitude, point.longitude),
      ),
    );
    setState(() {});
  }
}

على initState استدعاء getPolyPoints

@override
void initState() {
  getPolyPoints();
  super.initState();
}

العودة إلى أداة GoogleMap ، حدد الخطوط المتعددة.

GoogleMap(
...
  polylines: {
    Polyline(
      polylineId: const PolylineId("route"),
      points: polylineCoordinates,
      color: const Color(0xFF7B61FF),
      width: 6,
    ),
  },
),

تحديثات الموقع في الوقت الحقيقي على الخريطة 🔴
نصل الآن إلى الجزء الأكثر إثارة ، نحن بحاجة إلى موقع الجهاز. إنشاء متغير nullable يسمى currentLocation. ثم تقوم دالة تسمى getCurrentLocation، Inside، بإنشاء مثيل للموقع. بمجرد أن نحصل على الموقع ، قم بتعيين الموقع الحالي ليكون مساويًا للموقع. عند تغيير الموقع ، قم بتحديث الموقع الحالي. اجعلها مرئية للخريطة المسماة setState.

LocationData? currentLocation;
void getCurrentLocation() async {
    Location location = Location();
location.getLocation().then(
      (location) {
        currentLocation = location;
      },
    );
GoogleMapController googleMapController = await _controller.future;
location.onLocationChanged.listen(
      (newLoc) {
        currentLocation = newLoc;
googleMapController.animateCamera(
          CameraUpdate.newCameraPosition(
            CameraPosition(
              zoom: 13.5,
              target: LatLng(
                newLoc.latitude!,
                newLoc.longitude!,
              ),
            ),
          ),
        );
setState(() {});
      },
    );
  }

تأكد من استدعاء getCurrentLocation على initState.

void initState() {
  getPolyPoints();
  getCurrentLocation();
  super.initState();
}

إذا كان CurrentLocation فارغًا ، فسيتم عرض نص التحميل. أيضًا ، أضف علامة / دبوسًا آخر للموقع الحالي بالإضافة إلى تغيير موضع الكاميرا الأولي إلى الموقع الحالي.

body: currentLocation == null
  ? const Center(child: Text("Loading"))
  : GoogleMap(
      initialCameraPosition: CameraPosition(
        target: LatLng(
            currentLocation!.latitude!, currentLocation!.longitude!),
        zoom: 13.5,
      ),
      markers: {
        Marker(
          markerId: const MarkerId("currentLocation"),
          position: LatLng(
              currentLocation!.latitude!, currentLocation!.longitude!),
        ),
        const Marker(
          markerId: MarkerId("source"),
          position: sourceLocation,
        ),
        const Marker(
          markerId: MarkerId("destination"),
          position: destination,
        ),
      },
      onMapCreated: (mapController) {
        _controller.complete(mapController);
      },
      polylines: {
        Polyline(
          polylineId: const PolylineId("route"),
          points: polylineCoordinates,
          color: const Color(0xFF7B61FF),
          width: 6,
        ),
      },
    ),

شكرا على اجابتك ولكن اقصد النقل من تطبيق الى اخر عن طريق server