How to Develop Flutter HMI Applications Using FlutterViz¶

FlutterViz is easy to use interface with Flutter Drag and Drop UI builder to quickly kick-start your project. This open-source project aims to empower developers by providing a free and extensible visual Flutter UI builder.

This guide describes how to use FlutterViz, a web-based visual UI builder, to develop Flutter HMI applications. For more information about FlutterViz, see the FlutterViz GitHub repository.

Step 1: Create Flutter Applications Using FlutterViz¶

1-1. Create an account and log in¶

Open FlutterViz and click GET INVITE to obtain the invitation code required to create an account.

Enter a username and your email address, then click GET INVITE.

The invitation code will be sent to the email address you entered.

Tip

Note that it may take up to one week to receive the invitation code.

Once you receive the code, click Login, then select Click here to Sign Up to create a new account.

Enter your username, email address, password, and the invitation code you received, then click Sign Up.

1-2. Create a new project¶

After creating a new account, select Create New Project.

Select the template to use. This guide uses the News template.

Enter your project name, then click Tap to use templates.

1-3. Create screens¶

Image File Selection Screen¶

Deleting and Adding Objects
- Deleting
  
  Press the button on the right and click RegisterScreen.
  
  Delete everything shown in the red boxes. Select each item and right-click Delete widget. Keep the Column object.
- GIF and JPEG Button
  Drag and drop two Text Buttons from Base Widget onto the text display area where “Have an account?” is located, and then delete that text.
- GIF and JPEG Display Area
  Drag and drop the Container from the Layout Widget below the two buttons.
- "X" Button
  Drag and drop the Text Button from the Base Widget below the container.
Select the Column object and uncheck the Scrollable option.
Resizing Objects
- Operation Guide Text
  
  Click the Create new text, then check options from the right-side panel.
  
  Change the text from "Create New" to "Flutter Sample Application" in the Text feild.
  
  Set the Font size to 24 in the Font Weight & Size option.
  
  Click the account text, then check options from the right-side panel.
  
  Change the text from "account" to "Choose a button to display an image"in the Text feild.
  
  Set the Font size to 24 in the Font Weight & Size option.
- "X" Button
  
  Right-click the bottom Text button and press Move Up (^ key) to bring it to the topmost position among the visible objects. Then check options from the right-side panel.
  
  Set the Fill Color to #fff90505.
  
  Enter "X" in the Text feild.
  
  Set the Font Color in Font Properties to #ffffffff.
  
  Set Height to 40 and MinWidth to 40 in the Height & MinWidth section.
- JPEG Button
  
  Click the left Text button, then check options from the right-side panel.
  
  Enter "JPEG" in the Text field.
  
  Set the Font Color in FontProperties to #ffffffff.
  
  Set the MinWidth to 125 and Height to 70 in the Height & MinWidth section.
- GIF Button
  
  Click the right Text button, then check options from the right-side panel.
  
  Enter "GIF" in the Text field.
  
  Set the Font Color in FontProperties to #f4ffffff.
  
  Set the MinWidth to 125 and Height to 70 in the Height & MinWidth section.
- GIF and JPEG Display Area
  
  Click the Container, then check options from the right-side panel.
  
  Set the Fill Color to #1ffffffff.
  
  Set Width to 300 and Height to 100 in the Height & Width section.
Changing Object Positions
- Operation Guide Text
  
  Click the "Choose a button to display an image" text, then check options from the right-side panel.
  Enable Expanded in Expanded & Flex section, then set Horizontal Alignment to -0.32 and Vertical Alignment to -0.73 in Alignment section.
  
  Click the "Flutter Sample Application" text, then check options from the right-side panel.
  Enable Expanded in Expanded & Flex section, then set Horizontal Alignment to -0.33 and Vertical Alignment to 0.77 in Alignment section.
- JPEG Button
  
  Click the "JPEG" text button (left one), then check options from the right-side panel.
  Enable Expanded in Expanded & Flex section, then set Horizontal Alignment to 0.08 and Vertical Alignment to 0.03 in Alignment section.
