Start Learning Clean Architecture 🚀

Flutter Clean Architecture Learning Journey | Step by Step

I'm sharing my personal journey learning Clean Architecture with Flutter. Every commit is a real step in my learning path.

---

✨ What I Built So Far

• Clean Architecture layers (Presentation, Domain, Data)
• Professional resource management (Colors, Fonts, Themes, Strings, Assets...)
• MVVM Architecture for OnBoarding Screen
• Mock API with WireMock
• Dio + Retrofit setup with code generation + Pretty Dio Logger
• BaseResponse + multiple typed response models
• Extension Functions & Mapper extensions
• Login models in Domain Layer
• AppServiceClient using Retrofit + Dio
• Organized Data Layer (network + response folders)
• RemoteDataSource interface + implementation
• NetworkInfo interface + implementation
• Failure class + advanced Error Handler
• Repository interface + RepositoryImpl
• BaseUsecase + LoginUsecase
• App Preferences & Language management
• Dio Factory improvements

---

📸 Screenshots

---

📽️ Videos

J.mp4

---

📋 Commits Order (Step by Step)

1. Project setup + clean main.dart
2. Create layers folders (presentation, domain, data, app)
3. Create Application class + Singleton Pattern
4-14. Add Resource Managers (Color, Font, Style, Theme, Route, String, Asset, Constants...)
15. OnBoarding Assets & Strings
16. OnBoarding Screen (first implementation)
17. OnBoarding Screen Refactoring with MVVM
18. Add Dio + Retrofit + json_serializable packages
19. Create BaseResponse class + specific response models
20. Code generation for JSON handling (build_runner)
21. Add the API client class using the retrofit package
22. Create login models to represent the data structure of the response
23. Create extensions functions
24. Create mapper extensions
25. Start implementing the login request
26. Create the remote data source class and remote data source implementation class
27. Add the network info class and network info implementation class
28. Create repository implementation class
29. Add error handler class
30. Enhance error handling
31. Implement Dio factory class
32. Add Pretty Dio Logger
33. Add timeout & language manager
34. Add App Preferences
35. Refactor DioFactory
36. Add BaseUsecase
37. Add LoginUsecase
38. Add LoginViewModel to manage login screen state and interactions
39. enhance LoginViewModel with detailed comments and stream management
40. Implement LoginObject data class and update login view model methods
41. Update LoginViewModel to manage loginObject state and fix stream controller initialization
42. Implement LoginView with ViewModel binding and text field listeners
43. Implement form validation and UI updates based on ViewModel streams
44. register SharedPreferences in dependency injection
45. Register NetworkInfo instance in dependency injection and update LoginViewModel instantiation to use GetIt instance
46. Fix the issue of the login API
---

✅ Concepts Learned

• ✅ Clean Architecture Structure
• ✅ Singleton Pattern
• ✅ MVVM Architecture
• ✅ Resource Management
• ✅ Route Management with RouteGenerator
• ✅ Mock API with WireMock
• ✅ Dio + Retrofit + Code Generation
• ✅ JSON Serialization (json_serializable)
• ✅ extensions functions
• ✅ Mapping
• ✅ Either
• ✅ Remote Data Source
• ✅ Error Handler
• ✅ UseCase
• ✅ Broadcasting
• ✅ Data Classes
• ✅ Dependency Injection

---

📁 Project Structure

lib/
├── app/
│   ├── app.dart
│   ├── constants.dart
│   ├── app_prefs.dart
│   ├── di.dart
│   └── extensions.dart
├── presentation/
│   ├── forgotPassword/
│   │   └──forgot_password.dart
│   ├── login/
│   │    ├──view 
│   │    │  └──login_view.dart
│   │    └──viewModel
│   │        └──login_viewmodel.dart
│   ├── main/
│   │    └──main_view.dart
│   ├── onBoarding/
│   │   ├──view/
│   │   ├  └──on_boarding_view.dart
│   │   └──viewModel/
│   │      └──on_boarding_viewmodel.dart
│   ├── register/
│   │    └──register_view.dart
│   ├── resource/
│   │     ├── assets_manager.dart
│   │     ├── color_manager.dart
│   │     ├── constants_manager.dart
│   │     ├── language_manager.dart
│   │     ├── font_manager.dart
│   │     ├── routes_manager.dart
│   │     ├── strings_manager.dart
│   │     ├── style_manager.dart
│   │     ├── theme_manager.dart
│   │     └── values_manager.dart
│   ├── splash/
│   │    └── splash_view.dart
│   ├── storeDetails/
│   │  └── store_details_view.dart
│   └── common
│      ├── freezed_data_classes.dart
│      └── freezed_data_classes.freezed.dart
├── domain/
│    ├── models/
│    │  └── models.dart
│    ├── repository/
│    │   └── repository.dart   
│    └── usecase/
│       ├── base_usecase.dart
│       └── login_usecase.dart
└── data/
    ├── network/
    │  ├── app_api.dart
    │  ├── app_api.g.dart
    │  ├── dio_factory.dart
    │  ├── failure.dart
    │  ├── error_handler.dart
    │  ├── network_info.dart
    │  └── requests.dart
    ├─ response/
    │  ├── response.dart
    │  └── response.g.dart
    ├── mapper/
    │   └── mapper.dart
    ├── data_source/
    │   └── remote_data_source.dart
    └── repository/
       └── repository_impl.dart