Flutter : Membaca data dari API

Prieyudha Akadita S
Sep 9, 2018 · 3 min read

Salah satu mobile framework yang sedang naik daun adalah Flutter. Flutter merupakan sebuah SDK untuk pengembangan aplikasi mobile yang dikembangkan oleh Google untuk membangun aplikasi yang memiliki kinerja tinggi serta dapat dipublikasi ke platform Android dan iOS dari codebase tunggal.

Logo flutter

Yang Jadi Unggulan

Jika kalian sudah terbiasa men-develop aplikasi android secara native, maka kalian perlu menulis kode XML untuk layoutnya lalu menggunakan bahasa pemrograman Java / Kotlin untuk menjalankan logikanya. Begitu pula dengan Ionic Framework, untuk tampilannya kalian perlu menulis kode dalam HTML dan CSS, lalu menggunakan bahasa pemrograman Typescript untuk menjalankan logic programmingnya.

Flutter menggunakan bahasa pemrograman Dart dari Google baik untuk logic programming maupun tampilannya. Jadi kalian cukup fokus pada satu bahasa pemrograman saja. Satu lagi, Flutter ini begitu mirip dengan Anko Layout. Jika kalian terbiasa menggunakan Anko Layout, akan lebih mudah untuk memahami Flutter ini.

Langsung saja…

Goals kita hari ini

Step 0 : Persiapan

Pastikan anda sudah mengunduh Flutter SDK di situs resminya ( flutter.io ) lalu tambahkan folder YOURFLUTTERSDK/bin ke Environment Variable (mungkin pc kalian perlu restart).

Gunakan IDE favorit kalian, boleh Android Studio atau pun Visual Studio Code. Pastikan juga kalian sudah menginstall plugin Flutter dan Dart untuk masing-masing IDE.

Buka command prompt lalu ketikkan flutter doctor, pastikan tidak ada masalah.

Step 1: New Project

Buat project baru, klik View -> Command Palette (Jika menggunakan Visual Studio Code) atau pilih Start New Flutter Project pada Android Studio.

new project di vscode
pilih Start new Flutter Project di android studio

Beri nama apa saja terserah kalian dan pastikan koneksi internet berjalan.

Step 2 : Dependency

Buka file pubspec.yaml, lalu tambahkan :

http: ^0.11.3+17

jadi kurang lebih seperti ini:

tambahkan dependency di bawah cupertine_icons

Jika sudah selesai, di dalam folder lib, buat file baru bernama ApiHelper.dart dan UserModel.dart

Step 3 : ApiHelper.dart

Step 4 : UserModel.dart

UserModel ini adalah kelas representasi dari database kita. Karena kita menggunakan API dari http://jsonplaceholder.typicode.com/users , maka kita sesuaikan.

Step 5 : Main.dart

Buka main.dart lalu tulis seperti ini:

Step 6 : Run app

Hubungkan smartphone dengan kabel data lalu run project, jika menggunakan Visual Studio Code : View -> Terminal lalu ketikkan flutter run. Jika menggunakan android studio, cukup tekan logo PLAY di pojok kanan atas. Project lengkap ada di

https://github.com/ydhnwb/read_data_from_api

Hasilnya akan jadi seperti ini

Bagaimana? mudah bukan?
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade