Creating a Flutter App on Windows with WSL2
Tags: wsl2, flutter, android, tutorial
Published: 2022-04-08 19:11:00

Windows Subsystem for Linux (WSL) allows you to run a Linux environment without having to dual boot your system or use a virtual machine. In this tutorial, we will look at creating a Flutter app using a Linux environment while fully inside Windows.

Note that you need to be running Windows 10 version 2004 and higher or Windows 11.

## Install WSL2

Open your Windows PowerShell as an administrator and run the below command to install WSL2 and Ubuntu 20.04:

```
wsl --install
```
You may need to restart your computer when the installation completes.

After restarting your computer, open the Start menu and click the newly installed Ubuntu on Windows application. Enter a username and password to create a new Ubuntu user who will have administrative control whenever you need to run a `sudo` command.

When you have created your user, check the Windows File Explorer, and you will see a new Linux section that has all your Ubuntu files, including the _home_ folder which we will work from most of the time. This means WSL2 is now fully installed, and we can run Linux commands without having to dual boot or use a virtual machine.

![A picture showing the new Ubuntu folder found in the Windows File Explorer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gvw0cyafd6fvhi4ucfyt.png)

## Install and Customize the Windows Terminal

Now we need a terminal to run these Linux commands. Install **Windows Terminal** or **Windows Terminal (Preview)** from the Windows Store if you do not have it already.

By default, it will open Windows PowerShell, but we can set it to use Ubuntu instead. Click the dropdown arrow next to the open PowerShell tab and go to Settings. Under Startup, change the default profile to Ubuntu so that every time you open the Windows Terminal, you can work seamlessly inside Ubuntu.

![Image shows the Settings page for the Windows Terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1r8gx7oqp59jhsxbgp7t.png)

While in the Settings, we can also edit our starting directory to make it shorter and less clunky. Under the Profiles section, click Ubuntu and edit the starting directory to `/home/your-user-name/` and save the changes.

![Profile settings page for the terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xny2rt4siuvjmor50f0x.png)

Reopen your terminal, and you should see that the starting directory should be much shorter.

We are now ready to run actions inside our Ubuntu filesystem.

## Install Flutter

