[Prototype] An IntelliJ plugin to preview Flutter widgets

[Prototype] An IntelliJ plugin to preview Flutter widgets

I got annoyed a couple of weeks ago when I had to adjust a small component in an existing Flutter app. The code change itself wasn't big, the annoying part was verifying everything looked good. I started the iOS simulator and waited painfully for it to start before I could start the compilation process. After the app ran, I had to navigate to the screen where this component was on.

This didn't take too long, but it was annoying.

I initially wrote this idea down onto my 200+ idea list, thinking this would take about a month to develop. But this thing kept bugging me so I gave myself an hour in the evening to explore and I discovered something pretty cool ...

Fast Desktop Shell (FDS)

One simple trick I like to do when developing Flutter apps for any platform is to develop it as a native MacOS application for as long as possible. This works, because Flutter is cross-platform:

  • Dart code & logic work out of the box

  • By now most plugins work for all major platforms (such as databases, auth etc.)

When building for MacOS, I noticed a pretty long time was spent on building the native MacOS app. This makes sense because any changes in the native parts (such as plugins) need to be compiled. But we (as Flutter devs) spend most time writing Dart code, the native parts rarely change.

So, is it possible to skip this native compilation step entirely?

This is what I thought would take up the majority of the time. Let me cut to the chase, this is already part of the Flutter SDK!

The trick is to pass the following additional run arguments:

--use-application-binary=build/macos/Build/Products/Debug/<app_name>.app
💡
This will instantly start the application and connect to it. This application is in the state of the time you last did a full build (not hot-reload or hot-restart). You need to do a hot restart once the app is running!

The IntelliJ Plugin

So the plan was pretty simple. Write an IntelliJ plugin to add LineMarkers (those little icons to the left of the code) to allow users to execute a single widget using FDS. In addition to that, I wanted to not only run the widget but a whole debugging environment with UI to dynamically change parameters of the widget.

I started prototyping the plugin using LivePlugin. It's an IntelliJ plugin to create IntelliJ plugins.

Inception

It's a great way to start prototyping as the setup time is pretty much non-existent and it supports hot-reload. Eventually, though I had to switch to a proper plugin due to things breaking when importing a certain class.

I've integrated everything into the existing toolchain such as using dynamic RunConfigurations to run the app.

RunConfiguration example

The result

I've published the plugin to the IntelliJ marketplace for everybody to use. During the early access program, it only supports MacOS, but I'll add all platform support soon!

Feel free to check it out, it's free.