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
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.
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:
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!
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!
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!
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.
Because the embedder is running natively, there is no need for Android. Which makes it much smaller.
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!
This is the exact same code running on the Android emulator.
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?
It’s here! Check it out at:
