Upload Image di Flutter menggunakan Dio and GetX
Intro
Halo teman-teman semua! kembali lagi dengan artikel setahun sekali saya ini 😎. So untuk artikel kali ini saya akan menulis tentang salah satu case yang sering ditemui di semua case pemrograman, yaitu upload image through API pada Flutter menggunakan Dio sekaligus state management menggunakan GetX, untuk kamu yang belum tau apa dua hal tadi, bisa coba baca artikel ini serius, pasti ngerti ehehehe. Okay then, let’s go to the code section!
First
Silahkan teman-teman membuat project Flutter baru dengan nama bebas terserah teman-teman, kemudian tambahkan beberapa library berikut pada pubspec.yaml di dalam dependencies
dependencies:
.
.
.
dio:
get:
cached_network_image:
image_picker:
Kemudian jalankan command flutter pub get pada terminal. Setelah itu kita melakukan persiapan file yang mungkin dibutuhkan. Di dalam folder lib, buatlah struktur folder dan file kurang lebih seperti ini:
lib ---
|--- config
| |--- constants.dart
| |--- index.dart
| |--- size.dart
|
|--- services
| |--- profile
| |--- index.dart
|
|--- controllers
| |--- profile
| |--- index.dart
|
|--- ui
| |--- screen
| |--- profile_screen
| |--- index.dart
|
|--- main.dart
untuk config, saya memakai code template dari previous artikel yg sudah saya mention diatas ya (agak males bikin lagi hehehe) so please, you can read it first ;).
services/profile/index.dart
Pada section ini, kita perlu membuat service Dio bisa menerima form data berupa file atau dalam kasus kita adalah image. Maka dari itu kita memerlukan MultipartFile untuk membuat form data yang dapat menyimpan semua data request dari string, number, sampai file. Yang kita gunakan pada kasus kita sekarang adalah file karena kita meng-upload image, untuk flow-nya kita akan menyimpan image ke project BE kita dan akan menyimpan link url akses ke image tersebut ke DB.
Untuk API sendiri, saya menggunakan free API untuk upload image seperti yang tercantum pada code diatas, tapi untuk “key”-nya bisa kamu dapetin sendiri di web-nya. Kemudian untuk “source” sendiri adalah keyname yang digunakan untuk image-nya. Sehingga kita hanya perlu menjalankan function Post dan mengirim request form data kita. Kemudian untuk response-nya, kita hanya perlu mengambil value url image result setelah di upload untuk digunakan pada aplikasi kita.
*Sebagai catatan kenapa saya membuat prefix dio_form_data ? dikarenakan linter saya yg memberikan warning, karena form data-nya bertabrakan dengan milik GetX dan Flutter. Jadi untuk membedakannya, saya perlu membuat prefix sendiri.
controllers/profile/index.dart
Pada section ini, kita mengimplementasikan service profile pada controller, untuk imageUrl kita buat .obs(observerble) karena hasil API upload-nya hanya mengambil string url, jadi kitatidak perlu membuat yang aneh-aneh.
ui/screens/profile/index.dart
Untuk Profile Screen saya membuat flow simpel seperti ini:
- Untuk kondisi kosong, maka screen akan menampilkan tombol untuk pilih image by galeri atau kamera dan dipisahkan oleh garis putus-putus(untuk pemanis dan penanda).
- Setelah user mengambil image dari kamera atau galeri, maka tanda bahwa image sukses diambil adalah garisnya berubah menjadi pathname dari image tersebut.
- Kemudian saat user menekan tombol upload, maka akan ada micro-animation loading pada button, dan jika image sukses di-upload maka tombol untuk mengambil image akan hilang dan akan menampilkan image hasil upload-nya.
main.dart
Untuk Main App nya, kita hanya perlu mengimplementasikan GetMaterialApp dan memanggil User Profile Screen yang sudah kita implement tadi dan sudah aplikasi kita selesai serta siap dijalankan.
Hasil
Penutup
Jadi kita sudah sampai diujung artikel dan semoga teman-teman juga berhasil mengerjakan aplikasi dasar dan simpel diatas hehehe 😊. Sebagai penutup, semoga artikel sederhana ini bisa bermanfaat bagi kita semua dan saya menerima segala masukan untuk meningkatkan kualitas artikel menjadi lebih baik dan mudah untuk dipahami lagi! 😘
See you ! :D