SPRT761 june 2023 AM625
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).
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:
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:
git clone
https://git.ti.com/git/arago-project/oe-layersetup.git
tisdk
cd
tisdk
cp
configs/processor-sdk/processor-sdk-08.05.00.21-config.txt
configs/flutter-config.txt
echo
"meta-flutter,https://github.com/ardera/meta-flutter.git,dunfell,HEAD"
>> configs/flutter-config.txt
./oe-layertool-setup.sh -f
configs/flutter-config.txt
cd
build/
export
TOOLCHAIN_PATH_ARMV7=$HOME/gcc-arm-9.2-2019.12-x86_64-arm-none-linux-gnueabihf
export
TOOLCHAIN_PATH_ARMV8=$HOME/gcc-arm-9.2-2019.12-x86_64-aarch64-none-linux-gnu
echo
'IMAGE_INSTALL_append = " flutter-pi-runtimedebug
flutter-gallery-runtimedebug "' >>
conf/local.conf
echo
'TOOLCHAIN_HOST_TASK:append = " nativesdk-flutter-sdk"' >>
conf/local.conf
echo
'FLUTTER_SDK_TAG = "stable"' >> conf/local.conf
echo
'SRCREV_pn-flutter-gallery-runtimedebug =
"9776b9fd916635e10a32bd426fcd7a20c3841faf"' >>
conf/local.conf
.
conf/setenv
MACHINE=am62xx-evm bitbake-layers add-layer
../sources/meta-flutter
MACHINE=am62xx-evm bitbake
tisdk-default-image
arago-tmp-external-arm-glibc/deploy/images/am62xx-evm/tisdk-base-image-am62xx-evm.wic.xz
flutter-pi
/usr/share/flutter/gallery/
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:
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.
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.
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
),
);
}
}
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.
KDAB helps customers in any stage of their 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.
KRUNAL BHARGAV is a System Application Engineer at TI where he primarily supports graphics and display. Krunal has been with TI since 2017 and is involved in designing and supporting products in Embedded HMI Systems. Krunal earned his Master's degree from the New Jersey Institute of Technology, New Jersey, USA.
HANNES WINKLER is a software engineer for KDAB since 2021 and bachelor student of computer science at Otto-von-Guericke Universität Magdeburg. He is the author of flutter-pi, a Flutter engine embedder for embedded Linux, and contributor of some Flutter engine and tool features.