Flutter’da Json Parçalama Ve Manipüle Etme: Kripto Para Uygulaması
Herkese merhaba, ana konuya girmeden önce Json ve Api’ların ne olduğunu bilmiyorsanız ve bilgi sahibi olmak istiyorsanız aşağıdaki makalelere göz atabilirsiniz.
Peki Biz Ne Yapacağız?
Kripto paraları
- Anlık olarak güncellenen
- Girilen coin ismine göre kullanıcıya verileri sunan
- Her bir kripto paranın günlük değişimi gösteren bir uygulama yapacağız.
Hadi Başlayalım!
- Adım
- Dosya ve klasör yapısını oluşturalım.
- Http paketini ekleyelim.
Kullanacağımız API : https://min-api.cryptocompare.com
Çekeceğimiz json verilerine bakalım. Aşağıda görüldüğü üzere baya detaylı bilgiler bulunmakta ama bize lazım olan Coin’in:
- tamAdı =>(CoinInfo [FullName])
- adı =>(CoinInfo[Name])
- fiyatı => (RAW[USD][PRICE])
- 24 saatlik değişimi =>(RAW[USD][CHANGE24HOUR]).
2. Adım
Coin adında bir Class oluşturalım. Bu Class’ın parametrelerini ve yapıcı method (constructor) larını yazalım.
Kodu özetlemek gerekirse bir tane factory constructor yaratıyoruz sonra istediğimiz json verilerini bir map’e atıp fromjson() methodu ile Coin objeleri yaratıyoruz. Kaç tane Coin objesinin olmasını istiyorsak bunu belirtebiliriz. (ilerdeki sayfada sayı vereceğiz, ben 100 tane verdim siz değiştirebilirsiniz )
3. Adım
Coin modelini yarattık, şimdi gerekli bağlantıları ekleyelim ve Services class’ını oluşturalım.
Bir tane getCoins adında bir method tanımlıyoruz. Bu metotun tipi Coin objelerinden oluşan bir Future olacak.
Future Nedir?
Asenkronize(Eş zamansız) veri getirmek istediğimizde kullandığımız bir sınıftır.
Peki url’i yazdık ve coins adında bir liste oluşturduk try catch ile kontrol edelim.
Eğer Http’den gelen yanıt 200 ise (yani başarılı ise bağlantı) yukarıda eklediğimiz ‘dart:convert’ paketi sayesinde json verilerini decode ediyoruz ve data adında bir map’e atıyoruz. Bize lazım olan veriler [‘Data’]’nın içinde olduğu için bunu bir listeye atıyoruz. Sonra verileri başta tanımladığımız coins listesine atıp return ediyoruz.
4. Adım
Ana sayfayı oluşturalım.
Coins sınıfı tipinde coins ve filteredCoins adında iki tane liste oluşturalım. Oluşturduğumuz coins listesi bütün kripto paraları gösterecek filtered coins ise kullanıcının arattığı kripto paraları gösterecek. Örneğin şöyle olacak:
Aslında yaptığımız şey oldukça basit, kullanıcının arattığı veriye göre her seferinde yeni bir liste yaratıyoruz. Başlangıçta tüm kripto paraları göstermek istediğimizden initState() de gerekli tanımlamaları yapıyoruz.
buildBody() adında kendi widget’ımızı yaratalım.
Bu widget’ı kısaca özetlemek gerekirse bir FutureBuilder döndürecek eğer bir hata olursa CircularProgressIndicator() sürekli dönecek ve verileri göremeyeceğiz eğer herhangi bir sorun yoksa RefreshIndicator() widget’ını return edeceğiz.
RefreshIndicator() widget’ının onRefresh parametresine Future tipinde methodumuzu ekliyoruz.
Aslında söylediğimiz şey her sayfayı yenilediğimizde verileri 3 saniye beklet sonra değişiklikleri göster.
TextField() widget’ında kullanıcının arattığı harf ve harfleri içeren coinleri filteredCoins’e atıyoruz. Sonra Listview.Builder ile her bir filteredCoins’ in numarasını,adını,tamAdını ve fiyatını gösteriyoruz.
Günlük değişimini detaylar sayfasında göstermek için ListTile()’ın onTap() parametresine navigation’ı ekleyelim. DetailsPage sınıfına filteredCoins[index] parametresini gönderelim. Böylelikle her bir kripto paranın detayları için ayrı detaylar sayfası yaratmamıza gerek kalmaz.
5.Adım
Her bir kripto paranın detaylarını görmek için bir detaylar sayfası yaratalım.
DerailsPage class’ını oluşturalım ve Coin tipinde bir değişken ve yapıcı metotu oluşturalım. Artık kripto paralarının detayları üstünde çalışabiliriz.
Kripto paranın adını appbar’da gösterdik . 24 saatlik değişimi de eğer pozitif ise yeşille negatif ise kırmızı ile gösterelim.
Uygulama burada sona eriyor okuyan herkese teşekkürler. Kaynak koduna aşığadaki linkden ulaşabilirsiniz.