- GIF Button
  
  Click the "GIF" text button (right one), then check options from the right-side panel.
  Enable Expanded in Expanded & Flex section, then set Horizontal Alignment to 0.08 and Vertical Alignment to 0.03 in Alignment section.
- GIF and JPEG Display Area
  
  Click the container, then check options from the right-side panel.
  Set Width to 400 and Height to 150 in the Height & Width section.
- "X" Button
  
  Click the "X" text button, then check options from the right-side panel. Set Horizontal Alignment to 1.00 in Alignment section.

Image File Display Screen¶

Deleting and Adding Objects
- Deleting Press the button on the right and click LoginScreen.
  
  Delete everything shown in the red boxes. Select each item and right-click Delete widget. Only keep the "Don't Have an account?" text and the Column object.
- "X" Button
  Drag and drop the Text Button from the Base Widget onto the text display area where “Don't Have an account?” is located, and then delete that text.
- Back Button
  Drag and drop the Text Buttons from Base Widget below the newly added “X” button.
- Image Display
  Drag and drop the Image from Base Widget below the newly added Back button.
Select the Column object and uncheck the Scrollable option.
Resizing Objects
- "X" Button
  
  Click the top text button, then check options from the right-side panel.
  Set MinWidth to 40 and Height to 40 in the Height & MinWidth section.
  
  Set the Fill Color to #fffb0303.
  
  Enter "X" in the Text feild.
  
  Set the Font Color in FontProperties to #ffffffff.
- Image Display
  
  Click the Image, then check options from the right-side panel.
  Set Width to 200 and Height to 200 in the Height & Width section.
  
  Right-click the Image and press Move Up (^ key) to bring it below the "X" button.
- Back Button
  
  Click the bottom text button, then check options from the right-side panel.
  Enter "Back" in the Text feild, and set MinWidth to 140 and Height to 40 in the Height & MinWidth section.
  
  Set the Font Color in FontProperties to #ffffffff.
Changing Object Positions
- "X" Button
  
  Click the "X" text button, then check options from the right-side panel.
  Enable Expanded in Expanded & Flex section, then set Horizontal Alignment to 1.00 in Alignment section.
- Image Display
  
  Click the Image, then check options from the right-side panel.
  Enable Expanded in Expanded & Flex section, then set Horizontal Alignment to -0.02 and Vertical Alignment to -0.32 in Alignment section.
- Back Button
  
  Click the Back button, then check options from the right-side panel.
  Enable Expanded in Expanded & Flex section, then set Horizontal Alignment to 1.00 and Vertical Alignment to 0.4 in Alignment section.

1-4. Export the source file¶

Image File Selection Screen¶

Select RegisterScreen using the button on the right, then click the to view the source code.

Click the Download code button to download the source file for the Image File Selection Screen as RegisterScreen.dart.

Image File Display Screen¶

Select RegisterScreen using the button on the right, then click the to view the source code.

Click the Download code button to download the source file for the Image File Display Screen as LoginScreen.dart.

Step 2: Create the Flutter Sample Application¶

2-1. Apply the downloaded screen source files to the sample application¶

Rename the Image File Selection Screen source file created in Step 1 from RegisterScreen.dart to imagefileselection.dart.

Rename the Image File Display Screen source file created in Step 1 from LoginScreen.dart to imagefiledisplay.dart.

Click here to download Flutter-Sample-App-Package.zip, extract it, and and copy the imagefileselection.dart and imagefiledisplay.dart files into Flutter-Sample-App-Package/fluttersampleapp/lib/.

2-2. Apply the image to be displayed in the sample application¶

Click here to download Display_Image_File.zip, and extract it.

Open the extracted Flutter-Sample-App-Package. Right-click inside Flutter-Sample-App-Package/fluttersampleapp/, select New > Folder, and name the folder images.

Copy Cat.jpg and Moon.gif from the IMAGE_FILE folder into the newly created images folder.

2-3. Apply the font to the sample application¶

Download FiraCode font, which will be used in this guide, by clicking Download & Install in README.

Extract the downloaded Fira_Code_v6.2.zip.

Open Flutter-Sample-App-Package. Right-click inside Flutter-Sample-App-Package/fluttersampleapp/, select New > Folder, and name the folder fonts.

