Creating “.exe” Executable Setup for Flutter Desktop Apps — Windows 💻
Flutter has taken the Desktop world by Storm and it is becoming more and more stable and performant with each consecutive release. When you have a Flutter project with added windows support, you can create a release build for windows by just using the following command in the Terminal:
flutter build windows
Once the execution of this command completes, you will have a Windows build folder ready at the location:
..\build\windows\runner\Release\
All you need to do now is click on the Application File and BOOM! 💥 You have a running Windows Desktop App. Simple!
But Wait!…. How will you ship this to your client? 🤔
You need to create a “.exe” Executable file that the clients could easily use to install the application on their Windows Desktop. In this article, we’re gonna take a look at doing just that! 👇
What the Build Folder Looks Like:
The release build folder of your application may look like this:
Along with the actual runnable application, it will have files (such as .dll files) and folders. (such as data) which are essential for the proper execution of the application. We need to compress them all to a simple “.exe” file, which when installed, will have this exact folder extracted to your Application Folder under Program Files or any other Installation Directory chosen by the Client.
The Setup:
Download the InnoSetup from here and have it installed on your Windows Machine. Create a folder called “Installers” in your Flutter Application root directory just to have things organized in a reusable way. This folder will contain the final “.exe” file and a reusable script for creating future Executables.
The Process:
- Open Inno Setup, It will look something like this:
For the very first time, make sure you select the second option that says, “Create a New Script file using the Script Wizard”, and click Ok.
2. The next few screens will ask you for basic application information that you can simply fill out, nothing much technical there. But just for reference, here are a few quick screenshots:
3. Now the next screen, this is what matters the most. You have to specify the Application’s primary executable file and other folders that you wish to include in the process. The window will look something like this:
The first critical thing you need to do is to click on the “Browse” button and select the application file from the release build folder:
Next, you need to use the “Add Files” button to select all the individual files, (NOT THE FOLDERS) which we need to package with the app. In our case, it is only one file:
Next, let’s add the “data” folder. Do this carefully because if not done correctly this will crash the application as soon as it opens.
Click on the “Add Folder” button and select the “data” folder from the release folder.
Now, as soon as you click on this folder, you will have a popup which looks something like this:
to as you, if you wish to include all the subfolders and files contained in your selected folder. Make sure to click Yes!
At this point, your Application Files popup will look something like this:
Every folder that you add, will look like the one marked by an arrow in the above graphic, of course with a different folder name.
By default, all the files and folders in this selected directory will be added to the application’s root directory when installed. But we DO NOT want this. We want the files that belong in the “data” folder to also get exported to the “data” folder. For this, you have to double click on the folder entry and with this, a popup will open which will look something like this:
Here, in the highlighted field, you need to set the “Destination Subfolder” which in most cases will be the folder name that you are importing. In our case, this is “data”.
4. Done with the most critical part, on the next screen we have to choose if our application deals with a certain type of file extension. Fill this as per your own needs, in our case we don’t want any:
5. The next few screens are quite simple, fill in the requested details as per your application needs until you reach the “Compiler Settings” screen.
Here you can select a custom output folder. For this, select the “Installers” folder we created earlier in the application’s root directory. You can also set the output “.exe” file name and a custom icon (must be a .ico file).
6. Click “Next” through the rest of the screens until you “Finish” the process. When the process finishes you will have a screen with looks like this:
Click “Yes” for script compilation and make sure to save the script in the same “Installers” folder.
When the compilation completes. We are done! The program might automatically run your setup based on the process.
At this point your Installers folder will look something like this:
Now, whenever you wish to create the .exe file again. You can open the script and click on the “Run” button as indicated below:
The script will run again based on your previous settings and you will have an executable ready in the same “Installers” folder. If you want, you can read the script and make the changes directly in the script.
For Example 👇:
If you wish to change the output file name for the updated version. You can simply change the value for the “OutputBaseFilename” property.
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! ✌😁
