 |
Frontend
0.7.1
|
|
Frontend
0.7.1
|
The entire software stack is divided into three layers. At the top sits the UI layer, which takes care of the graphical representation of the data for the user. In the middle is a domain layer that prepares the data for the UI and converts user input back into data. And underneath that the data layer handles IO, e.g. get or set data over services.
This architecture is also referred to as Model-View-ViewModel architectural pattern (MVVM) and recommended by the official Flutter guide to app architecture.
A more detailed version of the upcoming diagram can be found at the bottom of the page(⚠ not mobile friendly).
The UI layer is responsible for representing data from the domain (or data) layer and interacting with the user. In MVVM language it's made up of two architectural components, views and view models. Views describe how to present data to the user, view models contain logic that converts data into UI state. Depending on the complexity of the state, simpler views might skip the additional indirection and display data directly.
The optional domain layer is intended for models that need to mediate between the UI and data layers. In these cases, the logic for converting between external data and UI state is too complex to be handled by the view model.
The data layer handles data from external sources. Services are responsible for acquiring the data, repositories then manage it. Managing means handling things like caching, error handling, or retry logic. Examples of services include HTTP requests or WebSockets.
There are two popular means of organizing code:
The structure used here is a combination of the two. Domain and data layer objects (repositories and services) aren't tied to a single feature, while UI layer objects (views and view models) are.
lib/
config/
data/
models/
repositories/
services/
domain/
models/
ui/
core/
<feature>/
utils/
Frontend 0.7.1