Publish Flutter Windows Apps to Microsoft Partner Center with Codemagic

original

https://medium.com/flutter-community/publishing-flutter-windows-apps-to-microsoft-partner-center-with-codemagic-b1962575510c

foreword

This article was originally published on the Codemagic blog by Souvik Biswas

Flutter allows you to build applications for mobile, web, desktop, and embedded devices using a single codebase. The introduction of 2.0 makes it easier to try out the desktop app, as this option is now available on the stable channel.

This article will help you get started building a Windows desktop application with Flutter, generate a release MSIX build, and publish the application to Microsoft Partner Center using Codemagic.

If you're looking for a more general getting started guide to building Flutter desktop apps, including designing responsive layouts, check out this article.

https://blog.codemagic.io/flutter-desktop-apps-intro/

code

https://github.com/sbis04/flutter_desktop_sample
https://github.com/sbis04/flutter_desktop_sample

text

Create a Flutter app for Windows

Before you start creating a new Flutter application, 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 have installed Flutter on your system, make sure the version is above 2.0. You can check your Flutter version with the Flutter --version command.

To build Flutter window applications, you should have Visual Studio 2019 installed on your system. When installing Visual Studio, you can use the "Desktop Development with C++" workload if you want to build win32 applications, and the "Universal Windows Platform Development" workload if you want to build UWP applications.

By default, Flutter uses win32 to build Windows applications:

flutter config --enable-windows-desktop

In order to build UWP (Universal Windows Platform) applications, you need the development channel in Flutter. Run the following commands:

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

Run flutter doctor to check for any outstanding issues. To verify that the window is listed as one of the available devices, run flutter devices command.

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

flutter create <project_name>

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

The above command will create a Flutter counter app project. You can run it on Windows systems with:

flutter run -d windows

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

flutter run -d winuwp

A Windows UWP app needs a sandbox environment to run, so you'll be prompted to launch it. Open PowerShell with administrator privileges in a separate window and run the following commands:

checknetisolation loopbackexempt -is -n=[APP_CONTAINER_NAME]

After running this process, go back to the previous window and press 'y'. This should start the UWP application on Windows.

Generate the executable for the application

Generating an .exe executable for a Flutter Windows application is as simple as running the following command:

flutter build windows

You can find the generated files by visiting <project_root>/build/windows/runner/Release/<app_name>.exe . implement. This .exe file can be distributed to any user who can run it directly on their own system.

There is a safer and recommended alternative, the .exe file — the MSIX package. Some of the advantages of MSIX packages are:

• Windows uses a separate environment to securely install MSIX builds. It also helps to uninstall the app completely. When you use a .exe the changes in the registry file persist even after the application is removed.
• To publish your app to the Microsoft Store, you need an MSIX package .exe file cannot be published directly.
• There can be two types of MSIX packages: one to run locally and one for distribution to the Microsoft Store. The type of MSIX package to be generated can be specified as a build parameter.

Before looking into both types of MSIX builds, let's create a Microsoft Partner Center account.

Create a Microsoft Partner Center Account

You need a Microsoft Partner Center account to distribute Windows applications using the Microsoft Store. Additionally, when building a distributable MSIX build, you need to specify some properties that should match those in your Partner Center application.

Follow the steps below to create and configure the Microsoft Partner Center application:

• You need a Microsoft developer account to publish apps to the Microsoft Store. You can sign up for one here.
  https://developer.microsoft.com/en-us/microsoft-store/register/
• Sign in to Microsoft Partner Center. If you don't have an account, you can easily create a new one.
  https://partner.microsoft.com/en-us/dashboard
• From the Microsoft Partner Center home page, click Add a Program.

• Select Get started under Windows \& Xbox and fill in any details if needed.

• Go to Windows & Xbox > Overview and click the Create a new app button.

• Enter a name for the application. Click Reserve Product Name.

This will create an app on the Microsoft Partner Center and navigate to the app overview page.

When configuring your MSIX distribution, you will need some information from this Microsoft Partner Center application.

Configure for MSIX builds

The easiest way to generate an MSIX installer is to use a Flutter package called MSIX. This is a command line tool to help create a msix installer to build files from a Flutter window.

Add the packages under dev_dependencies to the pubspec.yaml file:

dev_dependencies:
  msix: ^2.6.5

If no other value is specified, the package uses some default configuration values when building MSIX. MSIX configuration can be provided in the pubspec.yaml file.

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

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 configuration above, replace the angle brackets with the appropriate values:

• display_name : The name of the application, which will be displayed to the user.
• publisher_display_name : The publisher name to display to the user (can be a personal or company name).
• identity_name : Unique identifier for the Windows app.
• msix_version : Specifies the build version of the application. Use "Major. Minor. Build. Revision" format, where "Major" cannot be "0".
• logo_path : Relative path to logo file (optional). If not provided, the default Flutter logo is used.

