IO /flutter 2-2…

Xuanhantan.medium.com/

Published: May 20, 2021-4 minutes to read

A device instance that can run UWPs

Universal Windows Programs (UWP) are apps that run on all Microsoft devices, from the Windows laptop you’re probably reading this on, to the Xbox in your living room, and even 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 code base. Flutter has been supporting the creation of traditional Win32 applications since September 2020, but in Google I/O 2021, this Windows support has finally been extended to UWP!

In this article I will show you how to set up Flutter and create your first UWP. For this tutorial, you must use a Windows 10 computer. All links are current at the time of writing.

Step 1: Set up the Flutter SDK

  1. Download the latest Flutter SDK from this link.

  2. Unzip the “flutter “folder from the zip file you downloaded to the desired installation location. Do not place this folder in a folder where you want to upgrade permissions, such as “C:\Program Files”.

  3. Enter “env “in the” Start “search box and select edit system environment variables.

  1. Select the “Environment Variables” button in the window that appears.

  1. Double-click the “path” variable under the user variable.

  1. Click the “New” button and enter the path to the “flutter/bin “directory.

  1. Press OK to close all Windows that you have open.

  2. Test your new FLUTTER installation by opening a new PowerShell window and running the command.

flutter doctor
Copy the code

You should see something like this.

Prepare the Flutter SDK for Windows development

  1. Download and install the Visual Studio 2019 community from this link, as it will be used to compile and run your application. When asked to provide a workload, select “general Windows platform development” and “desktop environment with C++”.

  1. Run this command in a PowerShell window to enable UWP support for Fluttter.
flutter config --enable-windows-uwp-desktop
Copy the code

Install a supported IDE

  1. Download and install Visual Studio Code from this link. It will be used to write your Dart/Flutter code.

  2. Open the Extensions panel in Visual Studio Code.

  1. Search for “Flutter “and install the Flutter extension.

Create your UWP!

  1. In a PowerShell window, type the following command in the desired folder. Replace < project name > with the name of your application.
flutter create <project name>
Copy the code

  1. Click the “Open Folder” button in Visual Studio Code to open the newly created folder with your application name.

  2. In the lower right corner, click Edge (Web-javascript).

  1. A menu appears at the top. Click “Enable Windows for this project”.

  1. Run “flutter Create.” as instructed by Visual Studio Code.

  1. Click Edge (Web-javascript) again and you can now click on Windows UWP options.

  1. You can now run this command from the Visual Studio Code terminal.
flutter run
Copy the code
  1. When prompted to install the certificate, type “y “to continue.

  1. You will now see several more lines of information.

  1. Open an administrator PowerShell window by right-clicking the Windows logo on the taskbar and clicking “Windows PowerShell (Administrator) “.

  2. Bypass the UWP sandbox and enable hot overloading and debugging from the commands specified in the terminal run instructions. For me, it is

checknetisolation loopbackexempt -is -n=B65612E9-DC9A-4AD2-9BA7-01B506A44549_d7c8pgvss6ysm
Copy the code

When finished, type “Y” in the Visual Studio Code terminal and the build process will end. Keep the PowerShell window open, otherwise the Flutter application will stop.

  1. Enjoy your UWP!

What’s next?

In the next article, I will show you how to create beautiful Fluent UI UWPs with Flutter. Stay tuned! If you find this article helpful, please give me a clap!

Translation via www.DeepL.com/Translator (free version)