CodeBlanks Logo Icon CodeBlanks

Meydan okuma 2

http ve fromJson ile API listesi çeken ekran yaparsın.

API listesi çekme

Bu meydan okumada http.get ile bir API'den JSON listesi çeker, jsonDecode ile List'e çevirir ve .map((e) => Model.fromJson(e as Map<String, dynamic>)).toList() ile model listesi üretirsin. Elde edilen liste bir ListView.builder ile gösterilir.

Future<List<Kullanici>> getir() async {
  final res = await http.get(Uri.parse(url));
  final liste = jsonDecode(res.body) as List;
  return liste
      .map((e) => Kullanici.fromJson(e as Map<String, dynamic>))
      .toList();
}

Bu fonksiyon FutureBuilder ile birlikte kullanılmaya hazırdır.

Uygulama kullanicilariGetir fonksiyonu

kullanicilariGetir adında async fonksiyon yaz. http.get(Uri.parse(url)) ile istek at, jsonDecode(res.body) sonucunu as List ile liste al, her elemanı Kullanici.fromJson(e as Map<String, dynamic>) ile modele çevirip .toList() ile listeye dönüştür ve döndür. main içinde url'yi yazdır.

Başlangıç kodu

main.dart
import 'dart:convert';
import 'package:http/http.dart' as http;

class Kullanici {
  final String ad;
  Kullanici(this.ad);

  factory Kullanici.fromJson(Map<String, dynamic> json) {
    return Kullanici(json['ad'] as String);
  }
}

const url = 'https://api.example.com/kullanicilar';

// kullanicilariGetir fonksiyonunu yaz
// http.get ile istek at
// jsonDecode ile List'e çevir
// her elemanı Kullanici.fromJson ile modele çevir
// sonucu liste olarak döndür

void main() {
  // url'yi yazdır
}

Örnek çözüm

main.dart
import 'dart:convert';
import 'package:http/http.dart' as http;

class Kullanici {
  final String ad;
  Kullanici(this.ad);

  factory Kullanici.fromJson(Map<String, dynamic> json) {
    return Kullanici(json['ad'] as String);
  }
}

const url = 'https://api.example.com/kullanicilar';

Future<List<Kullanici>> kullanicilariGetir() async {
  final res = await http.get(Uri.parse(url));
  final liste = jsonDecode(res.body) as List;
  return liste
      .map((e) => Kullanici.fromJson(e as Map<String, dynamic>))
      .toList();
}

void main() {
  print(url);
}

Beklenen çıktı

https://api.example.com/kullanicilar

Uygulama ListView builder ile liste

KullanicilarEkrani adında StatelessWidget tanımla. final List<Kullanici> kullanicilar alanı required olsun. build metodu bir Scaffold döndürsün; gövdesi ListView.builder olsun. itemCount kullanicilar.length olsun ve itemBuilder her satırda ListTile(title: Text(k.ad)) döndürsün. main içinde 'hazir' yazdır.

Başlangıç kodu

main.dart
import 'package:flutter/material.dart';

class Kullanici {
  final String ad;
  Kullanici(this.ad);
}

// KullanicilarEkrani StatelessWidget tanımla
// final List<Kullanici> kullanicilar (required)
// build Scaffold döndürsün
// gövde ListView.builder olsun
// itemCount kullanicilar.length
// itemBuilder ListTile döndürsün

void main() {
  // 'hazir' yazdır
}

Örnek çözüm

main.dart
import 'package:flutter/material.dart';

class Kullanici {
  final String ad;
  Kullanici(this.ad);
}

class KullanicilarEkrani extends StatelessWidget {
  final List<Kullanici> kullanicilar;
  const KullanicilarEkrani({super.key, required this.kullanicilar});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Kullanıcılar')),
      body: ListView.builder(
        itemCount: kullanicilar.length,
        itemBuilder: (context, index) {
          final k = kullanicilar[index];
          return ListTile(title: Text(k.ad));
        },
      ),
    );
  }
}

void main() {
  print('hazir');
}

Beklenen çıktı

hazir

Soru ve cevaplar

Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.

1 JSON listesini model listesine çevirmenin doğru yolu nedir?

  • liste.forEach((e) =&gt; fromJson(e)) çağrısı yapmak
  • liste.map((e) =&gt; Kullanici.fromJson(e as Map&lt;String, dynamic&gt;)).toList() çağrısı yapmak Doğru cevap
  • jsonEncode(liste) çağrısı yapmak
  • liste.cast&lt;Kullanici&gt;() çağrısı yapmak

Açıklama: jsonDecode sonrası liste elemanları dynamic'tir; .map ile her elemanı fromJson'e verip .toList() ile List<Model> üretirsin. jsonEncode dizeleştirir, cast çalışma anında hata verir, forEach void döndürür.

2 Listeyi Map'ten modele çevir

Soru
final liste = jsonDecode(res.body) as List;
return liste
    .map((e) => Kullanici.fromJson(e as ____))
    .toList();
Cevap
final liste = jsonDecode(res.body) as List;
return liste
    .map((e) => Kullanici.fromJson(e as Map<String, dynamic>))
    .toList();

Açıklama: fromJson bir Map<String, dynamic> bekler; e dynamic olduğu için as ile bu türe çevirirsin. List<dynamic>, String ve int fromJson'in beklediği tür değildir.

3 API listesi parçaları

Kavram Anlamı
http.get ağ isteği
jsonDecode dizeyi List'e çevirme
.map((e) => fromJson(e)) model listesi üretme
ListView.builder listeyi gösterme

Orta seviye bölümündeki tüm dersler