Creating “.dmg” file for Flutter Macos Apps💻
In the last article, we Created “.exe” Executable Setup for Flutter Windows Apps and now, it is time to do the same for Mac. In this, we will take a look at creating “.dmg “ file for our Flutter MacOS Project.
Prerequisite:
- OS: MacOS
- Node/NPM: You need to have Node/NPM installed on your machine.
Test the node installation on your mac via terminal using:
Creating the MacOS Release build of Flutter Application:
The first thing that we need to do is to create a release build for our Flutter MacOS Application with:
flutter build macos
And this will create a Release folder for our MacOS application in the “build” folder under the application root directory.
We can start the application by using the desktop_build.app file that you can see in the highlighted section of the above image.
Installing the Node Package for creating the .dmg:
Package Link: https://www.npmjs.com/package/appdmg
For installing, we need to go to the terminal and use the command
npm install -g appdmg
We use the flag “-g” here to install the package globally so we can use it from anywhere on our machine. Now once the package is installed successfully you will be able to use the command:
If the first command doesn’t work we can use the second command (prefixing the previous command with npx).
If this works, then we’re good to go!
Creating config.json:
Now, Let’s create a new folder called “Installers” in our application root directory to keep our setup for creating installers organized. To separate the files from the ones we used for Windows .exe creation, let’s create another folder called “dmg_creator” in the “Installers” directory. In this directory, we will create a new file called config.json which will contain the configuration for the .dmg we wish to create, and along with this we also need to have a .icns icon file for the setup. Below is how this directory will look like:
Contents of the config.json
To start with, we can add basic properties in this config.json such as:
title: The Installer Title
icon: The Installer Icon (.icns file)
contents: The contents of your DMG file. You can copy the above json and change the “path” of the file type content. This path should point to the .app file, in the Release folder, which in our case is desktop_build.app.
Note: There are a lot more properties that you can customize with this config file and change the overall look and behavior of the installation process. For this, you can take a look at the “Specification” section on the appdmg package page here.
Creating the .dmg file:
Once we have the config.json in place, we can use the appdmg executable to proceed further. for this you need to use the following command in the terminal:
appdmg <config-json-path> <output-dmg-path-with-file-name>
In the above image, we first move to the dmg_creator folder so it is easy for us to refer to the config.json file and we will use the same folder for output.
In the second command, I use the appdmg program. For the 1st argument, We put in the path for our config.json, and for the 2nd argument, We put in the path for our output .dmg file and name it flutter_tips.dmg.
Once this program executes, we will have the result file in our dmg_creator folder:
If you like to have a visual representation for reference, check out this tutorial on my Youtube Channel and you’ll have a good idea! And while you’re there, if you find this useful, consider Subscribing and Sharing!
If you find this Useful, Consider Subscribing to RetroPortal Studio on Youtube at:
Here are the links to my other Social Media Handles:
Youtube: https://www.youtube.com/retroportalstudio
Twitter: https://www.twitter.com/theretroportal
Instagram: https://www.instagram.com/retroportalstudio
LinkedIn: https://www.linkedin.com/in/parasjainrps
Happy Coding! ✌😁
