How To Set up Flutter Environment with Visual Studio Code  On Linux/Ubuntu (Android Studio not needed)

How To Set up Flutter Environment with Visual Studio Code On Linux/Ubuntu (Android Studio not needed)

Step 1: Installation Of Java Development Kit (JDK)

As a lot of ubuntu users are familiar with using the ap-get command to install applications. For Java is quite tricky, It is best to install the application manually, so that one can have control of your development environment.

Let get down to business.

  1. Creating a folder in my home directory called ''Development" (or any name of your choice) . It is either you use the graphical interface or use the command tool. use the below command to move to your home directory
    harmlessprince@harmlessprince-pc:~$ cd ~
    
    Now run "mkdir Development" to create a folder where we will be setting up our installations
    harmlessprince@harmlessprince-pc:~ mkdir Development
    
  2. Create a sub-directory, in the Development directory, called JDK: Navigate into the "Development" directory
    harmlessprince@harmlessprince-pc:~ mkdir ~/Development/JDK
    
  3. Download the OpenJDK 11 LTS Version (“tar.gz”), here: https://adoptopenjdk.net

  4. Extracting OpenJDK file: The compressed folder you just downloaded is either in the Download directory or the Compressed folder inside the download directory. When you locate the file, We are extracting the jdk file into the JDK directory in our Development directory. It either you use the GUI or the terminal, like this

harmlessprince@harmlessprince-pc:~ tar -zxvf ~/Downloads/nameofdownloadedfile.tar.gz -C ~/Development/JDK/

The -C option changes the destination directory for the file extraction. This avoids having to move the directory after extracting it.

  1. Set the path of OpenJDK directory in the Ubuntu environment variables. We will be working on the terminal fully now. Run the code below to open your bash file with nano text editor.
    harmlessprince@harmlessprince-pc:~ nano ~/.bashrc
    
  2. Scroll to the end of the bashrc file: and add the below code.

    ##JavaDevKit
    DEV_TOOLS="$HOME/Development"
    JAVA_HOME="$DEV_TOOLS/JDK/jdk-11.0.9.1+1" ##version11
    export PATH="$JAVA_HOME/bin:$PATH"
    

    Press Ctrl+o, then press enter to save the file and Ctrl+x to exit the editor. Now we have two choices to refresh our environment variables Option 1: Run

    source ~/.bashrc
    

    Option 2: Close the current terminal window and open a fresh one.

  3. Testing java command (JRE):

    java --version
    

    With the above code you should see the version of the installed jdk

The next on the list is:

Step 2: Installation of Flutter

  1. First you need to visit the flutter website and download the latest stable version of flutter, dowload flutter here. Note: Do not use the snap package to install flutter, Download the .tar.xz file. After downloading, you should find the downloaded file in your Download folder or in your Compressed folder in the Download folder. Navigate to where your download is and extract it, using either the GUI or the terminal.

  2. Extract the file in the desired location, I will be extracting my inside the development folder, like this.

    harmlessprince@harmlessprince-pc:~ cd ~/development
    harmlessprince@harmlessprince-pc:~ tar xf ~/Downloads/flutter_linux_1.22.5-stable.tar.xz
    
  3. Add the flutter tool to your path: We back to the terminal. Run the code below to open your bash file with nano text editor.
    harmlessprince@harmlessprince-pc:~ nano ~/.bashrc
    
    Scroll to the end of the bashrc file: and add the below code.
    #FLUTTER PATH
    export PATH="$PATH:$HOME/Development/flutter/bin"
    
    Press Ctrl+o, then press enter to save the file and Ctrl+x to exit the editor. Now we have two choices to refresh our environment variables

Option 1: Run

source ~/.bashrc

Option 2: Close the current terminal window and open a fresh one.

now run

harmlessprince@harmlessprince-pc:~$ flutter

You should see, something like these, if you get anything else, kindly drop a comment.

flu1.png

Step 3: Installation of android command-linetools.

First we need to go to Android Developer Studio Scroll down to the heading where you have Command line tools only

Select the version of your operating system. In this case, it is Linux/Ubuntu. Same thing we have been doing, this time we are creating a new directory inside our "Development" directory called "Android"

harmlessprince@harmlessprince-pc:~ mkdir ~/Development/Android

Now create a directory called "cmdline-tools" in your the just created Android directory.

Inside the "cmdline-tools" directory, create a folder called "tools".

Now, copy the content of the extracted sdk file we just downloaded and paste in the "tools" folder.

Your file structure should look like these.

harmlessprince@harmlessprince-pc:~/Development/Android/cmdline-tools/tools

if you run the ls command to list the directory and files, you should have some like this

flu2 .png Make sure you follow the steps above, it very critical for our flutter to be able to detect the sdk tools.

Now, we need to include the path to our android-sdk in our environment variables, just like we have been doing

harmlessprince@harmlessprince-pc:~ nano ~/.bashrc

Scroll to the end of the bashrc file: and add the below code.

#SDK TOOLS
export PATH="$PATH:$HOME/Development/Android/cmdline-tools/tools/bin"

Press Ctrl+o, then press enter to save the file and Ctrl+x to exit the editor. Now we have two choices to refresh our environment variables

Option 1: Run

source ~/.bashrc

Option 2: Close the current terminal window and open a fresh one.

then run "sdkmanager" to be sure our installation is a success, it should show a signal of loading from 1 to 100. then run the below commands one by one sequentially.

  sdkmanager "system-images;android-29;google_apis_playstore;x86_64"
  $ sdkmanager "platform-tools"
  $ sdkmanager "build-tools;29.0.3"
  $ sdkmanager "platforms;android-29"
  $ sdkmanager "emulator"

  $ sdkmanager --licenses

After running all this, if you run "flutter doctor" you should get something similar to this

flut3.png

We need to run

flutter config --android-sdk /home/harmlessprince/Development/Android/

Step 4: Installation of dart and flutter plugin in Visual Studio Code

Now, you need to install Visual Studio Code and install the dart and flutter plugin in the editor

Your flutter environment should be all set, If you have any question or issue. Kindly drop a comment. search for dark and and flutter in plugin installation section and install.