Copy the following files from the ttf folder in Fira_Code_v6.2 to the fonts folder:

FiraCode-Bold.ttf  
FiraCode-Light.ttf  
FiraCode-Medium.ttf  
FiraCode-Regular.ttf  
FiraCode-SemiBold.ttf

2-4. Apply the patch file to the sample application¶

Move the fluttersampleapp folder from Flutter-Sample-App-Package to your Linux PC using SCP or a similar file transfer tool.

Apply the patch file 0001-flutterviz-add.patch. This patch updates main.dart and adds navigation logic for the generated screens and buttons.

Tip

Replace <path-to> with the path on your own setting.

cd <path-to>/fluttersampleapp

patch -p1 < 0001-flutterviz-add.patch

Tip

If the patch application fails, you can directly use the files provided in fluttersampleapp_source to replace the original files. The related files are:
- fluttersampleapp/lib/main.dart
- fluttersampleapp/lib/imagefileselection.dart
- fluttersampleapp/lib/imagefiledisplay.dart
- fluttersampleapp/pubspec.yaml

Click here to download fluttersampleapp_source.zip.

Step 3: Build the Flutter Sample Application¶

Enable the cross-compilation Environment.

Before building the Flutter sample application, ensure that the cross-compilation toolchain and cross compiler are enabled.

Refer to the first 2 steps in Step 1: Build Sample Applications.
Verify the installation of Flutter.

Tip
Unless otherwise specified, all following steps are performed in the fluttersampleapp/ directory.
When using commands such as cd <path-to>/fluttersampleapp/, replace <path-to> with the actual path on your system.
```
cd <path-to>/fluttersampleapp
```
```
$OECORE_NATIVE_SYSROOT/usr/share/flutter/sdk/bin/flutter doctor
```
Tip
- $OECORE_NATIVE_SYSROOT is an environment variable exported by the toolchain setup script.
- If you encounter a “Permission denied” error, fix the file ownership of the SDK installation directory (from step 1) by updating it recursively:
```
sudo chown -R <user>:<user> <path-to-sdk>
```
If the setup is correct, you should see output similar to the following, with the first two items checked:
```
[v] Flutter (Channel stable, 3.27.1, on Ubuntu 22.04.5 LTS 6.8.0-50-generic, locale en_US.UTF-8)
[v] Linux toolchain - develop for Linux desktop
[-] VS Code (version 1.96.2)
[-] Connected device (1 available)
[-] Network resources
```
This confirms that Flutter and the Linux toolchain are properly installed.

Disable analytics and CLI animations (recommended).

To disable analytics reporting:

$OECORE_NATIVE_SYSROOT/usr/share/flutter/sdk/bin/flutter config --no-analytics

You should see:

Analytics reporting disabled.

To disable CLI animations:

$OECORE_NATIVE_SYSROOT/usr/share/flutter/sdk/bin/flutter config --no-cli-animations

Expected output:

Setting "cli-animations" value to "false".

Upgrade and resolve Flutter packages.

$OECORE_NATIVE_SYSROOT/usr/share/flutter/sdk/bin/flutter pub upgrade

The process completes when messages similar to the following appear:

Changed 47 dependencies!
27 packages have newer versions incompatible with dependency constraints.

Next, enforce the dependency versions defined in the lockfile:

$OECORE_NATIVE_SYSROOT/usr/share/flutter/sdk/bin/flutter pub get --enforce-lockfile --offline

Expected output:

Resolving dependencies...
Downloading packages...
Got dependencies!

Clean the Flutter build environment.

$OECORE_NATIVE_SYSROOT/usr/share/flutter/sdk/bin/flutter clean -v

When completed successfully, you should see:

[   +1 ms] Running 1 shutdown hook
[        ] Shutdown hooks complete
[        ] exiting with code 0

Build the Flutter assets (fonts, images, and other bundles).

$OECORE_NATIVE_SYSROOT/usr/share/flutter/sdk/bin/flutter build bundle -v

A successful build will show messages similar to:

