Flutter Custom-Devices

Have you ever wanted to extend Flutter’s compatibility beyond standard devices? Imagine the possibility of running Flutter not just on smartphones, tablets, or desktops but also on unconventional hardware like Raspberry Pi or other custom devices. It might sound like a far-off dream, but within the realm of Flutter, this vision becomes a tangible reality.

Flutter’s custom device feature is a hidden gem that holds the key to this expanded frontier. It offers a doorway to connect Flutter with atypical platforms, granting developers the ability to explore uncharted territories of device compatibility.

In this article, our focus is on exploring the custom devices feature within Flutter. We’ll unravel the capabilities of this feature, which allows developers to extend Flutter’s compatibility beyond standard devices.

So let’s start with:

What is custom-devices command?

The ‘custom-devices’ command is a powerful tool within the Flutter CLI that introduces a gateway to connect Flutter with custom or third-party embedders. This command serves as a bridge, enabling the integration of Flutter features like hot-reload, hot-restart, debugging, and DevTools with environments that fall outside the conventional scope of Flutter-supported devices.

By utilizing the ‘custom-devices’ command, developers can expand the horizons of Flutter’s compatibility, experiment with diverse platforms, and leverage Flutter’s development capabilities in unconventional environments.

Preconditions

To seamlessly integrate custom devices with Flutter and unlock its full potential, certain preconditions need to be met:

1. Enable Custom Devices in Flutter Configuration

Before diving into utilizing custom devices, ensure that you’ve enabled the custom devices feature in your Flutter configuration. This can be achieved by executing the following command in your terminal:

flutter config --enable-custom-devices

2. Establish Passwordless SSH Connection

Creating a passwordless SSH connection between your development environment and the remote device where the custom embedder will run is essential. This allows seamless communication and execution of commands between Flutter and the custom device without the need for constant authentication.

You can use this tutorial to create your ssh connection.

3. Install Custom Embedders on the Remote Device

For the custom device integration to work, you need to install the custom embedders such as flutter-pi, flutter-elinux, flutteror any other specific embedder you intend to use on your remote device. These embedders facilitate the execution of Flutter applications on non-standard platforms and environments.

Create a custom device

To integrate a custom device into your Flutter environment, follow these steps:

1. Environment Setup:

• Host Machine: Desktop machine where Flutter is installed.
• Remote Device: Raspberry Pi with the Flutter-pi embedder installed.

To install the Flutter-pi you can use these instructions.

2. Adding a Custom Device:

To add a custom device, utilize the following command within the Flutter environment:

flutter custom-devices add

This process prompts for specific details about the custom device, such as its ID, label, SDK name/version, hostname or IP address, SSH username, command to start the app, port forwarding preference, and screenshot command. Once completed, the custom device is successfully added to the configuration file for future use within Flutter.

Example:

hannes@pop-os:~/devel$ flutter custom-devices add

Please enter the id you want the device to have. Must contain only alphanumeric or underscore characters. (example: pi)
pi

Please enter the label of the device, a more descriptive name for identification. (example: Raspberry Pi)
Raspberry Pi

SDK name and version (example: Raspberry Pi 4 Model B+)
Raspberry Pi 4 Model B+

Should the device be enabled? [Y/n] (empty for default)

Please enter the hostname or IPv4/v6 address of the device. (example: raspberrypi)
pi

Please enter the username used for SSH-ing into the remote device. (example: pi, empty for no username)
  
Please enter the command executed on the remote device for starting the app. "/tmp/${appName}" is the path to the asset bundle. (example: flutter-pi /tmp/${appName})
flutter-pi /tmp/${appName}

Should the device use port forwarding? Using port forwarding is the default because it works in all cases. However, if your remote device has a static IP address and you can specify the "--observatory-host=<ip>" engine option, you might prefer not using port forwarding. [Y/n] (empty for default)
 
Enter the command executed on the remote device for taking a screenshot. (example: fbgrab /tmp/screenshot.png && cat /tmp/screenshot.png | base64 | tr -d ' \n\t', empty for no screenshotting support)

Would you like to add the custom device to the config now? [Y/n] (empty for default)

Successfully added custom device to the config file at "/home/hannes/.config/flutter/custom_devices.json"

Connecting Flutter to Flutter: Introducing Snapp CLI

Previously, we explored running a Flutter app from a host machine on a remote device configured as a custom device, such as a Raspberry Pi using Flutter-pi. However, what if we want Flutter running on both the host and the remote machine?

Achieving this isn’t straightforward and requires extensive knowledge across various topics.
We’ve got good news. The Snapp CLI — a Dart-based command-line tool designed specifically to simplify this complex process.

What is Snapp CLI?

snapp_cli is a Dart command-line tool designed to simplify the process of adding custom devices to the Flutter SDK. With this tool, you can configure and run your Flutter apps on non-standard or remote devices, such as a Raspberry Pi, while maintaining essential Flutter features like hot-reload and hot-restart.

How Does Snapp CLI Help?

This tool acts as a bridge, enabling seamless interaction and synchronization between Flutter instances on diverse machines. By leveraging Snapp CLI, developers can avoid the intricacies of manually configuring and syncing Flutter environments, saving time and effort.

In the following sections, we’ll dive deeper into how Snapp CLI functions and the steps involved in leveraging its capabilities to connect Flutter instances across different machines.

Creating a Custom Device with Snapp CLI: A Step-by-Step Guide

Now that we’ve introduced Snapp CLI as a powerful tool for connecting Flutter instances across multiple machines, let’s explore how it simplifies the creation of custom devices. We understand that configuring custom devices manually can be intricate, so we’ve created a step-by-step video tutorial to guide you through the process effortlessly.

Conclusion

Exploring Flutter’s custom device feature showcased its ability to extend compatibility beyond traditional devices. The ‘custom-devices’ command and Snapp CLI emerged as powerful tools, simplifying integration and synchronization across diverse platforms. These advancements empower developers to innovate and break free from conventional limitations, redefining the possibilities of Flutter app development.

If you are interested on Flutter embedded topic, make sure to follow Me and Snapp Embedded on 𝕏.