HTTP dan Konsumsi API: Permintaan GET

14 Okt 2026kribbiadminMobile Programming

Tujuan Pembelajaran

Menginstal paket http pada Flutter.
Mengambil data dari API menggunakan GET.
Parsing respon JSON menjadi list objek.
Menampilkan data API pada ListView.

Uraian Materi

Paket http adalah cara termudah melakukan permintaan HTTP di Flutter. Tambahkan dependensi lalu lakukan GET. Contoh endpoint simulasi: (https://jsonplaceholder.typicode.com/posts) yang menyediakan data dummy untuk latihan.

dependencies:
  http: ^1.2.2

Melakukan Permintaan GET

import 'package:http/http.dart' as http;

final uri = Uri.parse('https://jsonplaceholder.typicode.com/posts');
final res = await http.get(uri);
if (res.statusCode == 200) {
  final data = jsonDecode(res.body) as List;
  // petakan ke model
}

Menangani Status Kode

Status Kode penting: 200 sukses, 404 tidak ditemukan, 500 kesalahan server. Kode aplikasi harus memeriksa statusCode dan menangani kegagalan sebelum mem-parsing body, agar tidak terjadi error saat server tidak merespon sesuai.

Menampilkan Data API

Hasil parsing disimpan ke state lalu dirender pada ListView menggunakan FutureBuilder atau pola muat (load) dengan indikator loading dan pesan error.

FutureBuilder(
  future: fetchPosts(),
  builder: (context, snap) {
    if (snap.connectionState != ConnectionState.done) {
      return const Center(child: CircularProgressIndicator());
    }
    if (snap.hasError) return const Text('Gagal memuat data');
    final list = snap.data!;
    return ListView.builder(itemCount: list.length,
    itemBuilder: (context, index) {
      final post = list[index] as Map;
      return ListTile(
        title: Text(post['title']?.toString() ?? 'Tanpa judul'),
        subtitle: Text(post['body']?.toString() ?? ''),
      );
    });
  },
)

Latihan Memuat dari API

Praktik menampilkan daftar produk/pokok dari API publik, memperkuat pola async/await, FutureBuilder, dan pemodelan data.

Alur Permintaan GET yang Benar

Urutan kerja GET: susun URL, kirim permintaan, periksa status, lalu parse body bila sukses. Peserta didorong menulis fungsinya dengan try-catch sejak awal agar kegagalan jaringan tidak langsung memunculkan error mentah ke antarmuka.

Menangani Respons yang Tidak Terduga

Respon dapat berupa objek tunggal, daftar objek, atau objek dengan struktur berbeda. Menyesuaikan pemetaan sesuai bentuk respon adalah keterampilan utama. Peserta berlatih membaca struktur dan menyesuaikan dariJson serta pengambilan list.

FutureBuilder dan Keempat Kondisinya

FutureBuilder memudahkan menampilkan widget sesuai status Future: menunggu, selesai dengan data, gagal, dan selesai tanpa data. Membiasakan menangani seluruh kondisi membuat antarmuka tidak pernah ‘tergantung’ tanpa umpan balik kepada pengguna.

Praktik Aplikasi Berita/Katalog

Akhir pertemuan, peserta menampilkan daftar data dari API pada ListView dengan indikator loading. Praktik ini merangkum async/await, FutureBuilder, dan pemetaan model menjadi satu alur yang nyata digunakan berbagai aplikasi.

Aktivitas Pembelajaran

Menambahkan paket http dan mengenal endpoint latihan.
Menulis fungsi GET dan memeriksa status kode.
Parsing JSON menjadi List.
Menampilkan data pada ListView dengan FutureBuilder.

Tugas dan Latihan

Ambil dan tampilkan data post dari jsonplaceholder dalam ListView.
Tambahkan indikator loading dan pesan error.
Kerjakan kuis singkat konsep HTTP dan parsing.

Evaluasi

Evaluasi dilakukan melalui pengamatan hasil praktikum, kuis singkat di akhir pertemuan, dan pemantauan proyek. Peserta yang belum mencapai indikator tertentu diberikan remedial melalui bimbingan ulang dan latihan tambahan pada pertemuan berikutnya.

Panduan umum praktik, catatan belajar, dan refleksi tersedia di Panduan Belajar Kribbi Study.