Challenge 2

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.

Exercise 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.

Show example 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);
}

Exercise 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.

Show example 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');
}

Test yourself

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()
- Call jsonEncode(liste)
- Call liste.cast<Kullanici>()
Show answer

Call liste.map((e) => Kullanici.fromJson(e as Map<String, dynamic>)).toList() — 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.

Convert the list from Map to model

final liste = jsonDecode(res.body) as List;
return liste
    .map((e) => Kullanici.fromJson(e as ____))
    .toList();

Show answer

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

API list parts

http.get

Network request
jsonDecode

Converting string to List
.map((e) => fromJson(e))

Producing model list
ListView.builder

Displaying the list

Next lesson: Challenge 3

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies