تركيب الخريطة في تطبيقك وشرح لكيفية الحصول على عنوانك في Flutter

تركيب الخريطة في تطبيقك وشرح لكيفية الحصول على عنوانك في Flutter

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

تعد كيفية تحقيق الأداء الأصلي للتطبيق وكيفية تسهيل تصميم الميزات المتنوعة للأجهزة والأنظمة الأساسية قدر الإمكان على المطورين من الصعوبات الرئيسية التي تواجه أطر العمل عبر الأنظمة الأساسية للجوّال. عند القيام بذلك ، ضع في اعتبارك أن تجربة المستخدم يجب أن تكون متسقة مع دمج العناصر المميزة الخاصة بكل نظام أساسي (Android و iOS). على الرغم من أن الأطر المشتركة بين الأنظمة الأساسية يمكنها عادةً معالجة المشكلات الخاصة بالمنصة ، إلا أن هناك بعض الوظائف التي لا يمكن إنجازها إلا من خلال التعليمات البرمجية الخاصة بالنظام الأساسي المكتوبة خصيصًا. السؤال الرئيسي هو كيف يمكن لهذه الأطر إنشاء اتصال بين النظام الأساسي والتطبيق المعينين. 

اضافة permission داخل ملف manifest  للاندرويد

في البداية تحتاج الى key من الموقع الخاص ب google api حتى تتمكن من اظهار الخريطة وبعد الحصول عليه انتقل الى manifest حتى وقم بوضعه في المكان المناسب كما هو موضح , وهذا يكون مخصص لاجهزة الاندرويد .

manifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.maps">

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


    <application
    
		...

        <meta-data android:name="com.google.android.geo.API_KEY"
            android:value="KEY###"/>

    </application>
</manifest>

التاكد من فتح المستخدم للموقع قبل عرض الخريطة

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

LocationHelper.dart

class LocationHelper {

  static Future<Position> getCurrentLocation() async {
    bool serviceEnabled = await Geolocator.isLocationServiceEnabled();

    if (!serviceEnabled) {
      await Geolocator.requestPermission();
    }

    return await Geolocator.getCurrentPosition(
        desiredAccuracy: LocationAccuracy.high);
  }

}

عرض الخريطة مع امكانية عرض مكان المستخدم بداخل Flutter

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

android sdk manager تحميل flutter developers applications create app android android studio mac

maps.dart

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:geolocator/geolocator.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:untitled/maps/utils/location_helper.dart';

class MainMaps extends StatefulWidget {
  const MainMaps({Key? key}) : super(key: key);

  @override
  State<MainMaps> createState() => _MainMapsState();
}



class _MainMapsState extends State<MainMaps> {

  static Position? position;
  final Completer<GoogleMapController> _controllerMaps = Completer();

  static final CameraPosition _myCurrentLocationNow = CameraPosition(
    //عرض موقع المستخدم على الخريطة مع بعض الخصائص مثل نسبة التقريب
    // نسبة جعل الكاميرا مائله
    bearing: 0.0,
    // موقع المستخدم
    target: LatLng(position!.latitude, position!.longitude),
    tilt: 0.0,
    // نسبة التقريب
    zoom: 18,
  );

  Future<void> getMyLocationNow() async {
    // الحصول على موقع المستخدم بمجرد فتح الخريطة وتحديث الصفحة بالموقع الحالي
    position = await LocationHelper.getCurrentLocation().whenComplete(() => setState((){}));
  }

  Future<void> _goToMyLocationNow() async {
    // الانتقال الى موقعي بمجرد تنفيذ هذه الوظيفة
    final GoogleMapController controller = await _controllerMaps.future;
    // الانتقال الى موقع المستخدم الموجود في CameraPosition مع انميشن بسيط لحركة الكاميرا
    controller.animateCamera(CameraUpdate.newCameraPosition(_myCurrentLocationNow));
  }


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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          position == null ? const Center(child: CircularProgressIndicator()) : buildMaps(),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _goToMyLocationNow,
        child: const Icon(Icons.location_searching),
      ),
    );
  }

  Widget buildMaps(){
    return GoogleMap(
      // نوع الخريطة
      mapType: MapType.normal,
      // وجود علامة زرقاء لاظهار موقعك الحالي على الخريطة
      myLocationEnabled: true,
      // اضافة زر في اعلى الخريطة للانتقال المباشر الى موقعك الحالي
      myLocationButtonEnabled: false,
      // وجود علامة التكبير والتصغير للخريطة في اسفل الخريطة
      zoomControlsEnabled: false,
      // الحصول على موقع المستخدم بمجرد فتح الخريطة وتحديث الصفحة بالموقع الحالي
      initialCameraPosition: _myCurrentLocationNow,

      onMapCreated: (GoogleMapController controller){
        _controllerMaps.complete(controller);
      },

    );
  }

}