Flutter json parçalama

Hoş geldiniz. Bu yazımda Flutter json parçalama işlemlerine değinmek istiyorum hazırsanız başlayalım…

Öncelikle veriyi çekeceğimiz adresi sizlerle paylaşıyorum: http://jsonplaceholder.typicode.com/todos 

Burada dikkat etmemiz gereken şey, verilerin  dizi parantezleri (‘ [ ] ‘ ) içinde geliyor olması. Bu dizi içinde, süslü parantezler (‘{ }‘ ) içinde bırakılmış her bir eleman ise birer map. Bu demek oluyor ki veriyi dizi olarak ele alıp, her bir elemanı yazacağımız model sınıfına göre maplemeliyiz.

Hem TodoModel hemde TodoList sınıflarını model.dart adında tek bir dart dosyasında topluyorum.

TodoModel sınıfında json içinde gördüğümüz verileri değişken olarak oluşturuyoruz. Her bir elemanın değerini ise json içinden alıyoruz. Burada fromJson olarak adlandırdığımız metot aslında constructor ve parametre olarak ise bir map alıyor. (Her bir elemanın map olduğundan bahsetmiştik) Map ilk parametre olarak string alıyor çünkü keye karşılık gelen veriler yani userId, id gibi değerler string türünde. Value kısmını dynamic olarak veriyoruz çünkü value değeri farklı türlerde geliyor. 

class TodoModel {
  String userId;
  String id;
  String title;
  bool completed;
  TodoModel({this.userId, this.id, this.title, this.completed});
  factory TodoModel.fromJson(Map<String, dynamic> json) {
    return TodoModel(
      userId: json['userId'].toString(),
      id: json['id'].toString(),
      title: json['title'].toString(),
      completed: json['completed'],
    );
  }
}

Her bir elemanın nasıl bir yapıda olacağını belirlemiş olduk. Şimdi json dizisinden gelecek bu elemanları TodoModel formatında maplemek kaldı.

Veriyi TodoModel sınıfında modellediğimizden işimiz çok kolay. Yeniden bir constructor oluşturuyoruz yani fromJson. Verinin bize dizi olarak geldiğini bildiğimizden parametre olarak dizi veriyoruz. Parametreden gelen bu diziyi TodoModele göre mapleyip tekrar diziye çeviriyoruz ve todo dizisine atıyoruz. Böylelikle her bir elemanı istediğimiz formata getirip bir diziye atmış olduk.

class TodoList {
   final List todo;
   TodoList({this.todo});
   factory TodoList.fromJson(List parsedJson) {
      List todo = List();
      todo = parsedJson.map((i)=>TodoModel.fromJson(i)).toList();
      return TodoList(todo: todo);
}
}

Kodlarımızı model.dart altında birleştiriyoruz.

model.dart 

class TodoList {
  final List todo;
  TodoList({
    this.todo,
  });
  factory TodoList.fromJson(List parsedJson) {
    List todo = List();
    todo = parsedJson.map((i)=>TodoModel.fromJson(i)).toList();
    return TodoList(
        todo: todo
    );
  }
}
class TodoModel {
  String userId;
  String id;
  String title;
  bool completed;
  TodoModel({this.userId, this.id, this.title, this.completed});
  factory TodoModel.fromJson(Map<String, dynamic> json) {
    return TodoModel(
      userId: json['userId'].toString(),
      id: json['id'].toString(),
      title: json['title'].toString(),
      completed: json['completed'],
    );
  }
}

Artık verilerimizi widgetlere basmaya hazırız. Yaml dosyanıza http kütüphanesini eklemeniz yeterli. Burada _getData  geriye TodoList türünde veri döndüren asenkron bir metot. Http isteğinden geriye dönen body ise dizi türünde. Hatırlarsanız TodoList sınıfının fromJson metoduna parametre olarak bir dizi geleceğini söylemiştik.  Artık FutureBuilder içinde verilerin isimleriyle erişim sağlayabiliyoruz.

main.dart

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'model.dart';

void main() {
  runApp(Home());
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State {
  Future<TodoList> _getData() async {
    var _response =
        await http.get('https://jsonplaceholder.typicode.com/todos');
    return TodoList.fromJson(json.decode(_response.body));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Json-Parçalama'),
      ),
      body: Container(
        child: FutureBuilder(
 //Future türünde bir metot bekliyor, yukarıda tanımladığımız metodu yolluyoruz.
          future: _getData(),
          builder: (BuildContext context, AsyncSnapshot<TodoList> snapshot) {
 //Eğer data mevcutsa verileri widgetlere basıyoruz.
            if (snapshot.hasData) {
              return ListView.builder(
 //Dizinin uzunluğu kadar liste oluşturmalıyız.
                itemCount: snapshot.data.todo.length,
                itemBuilder: (BuildContext context, int index) {
                  return Card(
                    elevation: 5.0,
                    child: ListTile(
                      title: Text(snapshot.data.todo[index].title),
                      leading: Text(
                        snapshot.data.todo[index].id,
                        style: TextStyle(fontSize: 20.0),
                      ),
//Completed boolean bir değer ve duruma göre icon gösteriyoruz. 
                      trailing: snapshot.data.todo[index].completed
                          ? Icon(
                              Icons.done,
                              color: Colors.blue,
                            )
                          : Icon(
                              Icons.close,
                              color: Colors.red,
                            ),
                    ),
                  );
                },
              );
            } else {
 //Data henüz gelmediyse progress gösteriliyor.
              return Center(
                child: CircularProgressIndicator(),
              );
            }
          },
        ),
      ),
    );
  }
}

Her şey tamamsa aşağıdaki gibi bir ekran sizi bekliyor olmalı 🙂

Bir sonraki yazıda görüşmek üzere…