FLUTTER İLE HAVA DURUMU UYGULAMASI

Merhabalar bugün size Flutter kullanarak yapmış olduğum basit bir hava durumu uygulamasını göstereceğim.

Bu uygulama ile API'dan veri çekip bunu ekrana basmayı öğreneceğiz.

Öncelikle bize şehir ararken yardımcı olması için AutoComplete widget'ını kullanacağız. Bu widget'a liste tipinde bir değişken vermemiz gerekiyor. Bunun için bir listeye tüm şehirleri atacağız. Bunu elle yapmayacağız, bir json dosyasından çekip listeye aktaracağız. Gerekli json dosyasına buradan ulaşabilirsiniz.

Bu json dosyasını indirdikten sonra flutter projemizin içine attık. Lib'in altında assets klasörü oluşturup onun içine atabilirsiniz. Bu json dosyasını asset olarak tanıtabilmemiz için pubspec.yaml dosyasının içine

assets:
  - lib/assets/cities.json

ekliyoruz. Json dosyamızı tanıttıktan sonra sıra modelimizi oluşturmaya geldi.

Modelimiz bu şekilde. Api'dan şehir ismi, sıcaklık değeri ve açıklamasını alacağımız için modelde 3 alan oluşturdum. Sıra servis dosyasını yazmaya geldi.

Bu dosyada ise Api'a istek atıyoruz. İstek attığımız url "https://api.openweathermap.org/data/2.5/weather?q='+city+'&lang=tr&units=metric&appid=..."

Url'in sonunda gördüğünüz "appid=..." kısmı sizin bu siteye girip kaydolduğunuzda aldığınız bir anahtarı koyacağınız kısım. Yani OpenWeather sistemine kaydolacaksınız, size bir app id verilecek, siz de istek url'inin sonuna "appid=" şeklinde koyacaksınız. Böylece api'a erişim sağlamış olacaksınız.

Servis dosyasında gördüğünüz readJson adındaki fonksiyon ile cities.json dosyasını okuyoruz. Json dosyasını okuduktan sonra geriye dönen cevabı bir map'e atıyoruz. Sonra map'in "cities" indeksli kısmını return ediyoruz.

Main.dart dosyamız şu şekilde;

Modelimizi ve servisimizi import etmeyi unutmuyoruz;

import 'package:flutter/material.dart';
import 'package:weather_app/services/services.dart';

initState() {
cityListSet();
getWeather("edirne");
super.initState();
}

Uygulamamızın ilk yüklenişinde çalışan fonksiyonumuza cityListSet ve getWeather fonksiyonlarını yazdım. Sebebi, ekran çizilirken cities.json dosyasından şehirleri hemen çekip listeye atması ve uygulama ilk açıldığında istediğim şehri parametre olarak göndererek hava durumunu api'dan istemesidir.

getWeather(String city)
{
setState(() {
weatherInf = apiObj.makeList(city: city);
});
}

Bu fonksiyonumuzda ise servis dosyasından oluşturduğumuz nesne ile makeList fonksiyonuna ulaşıp istek atıyoruz. İstek url'inin içinde bulunan "city" değişkeninin içine buradan veri gönderiliyor.

cityListSet()
async {

var tempList = await apiObj.readJson();
for(int i=0; i<tempList.length;i++)
{
cityList.add(tempList[i]["name"]);
}

setState(() {

});
}

Bu fonksiyonumuzda AutoComplete widget'ının kullanacağı listenin içi cities.json dosyasının içindeki verilerle dolduruluyor. Bunu basit bir for döngüsü ile halledebilirsiniz.

Autocomplete<String>(
onSelected: (String option)
{
getWeather(cityName);
},
optionsBuilder: (TextEditingValue textEditingValue) {
cityName=textEditingValue.text;

if (textEditingValue.text == '') {
return const Iterable<String>.empty();
}
return cityList.where((String option) {

return option.contains(textEditingValue.text.toLowerCase());
});
},

)

Geriye daha fazla iş kalmıyor, ekran tasarımını yapıyoruz. Burada ekstra olan kısım Autocomplete widget'ı. Görüldüğü gibi onSelected aktif olduğunda getWeather fonksiyonu çağırılıyor. Çağırılırken cityName parametre olarak gönderiliyor. Cityname ise textEditingValue'nun aldığı değer, cityName değişkeninin içine atılırken bu değer küçük harflere çevriliyor. Çünkü api'daki şehir isimleri tamamen küçük harflerden oluşuyor.

Geriye kalan diğer kodlar ekranı süslemek için yazıldı, api'dan gelen açıklamaya göre çeşitli ikonlar ve renkler ekranı süsleyecek.

Uygulamanın tamamına github hesabımdan ulaşabilirsiniz. Github hesabım buradadır.

İşinize yarayacağını umuyorum ve iyi günler diliyorum.