Flutter’da Local JSON Operasyonlari

Selamlar. Bugün içerik olarak uygulamalarımızda sıkça kullandığımız veri tipi olan JSON verisini lokal olarak nasıl yükleyebiliriz konusunu anlatmak istedim. İsterseniz hemen projemizi oluşturarak işlemlere başlayalım.

Projemi oluşturmak için terminal ekranımı açıyorum, uygun dizine gidip flutter create localjson yazıp enter’e basıyorum. Sonrasında uygulamada kullanacağım JSON verisini oluşturmak için JSONPlaceHolder sitesine gidip hazır bir içeriği kopyalıyorum. Kopyaladığım içeriği yeni bir dosya oluşturup içerisine kayıt ediyorum ve dosya adı olarak dummy_data.json yapıyorum.

Proje levelinde assets isimli bir klasör oluşturup dummy_data.json dosyamı içerisine ekliyorum. Eklediğim JSON dosyasını projeye dahil etmek için pubspec.yaml dosyasını açıp ekleme işlemini aşağıdaki gibi yapıyorum. (Aynı hizadan sağa doğru iki boşluk bırakıyoruz.)

assets:
  - assets/

Şimdi ise JSON verisini parse edebilmek için modellerimizi, metotlarımızı hazırlamamız gerekiyor. Bu işlem için https://app.quicktype.io sitesini ziyaret ediyorum. Hazır olarak aldığım JSON verisini sol taraftaki panele yapıştırıp, bir Class ismi verip, sağ panelde Dart dilini seçtikten sonra sınıfımı oluşturuyorum.

person_model.dart

Artık modellerimiz ve metotlarımız hazır. Sırada ise lokal olarak JSON verisini yükleyip, parse edip listeye atamak var.

it loads and parses local JSON

JSON verimizi parse edip listeye atadık, şimdi ise ListView.builder kullanarak liste elemanlarımı ekranda gösterebilirim.

show each person on the list

Bütün işlemlerden sonra ekranımdaki görüntü yukarıdaki gibidir. Son olarak uygulamalarınızda kullanabileceğiniz eklemesi çok basit, çok kullanışlı bir widget olan Dismissible widgetini ekleyip yazıyı sonlandırıyorum.

Bu widget sayesinde bizim belirlediğimiz yöne doğru liste elemanlarını çok tatlı bir şekilde silebiliriz. Önemli olan ayrıntı ise key değerini UniqueKey() olarak veriyoruz bu sayede listeden bir eleman silindiği zaman silinen widget ağaç yapısından da silindiği için bir hata almıyoruz.

Sağdan sola doğru liste elamanını silebiliyoruz.

Umarım faydalı bir içerik olmuştur. Projeye aşağıdaki linkten ulaşabilirsiniz.

kadirbekar/flutter_local_json