Run Flutter Applications on Ubuntu Core

bugraaydogar · January 13, 2022, 12:38pm

Key	Value
Summary	Learn how to build and deploy a Flutter application on Ubuntu Core by leveraging Ubuntu Frame
Categories	iot
Difficulty	3
Author	Bugra Aydogar bugra.aydogar@canonical.com

Overview

Duration: 3:00

Flutter is an open-source UI software development kit created by Google. It is used to develop cross-platform applications. With Flutter, you can build natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase.

Flutter also introduced native Linux support for Wayland, making it possible to run Flutter apps on Linux. This provides developers with more opportunities to build new embedded graphic applications for kiosks, digital signage, infotainment, or any other edge device.

But Flutter and other UI toolkits are not enough for embedding graphic applications into edge devices. For this, you need tools that provide orchestration services between functionalities, such as input modalities, display mode, windows behaviours, interfacing with GPU and more. This is where Ubuntu Frame comes in to ease the deployment of any graphic application.

What you’ll learn

In this tutorial, you will learn how to generate, build and snap a Flutter application on Ubuntu Core by leveraging Ubuntu Frame.

What you’ll need

An Ubuntu desktop running any current release of Ubuntu or an Ubuntu Virtual Machine on another OS.
A ‘Target Device’ from one of the following:
- A device running Ubuntu Core.
  This guide shows you you how to set up a supported device. If there’s no supported image that fits your needs you can create your own image.
- Using a Virtual Machine (VM). You don’t need to have a physical “Target Device”, you can follow the tutorial with Ubuntu Core in a VM. This guide shows you how to set up an Ubuntu Core VM.
- Using Ubuntu Classic. You don’t have to use Ubuntu Core. You can use also a “Target Device” with Ubuntu Classic. Read this guide to understand how to run kiosk snaps on your desktop, as the particular details won’t be repeated here.

Getting Started

Duration: 5:00

To be able to create and build Flutter applications, you would need to have Flutter and its tools installed. There are different ways to install Flutter on your Ubuntu Classic, but the recommended way is using the snap.

sudo snap install flutter --classic

In addition to this, the snapcraft tool must be installed so that you can create snap out of your Flutter application. You can use the following command to install snapcraft on Ubuntu Classic system.

sudo snap install snapcraft --classic

Now, we are ready to create our Flutter application.

Creating and Building Flutter Applications

Duration: 3:00

Flutter does not enable desktop support by default. You have to explicitly configure your Flutter CLI tool. The rest is creating the project and running it. Easy peasy !

flutter config --enable-linux-desktop # enable desktop support
flutter create flutterdemo # your flutter application name
cd flutterdemo # Go to your app's root directory
flutter run -d linux # Start your flutter application.

Once you run the above commands, you have to see the following screen on your Ubuntu Classic.

Perfect. Now our Flutter application is working fine on Ubuntu Classic. As a next step, we will create snap to be able to run it on Ubuntu Core.

Creating the Snap

Duration: 7:00

Creating a snap package from your existing applications is quite easy task thanks to the snapcraft CLI tool.

cd your-app-directory # go to your Flutter app's root directory
snapcraft init # initiate your snap project

Now, it needs a little bit of attention. Here is the initial version of the snapcraft.yaml file of our application. Let’s call our application “super-cool-app”.

name: super-cool-app
version: 0.1.0
summary: Super Cool App
description: Super Cool App

confinement: strict
base: core18
grade: stable

slots:
 dbus-super-cool-app:
   interface: dbus
   bus: session
   name: com.example.flutterdemo # replace with your app name
   
apps:
 super-cool-app:
   command: flutterdemo # replace with your app name
   extensions: [flutter-master] 
   plugs:
   - network
   slots:
     - dbus-super-cool-app
parts:
 super-cool-app:
   source: .
   plugin: flutter
   flutter-target: lib/main.dart # The main entry-point file of the application

Your snapcraft.yaml is ready to be built. It is suggested to use lxd while building snaps so that your machine will not be polluted.

snapcraft --use-lxd

If everything goes well, you will have your snap package in your directory. You can install it by using the following command. We have to use dangerous flag since we did not deploy our application to the Snap Store.

