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.
- 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
Now run "mkdir Development" to create a folder where we will be setting up our installationsharmlessprince@harmlessprince-pc:~$ cd ~
harmlessprince@harmlessprince-pc:~ mkdir Development
- Create a sub-directory, in the Development directory, called JDK:
Navigate into the "Development" directory
harmlessprince@harmlessprince-pc:~ mkdir ~/Development/JDK
Download the OpenJDK 11 LTS Version (“tar.gz”), here: https://adoptopenjdk.net
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.
- 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
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.
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
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.
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
- 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.
Scroll to the end of the bashrc file: and add the below code.harmlessprince@harmlessprince-pc:~ nano ~/.bashrc
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#FLUTTER PATH export PATH="$PATH:$HOME/Development/flutter/bin"
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.
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
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
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.