You can add logo files in the <project_directory>/logo folder. Ideally, the logo should be a 256x256 resolution square image. You can read more about logo sizes 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 application:

flutter pub run msix:create

This command uses the configuration defined in the pubspec.yaml file to generate MSIX.

Note: Any MSIX package not published through Microsoft Partner Center is an unsigned package. To install and run an unsigned MSIX package, you must trust and sign the application locally in order to be able to run it on Windows.

You can find the generated package by visiting <project_root>buildwindowsrunnerRelease<app_name>.msix . M6. But if you double click. If you are opening the msix package on a Windows system, the install button will be disabled.

You need to sign the MSIX package installed locally on your Windows system with your Flutter window application. To do this, follow these steps:

• Right click on .msix file and select Properties.
• Go to the Digital Signatures tab in the Properties dialog.
• Select the "Msix Testing" signer and click Details, then click View Certificate.
• Click Install Certificate to begin installing the certificate.
• Select the local machine in the dialog. Click Next.
• Under "Place all certificates in the following store", click Browse
• Select the Trusted Root Certification Authorities folder. Click OK.
• Click Next, then Finish
• Now, double click on the file. You will see that the Install button is now enabled. Click it to install the app.

With this, your Flutter window app will be installed on your system. You can find it by searching in the start menu.

Distribute your package in Microsoft Partner Center

Now, let's see how to publish a package using the Microsoft Partner Center. Modify the MSIX configuration in the pubspec.yaml file as follows:

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 other properties are defined here:

• publisher : Publisher ID displayed in the Microsoft Partner Center application.
• store : Setting this to true will generate an MSIX package distributable using Microsoft Partner Center.

Also, make sure that the attribute values for display_name , publisher_display_name , and identity_name the values in Partner Center. You will find these values by navigating to Product management > Product Identity in the Microsoft Partner Center application.

Note: If you are building an MSIX package for publishing to the Microsoft Store, you will not be able to install or run the certificate locally. This package can only be published through the Microsoft Partner Center.

Now that you've configured your Flutter Windows app for distribution, let's build and distribute it using Codemagic. Once you start adding new features to your application, Codemagic makes it easier and faster to distribute updated versions.

Add the project to Codemagic

The easiest way to add projects to Codemagic is through the Git provider. Add your project to a Git provider such as (GitHub, Bitbucket or GitLab) and follow the steps below to get started with Codemagic:

• Log Codemagic . If you are a new user, please sign up .
• To connect to the Git provider, you have uploaded your Flutter project by going to Integrations under Settings . Make sure you've authorized the repository to upload your app.
• Navigate to the Applications page and click Add Application.

• Choose a Git provider:

• Click Next: Authorize integration to Authorize Codemagic. If you have authorized the Git provider of your choice, click Next: Select repository.

If you're using GitHub as your Git provider, you need to perform an extra step before choosing a repository. Click Install GitHub App to set up the integration. You can learn more about how to configure GitHub App integration here.

https://docs.codemagic.io/getting-started/adding-apps-from-custom-sources/#configuring-the-github-app-integration

• Now, select the repository from the dropdown menu and choose Flutter app as the project type. Then click Finish: Add application:

• You will be taken to the project settings. The Workflow Editor tab will be selected by default.

Build and publish with Codemagic

You can build a Flutter application on Codemagic using the Workflow Editor editor or Codemagic YAML file. To build Windows applications on Codemagic, you need to enable billing by visiting the page .

Enable Microsoft Partner Center integration

Codemagic uses the Microsoft Store submission API to publish Windows applications to the Microsoft Store. To use this integration, you must link your Microsoft Partner Center account to your Azure AD application and provide Codemagic with the necessary information (tenant name, tenant ID, customer ID, and customer secret).

Follow the steps below to generate the necessary information:

• Go to your account settings by clicking the gear icon.
• Browse Organization Summary > Tenants. If you already have an existing tenant, you can associate it with your Partner Center account. However, it is recommended to create a new tenant for Codemagic.

• To create a new tenant, click Create and fill in the required information.
• Access your Azure AD account with the new tenant.
• Go to Application Registration (from the left menu) and click "+ New Registration".

- Enter the name of the application and use the Single tenant option. You can leave the Redirect URI field blank. Click Register.

• Go to Certificates and Secrets (from the menu on the left), go to the Client Secrets tab, and click "+ New Client Secret".

• Enter a description and select the validity period for the client secret. Click Add.

Note the Value field, this is the client secret.

