Flutter - Create .dmg File for Flutter MacOS Desktop Apps | Flutter Tutorial

[Music] hey hello friends and welcome to retro portal studio in this video we're going to be taking a look at creating a dmg installer for your flutter mac os desktop apps you can see that right now i'm in the same project which we used to create the dot exe installer the link for the video will be in the description below we have the same installers folder and we'll be using the same folder for our mac os dmg creation process first things first let's quickly run the application and check if everything works fine so here you can see that this is just a simple demo app with text in its center i'll close this for now and let's get back to the code now let's create a release build for this macos application i'll go to the terminal and here i'll use the command flutter dev build mac os i'm using the flutter dev here which is a profile for a different version of flutter that i use for development in general case you'll use flutter i'll press enter now as the build completes i can minimize the terminal and now i'll go to the build folder and in this we need to go to the macos folder to build and then to the products folder and in this you can see that we have the release folder right here and this will contain all the files that we need to pack to the dmg installer now let's take a look at this release folder in the finder for this i'll right click on this and i'll choose reveal in finder now in this release folder you can see that we have this desktop build which is an application and we can click on this and the application will run like any native mac os app i'll close this for now now let's take a look at how we're going to create an installer for this first you need to have node.js and npm that is node package manager installed on your system now to install node.js you can go to this link nodejs.org en download and from here you can download the mac os installer this is quite easy to install and the instructions are straightforward and there are a lot of tutorials out there if you do not have node installed on your machine now once you've gone through the installation process for a node you can go to the terminal and check if all the installations are done properly for this i'll type npm dash dash version and this will give me the version of npm to be 6.14.6 yours can be different you can also check the version for node using node version and on this machine i have the installed version of node that is 12.18.3 we'll be only using npm to install the package now once the npm is set up let's take a look at the npm package that we're going to use to create the dmg and that package is called app.dmg the link for this package will be in the description of the video and there are a lot of instructions that we're going to use in just a few moments let's go back to the terminal to install the package now in the terminal you need to type npm install g app dmg we're using dash g here to install the package globally so we can access it later from anywhere on the system and once the package is installed you can simply type app dmg dash version and this will give you with the version of the node app.dmg package which is currently at 0.6.2 now if for some reason this app.dmg command doesn't work you can use npx app.dmg version and this will give you with the same result make sure you type npx and not npm moving forward let's move to the application root directory and in this you can see that i have an installer's folder right here now this folder is from the previous tutorial in which we created.exe setup for the flutter windows apps you can create a new installers folder and we'll be using this folder to store all the scripts and files for creating the executables for our application so i'll go to this folder and in this i'll create a new folder called dmg creator now let's go to the android studio and take a look at this folder now in the installers folder we have this dmg creator and in this folder let's create a new file and let's name this file config.json now for the content of this file let's go to the app.dmg node package page and in this if we scroll a bit down you can see that we have this example right here and we're going to copy this json and paste this in this config.json file for the title let's change the application title to flutter tips you can change this to whatever your application name is and for the icon we need to pass in an icns file for the icon on my machine i have this app icon icns so i'll copy this and i'll come back to the dmg creator folder and in this i'll paste the file now for the icon i'll pass in slash app underscore icon dot icns now this background property is basically the background of the installer in this case we'll remove this property from here and for the contents we only need to change the entry for the file type and this we need to change the file path to point to the executable app in the mac os release build so let's go to the release folder i'll go to the build mac os build products release and in here we have this desktop underscore build dot app i'll right click on this and copy the path and in this case i'll copy the relative path and i'll paste the path right here now you can see that the path starts from the build folder but currently we're in the dmg creator folder so i need to go back two steps for that i'll type dot slash and dot dot slash and this will move me up to the application root directory and from there we can go to the builds mac os and finally reach the desktop build dot app i'll minimize the build folder just as a recap for the title you need to pass in the application title for the icon you need to pass in an icns file for the application icon and in the contents you only need to change in the file path and point it to the application executable in the release folder now these are all the basic properties and if you want to do more customizations with the installer you can go to the app dmg node package page and just below the example in the specifications you can check out all the other properties that this package supports coming back to the application now once the config.json is set up all we need to do is go to the terminal and in this we need to move to the dmg creator folder so i'll type cd installers slash dmg creator and once we're in the dmg creator folder we can use the app.dmg package and the first argument for this is going to be the path for the config file so since i'm in the dmg creator folder i can simply type dot slash config.json and the second argument is going to be the path that is the path for the output dmg installer file so for this i'll simply pass in dot slash and for the file name i'll use flutter underscore tips dot dng just for the recap for the app dmg command the first argument is going to the path for the config file and the second argument is going to be the path for the output file which in this case is the same folder and we also need to pass in the file name now i'll press enter and once the command is successfully executed you can see this message your image is created and if i go to the dmg creator folder in this we have this flutter underscore tips.dmg now i can open this file in the finder and i can click on this file and you can see that we have the installer right here now all i need to do is i need to click on this desktop build and move this to the application folder and once this is done i can go to the applications and in here you can see that we have the desktop build right here and i can click on this and the application will run like any native macos app i'll close this for now to delete the app i can go to the finder and i can go to the applications directory and in this you can see that we have the desktop builds app and i can simply move this to the pin now with this you have seen that how easy it is to create a dng file for your flutter mac os apps you can also check out the article for this complete process via the link in the description below i hope you found this video useful and if you do please make sure to hit the like and subscribe button and you can also consider supporting retro portal studio via patreon or buy me a coffee while the links in the description below see you next time peace [Music] you

Channel: RetroPortal Studio

Views: 8,607

Keywords: flutter, flutter tutorial, flutter app development, flutter tutorial for beginners, flutter course, create dmg installer for mac, create .dmg file for macos flutter, flutter .dmg file, flutter macos app, flutter macos setup, flutter macos build, flutter macos, flutter desktop app, flutter desktop macos, flutter macos desktop app

Id: EniblIsf8tU

Length: 8min 14sec (494 seconds)

Published: Sun Oct 31 2021