Gunakan tombol ← → keyboard atau Prev/Next di bawah untuk berpindah slide.
Inilah perjalanan kita di Bab 1. Klik node mana saja untuk lompat ke slide tersebut. Garis akan tergambar otomatis menunjukkan alur belajar dari konsep dasar hingga praktik kode.
http di FlutterSetelah bab ini, kamu mampu memanggil API nyata dari aplikasi Flutter — mengambil data dari internet dan mengirim data ke server, lengkap dengan penanganan error.
API adalah perantara yang memungkinkan dua aplikasi berbicara satu sama lain. Aplikasi Flutter-mu tidak bisa langsung masuk ke database server — ia harus minta lewat API.
Kamu di meja tidak masuk ke dapur. Pelayan (API) mengantar pesananmu ke dapur lalu membawakan makanannya. Itulah peran API!
Bayangkan kamu lapar di restoran:
Kamu tidak perlu tahu cara memasak. Kamu cukup memberi pesanan ke pelayan, dan ia tahu harus ke mana.
// Flutter "memesan" data ke API
final url = Uri.parse('https://api.toko.com/produk');
final response = await http.get(url);
// 'pelayan' (API) membawa balik datanya
print(response.body);| Aspek | REST | SOAP | GraphQL |
|---|---|---|---|
| Format Data | JSON (ringan) | XML (berat) | JSON |
| Kemudahan | ⭐⭐⭐⭐⭐ Mudah | ⭐⭐ Rumit | ⭐⭐⭐ Sedang |
| Kecepatan | Cepat | Lambat | Cepat & hemat |
| Populer di Mobile | ✅ Sangat | ❌ Jarang | ✅ Naik daun |
| Analogi | Menu standar | Formulir resmi | Menu custom |
Ketiganya adalah gaya komunikasi antara aplikasi dan server. Yang akan kita pakai sepanjang bab ini adalah REST, karena paling sederhana, ringan, dan paling banyak digunakan di dunia mobile.
REST = pilihan utama untuk Flutter pemula.
REST adalah seperangkat aturan agar client & server berkomunikasi lewat HTTP. Setiap data disebut resource dan punya alamat (URL) sendiri, misal /produk/1.
GET /produk // semua produk
GET /produk/1 // produk id 1
POST /produk // tambah produk
PUT /produk/1 // ubah produk 1
DELETE /produk/1 // hapus produk 1SOAP adalah protokol lama yang sangat ketat & formal. Semua pesan dibungkus dalam format XML dengan aturan baku. Aman, tapi berat dan rumit.
Seperti mengurus dokumen di kantor pemerintahan: harus pakai formulir resmi, stempel, dan format baku. Tidak boleh asal.
SOAP cocok untuk sistem perbankan & enterprise yang butuh keamanan tinggi. Tapi untuk aplikasi mobile sederhana, SOAP terasa terlalu kaku — itu sebabnya REST lebih populer.
<soap:Envelope>
<soap:Body>
<getProduk>
<id>1</id>
</getProduk>
</soap:Body>
</soap:Envelope>GraphQL membiarkan client meminta persis data yang dibutuhkan — tidak lebih, tidak kurang. Satu permintaan bisa mengambil banyak data sekaligus.
Seperti memesan makanan custom: kamu sebut persis apa yang kamu mau dalam satu kali pesan.
Pada REST, kamu kadang dapat data berlebih. GraphQL menyelesaikan ini: client menulis query yang menyebut field yang diinginkan. Hemat data — cocok untuk koneksi internet lambat.
query {
produk(id: 1) {
nama
harga
}
}Dunia API terbagi dua peran:
Titik emas di atas adalah data yang berjalan bolak-balik antara mereka melalui API.
// CLIENT meminta ke SERVER
final res = await http.get(
Uri.parse('https://server.com/data')
);
// SERVER membalas, CLIENT memproses
print(res.statusCode); // 200Komunikasi dua arah lewat HTTP.
http.get()Titik emas = perjalanan data dari atas ke bawah lalu kembali.
// 1-2. Flutter memanggil API
final res = await http.get(Uri.parse('https://api.com/produk'));
// 3-4. Server & database bekerja di balik layar...
// 5. Data JSON kembali & diubah jadi objek Dart
final data = jsonDecode(res.body);
setState(() => daftarProduk = data); // tampilkan ke UIGET dipakai untuk meminta data dari server tanpa mengubah apa pun. Ini method paling sering digunakan.
Membaca menu tidak mengubah isi dapur. GET hanya "melihat" data — aman & tidak merusak.
GET bersifat read-only dan idempotent — dipanggil berapa kali pun hasilnya sama dan tak ada efek samping. Data dikirim lewat URL, bukan body.
final url = Uri.parse('https://api.com/menu');
final response = await http.get(url);
if (response.statusCode == 200) {
print(response.body); // daftar menu
}POST dipakai untuk mengirim data baru ke server, misal mendaftar akun atau menambah produk.
Memesan makanan = membuat data baru di dapur. Server kini punya pesanan yang sebelumnya tidak ada.
POST membawa data di body request (biasanya JSON). Berbeda dari GET, POST mengubah keadaan server — membuat record baru. Balasannya umumnya 201 Created.
final response = await http.post(
Uri.parse('https://api.com/pesan'),
headers: {'Content-Type': 'application/json'},
body: jsonEncode({'menu': 'Kopi', 'jumlah': 2}),
);PUT dipakai untuk memperbarui data yang sudah ada di server, misal mengganti isi pesanan.
"Pak, ganti kopi saya jadi teh." Pesanan lama ditimpa pesanan baru — itulah PUT.
PUT menggantikan seluruh data pada resource tertentu. Kamu harus menyebut id data yang mau diubah di URL, lalu kirim data baru di body.
final response = await http.put(
Uri.parse('https://api.com/pesan/99'),
headers: {'Content-Type': 'application/json'},
body: jsonEncode({'menu': 'Teh', 'jumlah': 1}),
);DELETE dipakai untuk menghapus data dari server berdasarkan id-nya.
"Pak, batalkan pesanan saya." Data pesanan dihapus dari sistem — itulah DELETE.
DELETE menghapus resource yang ditunjuk oleh id di URL. Setelah dihapus, data tidak bisa diambil lagi. Balasan umum: 200 OK atau 204 No Content.
final response = await http.delete(
Uri.parse('https://api.com/pesan/99'),
);
if (response.statusCode == 200) {
print('Pesanan berhasil dibatalkan');
}Centang hijau = permintaan berhasil!
Kode 2xx berarti permintaan berhasil. Server menerima & memproses dengan baik.
Selalu cek response.statusCode sebelum memproses data.
if (response.statusCode == 200) {
print('Berhasil ambil data!');
} else if (response.statusCode == 201) {
print('Data baru tersimpan!');
}Kode 4xx = kesalahan dari pihak client (kamu). Permintaanmu salah atau tidak diizinkan.
if (response.statusCode == 404) {
print('Data tidak ditemukan');
} else if (response.statusCode == 401) {
print('Silakan login dulu');
}Kode 5xx = kesalahan di pihak server, bukan kamu. Server sedang bermasalah atau crash.
Seperti dapur restoran yang kebakaran 🔥 — pesananmu sudah benar, tapi dapur tidak bisa memasak. Bukan salahmu, salah dapur (server).
if (response.statusCode >= 500) {
print('Server sedang bermasalah, coba lagi nanti');
}httpFlutter tidak bisa memanggil API tanpa alat. Kita pakai package resmi bernama http yang harus didaftarkan dulu di pubspec.yaml.
Jalankan perintah ini di terminal untuk menambah package secara otomatis.
dependencies:
flutter:
sdk: flutter
http: ^1.2.0 # package untuk APIimport 'package:http/http.dart' as http;
import 'dart:convert'; // untuk jsonEncode/jsonDecodeimport 'package:http/http.dart' as http;
import 'dart:convert';
Future<void> fetchData() async {
try {
final url = Uri.parse('https://jsonplaceholder.typicode.com/posts/1');
final response = await http.get(url);
if (response.statusCode == 200) {
final data = jsonDecode(response.body);
print('Judul: ${data['title']}');
} else {
print('Error: ${response.statusCode}');
}
} catch (e) {
print('Gagal koneksi: $e');
}
}statusCode duluimport 'package:http/http.dart' as http;
import 'dart:convert';
Future<void> sendData(String title, String body) async {
try {
final url = Uri.parse('https://jsonplaceholder.typicode.com/posts');
final response = await http.post(
url,
headers: {'Content-Type': 'application/json'},
body: jsonEncode({'title': title, 'body': body, 'userId': 1}),
);
if (response.statusCode == 201) {
final result = jsonDecode(response.body);
print('Data berhasil dikirim! ID: ${result['id']}');
} else {
print('Gagal: ${response.statusCode}');
}
} catch (e) {
print('Error: $e');
}
}201 Createdhttp + jsonDecode/EncodeBuatlah aplikasi Flutter sederhana yang mengambil daftar postingan dari API publik dan menampilkannya di layar.
API: https://jsonplaceholder.typicode.com/posts
http di pubspec.yamlfetchPosts() dengan http.get()try-catch untuk menangani errorstatusCode == 200 sebelum prosesListViewFuture<List> fetchPosts() async {
final url = Uri.parse('https://jsonplaceholder.typicode.com/posts');
final res = await http.get(url);
if (res.statusCode == 200) {
return jsonDecode(res.body);
}
throw Exception('Gagal memuat data');
}Selamat mengerjakan! Kamu sudah menguasai dasar REST API. 🚀