Install wsl2(GUI), asdf, dart, flutter, and android studio
Tags: flutter, dart, android, mobile
Published: 2021-10-05 03:16:33

## Install VMware Workstation Player and Ubuntu
- Download here: [VMware Workstation Player](https://www.vmware.com/asean/products/workstation-player.html)
![VMware1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5cv4hwa2qe15j3dl4ckd.png)
- Note that I download the 16.0 version (you may choose to download the latest version)
![VMware2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/km1cd1oy07n76s1ztoen.png)
- Follow video: [Install Ubuntu 20.04 LTS on VMware Workstation Player](https://www.youtube.com/watch?v=9rUhGWijf9U&list=PLW1T-ydybWi4pW7Tg9KNHWvsyC_j5RS_p&index=4&t=43s) (whole video)

---

## Update Software Updater
- You can directly click the software updater icon (it will automatically check for updates)
![Software-Updater](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mmurw16dueaxs1bsbjab.png)

---

## Restart VMware
![Restart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/axp13h3llycakxvlpiac.png)

---

## Install Visual Studio Code
- In Ubuntu Software, install VSCode
![VSCode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t8n43v0vqzasnenrue3n.png)

---

## Setup in VSCode
- After installation, open up VSCode, download plugins for Flutter and Dart
- Restart VSCode

---

## Install Android Studio
- In Ubuntu Software, install Android Studio
![Android Studio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/byjoeo4jujl188up8bq4.png)
- Open Android Studio, finish installation according to recommendation settings (you may customise the settings)

---

## Setup in Android Studio
- After installation, open up Android Studio, on your left, click `Plugins` and search for Flutter
- When install Flutter plugins, Android Studio will ask to install Dart, allow it to install Dart
![Flutter plugins](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8gv0rkgysq317t427573.png)
- Restart Android Studio by clicking `Restart IDE` after installation

---

## Install asdf
- Open Linux terminal (Ctrl + Alt + T)
- In your terminal, type `code .` to open up VSCode
- Close Linux terminal and open another terminal in VSCode
- Download package information from all configured sources by typing the following code
```
$ sudo apt-get update
```
- Follow the documentation in [asdf virtual manager Documentation](http://asdf-vm.com/) to install `asdf`
```
$ sudo apt install curl git
$ git clone https://github.com/asdf-vm/asdf.git ~/.asdf --branch v0.8.1
```
- Add the following lines at the end of `.bashrc` file
```
. $HOME/.asdf/asdf.sh
. $HOME/.asdf/completions/asdf.bash
```
- Save the `.bashrc` file and close the file
- Call `code ~/.bashrc` in your terminal to double check whether the lines is saved

---

## Close and refresh terminal
- Close your terminal by clicking the rubbish bin icon
- Reopen the terminal

---

## Install flutter and dart using asdf
- Install flutter and dart plugins
```
$ asdf plugin add flutter
$ asdf plugin add dart
```
- List all flutter and dart versions
```
$ asdf list all flutter
$ asdf list all dart
```
(The picture below shows the all the flutter versions)
![Flutter-versions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7dmumugu4b548jlsa1rg.png)
- Install dart and the flutter stable version (mine here is 2.5.2-stable)
```
$ asdf install flutter 2.5.2-stable
$ asdf install dart 2.14.3
```
- After installation, put the versions in global
```
$ asdf global flutter 2.5.2-stable
$ asdf global dart 2.14.3
```
- Open flutter doctor to check
```
$ flutter doctor
```
![CMD-line-missing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lfe7geg2hsd44u6x5tcp.png)

---

## Fix cmdline-tools component is missing
- Follow video: [Fix-missing-cmdline-tools](https://www.youtube.com/watch?v=XHZ1CyIBKD8&list=PLW1T-ydybWi4pW7Tg9KNHWvsyC_j5RS_p&index=5)
- Check again using `flutter doctor`
![flutter-license](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qw4f0q3m5ur6brajgkh0.png)

## Support license
- Agree the license
```
$ flutter doctor --android-licenses
```
- Check again using `flutter doctor`
![All-done](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uk93fdka0wrxxo9djgp5.png)

---

## Copy the installed PATH
- Find where flutter and dart are installed
```
$ asdf where flutter
$ asdf where dart
```
- Remember the following lines(or copy them to a text file)
```
/home/[user]/.asdf/installs/flutter/2.5.2-stable
/home/[user]/.asdf/installs/dart/2.14.3
```
NOTE: the [user] above is refer to the user name in Linux

---

## Export Flutter PATH in VSCode
- Open the Command Palette in VSCode (Ctrl + Shift + P)
- Type out the `Flutter: New Project`
![Command-Palette](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79fhijle4blnarn50d60.png)
- It will show `Could not find a Flutter SDK`
![Flutter-SDK](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xa3471t9b1jvbkzlfk6f.png)
- Select `Locate SDK`
- Go to `home > [user]`
- List out the hidden files `Ctrl + H`
- Go to `asdf > installs > flutter`
- Select `2.5.2-stable` as SDK (note that my version file may differ from yours)

---

## Export Dart PATH in VSCode
- Open the Command Palette in VSCode (Ctrl + Shift + P)
- Type out the `Dart: New Project`
- It will show `Could not find a Dart SDK`
- Select `Locate SDK`
- Go to `home > [user]`
- List out the hidden files `Ctrl + H`
- Go to `asdf > installs > dart`
- Select `2.14.3` as SDK (note that my version file may differ from yours)

---

## Export PATH in Android Studio
- Open your Android Studio
- Go to `Customize > All Settings`
![Customize](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ry7tex830ie9j8i6065l.png)
- Go to `Appearance > Path Variables` and Click the `+` icon
![PATH](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g8tcy3zos2og16ibe6qg.png)
- Set the PATH Variables (You can refer the picture below)
```
# For Flutter
Name: FLUTTER_SDK
Value: /home/[user]/.asdf/installs/flutter/2.5.2-stable

# For Dart
Name: DART_SDK
Value: /home/[user]/.asdf/installs/dart/2.14.3
```
![lIKE-THIS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wlk1spel1ovdfx29byih.png)
- Finally, click `OK` and `OK`

---

## Refresh VSCode and Android Studio
- Close your VSCode and Android Studio
- Open VSCode and Android Studio
- Now, you are good to go😉