Guide to Develop Windows Apps with Flutter 2.10

Since Google first released Flutter, its primary focus has been on providing a cross-platform solution, that is creating iOS app, Android Apps, Web apps and Windows apps with flutter. The aim was to help create dynamically tailored apps that developers can compile to machine code and make the most of your device’s underlying graphics hardware.

This vision got a significant expansion on 3rd February 2022 as this day marks the first product launch of stable support for Windows. With Flutter 2.10, Windows developers can benefit from the same efficiency and productivity that Android and iOS developers have been leveraging so far.

In this article, we are going to talk about the new updates of Flutter for Windows and how you can develop beautifully customized Windows apps that will run on the web and mobile.

Let’s get to it!

The Latest Version of Flutter for Windows

A few years ago, Google determinedly envisioned Flutter to broaden its horizon from Android and iOS mobile apps to other operating systems such as the desktop and web.

The Flutter engine supports multiple platforms like the Flutter rendering system, hundreds of widgets, Skia graphics engine, core primitives (internationalization, theming, text input, animation), and more.

But when it comes to desktop apps, the story is a lot different. They are not just mobile apps that run on a wider screen. The reasons are:

• Developers have to design them for different input devices like the mouse and keyboard.
• Conventions for crucial things such as visual styling, input method editors, accessibility are different.
• Desktop apps have resizable windows running on a broad-screen monitor.
• Developers need to integrate the app with different APIs in that particular OS.

So, Google has not only brought Flutter to Windows but tailored Flutter for Windows as well.

Installing Flutter on Windows, Mac, and Android is almost the same – the combination of a C++ engine and Dart framework. Flutter and Windows coordinate through an embedder that hosts the core of Flutter and helps translate and dispatch Windows messages.

Flutter handles different events like DPI changes and window resizing, paints your UI to the screen, and collaborates with current Windows modalities for internationalization, like input method editors.

In short, Flutter 2.10 uses the same Dart code on Windows but utilizes the APIs of native Windows.

So basically, your application will be able to use each and every part of the framework. On the Windows platform, it can also interact with runtime APIs, COM, and Win32, either using a platform plugin coded in C++ or directly through the C interop layer of Dart.

Flutter has also adapted many common plugins to support Windows, including shared_preferences, file_picker, and camera.

Over and above that, the Flutter community has already included hundreds of packages, covering everything from serial port access to Windows taskbar integration, to support Flutter desktop apps.

If you want fully customized UI on Windows, there are other packages in the Flutter new version, like flutter_acrylic and fluent_ui, to help you develop an app that elegantly conveys the Fluent Design System of Microsoft.

And you can wrap the app in an installer and upload it on the Windows Store using the msix tool.

As a result, you can create apps that run and look spectacular on Windows. You can also transfer them to the web and other mobile or desktop devices.

Leverage the Benefits of Flutter App Development for Your Business

Consult Our Experts

A Plethora of Tools for Flutter Windows App Development

For seamless integration, tooling partners of Google have been adding support for Windows in the Flutter new version. It’s really exciting now to see that Flutter has a mature ecosystem built around it, and you must check out each of these tooling partners if you want to create Windows apps with Flutter.

Here are a few of them:

• Realm

The latest version of this Flutter tool now supports developing desktop apps on Windows. It’s a superfast local data store that provides quick access to the core database with the help of Dart FFI.

• FlutterFlow

It’s a low-code tool to design Flutter apps. FlutterFlow now supports Windows app development, and its features allow developers to tailor apps for desktop usage.

• Codemagic

Nevercode has upgraded this CI/CD tool to support building and testing Windows apps in the cloud, enabling them to deploy them automatically to the Microsoft store.

• Rive

Rive announced that their popular graphic tooling suite would have a Flutter Windows version. It empowers developers to create interactive vector animations that can use a state machine to respond to code in real-time. Additionally, it will offer a lower memory footprint and screaming fast performance.

• Syncfusion

Syncfusion now offers an updated suite of widgets to support Windows app development. Subscribing to its toolkit will help you find a rich data grid widget, components for data visualization like charting and treemaps, calendars, and even support for Excel spreadsheets and PDF creation.

How to Build a Windows App with Flutter 2.10

Windows desktop has been pretty stable since the release of the latest version of Flutter. So, now we are going to show you how to create executables and MSIX packages to build a Windows app with this latest framework.

1. Upgrade to Flutter 2.0

Download Flutter’s latest version on the Flutter release page for your operating system and install it on your system.

Alternatively, if you already have an older version, you can use the command-line tool as per your preference and execute a flutter upgrade.

You can execute the flutter upgrade command and check the current configuration in case you don’t know it.

This is what flutter doctor output looks like after upgrading:

2. Create Executable

Call the flutter build windows command to build an executable file. The built files, as well as the app, will be put in the build/windows/runner/Release subfolder. It will not be a self-contained app and will depend on the DLL file and data folder. Also, you have to include the needed data if you want to distribute your app.

Here are the output files after you run the build command:

3. Create MSIX Packages

Far the distribution of the app, MSIX packages are highly helpful as they contain uninstall and install routines and provide everything you need to run the app. You can add it to your project in two ways – you can either add the reference manually to the pubspec.yaml file or execute the flutter pub add –dev maix command.

After you add the MSIX dev dependency to your pubspec.yaml file, the output will be like this:

Once you have created the executable, now it’s time to build the package.

Run the following commands:

flutter build windows

flutter pub run msix:create

Again, the built package will be stored in the subfolder – build/windows/runner/Release

Here is how the output files will look after calling the build and package commands:

Now, you can distribute the MSIX package, and anyone using the recent Windows 11 or Windows 12 operating system can install it. You can also distribute it using the Microsoft Store.

If you need to customize the package information, there are two ways to do it – you can call msix:create and pass the information as arguments or add a msix_config section to the pubspec.yaml file.

You will find all the available arguments in the documentation of the MSIX 2.8.17 package.

For example, the configuration for MSIX packages will be like this in pubspec.yaml:

And here is the image of the installation routine of an MSIX package. Note that the installer language will depend on your system language.

Bonus Point: Use Microsoft Fluent Design

Flutter for Windows now allows you to create real Windows apps with the help of Microsoft Fluent Design Language. Fortunately, you can build your apps in a Windows style using the fluent_ui.

It consists of almost all icons, fonts, controls, and so on, which you will find very useful in a Flutter app. The package provides quality documentation, and if you want to modify an existing app, it even offers a mapping between fluent_ui controls and material controls.

These two images can give you an idea of the difference between Flutter demo apps built with Fluent Design Language and Material Design Language:

With Fluent Design Language:

With Material Design Language:

Endnote on Flutter 2.10 for Windows

With the release of the Flutter new version, a desktop platform of Flutter has been flagged as stable for the first time. Nonetheless, it has already secured a foothold in the desktop realm, especially with macOS and Linux.

The developer of Ubuntu Linux (Canonical) and Google have already started working together on rewriting the installer of Ubuntu Linux in Flutter and the easy distribution of Flutter Linux apps through the Snap Store.

The stable support of Flutter for Windows is just the start of the jam-packed year ahead, and we cannot wait to build Windows apps with the latest Flutter framework. Even the Microsoft team shared their pleasant experience on Flutter’s support – “Flutter support for Windows is a big step for the community, and we can’t wait to see what you’ll bring to Windows!”

We hope you find this article helpful, and if you need more insights into Flutter Windows integration, reach out to our seasoned flutter developers and get a first impression of developing a robust Windows app with Flutter.