DEV Community

Michelle Loh
Michelle Loh

Posted on • Updated on

Install wsl2(GUI), asdf, dart, flutter, and android studio

Install VMware Workstation Player and Ubuntu


Update Software Updater

  • You can directly click the software updater icon (it will automatically check for updates) Software-Updater

Restart VMware

Restart


Install Visual Studio Code

  • In Ubuntu Software, install VSCode VSCode

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
  • 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
  • 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
Enter fullscreen mode Exit fullscreen mode
$ sudo apt install curl git
$ git clone https://github.com/asdf-vm/asdf.git ~/.asdf --branch v0.8.1
Enter fullscreen mode Exit fullscreen mode
  • Add the following lines at the end of .bashrc file
. $HOME/.asdf/asdf.sh
. $HOME/.asdf/completions/asdf.bash
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • List all flutter and dart versions
$ asdf list all flutter
$ asdf list all dart
Enter fullscreen mode Exit fullscreen mode

(The picture below shows the all the flutter versions)
Flutter-versions

  • 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
Enter fullscreen mode Exit fullscreen mode
  • After installation, put the versions in global
$ asdf global flutter 2.5.2-stable
$ asdf global dart 2.14.3
Enter fullscreen mode Exit fullscreen mode
  • Open flutter doctor to check
$ flutter doctor
Enter fullscreen mode Exit fullscreen mode

CMD-line-missing


Fix cmdline-tools component is missing

Support license

  • Agree the license
$ flutter doctor --android-licenses
Enter fullscreen mode Exit fullscreen mode
  • Check again using flutter doctor All-done

Copy the installed PATH

  • Find where flutter and dart are installed
$ asdf where flutter
$ asdf where dart
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

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
  • It will show Could not find a Flutter SDK Flutter-SDK
  • 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
  • Go to Appearance > Path Variables and Click the + icon PATH
  • 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
Enter fullscreen mode Exit fullscreen mode

lIKE-THIS

  • 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😉

Discussion (0)