Pada tutorial series Flutter kali ini, Konsep Koding akan berbagi tutorial Flutter Bahasa Indonesia mengenai cara get api atau consume API menggunakan Dio, Dio adalah salah satu library atau package di Flutter untuk consume API, Dio memiliki banyak kelebihan. 



Tentang Dio Flutter

Klien Http yang kuat untuk Dart, yang mendukung Interceptors, konfigurasi Global, FormData, Pembatalan Permintaan, Pengunduhan file, Timeout, dll.

API untuk Project

Disini kita akan menggunakan api open dari https://reqres.in/api/users?page yang JSON response nya seperti di bawah ini :




Memulai Project dan Koding

1. Pertama tambahkan package Dio dan GetX di pubspec.yaml

dependencies:

  flutter:

    sdk: flutter


# versions available, run `flutter pub outdated`.

dependencies:

  flutter:

    sdk: flutter


  # The following adds the Cupertino Icons font to your application.

  # Use with the CupertinoIcons class for iOS style icons.

  cupertino_icons:

    ^1.0.2

  # Add this 3 libs

  dio: ^4.0.6

  get: ^4.6.5

  shimmer:

 

2.  Tambahkan dan ubah file di bawah ini lib folder :



lib/account/account.controller.dart


lib/account/account.dart


lib/models/account.model.dart

lib/services/account.repository.dart


lib/services/dio.helper.dart


Dan ubah 

lib/main.dart


Kemudian run project flutter run maka hasilnya akan seperti di bawah ini:








Penjelasan :

lib/account/account.controller.dart adalah logic yang untuk semua aplikasi kita entah itu untuk hit api, menampilkan alert dan logic lainnya

lib/account/account.dart adalah main UI untuk menampilkan hasil dari API yang di binding dengan GetX dari controller

lib/models/account.model.dart adalah untuk mendeklarasi json response dari server

lib/services/account.repository.dart adalah logic untuk repository dari server yang kemudian dikirim ke controller untuk diolah dan dikirimkan ke UI

lib/services/dio.helper.dart adalah layaknya constant untuk api url dsb disini saya buat khusus untuk helper api kita pisah dengan constant lain jadi khusus untuk URL dan API saja.


Source Project

Kamu bisa mendonwload full project tadi disini dan bisa kamu langsung coba: Source Code

Sekian Tutorial Flutter Get API dengan Dio, GetX dan Shimmer Yang Baik semoga tutorial dari Konsep Koding ini dapat bermanfaat dan membantu kamu yang sedang mempelajari Futter.

Baca Tutorial Flutter Dart KonsepKoding Lainnya:
#28 Tutorial HTTP Request Flutter Get API
#29 Tutorial Membuat UI Login Animasi Keren Flutter