Tutorial Flutter Get API dengan Dio, GetX dan Shimmer Yang Baik

 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

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.