Flutter Egzersizleri #1

Her hafta 1 konu ele alacağım basit Flutter egzersizleri yapmak istiyorum. Bu Flutter egzersizlerinde büyük bir proje anlatılmayacak ancak büyük projelerde kullanılan bazı özelliklerin değinilmesi esas alınacak. Öyleyse hemen başlayalım.

İlk hafta ele alacağım konu: Local bir json dosyasından veri çekmek. Aynı zamanda basit Map işlemlerine değineceğim. Ara ara Github sayfamdan linkler vererek kodlara erişebileceksiniz.

Yapılan projenin kısa bir videosuna Youtube sayfamdan ulaşabilirsiniz. Yapılan ilk egzersizimizin basit bir ekran görüntüsü:

Flutter – Local Json Dosyası

Verilen Json dosyasından 5 tane bilgi gelmektedir. Bunun için Model dosyası oluşturacağız. Ardından sayfa tasarımına başlayacağız. ilk önce bize verilen Json dosyasını incelememiz gerekmektedir. Bir tanesini ele alalım.

{ "base": 'BTC', "quote": 'USDT', "type": 'SPOT', "lastPrice": 43899.92, "volume": 246944876.72997272, },

Oluşturacağımız model de önceliğimiz olan 5 tane nesne bulunmaktadır. Şimdi bunları json dosyasından decode yapabilmemiz lazım. Öyleyse ilk başta modelimizi oluşturalım.

Flutter – Model Dosyası

Model için Github linkime tıklayabilirsiniz.

Model sayfası klasik model sayfaları gibi. Artı bir espirisi yok. Nesneleri oluştur, Constructor’da çağır ve ardından Json dosyasından çek.

factory Currency.fromJson(Map json) { return Currency( base: json['base'] ?? "", quote: json['quote'] ?? "", type: json['type'] ?? "", lastPrice: json['lastPrice'] ?? 0.000, volume: json['volume'] ?? 0.000, ); }

Burada önemli olan husus json [‘…’] içerisinde yazılan kelimenin aynen json dosyasında ki eşleşmesi lazım o kadar.

Flutter – Sayfa Tasarımı Dosyası

Sayfa tasarımı için Github linkime tıklayabilirsiniz.

Burada önemli olan bir kaç husus daha var. Bunlar DropDown gibi Widgetların kullanım şekilleri ya da bir listi Map’leme yöntemi vs. Ancak ilk başta kodun genel olarak çalışma şeklini ele alalım.

Sayfamızın ilk initState() kısmında json’dan gelen veriyi çekebilmemiz gerekmektedir. Bunun için kullanılan yöntem ise List olarak tuttuğum bu verileri Map’leme yaparak Json’dan veri çekiyoruz.

@override void initState() { currencyList = currencyData.map((e) => Currency.fromJson(e)).toList(); super.initState(); }

şimdi oluşturulan bu currencyList’i yine Mapleme yaparak ListView içerisinde kullanabiliriz. Bu bize şu avantajı sağlıyor. Ayrı ayrı uğraşmak yerine, Map’ten gelen e’yi kullanarak örneğin e.base.toString() gibi istediğimiz şekilde kullanabiliyoruz.

Evet kısaca bu şekilde. Amaç sayfa tasarımı olmadığı için sayfa tasarımına çok girmemeye çalıştım. Ancak basit Stack kullanımı, DropDown kullanımı gibi kullanımlar da bir sıkıntınız varsa yorum olarak yazabilirsiniz.

Bir sonraki egzersizde amacımız bir API’dan veri çekmek olacak. Bunun için çok kullanılan OpenWeather API servisini kullanacağız. Bir sonraki egzersizde görüşmek üzere.

Github linkine tıklayarak kodlara bakabilirsiniz.

E-bültene Abone Ol Merak etmeyin. Spam yapmayacağız.

Yazar

Gezen, okuyan ve sıradanlıktan kurtulmak isteyen bir öğrenci

İlgili Yazılar

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

Hızlı yorum için giriş yapın.

Kayıt Ol

VEYA

Zaten üye misiniz? Giriş Yap

Giriş Yap

VEYA

Henüz üyeliğiniz yok mu? Kayıt Ol