Fluttercon 2023: Making Coffee with Flutter

We may not have realized it yet, but Flutter could become the next big player for UIs on embedded devices.We'll take a dive into running Flutter on embedded Devices. What's currently supported and what custom embedder can we use to achieve this?

Transcript

1. Fluttercon Berlin 2023 2023 Making Coffee with Flutter MORITZ@SNAPPX.IO Making Coffee with Flutter
2. Fluttercon Berlin 2023 2023 Making Coffee with Flutter MORITZ@SNAPPX.IO Agenda • Intro • The Coffeemachine • Why eFlutter • How to eFlutter 2
3. Fluttercon Berlin 2023 2023 Making Coffee with Flutter MORITZ@SNAPPX.IO Intro 3
4. Fluttercon Berlin 2023 2023 Making Coffee with Flutter MORITZ@SNAPPX.IO Who am I 4
5. Fluttercon Berlin 2023 2023 Making Coffee with Flutter MORITZ@SNAPPX.IO Who am I 5 2015 2023
6. Fluttercon Berlin 2023 2023 Making Coffee with Flutter MORITZ@SNAPPX.IO Where it all began 6
7. Fluttercon Berlin 2023 2023 Making Coffee with Flutter MORITZ@SNAPPX.IO Where it all began 7
8. Fluttercon Berlin 2023 2023 Making Coffee with Flutter MORITZ@SNAPPX.IO Where we are now 8
9. Fluttercon Berlin 2023 2023 Making Coffee with Flutter MORITZ@SNAPPX.IO The Coffeemachine 9
10. Fluttercon Berlin 2023 2023 Making Coffee with Flutter MORITZ@SNAPPX.IO Illy FrancisFrancis X1 • Production: 1995 – today • Aluminium-Boiler • Single-Circuit 10
11. Fluttercon Berlin 2023 2023 Making Coffee with Flutter MORITZ@SNAPPX.IO Coffee-Theory Parameters: • Duration: 20s – 40s • Temperature: 88°C – 96°C • Ratio: 1:1,5 - 1:2,5 • Degree of Roasting • Grinding degree • …. 11
12. Fluttercon Berlin 2023 2023 Making Coffee with Flutter MORITZ@SNAPPX.IO Coffee-Theory 12
13. Fluttercon Berlin 2023 2023 Making Coffee with Flutter MORITZ@SNAPPX.IO Illy FrancisFrancis X1 – Original 13
14. Fluttercon Berlin 2023 2023 Making Coffee with Flutter MORITZ@SNAPPX.IO Illy FrancisFrancis X1 – New 14
15. Fluttercon Berlin 2023 2023 Making Coffee with Flutter MORITZ@SNAPPX.IO Illy FrancisFrancis X1 – New 15
16. Fluttercon Berlin 2023 2023 Making Coffee with Flutter MORITZ@SNAPPX.IO The Software – Pt1 (PID) Requirements: • Temperature Input • Adjustable PID-Controller • Drive a Solid State Relais • Run on ESP8266 16
17. Fluttercon Berlin 2023 2023 Making Coffee with Flutter MORITZ@SNAPPX.IO The Software – Pt1 (PID) Solution: • Temp accuracy up to +/- 0,1°C • Ready for ESP8266 & ESP32 • Ready for several Temp-Sensors • Freely adjustable PID - Parameters • MQTT-Support and ….. 17 github.com/rancilio-pid/clevercoffee/
18. Fluttercon Berlin 2023 2023 Making Coffee with Flutter MORITZ@SNAPPX.IO Illy FrancisFrancis X1 – New v2 18
19. Fluttercon Berlin 2023 2023 Making Coffee with Flutter MORITZ@SNAPPX.IO Illy FrancisFrancis X1 – Future 19
20. Fluttercon Berlin 2023 2023 Making Coffee with Flutter MORITZ@SNAPPX.IO The Software – Pt2 (UI) Requirements: • Display multiple Temperatures on a Chart • Display and adjust multiple Numeric-Values • Connect trough MQTT • (Future) Connect trough D-Bus 20
21. Fluttercon Berlin 2023 2023 Making Coffee with Flutter MORITZ@SNAPPX.IO The Software – Pt2 (UI) Solution: • Uses “flutter_riverpod” for State-Mgmt • Uses “fl_chart” for the Charts • Uses “mqtt_client ” for MQTT-Connection • Will use “dbus ” for D-Bus 21 github.com/Snapp-X/coffeemachine
22. Fluttercon Berlin 2023 2023 Making Coffee with Flutter MORITZ@SNAPPX.IO The Coffeemachine 22
23. Fluttercon Berlin 2023 2023 Making Coffee with Flutter MORITZ@SNAPPX.IO The Coffeemachine 23
24. Fluttercon Berlin 2023 2023 Making Coffee with Flutter MORITZ@SNAPPX.IO Why eFlutter? 24
25. Fluttercon Berlin 2023 2023 Making Coffee with Flutter MORITZ@SNAPPX.IO Why eFlutter? “A lot of UI frameworks available for Linux are desktop oriented, lack (good) support for touch screen control and look like recovered from the 90s.” -Florian Kromer 2021 Medium: “ Flutter could revolutionize UIs on embedded Linux Device" 25
26. Fluttercon Berlin 2023 2023 Making Coffee with Flutter MORITZ@SNAPPX.IO Prominent GUI Frameworks 26 Origin Name Software License Web Chromium BSD 3-Clause WebKit LGPL, BSD Electron MIT License Desktop GTK LGPL v2.1+ Mono MIT, BSD, GPL, … Cross-Platform Qt Commercial License (or GPL/LGPL v3.0) Flutter BSD 3-Clause Games Unreal Engine Commercial License Unity Commercial License
27. Fluttercon Berlin 2023 2023 Making Coffee with Flutter MORITZ@SNAPPX.IO Chromium 27 • HTML5/Javascript • Running a Web UI connected to a Webserver Contra: • Huge source Code • High Resource Footprint • Difficult accessing local files & HW Pro: • Low Cost (Money wise) • Easy to develop
28. Fluttercon Berlin 2023 2023 Making Coffee with Flutter MORITZ@SNAPPX.IO Qt 28 • C++ Framework Launched 1995 • Widely adopted in IoT/Embedded-Industry Contra: • Pronounced „cute“ • Licensing-Model • Developer-Experience Pro: • Industry Standard • Reliability
29. Fluttercon Berlin 2023 2023 Making Coffee with Flutter MORITZ@SNAPPX.IO Why eFlutter? 29
30. Fluttercon Berlin 2023 2023 Making Coffee with Flutter MORITZ@SNAPPX.IO The lack of good alternatvies 30
31. Fluttercon Berlin 2023 2023 Making Coffee with Flutter MORITZ@SNAPPX.IO How to eFlutter? 31
32. Fluttercon Berlin 2023 2023 Making Coffee with Flutter MORITZ@SNAPPX.IO eFlutter Options 32
33. Fluttercon Berlin 2023 2023 Making Coffee with Flutter MORITZ@SNAPPX.IO eLinux – Display Servers 33 VS TL;DR: • X11 works better on Raspberry Pi OS and most others • In Production you will use Wayland! (or directly DRM) X11 Wayland
34. Fluttercon Berlin 2023 2023 Making Coffee with Flutter MORITZ@SNAPPX.IO Flutter-eLinux – Main Difference 34
35. Fluttercon Berlin 2023 2023 Making Coffee with Flutter MORITZ@SNAPPX.IO Flutter-eLinux – Tested Devices 35 github.com/sony/flutter-elinux/wiki/Support-status
36. Fluttercon Berlin 2023 2023 Making Coffee with Flutter MORITZ@SNAPPX.IO Flutter-eLinux • Goal: Merge into the Flutter Engine • arm64/x64 devices support • More lightweight than official Flutter-Linux ◦ Not relying on GTK/GDK • Display Backend Support for ◦ X11 ◦ Wayland ◦ DRM (GBM & EGLStream) • APIs such as MethodChannel and EventChannel are the same • Packages work, Plugins won’t 36
37. Fluttercon Berlin 2023 2023 Making Coffee with Flutter MORITZ@SNAPPX.IO Flutter-eLinux – Step by Step Raspberry Pi (X11) 37
38. Fluttercon Berlin 2023 2023 Making Coffee with Flutter MORITZ@SNAPPX.IO Flutter-eLinux – Step by Step Raspberry Pi 38 Thanks to Payam Zahedi!
39. Fluttercon Berlin 2023 2023 Making Coffee with Flutter MORITZ@SNAPPX.IO Flutter-eLinux – D-Bus 39