مع تزايد الحاجة إلى تطبيقات تعتمد على الخرائط، مثل تطبيقات التوصيل، تتبع المواقع، الرحلات، الخدمات القريبة، وتحديد المسارات، أصبح وجود حل سهل ومجاني لإضافة الخرائط داخل تطبيق Flutter أمرًا مهمًا لكثير من المطورين.

في العادة، قد يفكر المطور مباشرة في استخدام Google Maps، لكن بعض الخدمات تحتاج إلى إعدادات API وربما ترتبط بتكاليف حسب الاستخدام. لذلك يبحث الكثيرون عن حلول تعتمد على خرائط مفتوحة مثل OpenStreetMap مع مكتبات Flutter جاهزة.

من المكتبات التي تقدم فكرة عملية في هذا المجال مكتبة flutter_map_pick_route_sherifammar، وهي مكتبة Flutter تساعدك على البحث عن الأماكن، اختيار نقطتين على الخريطة، رسم مسار بينهما، وقياس المسافة بالمتر، مع اعتمادها على OpenStreetMap.

رغم أن المكتبة تعتمد على خرائط OpenStreetMap المجانية، إلا أن مثال الاستخدام الرسمي يوضح أنها تحتاج إلى مفتاح من خدمة OpenRouteService داخل الخاصية orsApiKey من أجل إنشاء المسار بين نقطتين.

لذلك يمكن القول إن عرض الخريطة نفسها يعتمد على OpenStreetMap، لكن حساب المسارات في المثال المتاح يحتاج إلى API Key من OpenRouteService. ولهذا السبب، عند استخدام المكتبة في مشروع حقيقي، يجب مراجعة شروط الاستخدام وحدود الاستخدام المجاني للخدمة التي تعتمد عليها في حساب المسارات.

flutter_map_pick_route_sherifammar هي مكتبة Flutter مفتوحة المصدر تساعد المطورين على إضافة خريطة تفاعلية داخل التطبيق مع إمكانية اختيار المواقع ورسم المسارات بين نقطتين.

بحسب وصف الحزمة على pub.dev، توفر المكتبة إمكانية البحث عن الأماكن، اختيار موقعين مختلفين، إنشاء مسار بين نقطتين، وقياس المسافة بالمتر بينهما، وهي تستخدم OpenStreetMap وتصف نفسها بأنها مجانية وسهلة الاستخدام.

تعتمد المكتبة على مجموعة من الحزم المهمة مثل:

يمكنك الوصول إلى صفحة المكتبة الرسمية من خلال الرابط التالي:

https://pub.dev/packages/flutter_map_pick_route_sherifammar

يمكن استخدام flutter_map_pick_route_sherifammar في عدة أنواع من التطبيقات، مثل:

تدعم المكتبة البحث عن المواقع والأماكن، مما يساعد المستخدم على اختيار نقطة معينة بدلًا من الاعتماد فقط على التحريك اليدوي للخريطة.

تسمح المكتبة باختيار نقطتين مختلفتين، مثل نقطة البداية ونقطة النهاية، وهي ميزة مهمة في تطبيقات التوصيل أو الرحلات.

من أهم وظائف المكتبة أنها تساعد على إنشاء مسار بين نقطتين على الخريطة. هذه الميزة تجعلها مناسبة للتطبيقات التي تحتاج إلى عرض اتجاه أو مسار للمستخدم.

توفر المكتبة إمكانية قياس المسافة بين نقطتين بالمتر، وهي ميزة مفيدة إذا كنت تريد حساب تكلفة توصيل، مدة تقريبية، أو مجرد عرض المسافة للمستخدم.

تعتمد المكتبة على OpenStreetMap من خلال flutter_map، وهذا يجعلها خيارًا مناسبًا لمن يريد استخدام خرائط مفتوحة المصدر داخل تطبيق Flutter.

المكتبة توفر Widget جاهزًا باسم FlutterMapSearchAndPinkRoute يمكن إضافته مباشرة داخل واجهة التطبيق مع تمرير الإحداثيات ومفتاح OpenRouteService.

لإضافة المكتبة إلى مشروع Flutter، افتح ملف pubspec.yaml وأضف الحزمة داخل قسم dependencies:

dependencies:
  flutter_map_pick_route_sherifammar: ^0.0.10

