Flutter’da Harita Entegrasyonu Nasıl Yapılır — 1 (GÜNCELLENDİ 2024)
FLUTTER VE PAKETLER SON SÜRÜME YÜKSELTİLMİŞTİR (29 MAYIS 2024)
Giriş
Herkese merhaba. Günümüzde mobil uygulamalarda irili ufaklı birçok harita bileşenine yer verilmektedir. Bu anlamda Google, Yandex, Here, Mapbox gibi ücretli harita sağlayıcıları olmakla beraber, açık kaynak olarak geliştirilmeye devam eden projeler de bulunmakta. Bu yazımızda Flutter ile geliştirdiğim projelerde sıklıkla kullandığım ‘flutter_map’ paketinden bahsedeceğim.
flutter_map, mobil uyumlu interaktif haritalar için açık kaynaklı bir JavaScript kütüphanesi olan Leaflet’in Dart diline entegre edilmiş halidir. Katmanlar haritaya klasik şekilde eklenebileceği gibi, son gelen güncellemeler ile widget olarak da eklenebilmektedir. Bu durum katmanları haliyle haritayı daha geniş bir perspektifte kişileştirmeye olanak sağlar. Bu yazımızda çok derinlere inmeden basit anlamda harita bileşeninin nasıl oluşturulup, katmanlar eklenebileciğini anlatacağım.
Paketin Projeye Eklenmesi
1- pubspec.yaml dosyasının düzenlenmesi
pub.dev sayfasından flutter_map kütüphanesinin istediğimiz bir versiyonunu projemize şu şekilde ekliyoruz:
2- Android cihazlar için internet izninin verilmesi
Haritanın görüntülenebilmesi için internete ihtiyacımız bulunuyor. Bu yüzden projemizin manifest dosyasına ( <project root>/android/app/src/main/AndroidManifest.xml )gerekli izin bilgilerini yazıyoruz:
Paketi projemize ekledikten ve gerekli ayarlamaları yaptıktan sonra artık harita bileşenimizi oluşturmaya hazırız.
Harita Bileşeninin Oluşturulması
1- Harita seçenekleri
Bir harita bileşeni oluştururken katmanları eklemeden önce harita seçeneklerini ( MapOptions ) tanımlamamız gerekiyor. Aşağıda gördüğünüz seçeneklerde haritanın başlangıç noktası ( center ) için enlem boylam ve zoom seviyesi tanımlanmıştır:
2- Altlık katmanı eklenmesi
Öncelikle haritanın daha anlaşılır bir hale gelebilmesi için bir altlık katman eklememiz gerekiyor. Bunun için yine açık kaynak olarak geliştirilen bir harita altlığı olan ‘’Open Street Map’’i kullanacağız:
Bu aşamada ‘TileLayer’ olarak yayınlanan diğer altlıkları da kolaylıkla haritamıza eklebiliyoruz. Birkaç ücretsiz altlık katmanı örneği vermek gerekirse:
3- Nokta katmanı (Marker) eklenmesi
Nokta katmanı harita üzerinde göstermek istediğiniz enlem ve boylama sahip noktaların gösterimini sağlar. Noktalarımızın gösterimini yaparken widget mantığı ile hareket edeceğimiz için, float action buttondan icona, textten ayrıca bir paketten ekleyeceğimiz widgeta kadar her objeyi tanımlayabiliyoruz. Bu yazımız giriş seviyesi olduğu FlutterLogo widgetını tanımlamayı tercih ettim.
Öncelikle noktalarımızı Marker olarak bir liste içinde tanımlayıp FlutterMap widgetımızın içinde layersın altına MarkerLayer’a eklememiz gerekiyor:
Sonuç
Günümüzde konum bilgisi birçok alanda karşımıza çıkmakta ve bu bilginin gösterimini kolaylaştıracak teknolojiler her geçen gün artmaktadır. Her ne kadar ücretli (token veya api key bağımlı) birçok bileşen olduğu gibi açık kaynak bileşenler de bulunmaktadır. flutter_map, basit veya kompleks harita gösterimlerini yapabildiğimiz, tamamen ücretsiz bir paket. Önümüzdeki yazılarda farklı ve gelişmiş özelliklerini irdeleyeceğimiz paket için bu yazımız için bu kadar. Örnek projeye Github üzerinden ulaşabilirsiniz. Bol ‘widget’lı günler!
Kaynaklar
