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.
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.
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
-
--fvmoption 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!
Top comments (0)