sudo snap install <your-app-name.snap> --dangerous # install your snap to your ubuntu classic system
super-cool-app # run your snap, replace with your own snap app

Now, you should be able to see it working on the Desktop. That’s great. You converted your application into the snap package format and made it possible to run on your Desktop

We’re not done just yet. We have to adjust our snapcraft.yaml file more to make it run on Ubuntu Core by leveraging ubuntu-frame.

Adjustments for Ubuntu Core

Duration: 5:00

There are three points that we need to take care of in order to run the Flutter applications on Ubuntu Core.

Currently, the Ubuntu Core platform does not have the required fonts that are needed by Flutter applications.
UI apps generally must be available upon boot and therefore, to satisfy this, we have to create a daemon.
Since Flutter apps are running on top of ubuntu-frame, we have to make the necessary adjustments for ubuntu-frame integration.

Here is the snapcraft.yaml where all the mentioned issues are addressed.

name: super-cool-app
version: 0.1.0
summary: Super Cool App
description: Super Cool App that does everything!

confinement: strict
base: core18
grade: stable

apps:
  daemon:
    daemon: simple
    restart-condition: always
    command-chain:
      - bin/run-daemon
      - bin/wayland-launch
      - bin/gl-launch
    command: bin/flutterdemo
    extensions: [flutter-master] # Where "master" defines which Flutter channel to use for the build

  super-cool-app:
    command-chain:
      - bin/wayland-launch
      - bin/gl-launch
    command: flutterdemo
    extensions: [flutter-master] # Where "master" defines which Flutter channel to use for the build

parts:
  super-cool-app:
    source: .
    plugin: flutter
    flutter-target: lib/main.dart # The main entry-point file of the application

  mir-kiosk-snap-launch:
    plugin: dump
    source: https://github.com/MirServer/mir-kiosk-snap-launch.git
    override-build:  $SNAPCRAFT_PART_BUILD/build-with-plugs.sh opengl pulseaudio wayland
    stage-packages:
      - inotify-tools

  # Some arm devices (notably RPi4) only work with gles
  gles-on-arm:
    plugin: nil
    override-build: |
      snapcraftctl build
      mkdir -p $SNAPCRAFT_PART_INSTALL/bin/
      if [ "$SNAPCRAFT_TARGET_ARCH" != "arm64" ]; then
        echo 'exec "$@"' > $SNAPCRAFT_PART_INSTALL/bin/gl-launch
      else
        echo 'GDK_GL=gles exec "$@"' > $SNAPCRAFT_PART_INSTALL/bin/gl-launch
      fi
      chmod a+x $SNAPCRAFT_PART_INSTALL/bin/gl-launch

  assets:
    plugin: nil
    stage-packages:
    - dmz-cursor-theme
    - fonts-dejavu
    - fonts-freefont-ttf
    - fonts-ubuntu

layout:
  /usr/share/fonts:
    bind: $SNAP/usr/share/fonts
  /etc/fonts:
    bind: $SNAP/etc/fonts
  /usr/share/icons:
    bind: $SNAP/usr/share/icons

Re-create your snap after these modifications, and it will be ready for testing on Ubuntu Core.

Running Your Flutter Application Snap on Ubuntu Core

Duration: 3:00

You can use qemu and pre-built Ubuntu Core18 or Ubuntu Core20 images that are available to test the generated snap.

Assuming you already have an Ubuntu Core system up and running, just install ubuntu-frame using

snap install ubuntu-frame

Then, transfer your snap via scp. Finally install it by using;

sudo snap install <your-app-name.snap> --dangerous

After a couple of seconds, your application will appear on your screen!

Congratulations!

Duration: 1:00

You made it!

If you are looking for more advanced Flutter Applications, you can find the reference snapcraft.yaml file for the Flutter Gallery Demo app that is provided by Flutter community to show case most of the features that Flutter offers.

And if you have a kiosk or digital signage product and need help deploying an Flutter app, talk to us!

asimfarooq5 · January 12, 2022, 9:28am

after following the above steps, I got this.

asimfarooq5@ubuntu:~$ flutterdemo 
error: error running snapctl: snap "flutterdemo" has no plug or slot named "pulseaudio"
WARNING: pulseaudio interface not connected! Please run: /snap/flutterdemo/current/bin/setup.sh
Setting up watches.
Watches established.

