Flutter is a framework designed by Google. It is built in the programming language Dart, which Google also develops. With Flutter, you can roll out an application across different platforms (iOS, Android, web, desktop & embedded) with a single codebase. The advantage of this is that it is easier to maintain and the development time is much faster compared to native development. With Native development, the application has to be developed for each operating system. This is not only much slower but also more expensive, as multiple people need to work on the mobile application.

High-level overview

Flutter is written using the Dart programming language. The engine under Flutter is written in C++ and uses Skia for rendering, which is also from Google. Skia is also used in Chrome and Firefox browsers. At this moment of writing, Flutter has announced a new renderer, Impeller. This is currently only active for iOS. For Android, it is in beta. Below is a diagram that shows the high-level overview of Flutter.

An important term that is often used in Flutter is the widget. Within Flutter, on the UI side, the entire UI is assembled with widgets. A widget can be seen as a component that is often used for websites. It is a block containing code for a specific part/display. Widgets are also used for formatting the UI. A widget can be placed in another widget. This can quickly become somewhat chaotic, and the code can become unreadable quickly. It is therefore important to keep the widgets as small as possible and to keep the code as neat as possible with indenting.

Widgets can be used in multiple places. This makes it possible to use the same code in multiple places without rewriting the code. From Flutter, there are a number of basic widgets available, such as Text for displaying text on the screen, or Padding to give padding, space around, the widget.

A widget can be stateful or stateless. It is important to know the differences between these two as this has a significant impact on the functioning of the app.

Stateful

With a stateful widget, the state of the widget is maintained. With the help of the state, the UI can be adjusted when its state is changed. An example of a stateful widget is one that displays how many times a button has been pressed. A Text widget is needed to show the number of clicks. A FloatingActionButton widget is needed to increase the value shown in the Text widget. These two widgets together form a new widget. This also shows that you can put a widget in another widget. Since we want to keep track of the state of this widget and want to update the UI, namely show how often the button has been pressed, a stateful widget must be used. By giving a default value to the state with 0, the Text widget will display 0 on the screen. As soon as the button is pressed, the state must be adjusted. This is done with the SetState method. This can change the value of the state. Once the value is changed, the widget, UI, is recreated and will now, instead of showing 0, show 1.

Stateless

With a stateless widget, the state of the widget is not maintained. This means that the UI is created the first time it is called. Then the screen does not change anymore until navigated to another screen.

Choosing which widget to use depends on the functionality the widget will have to do. If the widget has interaction such as a form, button, or fetching external data, then a stateful widget is always needed. In other cases, a stateless widget can often be used.

Within the project, as much use as possible is made of stateless widgets. This has to do with the fact that the state is managed through a state manager. This state manager can maintain the state in both a stateful and a stateless widget. How this works exactly will be discussed later in this document.