Getting started with Flutter#

Before you start#

Before we can use the SimpleSwitch™ SDK for Flutter we need to download the SDK extension. For this you need to run from the sourced SimpleSwitch™ SDK

$ GITHUB_TOKEN="<your personal access token for Github>" GITHUB_USERNAME="<your Github username>" simpleswitch-sdk-tool install flutter
$ eval "$(simpleswitch-sdk-tool activate)"

Github personal access token

To create a Github personal access token see Github container registry (GHCR)

Example Flutter Project#

To create an example project, you may use

$ flutter create myapp

myapp can be replaced by the name of your application.

Build the Flutter project using CLI#

In order to build and deploy using Flutter, you will need to add a Flutter custom device.

Adding a Flutter custom device#

A custom device can be added using the command flutter-add-simpleswitch-device coming with the SimpleSwitch™ SDK

$ flutter-add-simpleswitch-device <device_id> <target_ip>

Building and Running on custom device#

Using flutter command, you will be able to build and deploy the application with a single command

$ flutter run -d <device_id>

Where <device_id> is the id you specified for your custom device in Flutter configuration file.

If you want to build a package without deploying, please refer to Using an external tool section below.

Managing Flutter custom devices#

You can list existing custom devices

$ flutter custom-devices list

You can delete a specific custom device

$ flutter custom-devices delete -d <device_id>

To modify the configuration of an existing custom device, you can directly modify the custom devices configuration file in ${XDG_CONFIG_HOME}/.config/flutter/custom_devices.json. This can be useful to tweak the startup command, modify the install process, etc.

Using an external tool with Flutter#

You can also build from command line using flutter utility

$ flutter-create-bundle

You can then use the --copy-dir option of the simpleswitch-generate-package the Generate a SimpleSwitch™ package

$ simpleswitch-generate-package --name simpleswitch-example --copy-dir build:/usr/share/simpleswitch-example \
   --template flutter --startup-command '/usr/bin/flutter-runner simpleswitch-example -f'

For a different than the release profile try

$ flutter-create-bundle --debug
$ simpleswitch-generate-package --name simpleswitch-example --copy-dir build:/usr/share/simpleswitch-example \
   --template flutter --startup-command 'FLUTTER_MODE=debug /usr/bin/flutter-runner simpleswitch-example -f'

respectively

$ flutter-create-bundle --profile
$ simpleswitch-generate-package --name simpleswitch-example --copy-dir build:/usr/share/simpleswitch-example \
    --template flutter --startup-command 'FLUTTER_MODE=profile /usr/bin/flutter-runner simpleswitch-example -f'

Debugging running Flutter application#

Before debugging a running application, you must get the observatory URI, exposed by Flutter on startup. This can be done using following command

$ ssh root@<target_ip> journalctl -u simpleswitch-app@simpleswitch-example.service | grep 'Observatory listening on'

Optionally, you can start the Flutter devtools, allowing to debug the running code

$ flutter pub global run devtools

Then, in your Flutter application source directory, you can then use a Flutter attach command

$ flutter pub get
$ flutter attach -d custom-devices --debug-url <observatory URI>
Now you can interact as with an application running locally:

  • Modify the sources and use Hot reload with the r key.

  • If you started the devtools, use the live debugger. It’s URL should be printed in the console: The Flutter DevTools debugger and profiler on imx8 is available at:.

Further reading#

See also