asimfarooq5@ubuntu:~$ snap logs flutterdemo
2022-01-11T14:39:18Z flutterdemo.daemon[1620]: WARNING: pulseaudio interface not connected! Please run: /snap/flutterdemo/current/bin/setup.sh
2022-01-11T14:39:18Z -[1620]: g_dbus_proxy_new_sync: assertion 'G_IS_DBUS_CONNECTION (connection)' failed
2022-01-11T14:39:18Z flutterdemo.daemon[1620]: Couldn't open libGLESv1_CM.so.1: libGLESv1_CM.so.1: cannot open shared object file: No such file or directory
2022-01-11T14:39:18Z systemd[1]: snap.flutterdemo.daemon.service: Main process exited, code=exited, status=1/FAILURE
2022-01-11T14:39:18Z systemd[1]: snap.flutterdemo.daemon.service: Failed with result 'exit-code'.
2022-01-11T14:39:18Z systemd[1]: snap.flutterdemo.daemon.service: Scheduled restart job, restart counter is at 6.
2022-01-11T14:39:18Z systemd[1]: Stopped Service for snap application flutterdemo.daemon.
2022-01-11T14:39:18Z systemd[1]: snap.flutterdemo.daemon.service: Start request repeated too quickly.
2022-01-11T14:39:18Z systemd[1]: snap.flutterdemo.daemon.service: Failed with result 'exit-code'.
2022-01-11T14:39:18Z systemd[1]: Failed to start Service for snap application flutterdemo.daemon.

alan_g · January 12, 2022, 11:20am

That isn’t in the instructions and won’t work: There’s no Wayland server in your user session.

asimfarooq5:

2022-01-11T14:39:18Z flutterdemo.daemon[1620]: Couldn't open libGLESv1_CM.so.1: libGLESv1_CM.so.1: cannot open shared object file: No such file or directory
2022-01-11T14:39:18Z systemd[1]: snap.flutterdemo.daemon.service: Main process exited, code=exited, status=1/FAILURE

This is your problem: there’s an error in your snap packaging that prevents libGLESv1_CM.so.1 being found. Please recheck your snap recipe.

asimfarooq5 · January 12, 2022, 12:39pm

this is my “snapcraft.yaml”

name: flutterdemo 
base: core18 
version: '0.1' 
summary: flutterdemo 
description: flutterdemo


grade: devel
confinement: devmode 

slots:
 dbus-flutterdemo:
   interface: dbus
   bus: session
   name: com.example.flutterdemo

apps:
  daemon:
    daemon: simple
    restart-condition: always
    command-chain:
      - bin/run-daemon
      - bin/wayland-launch
    command: bin/flutterdemo
    extensions: [flutter-master]
    environment:
      GDK_GL: gles

  flutterdemo:
    command-chain:
      - bin/wayland-launch
    command: flutterdemo
    extensions: [flutter-master]
    environment:
      GDK_GL: gles

parts:
  flutterdemo:
   source: .
   plugin: flutter
   flutter-target: lib/main.dart
  
  mir-kiosk-snap-launch:
    plugin: dump
    source: https://github.com/MirServer/mir-kiosk-snap-launch.git
    override-build:  $SNAPCRAFT_PART_BUILD/build-with-plugs.sh opengl wayland
    stage-packages:
      - inotify-tools

layout:
  /usr/share/fonts:
    bind: $SNAP/usr/share/fonts
  /etc/fonts:
    bind: $SNAP/etc/fonts
  /usr/share/icons:
    bind: $SNAP/usr/share/icons

asimfarooq5 · January 12, 2022, 12:40pm

I’m testing on nvidia, does this matters ?

alan_g · January 12, 2022, 12:53pm

At what point in the tutorial are you? “Running Your Flutter Application Snap on Ubuntu Core”?

What device (or VM) are you running on?

asimfarooq5 · January 12, 2022, 1:18pm

yeah, I’m trying on UbuntuCore in Qemu(VM).

asimfarooq5 · January 12, 2022, 1:23pm

after removing pulseaudio from snapcraft.yaml

asimfarooq5@ubuntu:~$ flutterdemo 
Setting up watches.
Watches established.

