Flutter 2.2: Creating your first Universal Windows Program (UWP) with Flutter
Universal Windows Programs (UWP) are apps that can run on all Microsoft devices, from the Windows laptop you might be reading this article on, to the Xbox in your living room and even the Hololens (which probably no one has).
Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase. Flutter has had support for creating legacy Win32 programs since September 2020, but in Google I/O 2021, this Windows support has finally expanded to UWP!
In this article, I will show you how to set up Flutter and create your first UWP. For this guide, you will have to use a Windows 10 computer. All links are the latest at the time of writing.
Step 1: Set up the Flutter SDK
- Download the latest Flutter SDK from this link.
- Unzip the “flutter” folder from the zip file you have downloaded earlier to your desired installation location. Do not put the folder in folders that require elevated privileges, such as “C:\Program Files”.
- From the Start search bar, enter ‘env’ and select Edit the system environment variables.
4. Select the “Environment variables” button in the window that appears.
5. Double click on the “Path” variable under User variables.
6. Click on the “New” button and type in the path to the “flutter/bin” directory.
7. Close all the windows you have opened by pressing OK.
8. Test your new flutter installation by opening a new PowerShell window and running the command:
flutter doctorYou should see something like this:
Prepare Flutter SDK for Windows development
- Download and install Visual Studio 2019 Community from this link, as it will be used to compile and run your apps. Select “Universal Windows Platform Development” and “Desktop environment with C++” when asked for the Workload.
2. Run this command in a PowerShell Window to enable UWP support for Fluttter:
flutter config --enable-windows-uwp-desktopInstall a supported IDE
- Download and install Visual Studio Code from this link. It will be used for writing your Dart/Flutter code.
- Open the Extensions panel in Visual Studio Code.
3. Search for “Flutter” and install the Flutter extension.
Create your UWP!
- Type the following command in the PowerShell window in your desired folder. Replace <project name> with the name of your app.
flutter create <project name>2. Click on the “Open Folder” button in Visual Studio Code and open the newly-created folder with your app name.
3. At the bottom-right corner, click on Edge (web-javascript).
4. A menu will appear on the top. Click on “Enable windows for this project”.
5. Run “flutter create .” as instructed by Visual Studio Code.
6. Clicking on Edge (web-javascript) again, you may now click on the option for Windows UWP.
7. You may now run this command in the Visual Studio Code terminal:
flutter run8. When prompted for the installation of certificates, type “y” to continue.
9. You will now see a few more lines of information.
10. Open an administrator PowerShell window by right-clicking on the Windows logo in the taskbar and clicking “Windows PowerShell (Admin)”
11. Run the command specified in the instructions from the terminal to bypass UWP sandboxing and enable Hot Reload and debugging. For me, it is:
checknetisolation loopbackexempt -is -n=B65612E9-DC9A-4AD2-9BA7-01B506A44549_d7c8pgvss6ysmWhen done, type “y” in the Visual Studio Code terminal and the build process will finish. Keep the PowerShell window open, or else the Flutter app will stop.
12. Enjoy your UWP!
What’s next?
In the coming articles, I will show you how to create beautiful Fluent UI UWPs with Flutter. Stay tuned! Do give me a clap if you think this article has helped!
