The original address: neohelden.com/blog/tech/f…

Neohelden.com/

Published: January 24, 2020

Flutter’s current mission is to be truly a “write once, run anywhere” technology. The iOS and Android platforms are widely supported and it is already possible to build macOS applications using Flutter.

ℹ️ this article addresses a very technical problem — 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’re building our AI helper with Flutter.

Over the past few months, building and running macOS applications using Flutter has become quite easy. Unfortunately, the tools around the Flutter Desktop application still lack some basic features — but rest assured, Flutter maintainers are already working on most of them.

Ship the Flutter desktop application to customers

One basic feature missing is the ability to create a macOS installer (usually a.dmg file) for distribution. By default, Flutter creates an.app file that can be executed directly.

$ flutter build macos --release

Running pod install...
Building macOS application...

$ ls build/macos/Build/Products/Release
Neo.app
Copy the code

Build a.dmg with Flutter

Install the Flutter desktop application on macOS with a. DMG file.

But what if you want to release an installer?

There is a great project called “create-dMG” that can be installed using Homebrew (see the README for other installation methods).

Want to try, after building your macOS application, switch to the/build/macOS/build/Products folder.

Customize your setup

To make your setup more fancy, you can customize the volume name, volume icon, and setup background. You just fiddle with the position of the icon and the size of the text, and you get some 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/"
Copy the code

The script automatically prepares the Settings required for the DMG installer. Don’t be intimidated by some of the Windows that appear automatically during this process.

Retina support for more variety

By default, background images do not support retinal resolution and may look a bit blurry. Fortunately, it can use TIFF images instead of PNG/JPG. Simply create a @2x version of the background image at 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
Copy the code

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 (creating the DMG installer) may be eliminated in future versions of Flutter. But for today, this enables you to get your own, distributable Flutter desktop application up and running in a short time.

Translation via www.DeepL.com/Translator (free version)