• Finally, go to Partner Center > Account Settings > User Management. Select the Azure AD application and click "+ Create Azure AD application". Select the application you created, click Next, and assign the Developer role to it.

You can now go to the Codemagic web page and enable the Microsoft Partner Center integration. It can be enabled in User Settings > Personal Project Integrations section or in Team Settings > Team Integrations for Shared Projects in Team Accounts.

Follow the steps below to enable Microsoft Partner Center integration:

• Under Integrations, click the Connect button next to Partner Center.
• Enter the required information. The Tenant Name and Tenant ID can be found by going to Partner Center > Account Settings > Organization Profiles > Tenants. Find the Client ID on the overview page of Azure AD and enter the Client Secret you noted earlier.

• Click Save.

Configure code magic to use the workflow editor for flutter windows applications

To configure your project with the workflow editor, go to the Workflow Editor tab on Codemagic:

• Select Windows under Build for Platform.
• Change the VM instance to Windows.

• Scroll down to the Build tab. Choose the version of Flutter you need to build the project, check the Create a Windows MSIX package checkbox, and set the mode to Release.

• Go to the Distribution tab to configure Microsoft Partner Center distribution. Click here to expand the Microsoft Partner Center tab. Check the "Enable publishing to the Microsoft Store" checkbox.
• Select Tenant from the drop-down menu. Enter the rest of the information we discussed in the Configuring MSIX section. Make sure this information matches your Partner Center app.

• Click Save Changes.

Note: You must manually publish the first version of the app to Partner Center. You can download the MSIX package from the build artifacts.

You have finished configuring the Windows publishing workflow. Click "Start First Build" at the top of this page, then click "Start New Build" to start the build process.

Configure Codemagic for Flutter Windows applications using Codemagic.yaml

To configure the build with YAML, go to the Flutter project and create a new file in the root directory codemagic.yaml .

Add the following template to the file:

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:
          - [e-mail]

This is a basic workflow template for building an application on Codemagic.

https://docs.codemagic.io/yaml/yaml-getting-started/

To generate an MSIX package and publish it using Microsoft Partner Center, modify the workflow as follows:

• 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 Windows builds, set instance_type to windows_x2 .

• Add the following environment variables:

environment: groups: \- windows-signing flutter: master

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

• Go to the project page on Codemagic and click Switch to YAML configuration. Go to Environment variables tab and add credentials. Enter the variable name as PARTNER_CLIENT_SECRET and paste the client secret value into the Variable value field. Create a group named windows-signing . Make sure the Security checkbox is selected, then click Add.

• First, in section scripts , get the Flutter package:

scripts: \- name: Get Flutter packages script: flutter packages pub get

• Enable Windows platform:

- name: Configure for Windows script: flutter config \--enable-windows-desktop

• Build Windows apps with Flutter:

- name: Build Windows script: flutter build windows

• Generate a distributable MSIX package:

- name: Package Windows script: flutter pub run msix:create

• If you've added your MSIX configuration to the pubspec.yaml file, the above command should work for you. Otherwise, you can provide the configuration directly in the CLI tool without any modification to your project pubspec.yaml file:

- 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 artifacts path to:

artifacts: \- build/windows/**/*.msix

• In the publishing section, replace the email with your own email .
• To publish to the Microsoft Partner Center, add the following under Publishing 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 appropriate values. You will get tenant_id and client_id from the Azure AD Overview page. You can find store_id in the Microsoft Partner Center application by going to Product Management > Product Identification. client_secret is retrieved from the application/environment variables defined earlier.

This completes the configuration of the codemagic.yaml file. Now, just commit and add the files to the Git provider and you're ready to go.

Note: You should manually publish the first version of the app through Microsoft Partner Center. Select your application from the dashboard, click Start Submission, and fill in the details to submit the application. The first release should be fully released before the next release using Codemagic.

To get started building Flutter Windows applications with YAML files, visit the project page on Codemagic and click Start your first build. Select your workflow and click "Start New Build" to start the build process.

it's over

Congratulations\! You've successfully built your first Flutter Windows app and published it to the Microsoft Store using Codemagic.

Once you start adding new functionality to your app, you can easily release the next version of your Windows app by simply updating the build number and running a Codemagic build. Of course, you can also add other workflows so that Codemagic can build Flutter apps for Windows, iOS, Android, or Linux.

You can find the complete codemagic.yaml configuration file for the sample Flutter Windows application here. Check out the Flutter desktop application example on this GitHub repo.

https://github.com/sbis04/flutter_desktop_sample/blob/main/codemagic.yaml

https://github.com/sbis04/flutter_desktop_sample

---

© Cat Brother

• WeChat ducafecat
• Blog ducafecat.tech
• github
• bilibili