Flutter’da API ile çalışıp, response edilen JSON’u parçalayıp uygulamada kullanacağız.
API Seçimi
Kullanımı oldukta kolay olan bir API’yı kullanacağım. Üstteki fotoğrafta var olan json listeleri var. Burada postslarla çalışacağım.
Gelen JSON Örneği;
JSON Sınıfı Model Yaratma
Blog.fromJson(Map json)
: id = json['id'],
title = json['title'],
body = json['body'];
Bu model sınıfını, buradan hızlıca otomatik oluşturabilirsiniz. Dil seçiminin Dart olmasına dikkat etmeniz gerekir.
Burada gelen JSON’un parçalanıp, JSON name e göre modeldeki ilgili değişkenlere gitmesi sağlanır.
Şöyle ki fromJSon ile bir MAP oluşturulur. Bu map, bir key ve value’dan ibarettir. Key, ilgili gelen value un kimliğini oluşturur ve requetleri keye göre yaparız. Buradaki key’ler id, title ve body’dir. Bir üstteki görsele göre konuşursak, userId’den gelen değerler, id’ye, title ve body’den gelenler yine aynı karşılıklarına parçalanıp gidecektir.
API
Burada Future içinde ilgili url’i çağırarak, http kütüphanesinden yararlanıp, url’in çağırmasını sağladık. Future olduğu için bir response bekleyecektir ve gelen duruma göre url i döndürecektir.
var url = baseUrl + "/posts";
bunun sebebi ise, url’i parçalamaktır. Bazı durumlarda aynı urlden birden fazla farklı istek atabiliriz, uzun uzun yeniden yazmak yerine parçalayarak değişken geline getirmek daha mantıklı. Çünkü ana url belli ve istek atacağımız alanlar değişebilir.
JSON Parçalama ve UI Oluşturma
Adım adım gitmek gerekirse;
var blogs = new List<Blog>();
İlk olarak Blog’dan gelen bir List oluşturduk.
Sonrasında _getBlog(), API.getPosts() metodunu çağırdık. then(response) denilmesinin sebebi ise getPosts() bir Future olduğu için, return ettikten sonra ne yapayım? veya ne yapmamı istersin? diyor.
Biz de “then(response)” diyerek yani, Future sonrasında response başarılı olup olmadığının kontrolünü yaptık. Sonrasında setState() içinde bir itarable list içinde gelen response JSON’a çevir ve blogs isimli List içine “key value” şeklinde mapleyerek liste oluştur diyoruz. Aşağıdaki kodun esasında yaptığı iş budur.
Sonrasında initState() içinde yani screen active olduğunda çalışmasını sağladık.
_getBlog() {
API.getPosts().then((response) {
if(response.statusCode == 200){
print(response.statusCode);
setState(() {
Iterable list = json.decode(response.body);
blogs = list.map((model) => Blog.fromJson(model)).toList();
});
} else {
print(response.statusCode);
}
});
}
Gelelim ListView.Builder kullanarak, API’den gelen JSON verilerini widget içinde göstermeye.
Eğer Listview.Builder için yeterli bilginiz yoksa buraya bakabilirsiniz.
title: Text(“Title: ${blogs[index].title}”, style: TextStyle(fontWeight: FontWeight.w700),),
Burada index’e bağlı tüm title’ları çağırıp, ekrana bastırıyoruz. Subtitle içinde de response edilen body verilerini ekrana bastırıyoruz.
child: Text(blogs[index].title[0]),
Bunun anlamı, CircleAvatar() içinde, title’ın ilk harfini getirmek için title[0] diyerek, ilk harfi bastırdık.
OnTap Metodu ve Detay IU Yapımı
ListTile halinde tüm postsları title ve body halinde getirdik ve ekranda bastırmayı başardık. Peki bir haber uygulaması olarak düşünürsek, ilgili başlığa tıklayarak yeni bir sayfada detayları görmek istiyorsam?
Bunun için tabii ki ilgili positionu alarak, tıklamayı dinleyip, yine ilgili positiondaki title ve body’i yeni bir screene gönderip orada ekrana bastırmamız gerekmektedir.
onTap: () => Navigator.push(
context, MaterialPageRoute(builder: (context) => DetailScreen(blogs[index].title, blogs[index].body))),
Burada ListTile’ın onTap() metoduyla, MaterialPageRoute kullanarak, tıklanıldığında DetailScreen()’e title ve body’e gönderebiliyoruz.
Dikkat: DetailScreen()’a iki değeri gönderebilmek için önce DetailScreen’i oluşturup constructor metodunda title ve body’i yazmamız gerekmektedir.
class DetailScreen extends StatelessWidget {
String title;
String body;
DetailScreen(this.title,this.body);
Burada da gelen title ve body’i basit bir şekilde Text içinde bastırdık.
Ve başarılı olarak API’den response edip gelen JSON’u parçalayıp ui içinde gösterebildik. Sonrasında bu veriyi iki screen arasında gönderip, detay sayfasında gösterdik.
