Misi: layar katalog dari API

Kedai kopi di Malang punya API katalog sederhana, dan kamu memeriksa layar katalog yang ditulis rekanmu sebelum aplikasinya dipakai kasir. olahKatalog mengubah body JSON menjadi daftar Produk yang tersedia. ambilKatalog memeriksa statusCode sebelum mengurai. _KatalogState membuat Future di initState, menyaring hasil sesuai kata kunci pencarian, dan menyimpan nama produk favorit di shared_preferences.

// Produk dan Produk.fromJson seperti di pelajaran HTTP dan JSON.

List<Produk> olahKatalog(String body) {
  final data = jsonDecode(body) as List<dynamic>;
  return data
      .map((e) => Produk.fromJson(e as Map<String, dynamic>))
      .where((p) => p.tersedia)
      .toList();
}

Future<List<Produk>> ambilKatalog() async {
  final respons = await http.get(Uri.parse('https://api.kedai.example/katalog'));
  if (respons.statusCode != 200) {
    throw Exception('Gagal memuat katalog (${respons.statusCode})');
  }
  return olahKatalog(respons.body);
}

class _KatalogState extends State<Katalog> {
  late Future<List<Produk>> _katalog;
  String _cari = '';
  Set<String> _favorit = {};

  @override
  void initState() {
    super.initState();
    _katalog = ambilKatalog();
  }

  Future<void> _ketukFavorit(String nama) async {
    final prefs = await SharedPreferences.getInstance();
    final favorit = prefs.getStringList('favorit') ?? <String>[];
    if (favorit.contains(nama)) {
      favorit.remove(nama);
    } else {
      favorit.add(nama);
    }
    await prefs.setStringList('favorit', favorit);
    setState(() => _favorit = favorit.toSet());
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(onChanged: (teks) => setState(() => _cari = teks)),
        Expanded(
          child: FutureBuilder<List<Produk>>(
            future: _katalog,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                final tampil = snapshot.data!
                    .where((p) => p.nama.toLowerCase().contains(_cari.toLowerCase()))
                    .toList();
                return ListView(
                  children: [
                    for (final p in tampil)
                      ListTile(
                        title: Text(p.nama),
                        subtitle: Text('Rp${p.harga}'),
                        trailing: IconButton(
                          icon: Icon(_favorit.contains(p.nama) ? Icons.favorite : Icons.favorite_border),
                          onPressed: () => _ketukFavorit(p.nama),
                        ),
                      ),
                  ],
                );
              } else if (snapshot.hasError) {
                return Text('${snapshot.error}');
              }
              return const Center(child: CircularProgressIndicator());
            },
          ),
        ),
      ],
    );
  }
}

Contoh body JSON dari server ada di soal pertama. Untuk soal lain, telusuri jalur datanya: dari server ke Future, dari Future ke snapshot, dan dari ketukan pengguna ke setState atau ke penyimpanan. Setiap soal cukup dijawab dari kode di atas dan perilaku yang dibahas di modul ini. Dua kebiasaan dari pelajaran sebelumnya dipakai di sini: Future dibuat sekali di initState, dan respons selain 200 dilempar sebagai Exception sehingga muncul lewat snapshot.hasError.