استخدام خرائط GOOGLE في FLUTTER

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

إنشاء مشروع وتعديل الملفات:

انشاء مشروع جديد:

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

اضافة خرائط قوقل:

تحتاج لإضافة Google Map Plugin الى المشروع، يمكن عمل هذا بطريقتين.

عن طريق موجه الاوامر:

فقط انسخ والصق هذا الامر في مسار المشروع وسيقوم بإضافة الخرائط تلقائيا للمشروع بدون اي تعديل على ملف pubspec.yaml.

flutter pub add google_maps_flutter

ستكون النتائج بهذا الشكل

Resolving dependencies...
  async 2.8.1 (2.8.2 available)
  characters 1.1.0 (1.2.0 available)
+ flutter_plugin_android_lifecycle 2.0.5
+ google_maps_flutter 2.1.1
+ google_maps_flutter_platform_interface 2.1.5
  matcher 0.12.10 (0.12.11 available)
  path 1.8.0 (1.8.1 available)
+ plugin_platform_interface 2.1.2
  source_span 1.8.1 (1.8.2 available)
+ stream_transform 2.0.0
  test_api 0.4.2 (0.4.9 available)
  vector_math 2.1.0 (2.1.1 available)
Downloading google_maps_flutter 2.1.1...
Downloading google_maps_flutter_platform_interface 2.1.5...
Downloading flutter_plugin_android_lifecycle 2.0.5...
Changed 5 dependencies!

وعند النظر الى ملف pubspec.yaml ستظهر النتائج كما في الصورة التالية:

عن طريق تعديل ملف pubspec.yaml

كما هي الطرق السابقة لاضافة المكتبات في Flutter سيكون عن طريق فتح ملف pubspec.yaml ثم البدء في اضافة السطر التالي في قسم dependencies وستكون النتيجة كما في الصورة السابقة.

  google_maps_flutter: ^2.1.1

بعد ذلك قم بتفعيل أمر get pub ٫

تهيئة IOS و Android :

سنحتاج الى تعديل بعض الأرقام في مجلد ios ومجلد android حتى تتوافق مع عرض الخرائط.

IOS

قم بالتوجه الى مجلد ios ثم قم بفتح ملف Podfile وقم بتعديله ليكون مطابق للكود التالي:

# Set platform to 11.0 to enable latest Google Maps SDK
platform :ios, '11.0' # احذف رمز التعليق ثم قم بكتابة الرقم 11.

# CocoaPods analytics sends network stats synchronously affecting flutter build latency.
ENV['COCOAPODS_DISABLE_STATS'] = 'true'

ANDROID

سنقوم في الاندرويد بتعديل أقل اصدار يدعم التطبيق، في حال تريد استخدام خرائط Google يجب عليك دعم الإصدار 20 وأعلى من نظام Android.

سنقوم بالذهاب الى مجلد android ثم نقوم بفتح مجلد app بعد ذلك سنقوم بتعديل ملف build.gradle ليتناسب مع الموجود هنا

android {
    defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "com.example.google_maps_in_flutter"
        minSdkVersion 20                      // Update from 16 to 20
        targetSdkVersion 30
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }
}

---

الحصول على API KEY

تقريباً جميع خدمات Google تحتاج الحصول على Keys للتعامل معها، وإحدى هذه الخدمات هي الخرائط.

خرائط قوقل عند حد معين تحتاج دفع مبالغ مالية

جيب فلوس

API key للـANDROID

توجه إلى Google Maps Platform ثم قم بإختيار مشروعك ثم اتبع الخطوات المصورة في الأسفل:

قم باختيار Maps SDK for Android سيقوم الموقع بنقلك الى صفحة جديدة تطلب منك تفعيل هذه الخدمة. عند التفعيل سيقوم بنقلك الى صفحة جديدة.

بعد ذلك قم بالتوجه الى Credentials من القائمة الجانبية. ستظهر لك شاشة كما سترى في الصورة التالية.

الان يمكنك انشاء API KEY لتطبيق الاندرويد عن طريق الضغط على الزر في اعلى الصفحة كما ستلاحظ في الصورة التالية.

ستظهر لك نافذة تحتوي على API KEY اضغط اغلاق وقم بالضغط على اسم الـKey الجديد ستظهر لك شاشة كما في الاسفل. قم باعدادها كما هو ظاهر لك في الصورة

تحتاج للحصول على SHA-1 وذلك بتفعيل الأمر التالي في موجه الأوامر

keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android
# ويندوز
keytool -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android

الآن تم الانتهاء من الحصول على KEY للأندرويد. سنقوم بنفس الخطوات للـIOS .

API KEY للـIOS

سنقوم بالتوجه الى نفس الموقع وتفعيل Google Map for IOS وسنقوم بالحصول على الـKEY

الآن أصبحت الاكواد معنا، سنقوم الان باضافتها لمشروع Flutter

---

إضافة API KEY الى مشروع FLUTTER.

سنقوم بإضافة الأكواد او KEYS الى مجلد android ثم مجلد ios

إضافة Keys إلى ANDROID

سنقوم بالذهاب الى مجلد android في مشروع flutter بعد ذلك سنقوم اختيار app ثم مجلد src بعد ذلك main ثم سنجد ملف باسم AndroidManifest.xml، سنقوم باضافة meta داخل application تاق. كما ستلاحظ في التالي

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.map.google_map">
   <application
        android:label="google_map"
        android:icon="@mipmap/ic_launcher">
       <!-- TODO: Add your Google Maps API key here -->
       <meta-data android:name="com.google.android.geo.API_KEY"
                  android:value="XXX"/>
        <activity
            android:name=".MainActivity"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">

إضافة Keys إلى IOS

سنتوجه الى مجلد ios بعد ذلك سنقوم بفتح مجلد Runner سنجد ملف بإسم AppDelegate.swift سنقوم باجراء تغييرين في هذا المجلد.

سنقوم أولا بإضافة GoogleMap وبعد ذلك سنقوم بكتابة API Key

import UIKit
import Flutter
import GoogleMaps  // اضف هذا السطر

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GeneratedPluginRegistrant.register(with: self)

    // TODO: اكتب الكي الخاص بالاي او اس
    GMSServices.provideAPIKey("YOUR-API-KEY")

    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

---

شارفنا على النهاية ،، تماسك

عرض الخرائط عن طريق Flutter

توجه الى مجلد lib وافتح كلف main.dart وقم باضافة هذا الكود، وقم بتشغيل التطبيق. طريقة استخدام الخرائط هو نفس طريقة استخدامك أي Widget موجود في Flutter.

الان قم بتشغيل التطبيق سوء على الاندرويد او الايفون وستظهر لك النتائج كما في الصورة في الاسفل.

هنا يكون آخر الدرس القاكم في دروس قادمة