9bd79ffc00
* feat(mobile): Adds file upload progress stats: current upload file size uploaded, current file size and formatted bytes per second upload speed. Closes #7379 * chore(mobile): Fix stan issues * chore(mobile): Remove non-'en-US' translations, as I saw on another PR review (just looking around) that localisation is done via Localizely and this was the instruction (to only provide the en-US localisation). * fix(mobile): Provide boundary checks to ensure overflow issues are accounted for on erroneous upload speed calculation, sometimes the numbers received back from the upload handler can be a bit wild. * fix(mobile): Some heuristic bug fixing. Whilst thinking what could trigger overflow issues or 'zero' readouts, left over values from the previous file may do that. So adding the last upload sent bytes to the values to be reset may help! The time isn't necessary, as the period/cycle is inconsequential in this circumstance, well it should be anyway. * fix(mobile): Actually, in combination to the last commit, some more heuristic bug fixing. I was thinking it would be advantageous not to reset the update time, as it would trigger a quicker first upload speed calculation. However, I realised that could also cause the calculation to be incorrect on the first cycle as the period wouldn't align. Not really sure if it would be a big deal, but I'm taking wild guesses in the dark here. Again, some purely heuristic debugging as I can't re-produce the underlying issue. This is mainly just ensuring that the state is fully reset and is a known state at the beginning of each file as a common strategy to reduce issues. * refactor(mobile): Move the UI for the file progress to underneath the progress bar, it makes more sense there than in the file information table which contains only static information pertaining to the file itself. Switching to a monospace font to keep the UI from jumping around as the numbers change. * refactor(mobile): In order to have the UI always present an 'active' upload speed (as per the discussion on PR #7760), this stores the 'upload speeds' (capped at the latest 10) in a list and calculates the current upload speed as the average over them. This way the UI can always display a 'constant' upload speed during uploading, instead of starting a fresh when each file starts uploading. Limiting it to the 10 latest keeps the average somewhat recent and ensures some level of sensible memory allocation. |
||
---|---|---|
.. | ||
.fvm | ||
.isar@6643d064ab | ||
.vscode | ||
android | ||
assets | ||
fonts | ||
integration_test | ||
ios | ||
lib | ||
openapi | ||
scripts | ||
test | ||
.fvmrc | ||
.gitignore | ||
.metadata | ||
analysis_options.yaml | ||
dart_test.yaml | ||
flutter_native_splash.yaml | ||
makefile | ||
pubspec.lock | ||
pubspec.yaml | ||
README.md |
Immich Mobile Application - Flutter
The Immich mobile app is a Flutter-based solution leveraging the Isar Database for local storage and Riverpod for state management. This structure optimizes functionality and maintainability, allowing for efficient development and robust performance.
Setup
You must set up Flutter toolchain in your machine before you can perform any of the development.
Immich-Flutter Directory Structure
Below are the directory inside the lib
directory:
-
constants
: Store essential constants utilized across the application, like colors and locale. -
extensions
: Extensions enhancing various existing functionalities within the app, such as asset_extensions.dart, string_extensions.dart, and more. -
module_template
: Provides a template structure for different modules within the app, including subdivisions like models, providers, services, UI, and views.models
: Placeholder for storing module-specific models.providers
: Section to define module-specific Riverpod providers.services
: Houses services tailored to the module's functionality.ui
: Contains UI components and widgets for the module.views
: Placeholder for module-specific views.
-
modules
: Organizes different functional modules of the app, each containing subdivisions for models, providers, services, UI, and views. This structure promotes modular development and scalability. -
routing
: Includes guards like auth_guard.dart, backup_permission_guard.dart, and routers like router.dart and router.gr.dart for streamlined navigation and permission management. -
shared
: cache, models, providers, services, ui, views: Encapsulates shared functionalities, such as caching mechanisms, common models, providers, services, UI components, and views accessible across the application. -
utils
: A collection of utility classes and functions catering to different app functionalities, including async_mutex.dart, bytes_units.dart, debounce.dart, migration.dart, and more.
Immich Architectural Pattern
The Immich Flutter app embraces a well-defined architectural pattern inspired by the Model-View-ViewModel (MVVM) approach. This layout organizes modules for models, providers, services, UI, and views, creating a modular development approach that strongly emphasizes a clean separation of concerns.
Please use the module_template
provided to create a new module.
Architecture Breakdown
Below is how your code needs to be structured:
-
Models: In Immich, Models are like the app's blueprint—they're essential for organizing and using information. Imagine them as containers that hold data the app needs to function. They also handle basic rules and logic for managing and interacting with this data across the app.
-
Providers (Riverpod): Providers in Immich are a bit like traffic managers. They help different parts of the app communicate and share information effectively. They ensure that the right data gets to the right places at the right time. These providers use Riverpod, a tool that helps with managing and organizing how the app's information flows. Everything related to the state goes here.
-
Services: Services are the helpful behind-the-scenes workers in Immich. They handle important tasks like handling network requests or managing other essential functions. These services work independently and focus on supporting the app's main functionalities.
-
UI: In Immich, the UI focuses solely on how things appear and feel without worrying about the app's complex inner workings. You can slot in your reusable widget here.
-
Views: Views use Providers to get the needed information and handle actions without dealing with the technical complexities behind the scenes. Normally Flutter's screen & pages goes here.
Contributing
Please refer to the architecture for contributing to the mobile app!