Flutter: Option to create GUIs for Embedded Systems

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Flutter: Option to create GUIs for Embedded Systems

Flutter: Option to create GUIs for Embedded Systems

One of the most popular use cases for embedded systems are projects destinated to show information and interact with users. These views are called GUI or Graphic User Interface which are designed to be intuitive, attractive, consistent, and clear.

There are many tools that we can use to achieve great GUIs, mostly implemented for platforms such as Web, Android, and iOS.
Here, we will need to introduce the concept of framework, basically, it is a set of tools and rules that provides a minimal structure to start with your development. Frameworks usually comes with configuration files, code snippets, files and folders organization helping us to save time and effort.
Also, it is important to review the concept of SDK or Software Development Kit which is a set of tools that allows to build software for specific platforms. Usually supplies debugging tools, documentation, libraries, API’s, emulators, and sample code.

Flutter is an open-source UI software development kit by Google that help us to create applications with great GUIs on different platforms from a single codebase.
Depends on the reference, you can find Flutter defined as a framework or SDK and both are correct, however, an SDK could be a best definition thanks to Flutter supplies a wide and complete package to create an application in which framework is also included.

This article is aimed at those that are in a prototyping stage looking for a different tool to develop projects. Also, this article pretends to be a theoretical introduction explaining the most important concepts. However, is a good practice to learn more about reviewing the official documentation from Flutter. (Flutter documentation | Flutter)

Here is the structure used throughout this article:

  • What is Flutter?
  • Flutter details
    • Platforms
    • Programming language
    • Official documentation
  • Flutter for embedded systems

What is Flutter?

Flutter was officially released by Google in December 2018 with a main aim, to give developers a tool to create applications natively compiled for mobile (Android, iOS), web and desktop (Windows, Linux) from a single codebase.

It means that as a developer, Flutter will create a structure with minimal code, configuration files, build files for each operating system, manifests, etc. in which we will add our custom code and finally build this code for our preferred OS. For example, we can create an application to review fruit and vegetable information and compile for Android and iOS with the same code.
A basic Flutter development process based on my experience looks like the following diagram:

1.png

Flutter has the following key features:

  1. Cross-platform development.

    Flutter allows the developer to create applications for different platforms using a single codebase. It means that you will not need to recreate the application for each platform you want to support.
     
  2. Hot-reload.

    This feature allows the developer to see changes in real time without restarting the whole application, this results in time savings for your project.
     
  3. High Performance

    Flutter apps achieve high performance due to the app code is compiled to native ARM code. With this tool no interpreters are involved.
     
  4. UI Widgets

    Flutter supplies a set of widgets (UI components such as boxes, inputs text, buttons, etc.) predefined by UI systems guidelines Material on Android and Cupertino for iOS.
    2.png
    Source: Material 3 Design Kit | Figma Community
    3.jpg
    Source: Design - Apple Developer
     
  5. Great community support.

    This feature could be subjective but, it is useful when we are developing our project find solutions to known issues or report new ones. Because of Flutter is an open source and is widely implemented in the industry this tool owns a big community, with events, forums, and documentation.

Flutter Details

Supported Platforms

With Flutter you can create applications for:

  • Android
  • iOS
  • Linux Debian
  • Linux Ubuntu
  • macOS
  • web Chrome, Firefox, Safari, Edge
  • Windows

Supported deployment platforms | Flutter

Programming Language

Flutter use Dart, a programming language is an open-source language supported by Google optimized to use on the creation of user interfaces.

Dart key features:

  1. Statically typed.

    This feature helps catching errors making the code robust ensuring that the variable’s value always match with the declared variable’s type.

  2. Null safety.

    All variables on Dart are non-nullable which means that every variable must have a non-null value avoiding errors at execution time. This feature also, make the code robust and secure.

  3. Async/Await.

    Dart is client-optimized which means that this language was specially created to ensure the best performance as a client application.

    Async/Await is a feature part of this optimization making easier to manage network requests and other asynchronous operations.

  4. Object oriented.

    Dart is an object-oriented language with classes and mixin. This is especially useful to use on Flutter with the usage of widgets.

  5. Compiler support of Just-In-Time (JIT) and Ahead-of-Time (AOT)

    JIT provides the support that enables the Hot Reload Flutter feature that I mentioned before. It is a complex mechanism, but Dart “detects” changes in your code and execute only these changes avoiding recompiling all the code.

    AOT compiler produces efficient ARM code improving start up time and performance.

Official documentation

Flutter has a rich community and documentation that goes from UI guidelines to an Architectural Overview.

You can find the official documentation at the following links:

Flutter Official Documentation: Flutter documentation | Flutter

Flutter Community: Community (flutter.dev)

Dart Official Documentation: Dart documentation | Dart

Flutter for embedded systems

So far, we know all the excellent features and platforms that Flutter can support. But, what about the embedded systems?

On the official documentation we can find that Flutter may be used for embedded systems but in fact there is no an official supported platform. This SDK has been supported by their community, specially there is one repository on GitHub supported by Sony that provides documentation and Yocto recipes to support Flutter on embedded Linux.

To understand the reason to differentiate between Flutter for Linux Desktop with official support and to create a specific Flutter support for embedded Linux is important to describe the basics of Flutter architecture.

Based on the Flutter documentation the system is designed using layers that can be illustrated as follows:

brian14_0-1698689899013.png

 

Source: Flutter architectural overview | Flutter

We can see as a top level “Framework” which is a high-level layer that includes widgets, tools and libraries that are in contact with developers.

Below “Framework,” the layer “Engine” is responsible of drawing the widgets specified in the previous layer and provides the connection between high-level and low-level code. This layer is mostly written in C++ for this reason Flutter can achieve high performance running applications. Specifically for graphics rendering Flutter implements Impeller for iOS and Skia for the rest of platforms.

The bottom layer is “Embedder” which is specific for each target and operating system this layer allows Flutter application to run as a native app providing the access to interact with different services managed by the operating systems such as input, rendering surfaces and accessibility.

This layer for Linux Desktop uses GTK/GDK and X11 as backend that is highly dependent of unnecessary libraries and expensive for embedded systems which have constrained resources for computation and memory.

The work around founded by Sony’s Flutter for Embedded Linux repository is to change this backend using a widely implemented backend for embedded systems Wayland.

The following image illustrates the difference between Flutter for Linux Desktop and Flutter for Embedded Linux.

brian14_1-1698689966272.png

 

Source: What's the difference between Linux desktop and Embedded Linux · sony/flutter-embedded-linux Wiki · ...

brian14_2-1698690001116.png

 

Source: What's the difference between Linux desktop and Embedded Linux · sony/flutter-embedded-linux Wiki · ...

Here is the link to the mentioned repository: GitHub - sony/flutter-elinux: Flutter tools for embedded Linux (eLinux)

Finally, I would like to encourage you to read the official Flutter documentation and consider this tool as a great option compared to widely used tools on embedded devices such as Qt or Chromium. Also, please have a look to a great article written by Payam Zahedi delving into the implementation of Flutter for Embedded Linux measuring performance and giving conclusions about the usage of Flutter in embedded systems. (Flutter on Embedded Devices. Learn how to run Flutter on embedded… | by Payam Zahedi | Snapp Embedde...).


 

 

No ratings
Version history
Last update:
‎10-30-2023 11:33 AM
Updated by: