enables you to use a single codebase to build apps for mobile, web, desktop, and embedded devices. The introduction of has made it easier to try out desktop apps, as this option is now available on the channel. Flutter Flutter 2.0 stable This article will help you get started with building Windows desktop apps using Flutter, generate a release MSIX build, and publish the app to Microsoft Partner Center using . Codemagic If you are looking for a more general getting started guide for building Flutter desktop apps, including designing adaptive layouts, check out . this article Creating a Flutter app for Windows Before you get started with creating a new Flutter app, you should have the Flutter SDK installed on your Windows system. If you don’t have Flutter installed, follow the installation guide . here If you already have Flutter installed on your system, make sure the version is above . You can check your Flutter version by using the command. 2.0 flutter --version To build Flutter Windows apps, you should have (not to be confused with ) installed on your system. While installing Visual Studio, use the “ ” workload if you want to build apps, or use the “ ” workload if you want to build apps. Visual Studio 2019 Visual Studio Code or VS Code Desktop development with C++ Win32 Universal Windows Platform development UWP Flutter uses for building Windows apps by default. Enable Windows support for Win32 using: Win32 flutter config --enable-windows-desktop In order to build UWP (Universal Windows Platform) apps, you need to be on the channel of Flutter. Run the following commands: dev flutter channel dev flutter upgrade flutter config --enable-windows-uwp-desktop Run the command once to check if there are any unresolved issues. To verify whether is listed as one of the available devices, run the command. flutter doctor windows flutter devices To create a new Flutter app, use the following command: flutter create <project_name> Replace with the name that you want to use for the project — for example, flutter create flutter_desktop_sample. <project_name> The above command will create a Flutter counter app project. You can run it on your Windows system using the following command: flutter run -d windows To run the app using UWP, use the following command: flutter run -d winuwp Windows UWP apps need a sandboxed environment to run, so you will be prompted to start it. Open PowerShell with administrator privileges in a separate window, and run the following command: checknetisolation loopbackexempt -is -n=[APP_CONTAINER_NAME] Once you have this process running, go back to the previous window and press “Y”. This should start your UWP app on Windows. Generating an executable of the app It’s really easy to generate the executable file for the Flutter Windows app. Just run the following command: .exe flutter build windows You can find the generated file by going to . The file can be distributed to any user, who can then run it on their system directly. <project_root>/build/windows/runner/Release/<app_name>.exe .exe There’s a safer and recommended alternative to using an file — the package. Some of the advantages of the MSIX package are: .exe MSIX Windows uses an isolated environment to securely install an MSIX build. It also helps in a clean uninstallation of the app. When you use an file, changes in the registry files remain even after the app is removed. .exe To distribute your app to Microsoft Store, you need an MSIX package. An file can’t be distributed directly. .exe There can be two types of MSIX packages: one to run locally and one for distributing to Microsoft Store. The type of MSIX package that you want to build can be specified as a build parameter. Let’s create a Microsoft Partner Center account first before taking a look at both types of MSIX builds. Creating a Microsoft Partner Center account You need a Microsoft Partner Center account to distribute a Windows app using Microsoft Store. Also, while building the distributable MSIX build, you need to specify some properties that should match those in your Partner Center app. Follow the steps below to create and configure a Microsoft Partner Center app: You need a in order to publish apps to Microsoft Store. You can register for one . Microsoft Developer Account here Log in to . If you don’t have an account, you can easily create a new one. Microsoft Partner Center From the home page of Microsoft Partner Center, click . Add program Select under . Fill in any details if necessary. Get started Windows & Xbox Go to , and click the button. Windows & Xbox > Overview Create a new app Enter the of the app. Click . name Reserve product name This should create an app on Microsoft Partner Center and navigate you to the page. Application overview You will need some of the information from this Microsoft Partner Center app while configuring your MSIX distribution build. Configuring for an MSIX build The easiest way to generate an MSIX installer is by using a Flutter package called . This is a command line tool that helps in creating an MSIX installer from the Flutter Windows build files. msix Add the package under in your file: dev_dependencies pubspec.yaml dev_dependencies: msix: ^2.6.5 The package uses some default configuration values while building an MSIX if you have not specified otherwise. You can provide the MSIX configurations inside the file. pubspec.yaml To generate a local MSIX, add the following configuration at the end of the file: pubspec.yaml msix_config: display_name: <AppName> publisher_display_name: <PublisherName> identity_name: <PublisherName.AppName> msix_version: 1.0.0.0 logo_path: ./logo/<file_name.png> In the above configuration, replace the angle brackets with their appropriate values: : The name of your app that will be displayed to users. display_name : The name of the publisher to be displayed to users (can be an individual’s name or a company’s name). publisher_display_name : The unique identifier of the Windows app. identity_name : Specifies the version of the app’s build. Uses the format “Major.Minor.Build.Revision”, where “Major” cannot be “0”. msix_version : The relative path of the logo file (optional). If not provided, the default Flutter logo is used. logo_path You can add the logo file inside the folder. Ideally, the logo should be a square image with a resolution of . You can read more information about the logo size . <project_directory>/logo 256x256 here Run the following command to generate the MSIX package for your Flutter Windows app: flutter pub run msix:create This command uses the configurations defined inside the file to generate the MSIX. pubspec.yaml Any MSIX package that is not distributed through Microsoft Partner Center is an unsigned package. To install and run an unsigned MSIX package, you have to locally trust and sign the app to be able to run it on Windows. NOTE: You can find the generated package by going to . But if you double-click on the package to open it on your Windows system, the button will be disabled. <project_root>\build\windows\runner\Release\<app_name>.msix .msix Install You need to sign the package with your Flutter Windows app locally to install the MSIX package on your Windows system. To do this, follow the steps below: on the file and select . Right-click .msix Properties Go to the tab inside the Properties dialog. Digital Signatures Select the “ ” signer and click . Then click on . Msix Testing Details View Certificate Start installing the certificate by clicking on . Install Certificate Select in the dialog. Click . Local Machine Next Under “Place all certificates in the following store”, click Browse Select the folder. Click . Trusted Root Certification Authorities OK Click and then . Next Finish Now, double-click on the file. You’ll see that the button is now enabled. Click on it to install the app. Install With this, your Flutter Windows app will be installed on your system. You can find it by searching inside your menu. Start Distributing your package with Microsoft Partner Center Now, let’s take a look at how you can distribute a package using Microsoft Partner Center. Modify the MSIX configuration inside your file with the following: pubspec.yaml msix_config: display_name: <AppName> publisher_display_name: <PublisherName> identity_name: <PublisherName.AppName> publisher: <PublisherID> msix_version: 1.0.0.0 logo_path: ./logo/<file_name.png> store: true Two additional properties are defined here: : The Publisher ID present inside your Microsoft Partner Center app. publisher : Setting this to generates an MSIX package distributable using Microsoft Partner Center. store true Also, make sure the property values for , , and match the values in your Partner Center. You’ll find these values by navigating in your Microsoft Partner Center app to . display_name publisher_display_name identity_name Product management > Product Identity If you are generating an MSIX package for publishing to Microsoft Store, then you won’t be able to install the certificate locally or run it. The package can only be distributed via Microsoft Partner Center. NOTE: Now that you have configured your Flutter Windows app for distribution, let’s build and distribute it using Codemagic. Once you start adding new features to your app, Codemagic makes it a lot easier and faster to distribute the updated builds. Adding your project to Codemagic The easiest way to add your project to Codemagic is through a Git provider. Add your project to a Git provider, such as ( , , or ), and follow the steps below to get started with Codemagic: GitHub Bitbucket GitLab Log in to . If you’re a new user, then . Codemagic sign up Connect to the Git provider where you have uploaded your Flutter project by going to the Integrations under . Make sure you have given permission to the repository where you have uploaded your app. Settings Navigate to the page, and click . Applications Add Application Select the : Git provider Click to authorize Codemagic. If you have already authorized your selected Git provider, click instead. Next: Authorize integration Next: Select repository If you are using as your Git provider, then you need to perform one additional step before selecting the repository. Click to set up the integration. You can learn more about configuring a GitHub app integration . GitHub Install GitHub App here Now, select the repository from the dropdown menu, and select as the project type. Then click : Flutter app Finish: Add application You will be taken to the project settings. The tab will be selected by default. Workflow Editor Building and publishing using Codemagic You can build a Flutter app on Codemagic using either the or the file. To build Windows apps on Codemagic, you need to enable billing by going to . Workflow Editor Codemagic YAML this page Enable the Microsoft Partner Center integration Codemagic uses the for publishing a Windows app to Microsoft Store. To use this integration, you have to link your Microsoft Partner Center account to your Azure AD application and provide Codemagic with the necessary information ( , , , and ). Microsoft Store submission API Tenant name Tenant ID Client ID Client secret Follow the steps below to generate the necessary information: Go to your by clicking on the gear icon. Account settings Navigate to . If you already have an existing tenant, you can associate it with the Partner Center account. However, it is recommended to create a new tenant for Codemagic. Organization profile > Tenants To create a new tenant, click and fill in the required information. Create Go to your account using the new tenant. Azure AD Navigate to (from the menu on the left) and click “ ”. App registrations + New registration Enter a for the application, and use the option. You can keep the field blank. Click . name Single tenant Redirect URI Register Proceed to (from the menu on the left), go to the tab, and click “ ”. Certificates & secrets Client secrets + New client secret Enter a , and select an date for the client secret. Click . Description Expiry Add Take note of the field, which is the client secret. You’ll need it in a later step. Value Finally, go to . Select and click “ ”. Select the application that you created, click , and give the role to it. Partner Center > Account settings > User management Azure AD applications + Create Azure AD application Next Developer Now, you can go to the Codemagic webpage and enable the Microsoft Partner Center integration. It can be enabled in the section for personal projects and in the for projects shared in a team account. User settings > Integrations Team settings > Team integrations Follow the steps below to enable the Microsoft Partner Center integration: Under Integrations, click the button beside Partner Center. Connect Enter the required information. You can find the and by going to . Find the on the Overview page of Azure AD, and enter the that you took note of earlier. Tenant name Tenant ID Partner Center > Account settings > Organization profile > Tenants Client ID Client secret Click . Save Configuring Codemagic for Flutter Windows apps using Workflow Editor To configure your project using Workflow Editor, go to the tab on Codemagic. Follow the steps below: Workflow Editor Select under . Windows Build for platforms Change the VM instance to . Windows Scroll down to the tab. Select the that you need to build the project, check the checkbox, and set the mode to . Build Flutter version Create a Windows MSIX package Release Go to the tab to configure Microsoft Partner Center distribution. Click to expand the tab. Check the checkbox. Distribution Microsoft Partner Center Enable publishing to Microsoft Store Select the from the dropdown menu. Enter the rest of the information that we discussed in the section. Make sure this information matches that in your Partner Center app. Tenant Configuring MSIX Click . Save changes You must publish the very first version of the app to the Partner Center manually. You can download the MSIX package from the build artifacts. NOTE: You have finished configuring your Windows publishing workflow. Click at the top of this page, and then click to start the build process. Start your first build Start new build Configuring Codemagic for Flutter Windows apps using codemagic.yaml To configure your build using YAML, go to your Flutter project, and create a new file inside the root directory called . codemagic.yaml Add the following template to the file: workflows: my-workflow: name: Workflow name instance_type: mac_mini max_build_duration: 60 environment: groups: - ... flutter: stable cache: cache_paths: - ~/.pub-cache scripts: - ... artifacts: - ... publishing: email: recipients: - name@example.com This is a basic workflow template for building apps on Codemagic. For more information, check out the . docs To generate an MSIX package and publish it using the Microsoft Partner Center, modify the workflow by following the steps below: Define an appropriate workflow name, and use the Windows VM instance: workflows: windows-release-workflow: name: Windows release workflow instance_type: windows_x2 max_build_duration: 60 For a Windows build, set the to . instance_type windows_x2 Add the following environment variables: environment: groups: - windows-signing flutter: master You need to upload the client secret to the application environment variables of Codemagic in an encrypted format ( is the name of the application environment variables). windows-signing Go to your project page on Codemagic, and click . Go to the tab, and add the credentials. Enter the Variable name as , and paste the client secret value inside the field. Create a group called . Make sure the checkbox is checked, and click . Switch to YAML configuration Environment variables PARTNER_CLIENT_SECRET Variable value windows-signing Secure Add First, under the section, get the Flutter packages: scripts scripts: - name: Get Flutter packages script: flutter packages pub get Enable the Windows platform: - name: Configure for Windows script: flutter config --enable-windows-desktop Build the Windows app using Flutter: - name: Build Windows script: flutter build windows Generate the distributable MSIX package: - name: Package Windows script: flutter pub run msix:create If you have added the MSIX configurations to the file, then the above command should work for you. Otherwise, you can directly provide the configurations in the CLI tool without making any modifications to your project file: pubspec.yaml pubspec.yaml - name: Package Windows script: | flutter pub add msix flutter pub run msix:create --store --publisher-display-name=<PublisherName> --display-name=<AppName> --publisher=<PublisherID> --identity-name=<PublisherName.AppName> --version=1.0.0.0 To retrieve the generated MSIX, update the path to the following: artifacts artifacts: - build/windows/**/*.msix In the section, replace the with your own. publishing email For publishing to Microsoft Partner Center, add the following under : publishing publishing: partner_center: store_id: <STORE_ID> tenant_id: <TENANT_ID> client_id: <CLIENT_ID> client_secret: $PARTNER_CLIENT_SECRET Replace the angle brackets with the appropriate values. You will get the and from the Azure AD Overview page. You can find the inside your Microsoft Partner Center app by going to . The is retrieved from the application environment variable that you defined earlier. tenant_id client_id store_id Product management > Product Identity client_secret This completes the configuration of the file. Now, just commit and add the file to your Git provider, and you are good to go. codemagic.yaml You should publish the very first version of the app manually by going to Microsoft Partner Center. Select your app from the dashboard, click , and fill in the details to submit the app. The first version should be fully published before publishing the next version using Codemagic. NOTE: Start the submission To start building your Flutter Windows app using the YAML file, go to your project page on Codemagic, and click . Select your workflow, and then click to start the build process. Start your first build Start new build Wrapping up Congratulations! 🎉 You have successfully built your first Flutter Windows app and published it to Microsoft Store using Codemagic. Once you start adding new features to your app, you can easily publish the next version of your Windows app by simply updating the build number and running the Codemagic build. And, of course, you can add other workflows so that Codemagic builds your Flutter app for not only Windows but also iOS, Android, or Linux. You can find the complete configuration file for the sample Flutter Windows app . Check out the sample Flutter desktop app on . codemagic.yaml here this GitHub repository This article was first published here