[ +637 ms] copy_flutter_bundle: Complete
[ +384 ms] Persisting file store
[ +3 ms] Done persisting file store
[ +10 ms] "flutter bundle" took 5,897ms.
[ +1 ms] Running 1 shutdown hook
[ ] Shutdown hooks complete
[ ] exiting with code 0

Build the Flutter sample application (AOT).

Use the command below to locate your build hash<Hash>:

cd <path-to>/fluttersampleapp

ls .dart_tool/flutter_build/

You will see result similar to:

66092f978b4aea03fd69d87bb15a2643

Run the following command to build the Flutter sample application:

Tip

Replace <Hash> with your build hash (for example, 66092f978b4aea03fd69d87bb15a2643).

$OECORE_NATIVE_SYSROOT/usr/share/flutter/sdk/bin/cache/dart-sdk/bin/dartaotruntime \
--disable-analytics \
--disable-dart-dev \
$OECORE_NATIVE_SYSROOT/usr/share/flutter/sdk/bin/cache/artifacts/engine/linux-x64/frontend_server_aot.dart.snapshot \
--sdk-root $OECORE_NATIVE_SYSROOT/usr/share/flutter/sdk/bin/cache/artifacts/engine/common/flutter_patched_sdk_product/ \
--target=flutter \
-Ddart.vm.profile=false \
-Ddart.vm.product=true \
--aot \
--tfa \
--target-os linux \
--packages .dart_tool/package_config.json \
--output-dill .dart_tool/flutter_build/<Hash>/app.dill \
--depfile .dart_tool/flutter_build/<Hash>/kernel_snapshot_program.d \
--source file://$PWD/.dart_tool/flutter_build/dart_plugin_registrant.dart \
--source package:flutter/src/dart_plugin_registrant.dart \
-Dflutter.dart_plugin_registrant=file://$PWD/.dart_tool/flutter_build/dart_plugin_registrant.dart \
--native-assets .dart_tool/flutter_build/<Hash>/native_assets.yaml \
--verbosity=error \
package:fluttersampleapp/main.dart

Once the build completes successfully, the Flutter build configuration is applied, and the following file is generated:

.dart_tool/flutter_build/<Hash>/app.dill 0

Update kernel nlob timestamp.

touch build/flutter_assets/kernel_blob.bin

Generate AOT shared library (libapp.so).

Download engine_sdk.tar.bz2 from the Renesas Wiki-Flutter-Deliverables.
Decompress engine_sdk.tar.bz2, then unzip engine_sdk_release.zip inside it. This will generate the sdk directory.

Use gen_snapshot from extracted sdk to generate the AOT shared library:
Tip
- Replace <path-to> with your local download path.
- Replace <Hash> with your build hash (for example, 66092f978b4aea03fd69d87bb15a2643).
```
<path-to>/sdk/clang_x64/gen_snapshot \
--deterministic \
--snapshot_kind=app-aot-elf \
--elf=libapp.so \
--strip \
.dart_tool/flutter_build/<Hash>/app.dill
```
Verify the output architecture.

Confirm that the generated library targets ARM (aarch64):
```
file libapp.so
```
Expected output:
```
libapp.so: ELF 64-bit LSB shared object, ARM aarch64,version 1 (SYSV), dynamically linked,stripped
```
Notice
If the output does not indicate ARM aarch64 (for example, it shows x86_64), stop here.
This means the cross-compilation environment is not correctly applied.
Tip
To recover:
- Reconfirm that the cross-compilation toolchain is enabled.
- Verify that the environment is correctly set up and sourced.
- Clean the Flutter build artifacts and restart from 5. Clean up the build folder of the Flutter project:
```
rm -rf .dart_tool/flutter_build
$OECORE_NATIVE_SYSROOT/usr/share/flutter/sdk/bin/flutter clean -v
```
- Resume the procedure from 6. Build the Flutter assets to 10. Verify the output architecture.

Prepare the release directory structure

Move to the Flutter sample app directory:

cd <path-to>/fluttersampleapp

Create the required release directories:

install -d my_release/usr/share/flutter/flutter-samples-app/3.27.1/release/data/flutter_assets

