Implementasi Flutter dengan BLoC, Dio & Logging Interceptor

sample project

Bermain dengan flutter merupakan kegiatan yang sangat menyenangkan. kita bisa membuat aplikasi tanpa perlu melakukan banyak ceremony seperti yang biasa kita lakukan secara native menggunakan swift ataupun kotlin.

Tentunya makin kesini, terasa perlu menerapkan arsitektur. Bisa jadi karena code yang sudah mencapai ratusan/ribuan baris per-halaman atau memang dirasa sulit untuk me-maintain code yang ada. maka dari itu kita akan menggunakan BLoC.

Kenapa menggunakan BLoC (Business Logic Component)?

Bloc makes it easy to separate presentation from business logic, making your code fast, easy to test, and reusable.

Tanpa perlu berlama lama lagi, kita akan membuat aplikasi sederhana menggunakan API dari pinjollist yang berisi nama-nama perusahaan yang terdaftar di OJK. sederhana bukan? Jadi nanti ada list untuk menampikan nama perusahaan, ada feature pencarian dan juga ketika salah satu item dari list diklik akan menampilkan modal berisi detail company tersebut. Begini Demo nya.

pertama tama pasti kita perlu membuat project terlebih dahulu, usahakan menggunakan project name pinjollist supaya tidak conflict di bagian importnya.

masukan dependency yang akan kita pakai pada pubspec.yaml

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2
  dio: ^3.0.9
  flutter_bloc: ^3.2.0
  equatable: ^1.0.0
  url_launcher: ^5.4.1

dev_dependencies:
  flutter_test:
    sdk: flutter
  build_runner: ^1.8.0
  json_serializable: ^3.2.5

kita akan menggunakan Dio sebagain networking, flutter_bloc dan equatable untuk menerapkan BLoC, url_launcher untuk mengakses url ke browser serta build_runner dan json_serializable untuk code generation pada model kita nanti.

buat beberapa package didalam lib seperti berikut:

susunan package

• bloc untuk class bloc kita nanti
• commons untuk widget yang umum atau sering digunakan ulang
• model untuk menyimpan berbagai model yang kita punya
• repository akan kita gunakan untuk menyimpan logic networking atau yang berhubungan dengan data
• ui kita gunakan untuk menyimpan class screen / page kita
• utils kita gunakan untuk menyimpan utilitas, disini kita bisa menyimpan logging interceptor.

Sederhana nya masing masing package tersebut akan memudahkan kita ketika me-maintain atau mencari hal yang kita perlukan. untuk penamaan bebas saja tidak mesti terpaku dengan yang ada di gambar.

pertama-tama mari kita buat model terlebih dahulu. sesuai response dari api kita bisa membuat model seperti berikut:

company model

secara langsung kita lihat bahwa kita belum punya company.g.dart dan fromJson serta toJson nya masih error. class company.g.dart adalah hasil generated dari dependency build_runner.

silahkan jalankan command berikut untuk mendapatkan nya

flutter packages pub run build_runner build

Selanjutnya, kita lengkapi file repository kita, buatlah 3 file yaitu company_api_provider.dart, company_repository.dart dan repository.dart

company_api_provider.dart adalah kelas untuk menyimpan logic yang berhubungan dengan networking kita. disini kita definisikan object dio dan function untuk call api ke /companies

tentu kita memerlukan logging interceptor agar kita bisa tahu proses dari pemanggilan API tersebut. berikut kode nya:

selanjutnya company_repository.dart adalah kelas yang akan kita gunakan untuk berhubungan dengan bloc nya.

kemudian isi dari repositories.dart adalah

export 'company_api_provider.dart';
export 'company_repository.dart';

Mungkin disinilah pembahasan yang lumayan membuat bingung, tapi penulis berusaha untuk menggunakan bahasa yang lebih mudah dipahami.

Bloc merupakan design pattern yang membantu untuk memisahkan presentation (UI) dengan business logic.

Dalam membuat bloc biasanya akan lebih muda jika kita menggunakan generator, jika pakai vscode bisa kesini, atau pengguna intellij/android studio bisa kesini.

Setelah menginputkan nama bloc nya jangan lupa untuk menggunakan equitable.

maka akan tergenerate 4 file/class yaitu bloc.dart, company_bloc.dart, company_event.dart, company_state.dart

• Event adalah input untuk bloc, misal tombol yang ditekan atau perintah untuk memuat halaman.
• State adalah output dari bloc dan mewakili bagian dari keadaan dari aplikasi.
• Bloc adalah komponen yang mengonversi Stream dari Event ke Stream yang mengubah State

Karena event yang kita perlukan hanya fetching data dari api, maka event kita hanya FetchCompanies(). Mari kita ubah company_event.dart menjadi seperti berikut.

pada company_state.dart kita akan menambahkan beberapa state. untuk penamaan state/event bisa berpatokan pada sumber ini. maka jadilah seperti berikut:

kemudian ubahlah company_bloc.dart menjadi seperti berikut. disini kita akan mapping event kita menjadi state.

kita sudah selesai dengan urusan per-BLoC-an pada package bloc. mari kita buat provider dan builder bloc untuk bagian UI nya.

ubahlah kelas main.dart menjadi seperti berikut.

selanjutnya kita perlu untuk membuat widget companies_screen.dart, taruh di dalam package UI ya.

selanjutnya kita perlu melengkapi untuk modal_company dan loading widget nya yang ada di package commons. berikut kode nya.

dan ini untuk widget loading nya.

Nah sampai sini harusnya sudah selesai dalam penerapan. teman teman sudah bisa menjalankan apps nya dan melihat logging nya.

Selamat. untuk melihat full project nya kalian bisa lihat di Github ku , jika berkenan boleh subscribe channel youtube ku dan gabung di server discord ini.