How to Install and Setup Flutter on Ubuntu 18.04.1 LTS (Bionic Beaver)

Flutter, an open-source mobile application development SDK created by Google is getting more attention from developers nowadays. Flutter is used to develop applications for Android and iOS, as well as being the primary method of creating applications for Google Fuchsia (the capability-based operating system currently being developed by Google). Here I am going to explain the steps for installing Flutter on your Ubuntu system.

The installation of Flutter on Ubuntu is explained in Flutter documentation page. But I faced some issues when following it and some of the steps are a little bit confusing. This is the reason behind the making of this tutorial. If you are confident of setting up Flutter with official documentation, just go with the link below. Or else follow the steps.

https://flutter.io/setup-linux/




INSTALLATION

1. INSTALL JDK

Usually, Native Android apps are built in Java. So Java Development Kit(JDK) is required.

On Terminal,

sudo add-apt-repository ppa:openjdk-r/ppa
sudo apt-get update
sudo apt-get install openjdk-8-jdk

2. INSTALL AND SETUP ANDROID STUDIO

DOWNLOAD ANDROID STUDIO BUNDLE

Android studio needs to be installed for working with Flutter development. You can easily download an Android Studio zip file using the official link below.

https://developer.android.com/studio/index.html

In my case, I got the zip file named android-studio-ide-173.4907809-linux.zip

UNZIP THE FILE

Now Unzip the file to /opt directory by running the command.

sudo unzip android-studio-ide-141.2178183-linux.zip -d /opt
CREATE A DESKTOP ICON

Create a new file androidstudio.desktop by running the command:

sudo nano ~/.local/share/applications/androidstudio.desktop

Add the lines by Copy-Paste method.

[Desktop Entry]
Version=1.0
Type=Application
Name=Android Studio
Exec="/opt/android-studio/bin/studio.sh" %f
Icon=/opt/android-studio/bin/studio.png
Categories=Development;IDE;
Terminal=false
StartupNotify=true
StartupWMClass=android-studio

Press Ctrl + O (Write out)
Press Enter
Press Ctrl + x (exit)

CONFIGURE ANDROID_HOME ENVIRONMENT VARIABLE

Copy the following lines

export ANDROID_HOME=$HOME/Android/Sdk 
export PATH=$PATH:$ANDROID_HOME/tools 
export PATH=$PATH:$ANDROID_HOME/platform-tools

On Terminal,

sudo nano $HOME/.bash_profile

Paste the copied code on the terminal screen.

Press Ctrl + O (Write out)
Press Enter
Press Ctrl + x (exit)

3. INSTALL FLUTTER PLUGIN ON ANDROID STUDIO

It’s an optional step to install the Flutter plugin on Android Studio. But it helps you if you are developing your Flutter project from Android Studio. This also installs Dart plugin which also required for Flutter development. This can be done from Android Studio Welcome Window.

Goto, Configure -> Plugin

Now, Search of Flutter and Install. It requires a restart for Android Studio to activate this plugin.

4. GET FLUTTER SDK

First, you have to download Flutter SDK using the link below.

flutter_linux_v0.6.0-beta.tar.xz




5. EXTRACT THE FILE

I am assuming that the downloaded file is on the Downloads directory of your system. Now you need to Extract this compressed file using the terminal command below

tar xf ~/Downloads/flutter_linux_v0.6.0-beta.tar.xz

6. ADD FLUTTER TO YOUR PATH

Now you need to add the Flutter to your path using the below command.

export PATH=`pwd`/flutter/bin:$PATH
 source $HOME/.bash_profile

7. ACCEPT THE LICENSES

You need to accept some Android licenses to start development with Flutter. Just run the below command and accept all the licenses by pressing y.

flutter doctor --android-licenses

8. UPDATE YOUR PATH PERMANENTLY

You already added the Path variable before. But it only valid for the current terminal window. You have to run the below command to make it permanent.

export PATH=Downloads/flutter/bin:$PATH

9. CREATING NEW APPLICATION

Creating a new application on Flutter can be done with three methods. Using Android Studio plugin, VS code plugin, or using Terminal + Editor method. Here, I am going with the third method(Terminal + Editor).

flutter create awesome_project




10. CHOOSING THE CODE EDITOR

You can choose your own favorite code editor for editing your project. But in my case, I choose Visual studio Code(VS code since it directly supports the Flutter and Flutter plugin.

https://code.visualstudio.com/#alt-downloads

From the above link, you can download VS code .deb file compatible with Ubuntu/Debian. This deb file can be installed with a double-click on Ubuntu.

11. DIRECTING TO YOUR PROJECT FOLDER AND EDITING

After installing VS code, direct to your project folder.

On Terminal,

cd awesome_project

Open your project using VS code by just typing the below command.

On Terminal,

code .

Form now on, you can use VS code Terminal instead of native Ubuntu Terminal because you can use the Terminal without going out of your code editor.
(Go to View -> Integrated Terminal from VS code’s top menubar)

12. RUNNING YOUR APPLICATION ON YOUR ANDROID DEVICE

Now you can run the project on your Android phone.

On your mobile device,

Go to Settings->About

You can see a Build Version menu there. Continuously click the option until it enables the Developer options

Now, return to Settings. You can see the Developer options menu there. Enable it. Also, enable the USB debugging option in it.

Connect your mobile device with your Ubuntu system using the USB port. Type the below command to check whether your mobile device is connected or not.

On Terminal,

flutter devices

Now, From the VS studio terminal, run

On Terminal,

flutter run

This will install and open the newly created app on your connected Android device.

Image is loadng...

Have a nice code !

 

About the Author: Syamlal CM

Hi, I'm Syamlal, the co-founder of Redmonark. I'm a developer, writer and also have a little bit of experience in graphic designing.

3 Comments

  1. Visual studio code gives me the error flutter not found but in terminal, it detects the flutter.i am on ubuntu 14.04 LTS

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.