asimfarooq5@ubuntu:~$ snap logs flutterdemo
2022-01-12T11:25:28Z flutterdemo.daemon[2498]: + exec /snap/flutterdemo/x2/bin/wayland-launch /snap/flutterdemo/x2/bin/flutterdemo
2022-01-12T11:25:28Z -[2498]: g_dbus_proxy_new_sync: assertion 'G_IS_DBUS_CONNECTION (connection)' failed
2022-01-12T11:25:28Z flutterdemo.daemon[2498]: Couldn't open libGLESv1_CM.so.1: libGLESv1_CM.so.1: cannot open shared object file: No such file or directory
2022-01-12T11:25:28Z systemd[1]: snap.flutterdemo.daemon.service: Main process exited, code=exited, status=1/FAILURE
2022-01-12T11:25:28Z systemd[1]: snap.flutterdemo.daemon.service: Failed with result 'exit-code'.
2022-01-12T11:25:28Z systemd[1]: snap.flutterdemo.daemon.service: Scheduled restart job, restart counter is at 5.
2022-01-12T11:25:28Z systemd[1]: Stopped Service for snap application flutterdemo.daemon.
2022-01-12T11:25:28Z systemd[1]: snap.flutterdemo.daemon.service: Start request repeated too quickly.
2022-01-12T11:25:28Z systemd[1]: snap.flutterdemo.daemon.service: Failed with result 'exit-code'.
2022-01-12T11:25:28Z systemd[1]: Failed to start Service for snap application flutterdemo.daemon.

alan_g · January 12, 2022, 2:26pm

This probably won’t work, but I’d like to verify that it doesn’t to eliminate possible causes, could you try running this:

$ echo "env -u GDK_GL \$SNAP/bin/flutterdemo" | sudo snap run --shell flutterdemo

asimfarooq5 · January 12, 2022, 2:58pm

yeah, It worked

alan_g · January 12, 2022, 3:05pm

Cool. In that case, you simply need to remove the GDK_GL: gles lines from your snapcraft recipe and repackage. These lines are there because they are needed on some devices (e.g. RPi4). Unfortunately, it seems that they break things on QEMU.

We’ll need to do some more investigation into how to get this example working across all devices.

asimfarooq5 · January 12, 2022, 3:27pm

yeah, It working fine, I’ll repackage this for arm64 and test on RPi3&4.

alan_g · January 12, 2022, 4:39pm

OK, the root cause is that the gnome-3-28-1804 snap is intended for desktop use and, since for amd64, there’s no need for GLES it doesn’t contain libgles1.

There’s another approach to building Flutter snaps for Core that does work across devices. The general approach is described here:

https://github.com/MirServer/iot-example-graphical-snap/wiki/Embedding-IOT-GUI-with-Ubuntu-Frame

With a Flutter specific branch here:

https://github.com/MirServer/iot-example-graphical-snap/tree/Flutter-demo

asimfarooq5 · January 13, 2022, 12:53pm

I have build the snap with same config removing the GDK_GL: gles lines and got this in snap logs:

Failed to start Flutter renderer: Unable to create a GL context

alan_g · January 13, 2022, 12:57pm

I’d expect to see that on RPi4.

In any case, I’ve just updated the snapcraft.yaml in the tutorial. That should work everywhere.

asimfarooq5 · January 13, 2022, 1:00pm

I tested with RPi3, let me test the updated config.

ogra · January 13, 2022, 1:14pm

i’d do that type of detection at runtime instead of build time:

  gles-on-arm:
    plugin: nil
    override-build: |
      snapcraftctl build
      mkdir -p $SNAPCRAFT_PART_INSTALL/bin/
      echo 'case $(arch) in aarch64|armv7l) export GDK_GL=gles;; esac' > $SNAPCRAFT_PART_INSTALL/bin/gl-launch
      echo 'exec "$@"' >> $SNAPCRAFT_PART_INSTALL/bin/gl-launch
      chmod a+x $SNAPCRAFT_PART_INSTALL/bin/gl-launch

asimfarooq5 · January 13, 2022, 1:52pm

new snapcraft.yaml in the tutorial works fine for both amd64/arm64.

alan_g · January 13, 2022, 2:01pm

There are many equivalent ways to do this.