Web apps with Flutter on Ubuntu (2020)

Greetings everyone! Today (26th of Nov 2020) we will go through major steps to have Flutter Web Development ready-to-work.

Why Flutter you may ask? There are many reasons, I advice to search for other articles referring this. But in short, Flutter is modern, popular, widely used framework — “Write once -> have native app everywhere — mobile (Android, iOS), web, desktop (Windows, macOS, Linux)”.

Flutter is made by Google engineers and although Google and some other Alphabet’s companies do some pretty bad stuff these days (censorship, search results manipulation, freedom restrictions, re-captcha, etc.), they still produce and maintain many pretty good policy-agnostic technologies that many developers like and use.

Note that this article works for Ubuntu 20.04 and compatible (and yeah, you will need several gigabytes of free space, at least 10 GB but rather make it 20 GB or more). Official Flutter documentation is good but it will not help you to solve all the troubles on the way you might have on Linux. This article will ease your burden little bit more. Ok, let’s open terminal and start.

STEP 0 — Install OpenJDK 14

You can use Oracle JDK as well and possibly other Java versions but OpenJDK 14 works just fine.

apt install openjdk14-jdk

Check Java version on path

java --version
> openjdk version "14.0.2" 2020-07-14
> OpenJDK Runtime Environment (build 14.0.2+12-Ubuntu-120.04)
> OpenJDK 64-Bit Server VM (build 14.0.2+12-Ubuntu-120.04, mixed mode, sharing)

Now define JAVA_HOME variable in ~/.profile file

export JAVA_HOME=/usr/lib/jvm/java-14-openjdk-amd64/

And execute .profile inside your current shell

source ~/.profile

STEP 1 — Install Flutter

Linux install

At the time of writing this article we have flutter 1.22.4 stable version available. Unpack it into your chosen directory <INSTALL_PATH>

mkdir <INSTALL_PATH>
cd <DOWNLOADS_DIR>
tar xvf flutter_linux_1.22.4-stable.tar.xz -C <INSTALL_PATH>

Add export path to flutter

export PATH="$PATH:<INSTALL_PATH>/flutter/bin"

STEP 2 — Install Android Studio

Download Android Studio (current version 4.1.1)

Download Android Studio and SDK tools | Android Developers

tar xvf android-studio-ide-201.6953283-linux.tar.gz -C <INSTALL_PATH>

Now run the Android Studio and install Standard Dependencies as offered.

cd <INSTALL_PATH>/android-studio/bin
./studio.sh

Choose Standard setup and let everything be installed.

STEP 3 — Install Android SDK Command-Line Tools

We need this add “Android SDK Command-line Tools” to run successfully certain commands needed for flutter otherwise you will meet lot of weird errors.

In Android Studio

1. Open Tools > SDK Manager
2. From the left choose, Appearance & Behavior > System Settings > Android SDK
3. Select SDK Tools from the top menu
4. Check Android SDK Command-line tools and click ‘apply’ to install.

STEP 4 — Install Flutter and Dart plugin in Android Studio

If you want to use Android Studio as you Flutter IDE, then it’s good to install Flutter and Dart plugins.

• File -> Settings
• Plugins, type “Flutter” to search the plug-in.
• Click “Install”

Flutter and Dart (you should be asked) plugins will be installed. IDE restart is needed after that.

STEP 5— Accept flutter license

Make Flutter licenses accepted with this command, confirm with ‘y’ whenever asked.

flutter doctor --android-licenses

STEP 6— Set path to Android studio

Now we need to tell Flutter where Android Studio is.

flutter config — android-studio-dir=<INSTALL_PATH>/android-studio

STEP 7—Precache flutter

Populates the Flutter tool’s cache of binary artifacts.

flutter precache --verbose

STEP 8— Enable Flutter web support

To enable web support we need to switch to channel beta as stable channel doesn’t support web development for now.

flutter channel beta

Make sure you’re on the latest build by running upgrade command

flutter upgrade

Now run precache again to populate flutter binary artifacts.

flutter precache

Now it’s time to enable web support

flutter config --enable-web

We should see something like this

Flutter is already up to date on channel beta
Flutter 1.24.0-10.2.pre • channel beta • https://github.com/flutter/flutter.git
Framework • revision 022b333a08 (8 days ago) • 2020-11-18 11:35:09 -0800
Engine • revision 07c1eed46b
Tools • Dart 2.12.0 (build 2.12.0-29.10.beta)

STEP 9— Create and run project

Time to go into your <PROJECT_FOLDER>, folder where your Flutter projects will reside.

cd <PROJECTS_FOLDER>
flutter create flutter_web_app
flutter run -d chrome

Now we should see open browser and Flutter Web Application running in it.

In case you have existing app that doesn’t have web support you will need to run first this command within existing Flutter project.

flutter create .

This will create additional web folder with expected files like index.html, etc. This is not necessary for development but it’s needed for steps like building release web app.

When you are happy with your and and need to generate release build use ‘build web’ command. Your build will be found in build/web folder and can be deployed on various servers.

flutter build web

STEP 10— Check installation

This step is just to see how our Flutter is doing.

flutter doctor

You should see something similar to this except VS Code (for this check you need to install VS Code and Flutter plugin in it). Not necessary if you plan to use Android Studio or other non-vscode editor. But if you want to have all checks green or you want to use vscode , then install vscode flutter plugin in it and run flutter doctor again.

[✓] Flutter (Channel beta, 1.24.0-10.2.pre, on Linux, locale en_US.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[✓] Android Studio
[✓] VS Code (version 1.51.1)
[✓] Connected device (1 available)

That’s all for today. Now you can develop web applications with Flutter with all the comfort Flutter and Android IDE with particular plugins provide. I wish you all your applications run flawlessly and are making this world little bit better and less annoying and troubling place.