REST API Flutter Tutorial: Cara Menghubungkan Aplikasi
Irhan Hisyam Dwi Nugroho
•
14 May 2025
•
93
REST API Flutter Tutorial kali ini akan mengajarkan Warga Bimbingan cara menghubungkan aplikasi Flutter dengan REST API secara praktis.
MinDi akan menunjukkan langkah demi langkah cara mengirim permintaan HTTP dan menampilkan data dari server ke aplikasi Flutter.
Setelah mengikuti tutorial ini, kamu akan memahami bagaimana REST API bekerja di Flutter dan bisa langsung mengimplementasikannya di aplikasi kamu. Ayo, simak tutorialnya dan buat aplikasi kamu lebih canggih dan interaktif!
Apa Itu REST API?
REST API (Representational State Transfer Application Programming Interface) adalah cara untuk menghubungkan aplikasi dengan server melalui HTTP.
API ini memungkinkan aplikasi untuk mengirim dan menerima data dalam format yang mudah dipahami, seperti JSON atau XML.
REST API menggunakan metode HTTP standar seperti GET, POST, PUT, dan DELETE untuk berinteraksi dengan data di server.
Dengan REST API, aplikasi bisa mengakses berbagai informasi atau melakukan tindakan tertentu di server tanpa perlu mengelola semua data secara langsung.
Baca juga : Panduan Memilih Bootcamp Mobile Apps Development Terbaik
Menyiapkan Proyek Flutter
Sebelum mulai menghubungkan aplikasi Flutter dengan REST API, kita perlu menyiapkan proyek Flutter terlebih dahulu.
Proses persiapan ini mencakup instalasi dependensi yang dibutuhkan dan pengaturan API yang akan digunakan. Berikut adalah langkah-langkah yang perlu dilakukan:
1. Membuat Proyek Flutter Baru
Pertama, buat proyek Flutter baru menggunakan perintah flutter create di terminal. Pastikan kamu sudah menginstal Flutter dan Dart di komputer kamu.
Setelah proyek dibuat, buka proyek tersebut di editor seperti Visual Studio Code atau Android Studio untuk mulai menulis kode.
2. Menambahkan Dependensi HTTP
Untuk bisa mengirim permintaan HTTP, kita perlu menambahkan paket http ke dalam file pubspec.yaml. Buka file tersebut dan tambahkan kode berikut di bawah bagian dependencies:
dependencies: http: ^0.13.3 |
Setelah itu, jalankan perintah flutter pub get di terminal untuk mengunduh dan menginstal paket yang dibutuhkan.
3. Mempersiapkan Endpoint API
Pilih API yang ingin kamu gunakan untuk tutorial ini. Kamu bisa menggunakan API publik seperti JSONPlaceholder (https://jsonplaceholder.typicode.com) atau API lainnya yang sesuai dengan kebutuhan aplikasi kamu.
Pastikan kamu memahami struktur data yang dikirim dan diterima oleh API agar bisa mengolahnya dengan benar dalam aplikasi.
Baca juga : Mengenal Struktur dan Komponen Flutter dalam Aplikasi
Mengirim Permintaan ke API
Sumber: Canva
Setelah menyiapkan proyek dan menambahkan dependensi, langkah berikutnya adalah mengirim permintaan ke REST API.
Di Flutter, kita menggunakan paket http untuk mengirim permintaan seperti GET, POST, dan lainnya ke server. Berikut adalah langkah-langkah untuk mengirim permintaan ke API:
1. Mengirim Permintaan GET
Permintaan GET digunakan untuk mengambil data dari API. Dengan menggunakan http.get(), kita dapat meminta data dari server dan menerima respons dalam format JSON. Berikut adalah contoh kode untuk mengirim permintaan GET ke API:
final response = await http.get(Uri.parse('https://api.example.com/data')); if (response.statusCode == 200) { // Data berhasil diambil print(response.body); } else { // Jika ada error print('Gagal mengambil data'); } |
Penjelasan:
Di sini, kita mengirim permintaan GET ke URL API dan memeriksa status respons untuk memastikan data berhasil diambil.
2. Mengirim Permintaan POST
Permintaan POST digunakan untuk mengirim data ke server, misalnya ketika membuat entri baru.
Dengan http.post(), kita dapat mengirim data dalam format JSON atau form data. Berikut adalah contoh mengirim data ke API:
final response = await http.post( Uri.parse('https://api.example.com/data'), headers: {'Content-Type': 'application/json'}, body: jsonEncode({'name': 'John', 'age': 30}), ); if (response.statusCode == 201) { print('Data berhasil dikirim'); } else { print('Gagal mengirim data'); } |
Penjelasan:
Di sini, kita mengirim data JSON ke API menggunakan metode POST dan memeriksa status respons untuk memastikan data berhasil diterima.
3. Menangani Timeout dan Error
Ketika mengirim permintaan ke API, terkadang kita menghadapi masalah seperti koneksi yang lambat atau timeout.
Kita bisa menambahkan penanganan error menggunakan try-catch untuk menangani situasi ini dengan lebih baik.
try { final response = await http.get(Uri.parse('https://api.example.com/data')).timeout(Duration(seconds: 10)); if (response.statusCode == 200) { print(response.body); } else { print('Gagal mengambil data'); } } catch (e) { print('Terjadi kesalahan: $e'); } |
Penjelasan:
Dengan menggunakan try-catch, kita bisa menangani error jika permintaan API gagal atau terjadi timeout.
Baca juga : Flutter Widget: Pengertian, Jenis, dan Cara Menggunakannya
Menampilkan Data di Aplikasi
Sumber: Canva
Setelah berhasil mengirim permintaan ke API dan mendapatkan respons, langkah selanjutnya adalah menampilkan data tersebut di aplikasi Flutter. Berikut adalah cara menampilkan data di aplikasi:
1. Menggunakan FutureBuilder untuk Menampilkan Data
FutureBuilder adalah widget yang digunakan untuk menampilkan data secara asinkron setelah mendapatkan respons dari API.
Dengan FutureBuilder, kamu bisa menampilkan widget yang berbeda berdasarkan status data (loading, error, atau data siap).
Berikut contoh penggunaannya:
Future<List<String>> fetchData() async { final response = await http.get(Uri.parse('https://api.example.com/data')); if (response.statusCode == 200) { List<String> data = jsonDecode(response.body).cast<String>(); return data; } else { throw Exception('Gagal mengambil data'); } } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Data dari API')), body: FutureBuilder<List<String>>( future: fetchData(), builder: (context, snapshot) { if (snapshot.connectionState == ConnectionState.waiting) { return Center(child: CircularProgressIndicator()); } else if (snapshot.hasError) { return Center(child: Text('Terjadi kesalahan: ${snapshot.error}')); } else if (!snapshot.hasData || snapshot.data!.isEmpty) { return Center(child: Text('Tidak ada data')); } else { return ListView.builder( itemCount: snapshot.data!.length, itemBuilder: (context, index) { return ListTile( title: Text(snapshot.data![index]), ); }, ); } }, ), ); } |
Penjelasan:
Dalam kode di atas, FutureBuilder digunakan untuk menangani status data (loading, error, atau berhasil) dan menampilkan daftar data yang diambil dari API.
2. Menampilkan Data di ListView
Setelah data berhasil diambil menggunakan FutureBuilder, kita bisa menampilkannya menggunakan widget ListView.
ListView.builder adalah pilihan yang tepat untuk menampilkan data dalam bentuk daftar yang bisa digulir. Berikut adalah contoh implementasinya:
ListView.builder( itemCount: snapshot.data!.length, itemBuilder: (context, index) { return ListTile( title: Text(snapshot.data![index]), ); }, ); |
Penjelasan:
ListView.builder digunakan untuk membangun item daftar secara dinamis berdasarkan data yang diterima. Dalam hal ini, setiap item dalam daftar akan menampilkan data yang diambil dari API.
3. Menambahkan Penanganan Error dan Loading
Untuk meningkatkan pengalaman pengguna, kita bisa menambahkan indikator loading atau pesan error yang jelas.
Menggunakan FutureBuilder, kita bisa menangani status seperti ConnectionState.waiting (loading) dan snapshot.hasError (error). Berikut adalah cara melakukannya:
if (snapshot.connectionState == ConnectionState.waiting) { return Center(child: CircularProgressIndicator()); } else if (snapshot.hasError) { return Center(child: Text('Terjadi kesalahan: ${snapshot.error}')); } |
Penjelasan:
Dengan menggunakan kondisi ini, pengguna akan melihat indikator loading saat data sedang diambil dan pesan error jika ada masalah saat mengambil data.
Baca juga : Panduan Belajar Flutter untuk Membuat Aplikasi Mobile
Menangani Error
Sumber: Canva
Saat bekerja dengan REST API di Flutter, kita sering kali menghadapi masalah seperti kegagalan koneksi atau kesalahan dalam respons dari server.
Berikut adalah beberapa cara untuk menangani error dalam aplikasi Flutter yang terhubung dengan REST API:
1. Menangani Error Koneksi (Network Error)
Salah satu masalah yang sering terjadi adalah kegagalan koneksi jaringan, misalnya ketika perangkat tidak terhubung ke internet.
Untuk menangani ini, kita bisa menggunakan try-catch untuk menangkap error dan menampilkan pesan yang sesuai kepada pengguna. Berikut contoh penanganannya:
try { final response = await http.get(Uri.parse('https://api.example.com/data')); if (response.statusCode == 200) { print('Data berhasil diambil'); } else { throw Exception('Gagal mengambil data'); } } catch (e) { print('Terjadi kesalahan: $e'); } |
Penjelasan:
Dengan try-catch, jika koneksi gagal atau API tidak dapat diakses, kita dapat menampilkan pesan error kepada pengguna, menjaga aplikasi tetap berjalan tanpa gangguan.
2. Menangani Respons yang Tidak Valid atau Error Status Kode
Terkadang, meskipun permintaan berhasil, server dapat mengirimkan respons error seperti status 404 atau 500.
Kita perlu memeriksa status kode untuk memastikan bahwa data yang diterima valid dan memberikan penanganan yang tepat. Contoh penanganannya:
if (response.statusCode == 200) { print('Data berhasil diambil'); } else { throw Exception('Error: ${response.statusCode}'); } |
Penjelasan:
Dengan memeriksa kode status respons, kita bisa menangani kasus seperti server tidak ditemukan atau kesalahan lainnya, dan memberikan umpan balik yang jelas kepada pengguna.
Baca juga : Panduan Lengkap Flutter Developer Roadmap untuk Pemula
Ingin Menguasai Pengembangan Aplikasi Mobile?
Setelah mengikuti REST API Flutter Tutorial, kini saatnya mengembangkan keterampilan Flutter kamu lebih jauh!
Yuk, ikuti Bootcamp Mobile Development di dibimbing.id! Di sini, kamu akan mempelajari cara mengembangkan aplikasi mobile menggunakan Flutter, termasuk integrasi REST API, desain UI, dan pengelolaan state.
Belajar langsung dari mentor berpengalaman dengan kurikulum praktis yang membantumu menguasai keterampilan mobile development yang dibutuhkan di dunia industri.
Dengan lebih dari 840+ hiring partner dan tingkat keberhasilan alumni 96%, peluang kariermu di dunia mobile development semakin terbuka lebar!
Jadi, tunggu apa lagi? Hubungi kami di sini dan Daftar sekarang di dibimbing.id untuk mulai perjalananmu menjadi Mobile Developer profesional. #BimbingSampeJadi!
Referensi
Tags
Irhan Hisyam Dwi Nugroho
Irhan Hisyam Dwi Nugroho is an SEO Specialist and Content Writer with 4 years of experience in optimizing websites and writing relevant content for various brands and industries. Currently, I also work as a Content Writer at Dibimbing.id and actively share content about technology, SEO, and digital marketing through various platforms.
