Flutter on Raspberry PI — Inky phat — Snapp-embedded

Inky Pi

We were looking at different possibilities for running Flutter on Raspberry PI, especially to generate interest for the kids. In 2023 we did a talk and showcased the possibility at Devfest 2023. Continuing on the previous article, on how we got Flutter on Raspberry PI, read more here.

https://medium.com/@sumithdamodaranparambat/flutter-everywhere-harnessing-flutter-on-raspberry-pi-and-other-devices-with-c287ae30c589

We wanted to show the Avatar image created by the users as a Name badge on Inky Phat. This picture above is how it should work. Writing flutter code on a user laptop, in my case Macbook M2, Installing Flutter on Raspberry Pi (4b and above), Running the Pivatar app and displaying a name badge with the avatar created on an inky Phat.

Setting up a Macbook with Flutter and VS code is easy. The tricky part is getting Flutter on Raspberry Pi. We found Snapp-embedded CLI https://github.com/Snapp-Embedded/snapp_installer and a lot more have been described by Payam Zahedi in his article https://medium.com/snapp-embedded/flutter-on-embedded-devices-7070b5907b91 . Simply follow the steps.

Found this command very useful, find the IP of Raspberry Pi and add it as a device for VS code for remote installation and debugging

snapp_cli bootstrap -v 192.168.1.82

Now that we got Flutter on Raspberry PI (Linux), writing the badge on Inky phat https://learn.pimoroni.com/getting-started-with-inky-phat which is a display that needs Python interaction. Inky supports images and text that can be written to the display.

To get a widget to be transformed as an image, use the RenderRepaintBoundary and write it to a directory on raspberry Pi.

Future<void> takePicture() async {
    final RenderRepaintBoundary boundary =
        _globalKey.currentContext!.findRenderObject() as RenderRepaintBoundary;
    ui.Image image = await boundary.toImage();
    final directory = (await getApplicationDocumentsDirectory()).path;
    ByteData? byteData = await image.toByteData(format: ui.ImageByteFormat.png);
    Uint8List pngBytes = byteData!.buffer.asUint8List();
    File imgFile = File('$directory/${avatarData.name}_photo.png');
    await imgFile.writeAsBytes(pngBytes);
    print(imgFile.path);
    await callPython(imgFile.path);
  }

The next step is to fetch the image and call the python code using Process library.

Future<void> callPython(String avatarImage) async {
    final process = await Process.start(
      'python3',
      [
        "/home/xxxx/Pimoroni/inky/examples/name-badge.py",
        "--type=phat",
        "--colour=red",
        "--name=${avatarData.name}",
        "--avatar=$avatarImage"
      ],
    );

    process.stderr.transform(utf8.decoder).forEach((output) {
      print(output.trim());
    });

    process.stdout.transform(utf8.decoder).forEach((output) {
      print(output.trim());
    });
  }

So it’s endless possibilities with Flutter on Raspberry PI, Flutter works everywhere, and embedded Flutter opens us lots of opportunities.