Meydan okuma 2
- Flutter kursu
- Orta seviye
- Ders 97/99
- 3 dk
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
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
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
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
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) => fromJson(e)) çağrısı yapmak
- liste.map((e) => Kullanici.fromJson(e as Map<String, dynamic>)).toList() çağrısı yapmak Doğru cevap
- jsonEncode(liste) çağrısı yapmak
- liste.cast<Kullanici>() ç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
final liste = jsonDecode(res.body) as List;
return liste
.map((e) => Kullanici.fromJson(e as ____))
.toList();
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 |