Mobile Development · Flutter & Dart
Inilah peta materi BAB 2. Kita akan berjalan dari memahami JSON sampai membangun Mini Project yang mengambil data asli dari API.
Apa itu JSON, struktur, tipe data
Struktur, tipe, JSON vs Dart
Decode, Encode, Serialization
fromJson() & toJson()
Nested, List, Generator
API → Model → ListView
Quiz & Tugas Akhir
Menjelaskan apa itu JSON dan kenapa dipakai untuk bertukar data.
Membaca struktur JSON: key-value, array, object, dan tipe datanya.
Melakukan parsing (jsonDecode) & serialization (jsonEncode) di Dart.
Membuat Model Class dengan fromJson() dan toJson().
Membangun mini app yang fetch data API → parse → tampilkan di ListView.
Bayangkan kamu memesan lewat GoFood dan dapat struk digital. Struk itu berisi: nama makanan, harga, jumlah, nama warung — semuanya tersusun rapi dan berlabel. Siapapun yang membaca struk itu langsung paham. Itulah JSON: catatan data terstruktur yang bisa dibaca manusia DAN komputer.
JSON (JavaScript Object Notation) adalah format teks untuk menyimpan & mengirim data. API yang sudah kamu pelajari di BAB 1 selalu mengembalikan data dalam format JSON. Strukturnya berupa pasangan "kunci": nilai, persis seperti label dan isi di struk belanja.
{"id": 1, "nama": "Laptop Gaming", "harga": 15000000, "tersedia": true}Seperti label di toples bumbu dapur ibu: di luar tertulis "Garam" (kunci), di dalam ada isinya (nilai). Satu label = satu isi. JSON juga begitu: setiap kunci menunjuk ke satu nilai.
Aturan dasar: kunci selalu di dalam tanda kutip dua "...", dipisah : dengan nilainya, dan antar pasangan dipisah koma ,. Seluruhnya dibungkus kurung kurawal { } (object).
{
"nama": "Budi",
"umur": 17,
"kelas": "11 RPL"
}String pakai kutip, Number & Boolean tidak. Array [ ] menampung daftar nilai, Object { } menampung pasangan kunci-nilai (bisa bersarang!).
{
"teks": "Laptop",
"bulat": 42,
"desimal": 3.14,
"aktif": true,
"kosong": null,
"angka": [1, 2, 3],
"detail": { "nested": true }
}JSON itu seperti surat dalam amplop (teks mentah yang dikirim), sedangkan Dart Map adalah isi surat yang sudah dibuka dan siap dipakai di dalam aplikasi.
'{"id":1,"nama":"Laptop"}'Sekadar teks. Belum bisa diakses per-field.
Map<String, dynamic> data =
{"id": 1, "nama": "Laptop"};
print(data["nama"]); // LaptopSudah bisa diakses: data["nama"].
Dapat surat berbahasa Inggris dari teman luar negeri? Kamu butuh menerjemahkannya ke Bahasa Indonesia agar paham. Parsing adalah proses menerjemahkan teks JSON menjadi objek Dart yang bisa dipakai.
import 'dart:convert';
String jsonString = '{"id":1,"nama":"Laptop","harga":15000000}';
Map<String, dynamic> data = jsonDecode(jsonString);
print(data['nama']); // Output: LaptopKetik JSON lalu klik Parse. Coba juga JSON yang salah untuk lihat penanganan error!
Saat packing koper untuk mudik, kamu memasukkan semua barang (baju, sepatu, charger) ke dalam satu tas rapi yang bisa dibawa. Serialization = mengemas objek Dart menjadi satu string JSON yang bisa dikirim ke API.
import 'dart:convert';
Map<String, dynamic> product = {"id": 1, "nama": "Laptop", "harga": 15000000};
String jsonString = jsonEncode(product);
print(jsonString); // {"id":1,"nama":"Laptop","harga":15000000}// hasil JSON akan muncul di sini
Sampai di rumah nenek, kamu buka koper dan ambil satu per satu barang untuk diletakkan di tempatnya. Deserialization = membuka string JSON dan mengisi nilainya ke variabel-variabel Dart.
Encode (Serialize) = Dart → JSON (mengemas). Decode (Deserialize) = JSON → Dart (membuka). Keduanya kebalikan satu sama lain.
import 'dart:convert';
String jsonString = '{"id":1,"nama":"Laptop","harga":15000000}';
Map<String, dynamic> data = jsonDecode(jsonString);
int id = data['id'];
String nama = data['nama'];
int harga = data['harga'];
print('$nama seharga $harga'); // Laptop seharga 15000000Sebelum membangun rumah, arsitek membuat cetak biru (blueprint) dulu. Model Class adalah cetak biru data — mendefinisikan bentuk & tipe setiap properti SEBELUM data JSON diisi.
class Product {
final int id;
final String nama;
final double harga;
final bool tersedia;
Product({
required this.id,
required this.nama,
required this.harga,
required this.tersedia,
});
}product.nama dan kamu terhindar dari salah ketik nama field.fromJson() adalah pintu masuk: ia menerima Map hasil jsonDecode dan mengubahnya menjadi objek Product. Perhatikan baris muncul satu per satu:
harga dibungkus (... as num).toDouble() karena JSON bisa mengirim 15000000 (int) tapi field kita bertipe double.toJson() adalah pintu keluar: mengubah objek Product kembali menjadi Map yang siap di-jsonEncode dan dikirim ke API. Arahnya kebalikan dari fromJson().
JSON ➜ Object
(masuk)
Object ➜ JSON
(keluar)
Seperti boneka Matryoshka (boneka Rusia): di dalam boneka ada boneka lagi, dan di dalamnya ada boneka lagi. Nested JSON = JSON di dalam JSON.
class Order {
final int id;
final Product product;
final Address address;
Order.fromJson(Map<String, dynamic> json)
: id = json['id'],
product = Product.fromJson(json['product']),
address = Address.fromJson(json['address']);
}Buka Tokopedia — kamu tidak melihat satu produk, tapi puluhan produk sekaligus. List JSON = array [ ] berisi banyak objek JSON.
List<Product> parseProducts(String jsonBody) {
final List parsed = jsonDecode(jsonBody);
return parsed.map((e) => Product.fromJson(e)).toList();
}.map((e) => Product.fromJson(e)) menjalankan fromJson untuk SETIAP item dalam array, lalu .toList() mengubahnya jadi List<Product>.Menulis fromJson manual untuk class besar itu melelahkan. Tool seperti quicktype & package json_serializable bisa meng-generate kode model otomatis dari contoh JSON. Coba simulasinya:
// class akan di-generate...
json_serializable + build_runner ke pubspec, beri anotasi @JsonSerializable(), lalu jalankan dart run build_runner build.Setiap panah adalah satu langkah transformasi data. Project kita: ambil produk dari fakestoreapi.com, ubah jadi List<Product>, lalu tampilkan rapi di ListView.builder.
dependencies:
flutter:
sdk: flutter
http: ^1.2.0class Product {
final int id;
final String nama;
final double harga;
Product({required this.id, required this.nama, required this.harga});
factory Product.fromJson(Map<String, dynamic> json) {
return Product(
id: json['id'] as int,
nama: json['title'] as String,
harga: (json['price'] as num).toDouble(),
);
}
}{"id":1,"title":"Tas","price":120.5}import 'dart:convert';
import 'package:http/http.dart' as http;
Future<List<Product>> fetchProducts() async {
final res = await http.get(Uri.parse('https://fakestoreapi.com/products'));
if (res.statusCode == 200) {
final List data = jsonDecode(res.body);
return data.map((e) => Product.fromJson(e)).toList();
}
throw Exception('Gagal memuat produk');
}FutureBuilder<List<Product>>(
future: fetchProducts(),
builder: (context, snapshot) {
if (snapshot.hasData) {
final list = snapshot.data!;
return ListView.builder(
itemCount: list.length,
itemBuilder: (_, i) => ListTile(
title: Text(list[i].nama),
trailing: Text('Rp ${list[i].harga}'),
),
);
}
return const Center(child: CircularProgressIndicator());
},
)Diberikan JSON berikut:
{"id": 5, "nama": "Mouse Gaming", "harga": 350000}
Tuliskan kode Dart untuk mendapatkan nilai nama dari string JSON tersebut (gunakan jsonDecode).
Isi setiap kotak dengan tipe data Dart yang benar (int / String / double / bool).
class Product {
final id;
final nama;
final harga;
final tersedia;
}
Petunjuk: id=bilangan bulat, nama=teks, harga=desimal, tersedia=benar/salah.
Buat aplikasi Flutter yang menampilkan katalog produk dari https://fakestoreapi.com/products.
Product dengan fromJson() (id, title, price, image).http.List<Product> dengan .map().ListView.builder (nama + harga + gambar).fromJson() yang benar