News App (MVVM + Provider) — Flutter Learning Project

Overview

news-app-mvvm adalah salah satu dari dua iterasi project belajar Flutter yang saya kerjakan di bawah payung RootAppNews. Fokus dari iterasi ini adalah merasakan langsung MVVM + Provider sebagai state management ringan di atas pragmatic Clean Architecture yang sengaja dipangkas dari delapan lapisan penuh menjadi empat lapisan esensial.

Aplikasi ini dipasangkan dengan backend free-api-news yang saya tulis sendiri di Go + PostgreSQL, supaya latihan arsitektur tidak berhenti di mock.

Tech & Libraries

Teknologi dan library yang dipakai atau disentuh di project ini:

Problem

Belajar Flutter Clean Architecture kalau langsung mengadopsi delapan lapisan penuh terasa kelebihan beban untuk iterasi pertama, sehingga sering berakhir di boilerplate tanpa pemahaman jujur. Selain itu latihan dengan mock API menyembunyikan issue konkret seperti kontrak error, rotasi token, dan lifecycle ViewModel, sehingga ketika pindah ke kasus nyata banyak asumsi yang jebol.

My Role & Ownership

Solo builder: arsitektur MVVM + Provider, Repository layer, integrasi ke free-api-news, TDD ViewModel dan Repository, plus routing dan DI.

Technical Approach

Membangun Flutter app dengan MVVM + Provider (ChangeNotifier) pada pragmatic Clean Architecture empat lapisan: Presentation (Pages, Widgets, ViewModel), Repository (interface + implementasi digabung untuk iterasi), Models (entity + data object digabung), dan Core (ApiClient Dio, Either/Failure, GetIt). Response network secara konsisten dibungkus dengan Either<Failure, T> agar error menjadi nilai eksplisit, bukan exception tersembunyi di alur UI.

Disiplin TDD dipakai pada ViewModel dan Repository: siklus red-green-refactor dijalankan dengan mocktail tanpa build_runner, sehingga iterasi test cepat. Routing memakai go_router dengan redirect berbasis status auth, dan dependency injection memakai get_it untuk menghindari passing constructor manual di hierarki widget yang dalam.

Architecture Notes

Pragmatic Clean Architecture diterapkan dengan empat lapisan: Presentation, Repository (interface + implementasi disatukan untuk menjaga iterasi cepat), Models (entity dan data object disatukan), dan Core. Dependency rule tetap dijaga: UI dan ViewModel hanya berbicara dengan Repository, Repository mengkonsumsi ApiClient Dio, dan Model berperan ganda sebagai JSON serializer plus value object.

ViewModel berbasis ChangeNotifier dan di-inject ke tree via ChangeNotifierProvider, dan Consumer dipakai di UI untuk rebuild granular sesuai field yang berubah. Dependency injection dipegang GetIt secara singleton atau factory sesuai kebutuhan, dan routing memakai go_router dengan refresh listenable supaya redirect auth merespons perubahan state.

Trade-offs

Memangkas Clean Architecture menjadi empat lapisan demi kecepatan iterasi; konsekuensinya ketika nanti diperluas ke proyek tim atau domain yang lebih besar, UseCase layer mungkin perlu dihadirkan kembali. MVVM + Provider dipilih alih-alih BLoC karena lebih ringan dan cocok untuk belajar pattern Method-driven terlebih dahulu; trade-off-nya kurang event traceability kalau dibandingkan BLoC.

Interface Repository tidak dipisah ke file sendiri di iterasi ini untuk menghindari jumlah file yang meledak, tetapi siap dipisahkan saat modul tumbuh.

Implementation Highlights

• Arsitektur empat lapisan pragmatis: Presentation (ViewModel + Pages + Widgets), Repository (interface + implementasi), Models, dan Core (ApiClient, Either/Failure, GetIt).
• Response layer selalu Either<Failure, T> memakai dartz sehingga error tidak bocor sebagai exception ke UI.
• TDD red-green-refactor pada ViewModel dan Repository dengan mocktail, tanpa build_runner.
• go_router dengan redirect auth-aware dan dependency injection via get_it untuk menghindari prop drilling.
• Integrasi ke backend sendiri (free-api-news) dengan interceptor Dio untuk injection Bearer token dan handler refresh dasar.
• Equatable dipakai pada entity dan state supaya value equality konsisten untuk test dan rebuild selektif.

Results

• Menunjukkan pemahaman jujur soal state management Flutter: memilih MVVM + Provider sebagai pendekatan ringan, memisahkan ViewModel dari akses API, dan menjaga UI tetap reaktif lewat ChangeNotifier. Sekaligus membuktikan kemampuan menulis test yang bermakna pada ViewModel dan Repository, bukan sekadar mengejar coverage.
• Flutter news reader end-to-end terhubung ke free-api-news live di VPS.
• MVVM + Provider (ChangeNotifier) dipakai konsisten di AuthViewModel, NewsFeedViewModel, BookmarkViewModel, ArticleDetailViewModel, ExploreViewModel, dan SearchViewModel.
• Repository layer dibungkus Either<Failure, T> memakai dartz, error ditangani di presentation layer sebagai state.
• TDD diterapkan di ViewModel dan Repository dengan mocktail tanpa build_runner.
• Navigasi go_router dengan redirect auth-aware dan DI via get_it.
• Endpoint dasar yang dikonsumsi: auth (register/login/logout/refresh/me), news (categories/feed/detail), plus bookmark.
• Public proof: backend pendamping live di http://103.181.143.73:8081 dan repo Flutter publik di GitHub.

Links

• GitHub Repository