The Flutter™ software development kit from Google is used for simple interface programming. This product overview is written by TI and TI's Flutter third-party partner Klarälvdalens Datakonsult AB (KDAB), providing a step-by-step guide with instructions for initiating a Flutter-based development for human-machine interface (HMI) using the TI AM62x starter kit (SK) evaluation module (EVM).

Is Flutter the Right GUI Toolkit For Me?: An Engineer's Perspective

In today’s world, people tend to spend more time interacting with machines through a display screen rather than mechanically controlling machines. As an example, there is a graphical user interface (GUI) running on the main screen of many new automotive vehicles or home appliances. Through the GUI, users can control devices and activate features, such as music, radio, phone, temperature control, and more. Similarly, at the airport or at restaurants, the public can communicate with the companies through a self-serving kiosk. The kiosk runs a GUI on a display device and through the kiosk touchscreen, machines can fulfill the customer’s request. In summary, there is an increasing trend in the industry for the end consumer to interact with GUIs in a convenient and efficient manner to accomplish tasks.

From a developer’s perspective, creating an elegant GUI is vital because GUIs are one of the key components of communication between the customer and the product. There are many GUI frameworks to select from for running GUIs on embedded devices like the AM62. Each framework is unique and supports some of the following features:

1. Touch: Most GUI frameworks connect a display through resistive or capacitive touch support.
2. Aesthetics: GUIs with a more modern appearance or user-friendly features attracts more customers.
3. Hardware (HW) acceleration: Several embedded devices have a graphics processing unit (GPU) and are capable of performing various tasks like alpha blending, color conversion, scaling, and rotation. Crucially, the GUI utilizes the GPU for rendering complex scenes and offloads the central processing unit (CPU) for other tasks.
4. Memory: Developers are working with a limited memory footprint so developers must verify that the GUI and software stack fits within the required footprint.
5. Scalability: Depending on the project, developers prefer to have a GUI that is portable across multiple platforms. Having a framework that scales across multiple devices and operating system (OS) can be beneficial.
6. License: Software licensing is also a key aspect to consider.

How to Enable Flutter on the AM6254 Arm® Processor Family

Although choosing a GUI framework is challenging, enabling and optimizing the GUI framework on an embedded platform is an even more demanding task. The objective of this product overview is to assist developers in enabling and optimizing the Flutter framework on TI platforms. Several modern GUIs are already enabled for TI’s next generation device (AM625). See the AM62x Design Gallery for more information. TI devices and the accompanying software development kit (SDK) offer flexibility to the developers to choose from any framework.

Flutter has recently gained traction and has support for touch, includes contemporary GUI, contains smaller memory stack, and has a less stringent licensing clause. Developers that are interested in using Flutter and want to develop on TI’s embedded platform, can follow the process described in the following steps:

1. Complete the one-time setup prerequisites listed in the Processor SDK Linux for AM62x.
2. Enter the following commands, in order, into the console:
   1. git clone https://git.ti.com/git/arago-project/oe-layersetup.git tisdk
   2. cd tisdk
   3. cp configs/processor-sdk/processor-sdk-scarthgap-chromium-11.01.05.03-config.txt configs/flutter-config.txt
   4. echo "meta-flutter,https://github.com/meta-flutter/meta-flutter.git,scarthgap,HEAD,layers=.:meta-flutter-apps" >> configs/flutter-config.txt
   5. ./oe-layertool-setup.sh -f configs/flutter-config.txt
   6. cd build/
   7. echo 'IMAGE_INSTALL:append = " flutter-wayland-client flutter-samples-material-3-demo"' >> conf/local.conf
   8. . conf/setenv
   9. MACHINE=am62xx-evm bitbake-layers add-layer ../sources/meta-flutter
   10. MACHINE=am62xx-evm bitbake -k tisdk-default-image
3. Perform a flash on an SD™ card with the following image:
   • build/deploy-ti/images/am62xx-evm/tisdk-default-image-am62xx-evm.wic.xz
