I Created a Rust-Based TUI Tool 'flx' for Flutter Developers

Takeshi Tsukamoto — Tue, 13 Aug 2024 01:51:20 +0000

Hello, I'm itome, working at a company that develops the woodstock.club app, where you can buy U.S. stocks starting from 200 yen.

https://woodstock.club

We've just launched our company's Zenn Publication, and we're planning to update it frequently.

Recently, I had the opportunity to present at an event called FlutterNinjas, where I introduced a new Rust-based TUI tool for Flutter developers called flx. I’d like to share more about it here.

https://github.com/itome/flx

What is flx?

flx is a TUI (Text User Interface) tool that lets you access functionalities similar to Flutter's DevTools directly from the terminal.

TUI tools create a GUI-like display within the terminal. A well-known example of this is lazygit.

Why I created it

When developing with Flutter, running the flutter run command in the terminal displays the following:

It’s convenient enough with features like hot reload and DevTools launching via shortcuts. However, I thought it would be even more useful if a TUI tool could provide not just logs but also network information and other insights—this idea sparked the creation of flx.

How to use it

Simply replace flutter run with the flx command. Using flx offers the same functionalities as flutter run (like hot reload and log viewing) while also giving you access to additional features such as:

Monitoring network requests

Checking the frame rate

Inspecting the widget tree

Automatically loading .vscode/launch.json

Other features

--fvm option for FVM users
Running multiple apps simultaneously

Technology stack

To replicate the functionality of the flutter run command, flx utilizes the Flutter Daemon and Dart VM Service to monitor networks and retrieve the widget tree.

Flutter Daemon

The flutter daemon command triggers a CLI-specific Flutter API. It responds with JSON-RPC requests sent via standard input. You can use it to run apps, perform hot reloads/restarts, retrieve the list of connected devices, and get SDK versions.

Dart VM Service

By connecting to a running Flutter app over WebSocket, you can retrieve various details about the app. This includes network and widget tree information, GC timing, frame graphs, and even setting breakpoints in the source code during execution. It provides nearly all the necessary features for developer tools.

Rust

I chose Rust for development. Since there’s a lot of asynchronous processing between the Flutter Daemon and Dart VM Service, I designed it using tokio with separate event loops. For state management, I used Redux.

Frequently Asked Questions

Here are some questions I received during the FlutterNinjas event:

Why use Rust for a Flutter tool?

One reason is that there isn’t a standard library in Dart for creating TUIs, and another is my personal interest. Although Dart has a library for providing bindings for VM Service, Rust doesn’t, so I had to implement it from scratch based on the specifications. Considering the effort, it might have been faster to develop a TUI library in Dart.

Why not just use the official DevTools?

Most of the features offered by flx can be covered by the official DevTools, so not everyone needs to use flx. Just like some people prefer using GitKraken while others use lazygit, I hope terminal users find flx a more convenient option.

Future plans

I’m currently working on implementing frame graph rendering similar to DevTools. Additionally, I’m considering using AI to analyze logs and automatically identify potential bugs.

Summary

If you're a macOS user, you can install flx using the following command. Feel free to try it out, and I welcome any bug reports or suggestions for improvements!

brew install itome/tap/flx

If you're interested, please star the project on GitHub to show your support!

DEV Community: Takeshi Tsukamoto