Mengambil Data dari Internet: http & FutureBuilder

Memakai paket tambahan

Flutter punya ribuan paket gratis di pub.dev. Untuk menghubungi internet kita pakai paket http. Pasang dari terminal di folder proyekmu:

flutter pub add http

Perintah ini menambahkan http ke pubspec.yaml dan mengunduhnya. Setelah itu, import 'package:http/http.dart' as http;.

Catatan: di Android, aplikasi butuh izin internet pada android/app/src/main/AndroidManifest.xml untuk build rilis: <uses-permission android:name="android.permission.INTERNET"/>.

Memanggil API

Future<List<Post>> ambilPost() async {
  final res = await http.get(
    Uri.parse('https://jsonplaceholder.typicode.com/posts?_limit=5'),
  );
  if (res.statusCode != 200) {
    throw Exception('Gagal memuat data');
  }
  final data = jsonDecode(res.body) as List;
  return data.map((e) => Post.fromJson(e as Map<String, dynamic>)).toList();
}

• Uri.parse mengubah teks alamat menjadi alamat yang dimengerti Dart.
• http.get(...) mengirim permintaan GET dan mengembalikan Future, jadi harus di-await.
• res.statusCode adalah kode status HTTP (200 = sukses). Selain itu, kita lempar error.
• res.body adalah teks JSON jawabannya — langsung diproses seperti di bab sebelumnya.

FutureBuilder: tampilan berdasarkan status Future

Layar harus menampilkan tiga keadaan: sedang memuat, gagal, dan berhasil. FutureBuilder menanganinya tanpa kamu perlu setState manual:

FutureBuilder<List<Post>>(
  future: _future,
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const Center(child: CircularProgressIndicator());
    }
    if (snapshot.hasError) {
      return Center(child: Text('Gagal: ${snapshot.error}'));
    }
    final posts = snapshot.data!;
    return ListView.builder(...);
  },
)

• snapshot = potret keadaan Future saat ini.
• hasError true bila Future berakhir error; data berisi hasilnya bila sukses (tanda ! karena sudah dipastikan ada).
• Urutan pemeriksaan penting: loading → error → data.

Jangan membuat Future di dalam build()

build() bisa dipanggil berkali-kali. Jika ambilPost() ditulis di sana, setiap gambar ulang memanggil internet lagi. Simpan Future di state dan buat sekali di initState():

late final Future<List<Post>> _future;

@override
void initState() {
  super.initState();
  _future = ambilPost();
}