Flutter is currently on a mission to become a true “write-once, run anywhere” technology. iOS and Android platforms are extensively supported and it’s already possible to build macOS applications using Flutter.
ℹ️ This post solves a very technical issue – if you’re interested in learning more about Flutter and why to use it, this article provides a higher-level overview and explains why we are building our AI-assistant with Flutter.
Building and running a macOS application with Flutter has become quite easy in the last few months. Unfortunately, the tooling around Flutter Desktop applications still lacks some essential features – but be assured that the maintainers of Flutter are already working on most of them.
Shipping a Flutter Desktop application to customers
One of the essential features currently missing is the capability to build a macOS Installer (usual a .dmg file) for distribution. By default, Flutter builds a .app file, which can be executed straight away:
$ flutter build macos --release Running pod install... Building macOS application... $ ls build/macos/Build/Products/Release Neo.app
Building a .dmg with Flutter
But what, if you would like to distribute an installer?
There is a great project called “create-dmg” out there, which can be installed using Homebrew (refer to the project’s README for other setup methods):
To give it a try, switch to the /build/macos/Build/Products folder after building your macOS application.
Customizing your installer
To make your installer more fancy, you can customize the volume name, volume icon, and installer background. You just need to fiddle with the icon placement and text size and you’ll end up with a few command lines:
#!/bin/sh test -f Neo-Installer.dmg && rm Neo-Installer.dmg create-dmg \ --volname "Neo Installer" \ --volicon "neo_icon.icns" \ --background "installer_background.jpg" \ --window-pos 200 120 \ --window-size 800 529 \ --icon-size 130 \ --text-size 14 \ --icon "Neo.app" 260 250 \ --hide-extension "Neo.app" \ --app-drop-link 540 250 \ --hdiutil-quiet \ "Neo-Installer.dmg" \ "Release/"
The script automatically prepares the DMG installer with the desired settings. Don’t be spooked by some windows automatically appearing in the process:
Even more fancy with Retina support
By default, the background image does not support retina resolutions and might look a bit blurry. Fortunately, it’s possible to use a TIFF image instead of PNGs / JPGs. Just create a @2x version of your background image with twice the resolution. On macOS you can use tiffutil to create a retina-ready background image for your installer:
tiffutil -cathidpicheck installer_background.jpg [email protected] -out installer_background.tiff
There are a few more options to consider when using create-dmg. For example, you can attach your own EULA / license. Keep in mind, that this manual step (of creating a DMG installer) might be obsolete in future versions of Flutter. But for today, this enables you to get up and running with your own, distributable Flutter desktop application in no time.