بعد ذلك شغّل الأمر التالي:

flutter pub get

أو يمكنك إضافتها من خلال الأمر:

flutter pub add flutter_map_pick_route_sherifammar

بعد تثبيت الحزمة، قم باستيرادها في الملف الذي تريد استخدام الخريطة داخله:

import 'package:flutter_map_pick_route_sherifammar/flutter_map_pick_route_sherifammar.dart';

يمكنك استخدام Widget الجاهز FlutterMapSearchAndPinkRoute بهذا الشكل:

FlutterMapSearchAndPinkRoute(
  orsApiKey: 'token from openrouteservice web site',
  latidedCurrent: 25,
  longtideCurrent: 91,
)

في هذا المثال:

لاحظ أن أسماء الخصائص كما تظهر في مثال المكتبة تحتوي على كتابة محددة مثل latidedCurrent و longtideCurrent، لذلك يجب استخدامها كما هي في الإصدار الحالي.

في المثال التالي سنعرض خريطة داخل صفحة بسيطة باستخدام المكتبة:

import 'package:flutter/material.dart';
import 'package:flutter_map_pick_route_sherifammar/flutter_map_pick_route_sherifammar.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Map Route Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MapRoutePage(),
    );
  }
}

class MapRoutePage extends StatelessWidget {
  const MapRoutePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('اختيار مسار على الخريطة'),
      ),
      body: FlutterMapSearchAndPinkRoute(
        orsApiKey: 'YOUR_OPENROUTESERVICE_API_KEY',
        latidedCurrent: 25,
        longtideCurrent: 91,
      ),
    );
  }
}

بعد تشغيل التطبيق، تظهر واجهة الخريطة التي تسمح للمستخدم بالتعامل مع المواقع والمسارات حسب الوظائف التي توفرها المكتبة.

لأن المكتبة في مثالها الرسمي تطلب قيمة orsApiKey، ستحتاج إلى الحصول على مفتاح من موقع OpenRouteService إذا أردت استخدام حساب المسارات.

الفكرة العامة تكون كالتالي:

FlutterMapSearchAndPinkRoute(
  orsApiKey: 'YOUR_API_KEY_HERE',
  latidedCurrent: 25,
  longtideCurrent: 91,
)

لا تضع المفتاح الحقيقي مباشرة داخل الكود إذا كان المشروع عامًا أو مفتوح المصدر. من الأفضل حفظه بطريقة آمنة حسب طبيعة مشروعك.

إذا كان التطبيق يحتاج إلى الوصول إلى موقع المستخدم الحالي، يجب إضافة صلاحيات الموقع داخل ملف:

android/app/src/main/AndroidManifest.xml

أضف الصلاحيات التالية قبل وسم application:

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

وفي بعض الحالات، إذا كنت تحتاج إلى الموقع في الخلفية، فقد تحتاج إلى صلاحيات إضافية، لكن لا تضفها إلا إذا كان التطبيق يحتاجها فعلًا.

في iOS، يجب إضافة وصف سبب استخدام الموقع داخل ملف:

ios/Runner/Info.plist

أضف المفاتيح التالية مع رسالة واضحة للمستخدم:

<key>NSLocationWhenInUseUsageDescription</key>
<string>نحتاج إلى موقعك لعرضه على الخريطة وتحديد المسار.</string>

<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>نحتاج إلى موقعك لتحسين تجربة استخدام الخرائط داخل التطبيق.</string>

احرص على أن تكون الرسالة واضحة وصادقة، لأن أنظمة التشغيل تراجع سبب طلب الصلاحيات، والمستخدم أيضًا يحتاج إلى معرفة لماذا يطلب التطبيق موقعه.

إذا أردت عرض الخريطة داخل مساحة محددة بدلًا من جعلها تملأ الشاشة بالكامل، يمكنك وضعها داخل Container:

Container(
  height: 400,
  margin: const EdgeInsets.all(16),
  child: FlutterMapSearchAndPinkRoute(
    orsApiKey: 'YOUR_OPENROUTESERVICE_API_KEY',
    latidedCurrent: 25,
    longtideCurrent: 91,
  ),
)

هذا مفيد في صفحات مثل نموذج إنشاء طلب، حيث تريد أن يختار المستخدم الموقع أو المسار ضمن جزء محدد من الشاشة.

