Challenge 2
- Flutter course
- Intermediate
- Lesson 97/99
- 3 min
Build a screen that lists API items via http and fromJson.
Fetching an API list
In this challenge you fetch a JSON list from an API with http.get, decode it into a List with jsonDecode, and produce a list of models with .map((e) => Model.fromJson(e as Map<String, dynamic>)).toList(). The resulting list is shown in a ListView.builder.
Future<List<Kullanici>> bring() 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();
}This function is ready to be used with FutureBuilder.
Practice The kullanicilariGetir function
Write an async function named kullanicilariGetir. Send a request with http.get(Uri.parse(url)), take the jsonDecode(res.body) result as a List with as List, convert each element to a model with Kullanici.fromJson(e as Map<String, dynamic>), turn it into a list with .toList(), and return it. Print the url in main.
Starter code
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
}Sample solution
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);
}Expected output
https://api.example.com/kullanicilar
Practice List with ListView.builder
Define a StatelessWidget named KullanicilarEkrani with a required final List<Kullanici> kullanicilar field. Its build method should return a Scaffold whose body is a ListView.builder. Set itemCount to kullanicilar.length and have itemBuilder return ListTile(title: Text(k.ad)) for each row. Print 'hazir' in main.
Starter code
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
}Sample solution
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');
}Expected output
hazir
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What is the correct way to convert a JSON list to a list of models?
- Call liste.forEach((e) => fromJson(e))
- Call liste.map((e) => Kullanici.fromJson(e as Map<String, dynamic>)).toList() Correct answer
- Call jsonEncode(liste)
- Call liste.cast<Kullanici>()
Explanation: After jsonDecode the list elements are dynamic; with .map you pass each element to fromJson and produce a List<Model> with .toList(). jsonEncode serializes, cast throws at runtime, and forEach returns void.
2 Convert the list from Map to model
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();Explanation: fromJson expects a Map<String, dynamic>; since e is dynamic you cast it to this type with as. List<dynamic>, String, and int are not the type fromJson expects.
3 API list parts
| Term | Meaning |
|---|---|
http.get |
Network request |
jsonDecode |
Converting string to List |
.map((e) => fromJson(e)) |
Producing model list |
ListView.builder |
Displaying the list |