{"id":4861,"date":"2021-10-14T09:22:13","date_gmt":"2021-10-14T07:22:13","guid":{"rendered":"https:\/\/www.basyskom.de\/?p=4861"},"modified":"2025-02-06T08:11:51","modified_gmt":"2025-02-06T07:11:51","slug":"flutter-ffi-plugins-how-to-use-open62541-in-flutter-applications","status":"publish","type":"post","link":"https:\/\/www.basyskom.de\/en\/flutter-ffi-plugins-how-to-use-open62541-in-flutter-applications\/","title":{"rendered":"Flutter FFI Plugins – How to use open62541 in Flutter applications"},"content":{"rendered":"
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Motivation<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

In recent days, Google’s liberally licensed UI toolkit Flutter is getting a lot of attention. While the original 1.0 release of Flutter only supported Android and iOS devices, the release 2.0 from March 2021 added official support for Web and Desktop as well. Additionally, there is an increased interest in running Flutter on embedded devices to implement embedded HMIs. Also Google recognized this and added “embedded devices” as an official target for Flutter lately, even relatively prominent on Flutter’s homepage. There are various very interesting projects underway. To name one have a look at this Sony<\/a> project.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t<\/i>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Porting from Qt Quick \/ QML to Flutter?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Here at basysKom, one of our primary fields of interest are HMIs on embedded devices. That is why we are following Flutter’s development in this area very closely.<\/p>

Recent experiments with internal projects showed that those developments are very promising. In this post<\/a>\u00a0my colleague Jeremias explained already last year that Flutter applications can run on i.MX6 devices.\u00a0<\/p>

This year we ported our industrial HMI showcase from Qt Quick to Flutter to see how this works out. The showcase is not very complex. Nevertheless, the project underlined that developing embedded HMIs with Flutter is quite practical and that the ecosystem and tooling is already very pleasant and mature. We were able to run this showcase application on various platforms like Linux, Android, Web and an i.MX8 device without too much hassle.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t<\/i>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

The missing part: Plugins<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

However one thing was still missing. The original application is a Qt Quick-based HMI using Qt OPC UA to communicate with an OPC UA server. There is no direct OPC UA support in Flutter\/Dart. To deal with this we originally used a Node.js gateway which bridged OPC UA to HTTP and Websockets (which works like a charm with Flutter), so we were able to connect the Flutter application to the backend using these technologies. But of course it would be nicer to not take this detour and directly communicate via OPC UA.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

As there is no Dart implementation of OPC UA the question was whether it is possible to call native code from Flutter and use an existing library like\u00a0open62541<\/a> to implement the connection to our backend. Not only would this be nice for our showcase, but of course binding to native code is a rather important requirement for many applications, especially in the field of embedded HMIs. The two most obvious use-cases are the reuse of existing libraries and the implementation of performance-critical parts using adequate (meaning fastest possible) languages.<\/p>

Fortunately, the release of Dart 2.12 \/ Flutter 2.0 brought us, in addition to the support of more platforms, also a library called dart:ffi<\/code> that makes foreign function interfaces possible for Dart and Flutter. This is an official part of Dart now, and it is provided and maintained by the Dart team.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t<\/i>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

After doing some experiments with dart:ffi<\/code> and porting some parts of our showcase, we decided to share our experiences and write this blog post. Interested readers can play with a small example that\u00a0I created; you can find in our\u00a0GitHub<\/a>.<\/p>

It is based on an existing example server\u00a0<\/a> shipped with the Qt OPC UA module to have a simple server providing some values for our UI.<\/p>

In the following sections I will briefly present my findings and walk through the essential aspects of the implementation.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t<\/i>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Concept<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

To get started with dart:ffi<\/code> you can have a look at the\u00a0official documentation and good examples<\/a>. Getting an idea of how it works and trying out the examples yourself does not take too long and is quite interesting already.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Having a closer look at the examples, you will notice that they all work in a synchronous manner: the native code is called from Dart synchronously and there are no things running in the background in parallel. Transferred to our task, in which we want to receive data updates from the backend, thi<\/span>s means that we would need to implement some polling in order to get new data from the backend. In fact, this is the first thing that I tried. Implementing this pattern is rather straightforward and can be adapted from the examples. However, it is important to note at this point that the Dart profiler can have an influence on the execution of syscalls in debug mode. This has caused a strange problem for me when querying values. For more details on this, have a look at my question and the corresponding answer in this issue<\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t<\/i>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

One important characteristic of OPC UA is the client server communication consisting of service calls with\u00a0asynchronous replies. For HMI applications, the most important asynchronous operation is monitoring node attributes in the server for changes by using server-side polling and only reporting changed values to the client.<\/span>\u00a0For us, one important question was whether it is possible with dart:ffi<\/code> to implement this asynchronously as well.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Searching for this topic very quickly leads to this<\/a> interesting discussion on GitHub. The bottom line is that it is possible to implement asynchronous callbacks from C to Dart. Specifically this means that you can start a background thread in your native library that deals with OPC UA and calls back into Dart whenever there are updates. Because of Dart’s design this is not a matter of course. For concurrent tasks Dart uses so called isolates. A very nice summary of Dart isolates can be found here<\/a> but the main issue is that there must only be one thread per isolate and having a background thread from your native library manipulating state in Dart’s main isolate would break a fundamental assumption of Dart, so it is not an option here.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

However, the ffi team came up with a solution using Dart’s ports mechanism that is originally used to implement a message passing mechanism between isolates. In this use case the mechanism is used to put a so-called microtask into the queue of Dart’s event loop. So the callback does not run in the background thread, but a message to run some specific code is sent to Dart. When the microtask is then executed, it runs in the thread of Dart’s main isolate. In practice the implementation is a bit tricky and not as straightforward as the synchronous way of interoperation. However, the ffi team is planning<\/span> to improve this in the future to make the syntax more concise and reduce the amount of required boilerplate code.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

To illustrate the idea behind this process, here is a simplified sequence diagram highlighting the most important points and how the various steps relate to each other.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"flutter\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Setup<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

If you did not use Flutter before you can install it with only a few steps (see the official documentation<\/a>). The installation already includes dart:ffi<\/code> (and the package ffi which contains useful utility functions) so no further steps are necessary.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t<\/i>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

If you want to use dart:ffi<\/code> in your Flutter application, you have to create a Flutter plugin. As mentioned before, ffi is a Dart library which can also be used without flutter. In this case you would create a regular Dart package. However, to create a Flutter plugin you can use the flutter<\/code> command line tool and give the target platforms as a parameter like this:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t
flutter create --platforms=linux,android --template=plugin waterpump_ffi_plugin <\/code><\/pre>