Flutter boiler project with The Movie Database (TMDB) example using Clean architecture.
Step 1:
Download or clone this repo by using the link below:
https://github.com/alihaider78222/flutter-mobx-boilerplate-project
Step 2:
rename .env-copy
to .env
and add your API and Access Token.
apk available in Releases section under Assets
, download now to browse around.
run these command in terminal to generate local keys which can be used in app
flutter pub run easy_localization:generate --source-dir ./assets/langs
flutter pub run easy_localization:generate -S assets/langs -f keys -o locale_keys.g.dart
- Dio
- MobX
- Json Serialization
- Get_it (Dependency Injection)
- Cached network image
- Easy localization
- Flutter flavor
- F_logs
- Shared_preferences
- intl
- better_player (video player)
- . . . . . .
Here is the core folder structure which flutter provides.
flutter-app/
├── android
├── build
├── ios
├── lib
└── test
Here is the folder structure we have been using in this project
lib/
├── constants/
├── core/
├── data/
├── di/
├── domain/
├── generated/
├── utils/
├── main_core.dart
└── main.dart
Now, lets dive into the lib folder which has the main code for the application.
1- constants - All the application level constants are defined in this directory with-in their respective files. This directory contains the constants for `theme`, `colors`, `assets` and `strings`.
2- core - Contains the core features like flavor configuration, usecase abstract class, do configuration, interceptors, logs, extensions and change settings(Theme, Fonts etc) class.
3- data - Contains the data layer of your project, includes data source directories for local and remote, and repository implementation.
4- di - Contains the dependency injection class which is executed when the app starts.
5- domain - Contains the entities, usecases and repository interfaces.
6- generated - Contains the generated localization/translation of the project.
7- presentation — Contains all the stores, ui, routes of your project, contains sub directory for each screen.
8- util — Contains the utilities/common functions of your application.
9- main_core.dart - This is the starting point of the application. Flavors are initialized here..
9- main.dart - All the application level configurations are defined in this file i.e, theme, routes, title, orientation etc.
This directory contains all the application level constants. A separate file is created for each type as shown in example below:
├── constants
| ├── app_colors.dart
| ├── app_theme.dart
| └── assets.dart
This directory contains all the core method, classes of the application.
├── core
| ├── config
| | └── flavors/
| ├── dio
| | ├── base/...
| | ├── configs/...
| | ├── exception/...
| | ├── interceptor/...
| | └── dio_client.dart
| ├── extensions/...
| ├── logs
| | └── log_utils.dart
| ├── models
| | └── screen_args.dart
| ├── settings/...
| ├── usecase
| | └── usecase.dart
| └── utils
| | └── device_utils.dart
This directory is the data layer of the application and contain all the data layer logic like repository implementation and fetch data from either remote or local data sources.
├── data
| ├── data_sources
| | ├── local
| | └── remote
| | | ├── apis
| | | | └── movies
| | | | ├── movie_api.dart
| | | | └── movie_api_impl.dart
| | | ├── constants
| | | | └── network_constants.dart
| | | └── dtos
| ├── di
| | ├── module
| | | ├── network_module
| | | | └── network_module.dart
| | | └── repository_module
| | | | └── repository_module.dart
| | └── data_layer_injection.dart
| └── repository
| | └── movies
| | └── movies_repository_impl.dart
This directory is the domain layer of the application and contain all the logical entities, usecases and repository interfaces.
├── domain
| ├── di
| | ├── module
| | | └── usecase_module.dart
| | └── domain_layer_injection.dart
| ├── entities
| | └── movie
| | | ├── movie.dart
| | | ├── movies_list.dart
| | | ├── movie_detail.dart
| | | └── trailer_video.dart
| ├── repository_interfaces
| | └── movies
| | | └── movies_repository.dart
| └── usecases
| | └── movies
| | | ├── get_movie_detail.dart
| | | ├── get_search_movies.dart
| | | ├── get_trailer_videos.dart
| | | └── get_upcoming_movies.dart
This directory is the presentation layer of the application and contain all the UI screens, Common Widgets, Routes and Stores(State Holder) and Dependency injection folder of this layer.
├── presentation
| ├── common_widgets
| ├── di
| | ├── module
| | | └── stateholder_module.dart
| | └── presentation_layer_injection.dart
| ├── routes
| | └── routes.dart
| ├── screens
| | ├── get_ticket
| | | └── get_ticket_screen.dart
| | ├── home
| | | └── home.dart
| | ├── movie_detail
| | | └── movie_detail_screen.dart
| | ├── search_movies
| | | └── search_movies_screen.dart
| | ├── settings
| | | └── settings_screen.dart
| | ├── upcoming_movies
| | | └── upcoming_movies_screen.dart
| | └── watch_trailer
| | | └── watch_trailer.dart
| └── stores
| | ├── home_store.dart
| | └── movie_store.dart
This is the starting point of the application. All the application level configurations are defined in this file i.e, theme, routes, title, orientation etc.
This is where App Flavors are defined which are used further if we need to change API Base Urls depending upon the flavors.
Checkout wiki for more info
It is an example only. If you liked my work, don’t forget to ⭐ star the repo to show your support.