يمكنك إنشاء صفحة مخصصة لاختيار الموقع أو المسار ثم الرجوع إلى الصفحة السابقة بعد انتهاء المستخدم من الاختيار، حسب ما تدعمه المكتبة وطريقة بناء تطبيقك.

class PickRoutePage extends StatelessWidget {
  const PickRoutePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('اختيار المسار'),
      ),
      body: FlutterMapSearchAndPinkRoute(
        orsApiKey: 'YOUR_OPENROUTESERVICE_API_KEY',
        latidedCurrent: 25,
        longtideCurrent: 91,
      ),
    );
  }
}

ثم يمكنك فتح الصفحة باستخدام:

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => const PickRoutePage(),
  ),
);

من المهم التفريق بين أمرين:

لذلك، عندما نقول إن استخدام الخريطة مجاني، فهذا غالبًا يشير إلى عرض طبقات OpenStreetMap. أما حساب المسارات والبحث المتقدم فقد يحتاج إلى خدمة خارجية لها حدود استخدام وشروط خاصة.

نعم، يمكن استخدام خرائط داخل Flutter بدون Google Maps API عن طريق الاعتماد على OpenStreetMap ومكتبات مثل flutter_map. ومكتبة flutter_map_pick_route_sherifammar مبنية حول هذا الاتجاه، لأنها تستخدم OpenStreetMap وتوفر وظائف جاهزة للتعامل مع المسارات.

لكن إذا كنت تريد حساب مسارات بين نقطتين، فقد تحتاج إلى API خاص بخدمة Routing مثل OpenRouteService، كما هو موضح في مثال المكتبة.

يمكنك استخدام flutter_map_pick_route_sherifammar إذا كنت تريد حلًا سريعًا لإضافة خريطة مع اختيار نقاط ورسم مسار داخل تطبيق Flutter، خصوصًا إذا كان مشروعك في مرحلة تجربة أو نموذج أولي أو تطبيق بسيط.

أما إذا كان تطبيقك يعتمد بشكل كبير على الخرائط، ويحتاج إلى تخصيصات متقدمة، طبقات متعددة، تحكم كامل في المسارات، أو أداء عالي جدًا مع عدد كبير من المستخدمين، فقد يكون من الأفضل دراسة استخدام flutter_map مباشرة وبناء طبقة مخصصة فوقه، أو استخدام حلول خرائط أكثر تخصصًا حسب احتياج المشروع.

هذا مثال سريع يمكنك البدء منه:

import 'package:flutter/material.dart';
import 'package:flutter_map_pick_route_sherifammar/flutter_map_pick_route_sherifammar.dart';

class FreeMapExample extends StatelessWidget {
  const FreeMapExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('خريطة ومسار'),
      ),
      body: FlutterMapSearchAndPinkRoute(
        orsApiKey: 'YOUR_OPENROUTESERVICE_API_KEY',
        latidedCurrent: 25,
        longtideCurrent: 91,
      ),
    );
  }
}

تعتبر مكتبة flutter_map_pick_route_sherifammar خيارًا عمليًا للمطورين الذين يريدون إضافة خرائط ومسارات داخل تطبيقات Flutter بطريقة سهلة وسريعة. فهي تعتمد على OpenStreetMap، وتوفر وظائف مثل البحث عن الأماكن، اختيار نقطتين، رسم المسار، وقياس المسافة بالمتر.

رغم أن عنوان الفكرة قد يكون استخدام الخرائط بدون API مثل Google Maps API، إلا أن حساب المسارات في مثال المكتبة يحتاج إلى مفتاح orsApiKey من OpenRouteService. لذلك يجب التعامل مع المكتبة على أنها حل مجاني أو منخفض التكلفة لعرض الخرائط واختيار المسارات، مع ضرورة مراجعة حدود وشروط الخدمة المستخدمة في التوجيه.

إذا كنت تعمل على تطبيق يحتاج إلى ميزة اختيار موقع أو رسم مسار بشكل سريع، فهذه المكتبة تستحق التجربة، خاصة في المشاريع البسيطة والمتوسطة أو النماذج الأولية التي تحتاج إلى خريطة تفاعلية دون تعقيد كبير.