 |
Frontend
0.5.1
|
|
Frontend
0.5.1
|
In this chapter, we set up a development environment that allows us to create the frontend, its unit tests, and the documentation. This means that we will primarily install the Flutter framework, as well as a few tools around it.
We recommend either an Arch (e.g. Garuda or Manjaro) or Ubuntu based distribution, so all of the following steps refer to those.
In order to start developing the frontend, we need to meet quite a few prerequisites. Fortunately, most of them can be obtained directly from the package manager. But before we do that, let's bring our system up to date.
Without going into detail about each individual dependency, the most important ones are Flutter, a cross-platform app framework, Chromium, a web browser, Clang, a host compiler, CMake, a build system, Ninja, a build tool, Doxygen, a documentation generator, and Graphviz, a graph visualization software.
The Flutter framework is the only dependency that we cannot get directly from the (official) package manager. It's either available from AUR or from the flutter releases archive. The problem is that we need a very specific version, namely 3.27.4. This is the last version that supports the HTML renderer, which as of now simply produces a much smaller app than the newer canvaskit.
At the time of writing (06.03.2025), the gzipped app size is
Unless this changes drastically, the Flutter version must not be updated. However, Google promises improvement, the progress is tracked in an open issue on GitHub.
We generally recommend VSCode for development. It has a great Dart/Flutter extension called dartcode which also provides excellent debug and testing support. Of course you are welcome to use any other IDE.
The frontend source code is hosted on GitHub. We can use either SSH or HTTP to clone the repository. Using git clone without any additional arguments will clone the latest version of the master branch to the current working directory. After that, we can change into the Frontend directory we've just created.
Normally, Flutter apps can be built directly from the command line, e.g.
However, since we want to integrate the build into the Firmware, it will be wrapped in CMake. This allows us to use a Frontend target directly on the one hand, and on the other hand to have a FrontendRelease target that generates ready-made .zip archives for releases.
With Flutter, we have to differentiate on which platform we want to debug.
The easiest to debug are definitely native builds, as they provide us with a debugger with a start and stop function. The VSCode integration via dartcode is phenomenal and a simple click on debug configuration is (usually) enough to start a session.
These configurations can be found under .vscode/launch.json and look something like this.
No matter how good the native debuggers are, from time to time you need to debug directly in the browser. Flutter allows us to start directly in Chromium with the following call. There is no start or stop function, but the browser developer tools prove useful.
Flutter as a modern framework integrates unit tests very tightly. All that is necessary to run the tests is a one-liner.
If the optional prerequisites for building the docs were found during CMake's configuration phase, the FrontendDocs target can be built to create the documentation.
If the build was successful, the website can be viewed simply with a browser by opening "build/docs/html/index.html" or by creating a small web server.
Frontend 0.5.1