Flutter ile JSON Parse Etme

Ahmed Enis Erkaya
May 8 · 3 min read

Mobil uygulama dünyası çok hızlı değişiyor. Bu değişime ayak uydurmak, yeni teknolojileri takip etmek her geliştiricinin birinci görevi olmuş durumda. Ben de “uygulamalar native mi geliştirilmeli yoksa hibrit mi?” tartışmalarının gölgesinde epeyce bir süre Java ile Android uygulamalar geliştirdim. Uygulamayı Play Store’da yayınladıktan sonra iOS işletim sistemine sahip olan cihazların da bu uygulamaya ihtiyacı olduğunu hissettim. Siz uygulama geliştiricileri de bu sıkıntıyı sıklıkla yaşamışsınızdır. Daha sonra Swift ile iOS geliştirmeye başladım. Android kadar zevk almasam da Swift ile de bir süre uygulamalar geliştirdim. Android önceki yıl Java yerine Kotlin’e geçtiğini duyurdu. Bu kez Java mı Kotlin mi soruları epeyce gündemde yer edindi. İşte son olarak bu makalenin yazılmasına da vesile olan Flutter ile Google tekrar karşımıza bir yenilik sundu. Bize de alıp kullanması kaldı. Tek seferde hem Android hem iOS kod geliştirmesi, stabil olması, çalıştırmak için “run”a basmanın yeterli olması beni Flutter’a çeken en önemli sebep diyebilirim. Ionic ve React Native ile de mobil uygulama geliştirmiş biri olarak söyleyebilirim ki Flutter bu konuda çok başarılı.

Daha fazla lafı uzatmadan asıl konumuza gelmek istiyorum. İster Android ister iOS olsun eğer bir mobil uygulama yazıyorsak elbet bir yerde JSON parse etmeye, uzak sunucular ile bilgi alışverişi yapmaya ihtiyaç duyarız. Rest servisler bu noktada yardımımıza koşar. Gelen cevabı uygulamamızın içerisinde güzel bir şekilde kullanmalıyız. Android geliştirenler Gson, Swift 4 ile mobil uygulama geliştirenler ise Codable’ı mutlaka kullanmıştır. Flutter’a yeni gelen bir geliştirici JSON parse etmek istediği zaman içgüdüsel olarak bu tarz bir kütüphane arıyor. :) JSON’u bir Flutter objesine dönüştürmek manuel olarak dart:convert ile gayet kolay yapılabilir. Peki JSON objemiz karmaşıksa ve gson gibi kütüphanelere alışmış bir geliştirici isek ne yapacağız? Gelin birlikte bu soruna bir çare bulalım.

Öncelikle bağımlılıklarımızı projemize ekleyerek pubspec.yaml dosyamızı aşağıdaki gibi düzenleyelim.

dependencies:
  flutter:
    sdk: flutter
  dio: ^2.1.2
  json_annotation: ^2.2.0
  build_runner: ^1.3.3
  json_serializable: ^2.2.1

Build runner ile ihtiyacımız olan dosyaları oluşturacağız. Ayrıca ben http isteklerini daha kolay yapabilmek için dio’yu projeye dahil ediyorum. Github’dan projenin kaynak kodlarının tamamına ulaşabilirsiniz.

Sunucudan gelecek olan cevapta kullanıcı adı ve kullanıcının gittiği şehirleri içeren bir JSON objesi dönecek.

Sunucudan dönecek olan JSON

Bu JSON objesine göre Kullanıcı ve Şehir adında iki adet dart dosyalarımızı oluşturalım.

import 'package:json_annotation/json_annotation.dart';
import 'package:json_parser/model/sehir.dart';

part 'kullanici.g.dart';

@JsonSerializable()
class Kullanici extends Object {
  String ad;
  String soyad;
  List<Sehir> gezilenYerler;

  Kullanici(this.ad, this.soyad, this.gezilenYerler);

  factory Kullanici.fromJson(Map<String, dynamic> json) =>
      _$KullaniciFromJson(json);
}

@JsonSerializable annotationını eklediğimiz zaman bu class artık bir json objesine çevrilebilir ve json objesinden oluşturulabilir demiş oluyoruz. part ‘kullanici.g.dart’; olarak eklediğimiz .g.dart dosyası builder tarafından bizim için oluşturulacak olan dosyanın adı. Builder’i çalıştırmadan önce bu tanımı veriyoruz. factory constructor olarak tanımladığımız son satırdaki yer ise yine builder tarafından oluşturulacak olan kullanici.g.dart dosyasında bulunan Kullanıcı sınıfımızı JSON’dan parse edecek olan method. Henüz kullanici.g.dart dosyasını oluşturmadığımız için altını kırmızı çizecektir. Sorun yok endişe etmeyin. :)

import 'package:json_annotation/json_annotation.dart';

part 'sehir.g.dart';

@JsonSerializable()
class Sehir extends Object {
  String sehirAdi;
  int plakaKodu;

  Sehir(this.sehirAdi, this.plakaKodu);

  factory Sehir.fromJson(Map<String, dynamic> json) => _$SehirFromJson(json);
}

Sehir classının yapısı da yukarıdaki gibidir.

Şimdi en başta eklediğimiz build_runner aracılığı ile hazırladığımız sınıflara göre JSON’u parse edecek, build runner tarafından bizim için otomatik olarak oluşturulacak .g.dart uzantılı dosyaları oluşturmak için gereken komutu terminale yazalım.

flutter packages pub run build_runner build

Komutu yazdıktan sonra aşağıdaki görselde yer alan terminal çıktısına benzer bir çıktı ile karşılaşmanız bekleniyor.

kullanici.g.dart ve sehir.g.dart dosyalarının oluştuğunu ve içerisinde _$(sınıfAdı)ToJson ve _$(sınıfAdı)FromJson isminde iki adet method yer aldığını göreceksiniz. Builder bizim için gereken sınıfları ve methodlarını oluşturmuş oldu.

Herşey hazır ise, JSON verimizi dart objesine dönüştürelim. Sadece tek satır ile bütün bu işlemi gerçekleştireceğiz.

Kullanici kullanici = Kullanici.fromJson(jsonValue);

Sunucudan gelen json değerini parametre olarak Kullanıcı sınıfında tanımlı olan fromJson methoduna veriyoruz. Artık kullanıcı nesnesini istediğimiz gibi kullanabiliriz.

Projenin kaynak kodlarına github adresimden ulaşabilirsiniz.

İyi kodlamalar!

Kaynaklar:

https://medium.com/@studymongolian/parsing-simple-json-in-flutter-83ee1809a6ab

https://medium.com/flutter-community/parsing-complex-json-in-flutter-747c46655f51

https://medium.com/flutterdevs/parsing-complex-json-in-flutter-b7f991611d3e