FLUTTER: Google Maps Kullanımı Ve Web Servisten JSON Veri Çekme
Selamlar, bugünkü yazımda Flutter ile uygulamalarımız da Google Maps kullanımını ve JSON yardımıyla web servisten çektiğimiz verileri Marker (yer işaretleri) olarak ekranda göstermeyi anlatmaya çalışacağım, keyifli okumalar.
Projemizi Oluşturalım
Öncelikle projemizi create etmemiz yani oluşturmamız gerek. Projeyi kurmak istediğimiz alana (klasöre) giderek PowerShell penceresini açalım (Shift + Mouse sağ click basarak konsolu açabilirsiniz). Eğer projeye paket (package) adı vermez isek kendisi otomatik “package name” tanımlayacağı için dilerseniz bunu kendimiz ilk kurulum da verelim bunun için öncelikle aşağıda ki kodları yazalım.
Kurulum tamamlandıktan sonra aşağıdaki kodları girerek projemizi Visual Studio ‘da açalım.
Google Maps’i uygulamamız da kullanmak için pubspec.yaml dosyamızın dependencies kısmına google_maps_flutter: ^0.5.27+3 eklemeyi unutmayalım.
Google Haritaları Uygulamamıza Ekleyelim
Google Maps’i uygulamamız da kullanmak için öncelikle Google Cloud Platform’dan bir proje oluşturmamız ardından bu projemiz de Google Maps’i aktif hale getirmemiz ve son olarak bir API key edinmemiz gerekiyor. Yazıyı çok uzun tutmamak adına Android ve İOS için nasıl API key edinebileceğinizi anlatan linkleri buraya bırakıyorum, kolaylıkla kendiniz API_KEY oluşturabilirsiniz.
API_KEY oluşturduktan sonra Android ve iOS tarafında bazı dosyalara eklemeler yapmak zorundayız bu kısımda Android için Androd Studio, iOS için Xcode kullanmalısınız. Detaylı bilgi için bkz.
Bu bölüm de sorun yaşarsanız bu adresten daha detaylı anlatıma ulaşabilirsiniz.
Haritamızı Ekranımız’da Gösterelim
Scaffold’un body kısmında en başta eklediğimiz kütüphane yardımıyla GoogleMap widgetini kullandık.
onMapCreated harita ilk oluşturulduğun da çalışacak alandır _onMapCreated methodu ile GoogleMapController mapController bu alanda set edilir.
initialCameraPosition ise zorunlu bir parametredir. Harita, ilk açıldığında hangi konuma odaklanması gerektiğini bilmediği için bizden CameraPosition adında bir method bekler, target parametresine LatLng (langitude, longitude) sayesinde “Latitude (Enlem)“ ve “Longitude(Boylam)” değerlerini gönderebilir ve haritanın istediğimiz konumda başlamasını sağlayabiliriz. Zoom ise haritanın ne kadar yakından veya uzaktan gösterilmesini ayarlamamızı sağlayan bir parametredir.
Uygulamamızı Çalıştıralım
Evet basitçe Google Haritaların uygulamamız da nasıl kullanacağını anlattık şimdi Web Servis yardımıyla çekeceğimiz JSON veriyi ekranda “Marker” olarak gösterelim, bu bölüm biraz uzun olacak hazırsanız başlayalım :)
Web Servisten JSON Veri Çekme ve Haritamız’da Marker Olarak Gösterme
Bu bölüm de Google şirketinin bize sağladığı API sayesinde tüm dünyada bulunan Google ofislerinin bilgilerini çekeceğimiz bir JSON veriye sahibiz ve bunu haritamız da kullanacağız.
Gerekli kütüphaneleri pubspec.yaml dosyamıza ekleyelim.
Kütüphaneleri Tanıyalım
google_maps_flutter : En başta bahsettiğimiz üzere Google Haritaları uygulamamız da kullanmamız için gereken önemli bir kütüphane.
http: Web Servisimize Http isteği atacağımız için bu kütüphane olmazsa olmazımız.
json_serializable: Kısaca JSON serileştirme işlemleri için kullanılır, detaylı bilgi için bkz.
pedantic: Lint kurallarının kendi tercihlerimize göre yapılandırılmasını sağlar. Detaylı bilgi için bkz.
Lint kuralı kullanımına örnek:
analysis_options.yaml
build_runner: Eklediğimiz kütüphanelerin birbiriyle uyumlu çalışmasını sağlar ve bize derleyici desteği sunar.
JSON Verilerimizi Hazırlayalım
Bu kısımda işimizi çok kolaylaştıracak bir kütüphane kullanacağız. JSON ‘da gelen veriyi parsing etme işlemleri için bizim yerimize kodu Dart koduna çeviren bir kütüphane kullanacağız bu kütüphanenin adı “JSON To Dart”. (Buna alternatif olarak quicktype.io kullanabilirsiniz.)
Bu linkten adrese gidelim, daha önce verdiğim API ‘ye girerek CTRL+A yapalım ve tüm sayfayı kopyalayalım, “Json To Dart” adresinde ki boş alana yapıştıralım, alt kısımda ki boş alana sınıf adımızı “Locations” olarak girelim ve Generate Dart butonuna basalım. Sağ tarafta oluşan kodun tamamını kopyalayalım ve projemizde lib klasörünün altında “locations.dart” dosyası oluşturalım ve içine yapıştıralım.
ÖNEMLİ NOT : locations.dart sınıfında ki Regions sınıfımız da int zoom olarak belirlendiği için “Type Casting” hatası oluşuyor bu yüzden int zoom alanını double zoom olarak değiştirmemiz büyük önem arzediyor.
En başta http kütüphanesini projemize import etmiştik fakat hiç kullanmamıştık şimdi JSON verisini URL adresinden çekmek için http kütüphanesini kullanacağız. Ama öncelikle Locations sınıfında gerekli kütüphaneleri import etmeliyiz.
locations.dart sınıfında import etmemiz gereken kütüphaneler:
import ‘dart:convert’;import ‘dart:io’;import ‘package:http/http.dart’ as http;
Future gelecekte olabilecek potansiyel bir value veya hatayı temsil etmek için kullanılır.
Locations sınıfında asenkron bir Future sınıf yaratmamız gerekiyor, çünkü bir network çağrısı yapacağız ve bu adresten veriler geldiğinde(hazır olduğunda) ekrana gelen verileri bastıracağız.
locations.dart dosyasında network çağrısı için kullanmamız gereken kod:
İşlemler başarılıysa JSON verimiz decode edilerek yani çözümlenerek kullanabileceğimiz bir veri haline getirilecektir , eğer JSON verimiz de hata varsa HttpException hatası fırlatılacaktır.
Bu işlemlerden sonra locations.dart sınıfımız hazır hale geldi, locations.dart sınıfımızı kontrol etmek için bu linki kullanabilirsiniz bkz.
Tekrar main.dart dosyamıza gelelim şimdi en başta yazdığımız _onCreated metodunda JSON verimizden çektiğimiz konumları “ Marker ” olarak harita da göstermek için birtakım değişiklikler yapacağız. Öncelikle locations.dart dosyamıza daha rahat ulaşmak ve içinde ki getGoogleOffices fonksiyonunu kullanmak için main.dart dosyamıza aşağıda ki importu yapmalıyız, bu kod bize bir nevi static olarak fonksiyona erişmemizi sağlar.
import ‘locations.dart’ as locations;— Üst kısımda bulunan yöntemi beğenmediyseniz; dilerseniz _onMapCreated fonksiyonu içerisinde Location locations = Location() yazarak yerel bir nesne oluşturabilir ve onun üzerinden fonksiyonu çağırabilirsiniz, tercih size kalmış.
Kodumuzu açıklayalım; googleOffices değişkeni locations.dart sınıfı içerisinde ki methoddan cevap dönmesini bekler ve bunu değişkenimize atar. setState metodu içerisinde ki for döngüsü ile değişkenimiz üzerinden JSON verimizin tüm verileri alınır ve office değişkenine atanır, office değişkeni ile JSON verilerimize erişebilir ve Marker’ımızın bilgilerini verebiliriz.
InfoWindow ile Marker’a tıklandığında gelen verileri açılan kutucukta gösterebiliriz.
Not: markerID her Marker’a özel olduğu için unique olmalıdır.
Son olarak main.dart dosyamıza Marker’ları ekranımızda göstermek için markers: _markers.values.toSet() kodunu ekleyelim.
main.dart dosyamız aşağıdaki gibi olacaktır:
NOT: Biz JSON verisi içinde ki Office verilerini çektik, siz de konuyu daha iyi pekiştirmek için aynı fonksiyonu “office” olan değişkenleri “regions” ile değiştirerek test edebilirsiniz.
VE MUTLU SON…
Yazımı okuyarak zaman ayırdığınız için teşekkürlerimi sunuyorum, başka bir yazıda görüşmek dileğiyle.
Yardım ve sorunlarınız için bana bu adreslerden ulaşabilirsiniz:
References :