4. On the evaluation module run the following: (Note: flutter version varies, check the installed version in your build and specify path accordingly)
   • systemctl stop ti-apps-launcher
   • WAYLAND_DISPLAY=/run/user/1000/wayland-1 LD_LIBRARY_PATH=/usr/share/flutter/flutter-samples-material-3-demo/3.32.5/release/lib flutter-client --bundle=/usr/share/flutter/flutter-samples-material-3-demo/3.32.5/release

Application-Specific Performance Improvements For AM62xx

The GPU is a primary concern when optimizing Flutter applications for the AM62xx platform. The GPU on AM62x, AXE-1-16M, is a tile-based deferred renderer (TBDR), and functions in a different way than the more common immediate mode renderers (IMRs). For more information about TBDR, see the following A look at the PowerVR graphics architecture articles:

• Tile-based rendering
• Deferred rendering

The GPU architecture was developed to keep reading and writing to and from memory to a minimum, this is a fundamental part of the efficient operation. Some operations hinder the ability of the GPU to keep memory traffic to a minimum. The memory bandwidth of the GPU is also limited to provide low-power operation.

Imagination Technologies™ provides guidelines for performance optimizations on PowerVR hardware; however, many low-level details within the Flutter environment are not accessible. Recommendations for developing Flutter applications with AM62 hardware follow:

By default, all Flutter images have alpha-blending enabled. Avoid alpha blending, where possible. Alpha blending is when an image is combined with a background to provide a transparency effect. Use the following tips and tricks to keep alpha blending to a minimum.

• Where possible alpha blend without using the GPU. As an example, consider an image with a white background and a blue element on top. If the blue element is to appear transparent it is better to define the color as a lighter blue, rather than to give the blue element transparency and let the GPU determine the color.
• If alpha blending is unavoidable, keep the amount of pixels that need to be alpha blended to the minimum. Do not draw transparent objects or pixels, rather remove them completely. The next point gives an example of how to do this with images.
• This example by KDAB uses a image subsetting tool to remove all transparent pixels from an image. This makes sure that only visible pixels are sent off to the GPU for processing and reduces the amount of alpha blending that must be done. The README of the example describes how to use the image subsetting tool that is provided with the example.
• Draw the images without alpha blending by following the Flutter documentation and specifying BlendMode.src instead of the default BlendMode.srcOver. This specification is not possible through the default image widget and requires that a custom image widget be implemented using a CustomPainter.

Avoiding textures and images can also improve power efficiency and performance. The tiling GPU draws solid color triangles very efficiently. Working with elements that have already been rasterized often requires more memory bandwidth.

• Vertices or Paths can be drawn using a CustomPainter instead of using a image.
• Memory bandwidth requirements depend upon texture interpolation techniques. Using nearest-neighbor interpolation is the most efficient technique for saving bandwidth and using FilterQuality.none uses nearest-neighbor interpolation. See the Flutter documentation for more information.

The following example shows how to draw an image without alpha blending and nearest-neighbor interpolation.

import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';
import 'package:flutter/widgets.dart';
import 'dart:ui' as ui;

/// Draw the background image with a custom painter.
class BackgroundImagePainter extends CustomPainter {
  BackgroundImage(this.image);

  final ui.Image image;

  final Paint imagePaint = Paint()
    ..blendMode = BlendMode.src // Disables alpha blending.
    ..filterQuality = FilterQuality.none; // Nearest neighbor interpolation.

  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawImage(image, Offset.zero, imagePaint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return oldDelegate.image != image;
  }
}

class BackgroundImage extends StatelessWidget {
  const BackgroundImage({super.key, this.image});

  final ui.Image image;

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: BackgroundImage(
        image: image
      ),
    );
  }
}

Summary

GUIs are an essential aspect of interaction with machines. Selecting an appropriate GUI can be problematic but regardless of the GUIs chosen by the developer, TI’s next generation device, the AM62x, is capable of running any modern GUI. For additional information, see the Flutter on the TI AM6254 demonstration.

About KDAB

KDAB helps customers in any stage of product development cycle from planning and architecture over full-stack development to modern development processes, tooling, and continuous integration. When it comes to embedded devices, KDAB provides particular in-depth expertise in all parts of the software stack, especially the operating system (usually Embedded Linux®), the UI framework (Qt, Flutter and others), and performance optimization on a given hardware.