Flutter Desktop: How to get a custom installer for your Flutter macOS app
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.
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.
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
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. To make your installer more badass, 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 badass 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.
This post was originally published on https://neohelden.com/blog/tech/flutter-desktop-custom-installer-dmg/