Publishing Flutter Windows apps to Microsoft Partner Center
Tags: flutter, windows, mobile, devops
Published: 2022-01-25 12:58:39

[Flutter](https://flutter.dev/) enables you to use a single codebase to build apps for mobile, web, desktop, and embedded devices. The introduction of [Flutter 2.0](https://medium.com/flutter/whats-new-in-flutter-2-0-fe8e95ecc65) has made it easier to try out desktop apps, as this option is now available on the `stable` channel.

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](https://codemagic.io/).

If you are looking for a more general getting started guide for building Flutter desktop apps, including designing adaptive layouts, check out [this article](https://blog.codemagic.io/flutter-desktop-apps-intro/).


## 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](https://docs.flutter.dev/get-started/install/windows).

> If you already have Flutter installed on your system, make sure the version is above `2.0`. You can check your Flutter version by using the `flutter --version` command.

To build Flutter Windows apps, you should have [Visual Studio 2019](https://visualstudio.microsoft.com/downloads/) (not to be confused with *Visual Studio Code or VS Code*) installed on your system. While installing Visual Studio, use the “*Desktop development with C++*” workload if you want to build **Win32** apps, or use the “*Universal Windows Platform development*” workload if you want to build **UWP** apps.

Flutter uses **Win32** for building Windows apps by default. Enable Windows support for Win32 using:

```sh
flutter config --enable-windows-desktop
```

In order to build UWP (Universal Windows Platform) apps, you need to be on the `dev` channel of Flutter. Run the following commands:

```sh
flutter channel dev
flutter upgrade
flutter config --enable-windows-uwp-desktop
```

Run the `flutter doctor` command once to check if there are any unresolved issues. To verify whether `windows` is listed as one of the available devices, run the `flutter devices` command.

To create a new Flutter app, use the following command:

```sh
flutter create <project_name>
```

> Replace `<project_name>` with the name that you want to use for the project — for example, flutter create flutter_desktop_sample.

The above command will create a Flutter counter app project. You can run it on your Windows system using the following command:

```sh
flutter run -d windows
```

To run the app using UWP, use the following command:

```sh
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:

```sh
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.

![](https://blog.codemagic.io/uploads/2021/12/flutter-windows-flutter-run-windows.gif)

## Generating an executable of the app

It’s really easy to generate the `.exe` executable file for the Flutter Windows app. Just run the following command:

```sh
flutter build windows
```

You can find the generated file by going to `<project_root>/build/windows/runner/Release/<app_name>.exe`. The `.exe` file can be distributed to any user, who can then run it on their system directly.

There’s a safer and recommended alternative to using an `.exe` file — the **MSIX** package. Some of the advantages of the MSIX package are:

* 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 `.exe` file, changes in the registry files remain even after the app is removed.

* To distribute your app to Microsoft Store, you need an MSIX package. An `.exe` file can’t be distributed directly.

* 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:

1. You need a **Microsoft Developer Account** in order to publish apps to Microsoft Store. You can register for one [here](https://developer.microsoft.com/en-us/microsoft-store/register/).

2. Log in to [Microsoft Partner Center](https://partner.microsoft.com/en-us/dashboard). If you don’t have an account, you can easily create a new one.

3. From the home page of Microsoft Partner Center, click **Add program**.
   
   ![](https://blog.codemagic.io/uploads/2021/12/flutter-windows-mpc-1.png)

4. Select **Get started** under *Windows & Xbox*. Fill in any details if necessary.
   
   ![](https://blog.codemagic.io/uploads/2021/12/flutter-windows-mpc-2.png)

5. Go to `Windows & Xbox > Overview`, and click the **Create a new app** button.
   
   ![](https://blog.codemagic.io/uploads/2021/12/flutter-windows-mpc-3.png)

6. Enter the **name** of the app. Click **Reserve product name**.
   
   ![](https://blog.codemagic.io/uploads/2021/12/flutter-windows-mpc-4.png)

This should create an app on Microsoft Partner Center and navigate you to the **Application overview** page.

![](https://blog.codemagic.io/uploads/2021/12/flutter-windows-mpc-5.png)

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 [msix](https://pub.dev/packages/msix). This is a command line tool that helps in creating an MSIX installer from the Flutter Windows build files.

Add the package under `dev_dependencies` in your `pubspec.yaml` file:

```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 `pubspec.yaml` file.

To generate a local MSIX, add the following configuration at the end of the `pubspec.yaml` file:

```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:

* `display_name`: The name of your app that will be displayed to users.
* `publisher_display_name`: The name of the publisher to be displayed to users (can be an individual’s name or a company’s name).
* `identity_name`: The unique identifier of the Windows app.
* `msix_version`: Specifies the version of the app’s build. Uses the format “Major.Minor.Build.Revision”, where “Major” cannot be “0”.
* `logo_path`: The relative path of the logo file (optional). If not provided, the default Flutter logo is used.

You can add the logo file inside the `<project_directory>/logo` folder. Ideally, the logo should be a square image with a resolution of **256x256**. You can read more information about the logo size [here](https://docs.microsoft.com/en-us/windows/apps/design/style/app-icons-and-logos).

Run the following command to generate the MSIX package for your Flutter Windows app:

```sh
flutter pub run msix:create
```

> This command uses the configurations defined inside the `pubspec.yaml` file to generate the MSIX. 
> 
> **NOTE:** 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.

You can find the generated package by going to `<project_root>\build\windows\runner\Release\<app_name>.msix`. But if you double-click on the `.msix` package to open it on your Windows system, the **Install** button will be disabled.

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:

1. **Right-click** on the `.msix` file and select **Properties**.
2. Go to the **Digital Signatures** tab inside the Properties dialog.
3. Select the “**Msix Testing**” signer and click **Details**. Then click on **View Certificate**.
4. Start installing the certificate by clicking on **Install Certificate**.
5. Select **Local Machine** in the dialog. Click **Next**.
6. Under “Place all certificates in the following store”, click **Browse**
7. Select the **Trusted Root Certification Authorities** folder. Click **OK**.
8. Click **Next** and then **Finish**.
9. Now, double-click on the file. You’ll see that the **Install** button is now enabled. Click on it to install the app.

With this, your Flutter Windows app will be installed on your system. You can find it by searching inside your **Start** menu.

### 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 `pubspec.yaml` file with the following:

```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:

* `publisher`: The Publisher ID present inside your Microsoft Partner Center app.
* `store`: Setting this to `true` generates an MSIX package distributable using Microsoft Partner Center.

Also, make sure the property values for `display_name`, `publisher_display_name`, and `identity_name` match the values in your Partner Center. You’ll find these values by navigating in your Microsoft Partner Center app to **Product management > Product Identity**.

![](https://blog.codemagic.io/uploads/2021/12/flutter-windows-mpc-product-id.png)

> **NOTE:** 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.

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 ([GitHub](https://github.com/), [Bitbucket](https://bitbucket.org/), or [GitLab](https://about.gitlab.com/)), and follow the steps below to get started with Codemagic:

1. Log in to [Codemagic](https://codemagic.io/login). If you’re a new user, then [sign up](https://codemagic.io/signup).


2. Connect to the Git provider where you have uploaded your Flutter project by going to the Integrations under [Settings](https://codemagic.io/settings). Make sure you have given permission to the repository where you have uploaded your app.

3. Navigate to the [Applications](https://codemagic.io/apps) page, and click **Add Application**.
   
   ![](https://blog.codemagic.io/uploads/2021/12/flutter-windows-cm-1.png)

4. Select the **Git provider**:
   
   ![](https://blog.codemagic.io/uploads/2021/12/flutter-windows-cm-2.png)

5. Click **Next: Authorize integration** to authorize Codemagic. If you have already authorized your selected Git provider, click **Next: Select repository** instead.
   
   > If you are using **GitHub** as your Git provider, then you need to perform one additional step before selecting the repository. Click **Install GitHub App** to set up the integration. You can learn more about configuring a GitHub app integration [here](https://docs.codemagic.io/getting-started/adding-apps-from-custom-sources/#configuring-the-github-app-integration).

6. Now, select the repository from the dropdown menu, and select **Flutter app** as the project type. Then click **Finish: Add application**:
   
   ![](https://blog.codemagic.io/uploads/2021/12/flutter-windows-cm-3.png)

7. You will be taken to the project settings. The **Workflow Editor** tab will be selected by default.
   
   ![](https://blog.codemagic.io/uploads/2021/12/flutter-windows-cm-4.png)

## Building and publishing using Codemagic

You can build a Flutter app on Codemagic using either the [Workflow Editor](https://docs.codemagic.io/flutter-configuration/flutter-projects/) or the [Codemagic YAML](https://docs.codemagic.io/yaml/yaml-getting-started/) file. To build Windows apps on Codemagic, you need to enable billing by going to [this page](https://codemagic.io/billing/user).


### Enable the Microsoft Partner Center integration

Codemagic uses the [Microsoft Store submission API](https://docs.microsoft.com/en-us/windows/uwp/monetize/create-and-manage-submissions-using-windows-store-services) 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 (**Tenant name**, **Tenant ID**, **Client ID**, and **Client secret**).

Follow the steps below to generate the necessary information:

1. Go to your **Account settings** by clicking on the gear icon.

2. Navigate to **Organization profile > Tenants**. 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.
   
   ![](https://blog.codemagic.io/uploads/2021/12/flutter-windows-mpc-tenant.png)

3. To create a new tenant, click **Create** and fill in the required information.

4. Go to your [Azure AD](https://azure.microsoft.com/en-us/services/active-directory/) account using the new tenant.

5. Navigate to **App registrations** (from the menu on the left) and click “**+ New registration**”.
   
   ![](https://blog.codemagic.io/uploads/2021/12/flutter-windows-mpc-app-reg.png)

6. Enter a **name** for the application, and use the **Single tenant** option. You can keep the **Redirect URI** field blank. Click **Register**.
   
   ![](https://blog.codemagic.io/uploads/2021/12/flutter-windows-mpc-reg-form.png)

7. Proceed to **Certificates & secrets** (from the menu on the left), go to the **Client secrets** tab, and click “**+ New client secret**”.
   
   ![](https://blog.codemagic.io/uploads/2021/12/flutter-windows-mpc-certificate.png)

8. Enter a **Description**, and select an **Expiry** date for the client secret. Click **Add**.
   
   ![](https://blog.codemagic.io/uploads/2021/12/flutter-windows-mpc-certificate-info.png)

   Take note of the **Value** field, which is the client secret. You’ll need it in a later step.

9. Finally, go to **Partner Center > Account settings > User management**. Select **Azure AD applications** and click “**+ Create Azure AD application**”. Select the application that you created, click **Next**, and give the **Developer** role to it.
    
    ![](https://blog.codemagic.io/uploads/2021/12/flutter-windows-mpc-user-management.png)

Now, you can go to the Codemagic webpage and enable the Microsoft Partner Center integration. It can be enabled in the **User settings > Integrations** section for personal projects and in the **Team settings > Team integrations** for projects shared in a team account.

Follow the steps below to enable the Microsoft Partner Center integration:

1. Under Integrations, click the **Connect** button beside Partner Center.

2. Enter the required information. You can find the **Tenant name** and **Tenant ID** by going to **Partner Center > Account settings > Organization profile > Tenants**. Find the **Client ID** on the Overview page of Azure AD, and enter the **Client secret** that you took note of earlier.
   
   ![](https://blog.codemagic.io/uploads/2021/12/flutter-windows-mpc-integration.png)
   
3. Click **Save**.

### Configuring Codemagic for Flutter Windows apps using Workflow Editor

To configure your project using Workflow Editor, go to the **Workflow Editor** tab on Codemagic. Follow the steps below:

1. Select **Windows** under **Build for platforms**.

2. Change the VM instance to **Windows**.
   
   ![](https://blog.codemagic.io/uploads/2021/12/flutter-windows-codemagic-vm.png)

3. Scroll down to the **Build** tab. Select the **Flutter version** that you need to build the project, check the **Create a Windows MSIX package** checkbox, and set the mode to **Release**.
   
   ![](https://blog.codemagic.io/uploads/2021/12/flutter-windows-codemagic-build.png)

4. Go to the **Distribution** tab to configure Microsoft Partner Center distribution. Click to expand the **Microsoft Partner Center** tab. Check the **Enable publishing to Microsoft Store** checkbox.

5. Select the **Tenant** from the dropdown menu. Enter the rest of the information that we discussed in the [Configuring MSIX](#configuring-for-msix-build) section. Make sure this information matches that in your Partner Center app.
   
   ![](https://blog.codemagic.io/uploads/2021/12/flutter-windows-codemagic-win-distribution.png)
   
6. Click **Save changes**.

> **NOTE:** 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.

You have finished configuring your Windows publishing workflow. Click **Start your first build** at the top of this page, and then click **Start new build** to start the build process.

![](https://blog.codemagic.io/uploads/2021/12/flutter-windows-cm-workflow-build.png)

### 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:

```yaml
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](https://docs.codemagic.io/yaml/yaml-getting-started/).

To generate an MSIX package and publish it using the Microsoft Partner Center, modify the workflow by following the steps below:

1. Define an appropriate workflow name, and use the Windows VM instance:
   
   ```yaml
   workflows:
      windows-release-workflow:
         name: Windows release workflow
         instance_type: windows_x2
         max_build_duration: 60
   ```

   > For a Windows build, set the `instance_type` to `windows_x2`.

2. Add the following environment variables:
   
   ```yaml
   environment:
      groups:
         - windows-signing
      flutter: master
   ```

   You need to upload the client secret to the application environment variables of Codemagic in an encrypted format (`windows-signing` is the name of the application environment variables).

3. Go to your project page on Codemagic, and click **Switch to YAML configuration**. Go to the **Environment variables** tab, and add the credentials. Enter the Variable name as `PARTNER_CLIENT_SECRET`, and paste the client secret value inside the **Variable value** field. Create a group called `windows-signing`. Make sure the **Secure** checkbox is checked, and click **Add**.
   
   ![](https://blog.codemagic.io/uploads/2021/12/flutter-windows-codemagic-yaml-var.png)

4. First, under the `scripts` section, get the Flutter packages:
   
   ```yaml
   scripts:
      - name: Get Flutter packages
        script: flutter packages pub get
   ```

5. Enable the Windows platform:
   
   ```yaml
   - name: Configure for Windows
     script: flutter config --enable-windows-desktop
   ```

6. Build the Windows app using Flutter:
   
   ```yaml
   - name: Build Windows
     script: flutter build windows
   ```

7. Generate the distributable MSIX package:
   
   ```yaml
   - name: Package Windows
     script: flutter pub run msix:create
   ```

   > If you have added the MSIX configurations to the `pubspec.yaml` 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 `pubspec.yaml` file:
   > 
   > ```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
   > ```

8. To retrieve the generated MSIX, update the `artifacts` path to the following:
   
   ```yaml
   artifacts:
      - build/windows/**/*.msix
   ```

9. In the `publishing` section, replace the `email` with your own.

10. For publishing to Microsoft Partner Center, add the following under `publishing`:
    
    ```yaml
    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 `tenant_id` and `client_id` from the Azure AD Overview page. You can find the `store_id` inside your Microsoft Partner Center app by going to **Product management > Product Identity**. The `client_secret` is retrieved from the application environment variable that you defined earlier.

This completes the configuration of the `codemagic.yaml` file. Now, just commit and add the file to your Git provider, and you are good to go.

> **NOTE:** You should publish the very first version of the app manually by going to Microsoft Partner Center. Select your app from the dashboard, click **Start the submission**, and fill in the details to submit the app. The first version should be fully published before publishing the next version using Codemagic.

To start building your Flutter Windows app using the YAML file, go to your project page on Codemagic, and click **Start your first build**. Select your workflow, and then click **Start new build** to start the build process.

![](https://blog.codemagic.io/uploads/2021/12/flutter-windows-cm-yaml-build.png)

## 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 `codemagic.yaml` configuration file for the sample Flutter Windows app [here](https://github.com/sbis04/flutter_desktop_sample/blob/main/codemagic.yaml). Check out the sample Flutter desktop app on [this GitHub repository](https://github.com/sbis04/flutter_desktop_sample).