Flutter on desktop, a real competitor to Electron

By Norbert

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!

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.

http://i.imgur.com/cwg333d.png

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.

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

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.

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

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

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.