install -d my_release/usr/share/flutter/flutter-samples-app/3.27.1/release/lib

Copy the flutter sample application files

Next, copy the Flutter sample application files into the directories you created.

cd <path-to>/fluttersampleapp

Copy the Flutter asset files:

cp -r build/flutter_assets/* my_release/usr/share/flutter/flutter-samples-app/3.27.1/release/data/flutter_assets

Copy the generated application library:

cp libapp.so my_release/usr/share/flutter/flutter-samples-app/3.27.1/release/lib

Create a symbolic link to the ICU data file:

ln -sfr my_release/usr/share/flutter/3.27.1/release/data/icudtl.dat my_release/usr/share/flutter/flutter-samples-app/3.27.1/release/data/icudtl.dat

Create a symbolic link to the Flutter engine library:

ln -sfr my_release/usr/share/flutter/3.27.1/release/lib/libflutter_engine.so my_release/usr/share/flutter/flutter-samples-app/3.27.1/release/lib/libflutter_engine.so

After completing the setup, the directory structure under <path-to>/my_release/usr/share/flutter/flutter-samples-app/3.27.1/release/ should look like the following:

.
├── data
│   ├── flutter_assets
│   │   ├── AssetManifest.bin
│   │   ├── AssetManifest.json
│   │   ├── FontManifest.json
│   │   ├── fonts
│   │   ├── images
│   │   ├── isolate_snapshot_data
│   │   ├── kernel_blob.bin
│   │   ├── NOTICES.Z
│   │   ├── packages
│   │   ├── shaders
│   │   └── vm_snapshot_data
│   └── icudtl.dat -> ../../../../3.27.1/release/data/icudtl.dat
└── lib
    ├── libapp.so
    └── libflutter_engine.so -> ../../../../3.27.1/release/lib/libflutter_engine.so

Step 4. Deploy the Flutter Sample Application¶

Insert your SD card into the Linux PC and mount it.

Notice
Make sure to turn off your EVK board before ejecting the SD card.
Press and hold the power button for 2 seconds to turn it off.
Copy the executable binary files and resource files to your SD card.
Tip
- On your Linux PC, the Flutter sample applications are now located at:
  <path-to>/fluttersampleapp/my_release/usr/share/flutter/flutter-samples-app/
- We recommend deploying the application to the following directory on your EVK board:
  /usr/share/flutter/my-flutter-samples-app/
- Follow the instructions in Step 4 in Option 2 to check where your SD card is mounted using the lsblk command.
Copy the Flutter sample application files:
```
cp -r <path-to>/fluttersampleapp/my_release/usr/share/flutter/flutter-samples-app/* <sdcard-mount-point>/usr/share/flutter/my-flutter-samples-app/
```
Notice
- Please make sure the /usr/share/flutter/flutter-samples-app exists on your EVK board or SD card before copying.
- If it does not exist, create it using:
```
mkdir -p <sdcard-mount-point>/usr/share/flutter/my-flutter-samples-app/
```

Please refer to Step 2: Deploy Sample Applications if you want to deploy over ethernet (using SCP).

Step 5. Run the Flutter Sample Application¶

Prepare the necessary equipment and configure the EVK DIP switches by following the instructions in Hardware Setup.
Insert the bootable microSD card created in Step 4 into the microSD card slot, and then power on the EVK board.
Tip
- Please refer to the EVK Peripheral Setup to locate the microSD card slot based on your selected boot mode.
- Press and hold the power button (red button, SW9) for 1 second to turn on the EVK board, and for 2 seconds to turn it off.
Use the following command on your EVK board to run the Flutter sample application.

export LD_PRELOAD=/usr/share/flutter/my-flutter-samples-app/3.27.1/release/lib/libflutter_engine.so

flutter-client -f -b /usr/share/flutter/my-flutter-samples-app/3.27.1/release/

The launched sample application is shown below.
Image File Selection Screen

Click the JPEG button, you will get: Image File Display Screen-JPEG display

Click the GIF button, you will get: Image File Display Screen-GIF display

Once you have successfully tried this simple Flutter sample application, you’re ready to start designing your own Flutter applications.