Mengambil dan Menampilkan Data API

Hi!

Ketemu lagi dalam artikel untuk menggunakan API di flutter. Sebelum melanjutkan, pastikan sudah membaca dan membuat API laravel dulu ya soalnya di artikel ini tidak membahas membuat API, melainkan menggunakan langsung 😇

Okey, tanpa berlama lagi langsung saja kita buka API yang sudah dibuat dan seharusnya menghasilkan tampilan seperti berikut saat dijalankan dengan web browser

http://localhost:8000/api/post

Tampilan tidak terdapat data dalam tabel

Tabel terdapat dua data dalam tabel

🛈 Sekali lagi, API Laravel silahkan akses melalui laman ini bila belum membuat

Yuk kita pelajari langkah-langkah menggunakan API

#1 Pertama

Buat proyek baru Flutter

#2 Tambahkan http

Library ini menjadi salah satu syarat wajib saat sebuah proyek akan menggunakan API. http ini menjadi jembatan komunikasi antara flutter dan API. Untuk menambahkan library ini jalankan perintah flutter pub add http di terminal VS Code.

Perintah tersebut akan menambahkan library di dalam pubspec.yaml

#3 Import Library

Library ini perlu di import dengan alias http.

#4 Buat Fungsi Future

Setelah proyek siap dengan beberapa langkah diatas, bagian sekarang akan membuat fungsi future yang akan menjalankan tugasnya sebagai pengakses url API. Fungsi ini dituliskan didalam class yang menjadi home dari MaterialApp().

Sebagai contoh disini terlihat

Bisa disesuaikan dengan nama proyek masing-masing ya

Dibawah _HomePageState ini fungsi dituliskan

Fungsi yang dibuat dinamai dengan _getData() yang menggunakan async. Di dalamnya menggunakan http.get() untuk menjalankan atau memanggil url web http://localhost:8000/api/post.
Bila akses url berhasil, ditandai dengan status kode yang didapatkan 200. Maka hasilnya ( url.body ) disimpan dalam variabel data.
Bila gagal ( error atau kendala lainnya ), akan mengembalikan / menampilkan Error!

Setelah fungsi selesai dibuat, next dibagian UI atau front end menampilkan data yang dihasilkan.

#5 Bagian Scaffold

Pada bagian ini, kita akan menampilkan data dari hasil fungsi _getData(). Di dalam body, widget yang akan digunakan adalah FutureBuilder().

Dalam widget FutureBuilder() diwajibkan menggunakan dua properti future dan builder. future diisi dengan fungsi _getData() sedangkan builder akan diisi ( return ) dengan widget yang akan ditampilkan.

Di bagian builder ditambahi dengan kondisi atau if sebagai pengecekan.

Bila url yang diakses sedang loading atau waiting, maka UI akan menampilkan lingkaran loading ( widget CircularProgressIndicator() ).
Jika sudah selesai loading atau data sudah di dapatkan, hasilnya ( snapshot.data! ) akan disimpan dalam variabel hasilData. Kemudian akan menampilkan ( return ) datanya dengan widget Text().
Bila tidak ada data yang tersimpan dalam basis data, maka pesan yang ditampilkan "Tidak ada data."

Catatan:

Tanda ! di sebelah kata data!, merupakan penanda bahwa variabel data benar-benar sudah ada datanya. Ini salah satu bagian dari null-safety dalam flutter.
["data"] adalah nama array yang muncul dalam API

[0] merupakan index data dari array yang dimulai dari angka 0. Tampilan data bila dalam basis data telah diisi dengan data, data yang muncul berada dalam kurung kurawal { "key" : "value" }