Let's install Flutter on our newly operational Ubuntu system. In your terminal, make a Development folder.
```
mkdir Development
```
Then, go to the [Flutter installation page](https://docs.flutter.dev/get-started/install/linux#install-flutter-manually) and download the tar file to get started.

It is important to note that you will only be able to download the file in the Windows Downloads folder, but later on, we can enter our terminal and extract the file in the Development folder we just created in Ubuntu.

This is possible because the Ubuntu side considers Disk C (the disk where all Windows content is) a mounted drive, which means we can access all Windows side files in the /mnt folder. For example, getting to the Downloads folder on Windows through the terminal would look like this: `/mnt/c/Users/your-username/Downloads`.

To extract the Flutter tar file out of the Downloads folder in Windows into the Development folder in Ubuntu, enter your terminal and navigate into the Development folder:

```
cd Development
```
Then run the below command:

```
tar xf /mnt/c/Users/your-username/Downloads/flutter_linux_your-flutter-version-stable.tar.xz
```
Once the folder is extracted, add Flutter into your PATH by editing your shell's _rc_ file. If you use Bash, run `sudo nano $HOME/.bashrc`, or if you use ZSH, run `sudo nano $HOME/.zshrc` and enter your password to edit your file.

Navigate to the bottom of the file and add the path where your Flutter folder is found. In this tutorial, Flutter is saved in the Development folder meaning our path will look like the below:

```
export PATH="$PATH:$HOME/Development/flutter/bin"
```
Save and exit your file and then run the below command to refresh your terminal and implement the changes:

```
source $HOME/.<rc file>
```
You can then run `which flutter` to confirm that the Flutter command now works in your terminal. If there are no errors, you can run the below command to make sure everything is working as it should:

```
flutter doctor
```
This will show a checklist that indicates what is working fine and what still needs installation. The checklist will show that we need Android Studio and Android SDKs installed next.

## Install Android Studio

We will install Android Studio directly to our Ubuntu side. Go to the terminal in the home directory and create a Downloads directory.

```
mkdir Downloads
```

Go to the [Android Studio downloads page](https://developer.android.com/studio/#downloads) and select the Linux platform.

![Android Studio downloads page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0h79jl8vp99eo1doehe2.png)

It will open a popup for you to accept Android's terms and conditions. Scroll to the bottom, accept the terms and conditions, and then right-click the _Download_ button and copy the download link.

![The picture shows a popup that opens to accept Android's terms and conditions and start the Android Studio download](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ai3i09xebs84i8415xk0.png)

In your terminal, go to your newly created Downloads folder and type the `wget` command followed by the download link you just copied to get the Android Studio tar file:

```
wget android-studio-download-link
```

When the download has finished, navigate to `/usr/local/` and extract the Android Studio tar file which will create an _android-studio_ folder for your user profile:

```
cd /usr/local/
tar xf ~/Downloads/android-studio-version-number-linux.tar.gz
```

Still inside the `/usr/local` directory, run `android-studio/bin/studio.sh` to launch Android Studio.

The first time you run Android Studio, an error about not being able to find SDKs may pop up. That error can be ignored because SDKs will be installed later.

When the installation guide comes up, you may choose to do the default installation or the custom installation that allows you to select file locations for the SDK. Accept all the prompts or select a location for the SDK and other folders and click the _Finish_ button when done.

After Android Studio has installed the SDK and other core files, click the _More Actions_ button on the application that opens up and select _SDK Manager_.

![This picture shows how to get to the SDK Manager once Android Studio is fully installed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lxqajh8a41ofe7uiy63b.png)

A page will open up where you can install the latest SDK Command-Line tools and Google Play services for our virtual devices.

![The picture shows SDK Manager](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxqjwqp50xg19tmecg09.png)

The next stage is to create a virtual device to test our Flutter app.

If you try creating a virtual device right away, you will probably get an error about needing `/dev/kvm` installed before you can proceed. Learn about KVM and how to fix this error [here](https://www.ahmedbouchefra.com/dev-kvm-not-found-device-permission-denied-errors-linux-ubuntu-20-04-19-04/#:~:text=After%20enabling%20KVM%2C%20you%E2%80%99ll%20likely%20have%20another%20error,and%20run%20the%20following%20command%20to%20install%20qemu-kvm%3A).

Once you have installed KVM from the link above, you can proceed to create a virtual device. Cancel the SDK Manager if it is still open and click the _More Actions_ button inside the original Android Studio window. Then click the _Virtual Device Manager_ to start creating a virtual device.

![This picture shows how to get to the virtual device manager](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dzxfjufjfucjelu79wex.png)

Once the Virtual Device Manager opens, click the _Create Device_ button and select a device you would like to use. For this tutorial, we will use a Pixel 2.

![Picture shows a list of devices available for usage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o5ou0vmrcrz8nujag30j.png)

Click _Next_ and select an Android version to download and use on the virtual device.

![Picture shows a list of Android versions to choose to attach to the emulator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lgtedni8l5rxg6xximmm.png)

When you have downloaded and selected your preferred Android version, click _Next_ and choose a name for your device. You can leave the default name or name it something else, and you can make as many different virtual devices as you need to.

![The picture shows the page where the emulator name can be changed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a6fvji3lusijqki0xscj.png)

Click _Finish_ to complete the creation of the virtual device, and click the green play button to launch it.

Run `flutter doctor` again, and this time, every checkbox should be ticked, which means we have everything we need to get started with Flutter.

## Coding Our Flutter App in Visual Studio Code

Next, we need to create a Flutter app and set up a code editor like Visual Studio Code (VS Code) so that we can begin coding our Flutter app.

### Installing VS Code

A cool thing about WSL is that VS Code can be downloaded on the Windows side and still connect to files found on the Ubuntu side, so let's download [VS Code for Windows](https://code.visualstudio.com/Download).

When VS Code has been downloaded, install the [Remote Development extension pack](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack) which will enable you to open folders in WSL, in containers, or through SSH. You may need to restart VS Code once the installation completes.

Next, we need to install extensions that can help with Flutter development. Install the [Flutter](https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter) and [Dart](https://marketplace.visualstudio.com/items?itemName=Dart-Code.dart-code) extensions to get code snippets and Flutter support.

We can also install an emulator extension that allows us to effortlessly run our installed Android emulators without having to open Android Studio every single time, as that can be very slow.

Close Android Studio and the virtual device we opened earlier and install the [Android iOS Emulator](https://marketplace.visualstudio.com/items?itemName=DiemasMichiels.emulate) extension which will make emulator opening quick and easy.

Once the extension is installed, we need to give it the path to our emulator location so that it knows where to find our emulators.

Enter your VS Code settings by pressing `Ctrl + ,` on your keyboard and click _Extensions_ on the left side of the screen. Once the list of extensions opens up, click _Emulator Configuration_ to open the settings for the emulator.

![Emulator extension settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/add9dtvreop93lst8vwa.png)

Fill in the _Emulator: Emulator Path Linux_ text field with the path to your emulator inside the SDK folder. If you followed this tutorial, the path would be like below, but put the path that applies to you:

```
~/Android/Sdk/emulator
```
Cancel the Settings page and press `Ctrl + Alt + e` on your keyboard to run the extension.

![Picture shows the running emulator extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tsuv9jckk4dvdo5an22p.png)

Click _View Android Emulators_, and it will show a list of installed emulators in your system. Select the one you wish to use and it will open up, ready to be used without opening Android Studio.

![Picture shows an emulator list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/20qvvsm3vu3dz91epoiw.png)

### Creating and running the Flutter app

To create your Flutter app, create a Projects directory using your terminal. Let's make our Projects directory inside the Development directory we made earlier.

```
cd ~/Development
mkdir Projects
cd Projects
```
When you are inside the Projects folder, create your Flutter app and open it in VS Code using the code below:

```
flutter create testapp
cd testapp
code .
```
It will start to download the WSL server, eventually opening the project in VS Code, and you can begin to code anything you want in your Flutter app.

To open the app in your emulator, go to the terminal under your project and type `flutter run`.

You can make changes to the app in VS Code, and those changes can be viewed instantly by pressing either `r` or `R` in the terminal.

![The demo Flutter app is running in the emulator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u533ks0u7xuu3pnt6l14.png)

Thanks for reading!