A Flutter app that uses the "Dummy Json" api.
- Login
- Fetch products
- Search products
- Pagination
-
Riverpod Used for state management
-
Freezed Code generation
-
Dartz Functional Programming
Either<Left,Right>
-
Auto Route Navigation package that uses code generation to simplify route setup
-
Dio Http client for dart. Supports interceptors and global configurations
-
Shared Preferences Persistent storage for simple data
-
Flutter and Dart And obviously flutter and dart π
The data layer is the outermost layer of the application and is responsible for communicating with the server-side or a local database and data management logic. It also contains repository implementations.
Describes the process of acquiring and updating the data. Consist of remote and local Data Sources. Remote Data Source will perform HTTP requests on the API. At the same time, local Data sources will cache or persist data.
The bridge between the Data layer and the Domain layer. Actual implementations of the repositories in the Domain layer. Repositories are responsible for coordinating data from the different Data Sources.
The domain layer is responsible for all the business logic. It is written purely in Dart without flutter elements because the domain should only be concerned with the business logic of the application, not with the implementation details.
Describes the logic processing required for the application. Communicates directly with the repositories.
Abstract classes that define the expected functionality of outer layers.
The presentation layer is the most framework-dependent layer. It is responsible for all the UI and handling the events in the UI. It does not contain any business logic.
Widgets notify the events and listen to the states emitted from the StateNotifierProvider
.
Describes the logic processing required for the presentation.
Communicates directly with the Providers
from the domain layer.
main.dart
file has services initialization code and wraps the rootMyApp
with aProviderScope
main/app.dart
has the rootMaterialApp
and initializesAppRouter
to handle the route throughout the application.services
abstract app-level services with their implementations.- The
shared
folder contains code shared across featurestheme
contains general styles (colors, themes & text styles)model
contains all the Data models needed in the application.http
is implemented with Dio.storage
is implemented with SharedPreferences.- Service locator pattern and Riverpod are used to abstract services when used in other layers.
For example:
final storageServiceProvider = Provider((ref) {
return SharedPrefsService();
});
// Usage:
// ref.watch(storageServiceProvider);
- The
features
folder: the repository pattern is used to decouple logic required to access data sources from the domain layer. For example, theDashboardRepository
abstracts and centralizes the various functionality required to fetch theProduct
from the remote.
abstract class DashboardRepository {
Future<Either<AppException, PaginatedResponse>> fetchProducts({required int skip});
Future<Either<AppException, PaginatedResponse>> searchProducts({required int skip, required String query});
}
The repository implementation with the DashboardDatasource
:
class DashboardRepositoryImpl extends DashboardRepository {
final DashboardDatasource dashboardDatasource;
DashboardRepositoryImpl(this.dashboardDatasource);
@override
Future<Either<AppException, PaginatedResponse>> fetchProducts(
{required int skip}) {
return dashboardDatasource.fetchPaginatedProducts(skip: skip);
}
@override
Future<Either<AppException, PaginatedResponse>> searchProducts(
{required int skip, required String query}) {
return dashboardDatasource.searchPaginatedProducts(
skip: skip, query: query);
}
}
Using Riverpod Provider
to access this implementation:
final dashboardRepositoryProvider = Provider<DashboardRepository>((ref) {
final datasource = ref.watch(dashboardDatasourceProvider(networkService));
return DashboardRepositoryImpl(datasource);
});
And finally accessing the repository implementation from the Presentation layer using a Riverpod StateNotifierProvider
:
final dashboardNotifierProvider =
StateNotifierProvider<DashboardNotifier, DashboardState>((ref) {
final repository = ref.watch(dashboardRepositoryProvider);
return DashboardNotifier(repository)..fetchProducts();
});
Notice how the abstract NetworkService
is accessed from the repository implementation and then the abstract DashboardRepository
is accessed from the DashboardNotifier
and how each of these layers acheive separation and scalability by providing the ability to switch implementation and make changes and/or test each layer seaparately.
The test
folder mirrors the lib
folder in addition to some test utilities.
state_notifier_test
is used to test the StateNotifier
and mock Notifier
.
mocktail
is used to mock dependecies.
test('dashboardDatasourceProvider is a DashboardDatasource', () {
dashboardDataSource = providerContainer.read
(dashboardDatasourceProvider(networkService));
expect(
dashboardDataSource,
isA<DashboardDatasource>(),
);
});
And here is how we can test it separately from Flutter:
void main() {
late DashboardDatasource dashboardDatasource;
late DashboardRepository dashboardRepository;
setUpAll(() {
dashboardDatasource = MockRemoteDatasource();
dashboardRepository = DashboardRepositoryImpl(dashboardDatasource);
});
test(
'Should return AppException on failure',
() async {
// arrange
when(() => dashboardDatasource.searchPaginatedProducts(skip: any(named: 'skip'), query: any(named: 'query')))
.thenAnswer(
(_) async => Left(ktestAppException),
);
// assert
final response = await dashboardRepository.searchProducts(skip: 1, query: '');
// act
expect(response.isLeft(), true);
},
);
}
class MockRemoteDatasource extends Mock implements DashboardRemoteDatasource {}
run bash gencov.sh
lib
βββ configs
β βββ app_configs.dart
β
βββ main
β βββ app.dart
β βββ app_env.dart
β βββ main_dev.dart
β βββ main_staging.dart
β βββ observers.dart
β
βββ configs
β βββ app_configs.dart
βββ routes
β βββ app_route.dart
β βββ app_route.gr.dart
β
βββ services
β βββ user_cache_service
β βββ data
β β βββ datasource
β β β βββ user_local_datasource.dart
β β βββ repositories
β β βββ user_repository_impl.dart
β βββ domain
β β βββ providers
β β β βββ user_cache_provider.dart
β β βββ repositories
β β βββ user_cache_repository.dart
β βββ presentation
β
βββ shared
β βββ data
β β βββ local
β β β βββ shared_prefs_storage_service.dart
β β β βββ storage_service.dart
β β βββ remote
β β βββ dio_network_service.dart
β β βββ network_service.dart
β β βββ remote.dart
β βββ domain
β β βββ models
β β β βββ product
β β β β βββ product_model.dart
β β β β βββ product_model.freezed.dart
β β β β βββ product_model.g.dart
β β β βββ user
β β β β βββ user_model.dart
β β β βββ models.dart
β β β βββ paginated_response.dart
β β β βββ parse_response.dart
β β β βββ response.dart
β β βββ providers
β β βββ dio_network_service_provider.dart
β β βββ sharedpreferences_storage_service_provider.dart
β βββ exceptions
β β βββ http_exception.dart
β βββ mixins
β β βββ exception_handler_mixin.dart
β βββ theme
β β βββ app_colors.dart
β β βββ app_theme.dart
β β βββ test_styles.dart
β β βββ text_theme.dart
β βββ widgets
β β βββ app_error.dart
β β βββ app_loading.dart
β βββ globals.dart
β
βββ features
β βββ authentication
β β βββ data
β β β βββ datasource
β β β β βββ auth_local_data_source.dart
β β β β βββ auth_remote_data_source.dart
β β β βββ repositories
β β β βββ atuhentication_repository_impl.dart
β β βββ domain
β β β βββ providers
β β β β βββ login_provider.dart
β β β βββ repositories
β β β βββ auth_repository.dart
β β βββ presentation
β β βββ providers
β β β βββ state
β β β β βββ auth_notifier.dart
β β β β βββ auth_state.dart
β β β β βββ auth_state.freezed.dart
β β β βββ auth_providers.dart
β β βββ screens
β β β βββ login_screen.dart
β β βββ widgets
β β βββ auth_field.dart
β β βββ button.dart
β βββ dashboard
....
git clone https://github.com/Uuttssaavv/flutter-clean-architecture-riverpod
cd flutter-clean-architecture-riverpod
flutter pub get
flutter pub run build_runner build
flutter run
or simply press F5 key
if you are using VSCode
Do visit my portfolio site or connect with me on linkedin