Flutter on desktop, a real competitor to Electron

Flutter desktop for real-world applications and to accelerate mobile development. A project made by Simon Lightfoot and Norbert Kozsir.

At its core, Flutter is a standalone, binary executable; making it a game-changer not only on mobile, but on desktop as well.

Writing once and deploying natively on Android, iOS, Windows, Mac and Linux and additionally sharing all the business logic to the web (using AngularDart) is a big deal.

Let’s explore this idea!


Native Desktop client to accelerate mobile development

But before taking a look at actual native desktop apps, let’s see what running Flutter on desktop can do for people developing for mobile.

Startup time

http://i.imgur.com/cwg333d.png, original: https://xkcd.com/303/

The first thing that happens before anything productive can be done is starting the android emulator and running Gradle.

In the following Gif I recorded myself cold booting the emulator and running the default Flutter app. I took me a whopping 2 minutes and 40 seconds. Just image how much productive things could have happened during that time.

Android booting & Gradle running (speed up 10x)

What if I told you, you could be up and running in less than 10 seconds?

Running the app natively skips the whole overhead of running Android on your system and going through Gradle.

Just check this out:

Flutter Simulator starting in real time

Notice how you don’t have to leave IntelliJ. We’ve written the tooling needed to run Flutter as a native application. Works in all Flutter IDEs.

Resizable during runtime

As with any app, you’ll want to test your layout for different sizes. What do you do?

You ask all your friends with different phones and/or create a bunch of emulators to make sure your layout looks as intended on each and every device.

This feels pretty cumbersome to me. Can we do it better?

Yes, we can!

I think this is pretty self-explanatory

Work with assets on your PC

When developing and testing apps which need to interact with assets on the phone, it can be quite annoying to first move all the testing files to the emulator or device.

Wouldn’t it be nicer to just pick the file you want with your native file picker?

If you are screaming YES, then I got the right thing for you!

File picker for desktop

The best part about this: the desktop implementation uses the same method channel as the mobile implementation, therefore no code needs to be changed at all.

Hot reloads and debugging

This is all nice and fun. But hot-reloading and debugging capabilities are a must for every productive engineer.

So we made that work for desktop too!

Hot reloading and debugging the native app

RAM

Last but not least: RAM. This is a pretty big deal for people working on notebooks and/or somewhat less beefy machines.

The Android emulator eats up roughly 1GB of RAM. Now, imagine running two of those (testing a chat application or similar), IntelliJ, and the ever-RAM-hungry Chrome.

That’s pretty heavy.

1 GB of RAM for the Android Emulator

Because the embedder is running natively, there is no need for Android. Which makes it much smaller.

100 MB of Ram for the native app

Native Desktop Apps

Simply running a Flutter app on desktop isn’t enough for a fully fledged, production-ready desktop app. Doing so feels (and it essentially is) like running a mobile app on desktop.

What’s missing? A lot!

Hovering, Cursor Changes, Scroll Wheel Interaction, etc.

So we built that too!

We managed to implement those features without changing any platform code — so, it’s a standalone package that can be included within any ordinary Flutter app. However, when used together with our desktop embedder, magic happens!

Generic chat app in Flutter, on desktop :)

This is the exact same code running on the Android emulator.


Developing for Android and Desktop at the same time.

Notice how it behaves like a normal app on the emulator, but changes the cursor and adds the hover effect on desktop.


A little showcase of the simplicity of these desktop widgets

Hovering:

Cursor:

Writing a truly cross-platform app — including desktop

Widgets

Most of the widgets you create are universally usable. Think button, loading indicators, etc.

Those which need a different look depending on the platform can be encapsulated pretty easily by checking the TargetPlatform property.

Widgets like the CursorWidget can also be included in the Android version without a problem. They are simply ignored there.

Pages

Pages differ quite a bit depending on the platform and the screen size. However they mostly only differ in layout and not in actual functionality.

Using a PageLayoutWidget makes creating accurate layouts for each platform super easy.

Bonus: You also have nice tablet support by default :)

Plugins

No changes to your Flutter code have to be done when using a plugin which also supports the desktop embedder.

When will the code be released?

Soon. To stay updated, follow Simon Lightfoot and me on Twitter.

This project is still super alpha, things will most likely change in the near future (looking at all those widget names).

Our goal is to release something that is easy to install, set up and use in the near future.