Flutter 2 on Arch Linux: Getting started
Tags: flutter, archlinux, mobile, dart
Published: 2021-05-06 12:35:55

<small>\* The cover image is originally by [LMoonlight](https://pixabay.com/users/lmoonlight-236255) and edited with great appreciation.</small>

---

## Summary

[Flutter](https://flutter.dev/) is one of the frameworks to develop mobile apps, a popular one. According to their official website:

> Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

The new major version, 2, was released on March 3, 2021.

This post shows how I built its development environment in [Arch Linux](https://archlinux.org/) due to the official documentation:

- https://flutter.dev/docs/get-started/install/linux

### Environment

- OS: Arch Linux
- Mobile apps Framework: Flutter 2
- Programming Language: [Dart](https://dart.dev/)
- IDE: Android Studio

## Tutorial

### Install dependencies

#### [Pacman](https://wiki.archlinux.org/title/pacman)

Install Dart:

```console
$ sudo pacman -Sy dart
```

`/opt/dart-sdk` will be created.

Besides, you may find [`dart-sdk-dev`](https://aur.archlinux.org/packages/dart-sdk-dev) in [AUR](https://aur.archlinux.org/), Arch User Repository, but I installed `dart` in galaxy/community repository here.

Optionally, install [Kotlin](https://kotlinlang.org/) in addition. JDK version will be asked if it is for the first time. It's OK to choose the default:

```console
:: Synchronizing package databases...
 system                           225.2 KiB   172 KiB/s 00:01 [#################################] 100%
 world                           1615.2 KiB  1237 KiB/s 00:01 [#################################] 100%
 galaxy                          1535.9 KiB  4.41 MiB/s 00:00 [#################################] 100%
 extra                           1620.3 KiB   453 KiB/s 00:04 [#################################] 100%
 community                          5.5 MiB   786 KiB/s 00:07 [#################################] 100%
resolving dependencies...
:: There are 6 providers available for java-environment>=8:
:: Repository world
   1) jdk-openjdk  2) jdk11-openjdk  3) jdk8-openjdk
:: Repository extra
   4) jdk-openjdk  5) jdk11-openjdk  6) jdk8-openjdk

Enter a number (default=1): 
looking for conflicting packages...

Packages (4) java-environment-common-3-3  jdk-openjdk-15.0.2.u7-1  dart-2.12.2-1  kotlin-1.4.32-1

Total Download Size:   237.99 MiB
Total Installed Size:  618.73 MiB

:: Proceed with installation? [Y/n] y
```

Also optionally, install [android-tools](https://archlinux.org/packages/community/x86_64/android-tools/) so that you can use [`adb`](https://wiki.archlinux.org/title/Android_Debug_Bridge) aka [Android](https://developer.android.com/) Debug Bridge and so on.

```console
$ sudo pacman -Sy android-tools
```

For your reference, Arch Linux has [a wiki page about Android](https://wiki.archlinux.org/title/android).

#### AUR packages

Install the packages from AUR.

##### Flutter

```console
$ git clone https://aur.archlinux.org/flutter.git
$ cd flutter
$ makepkg -si
$ cd ..
```

##### Android SDK

It's nothing to do here because it will be installed for the first configuration in Android Studio later.

##### Android Studio

```console
$ git clone https://aur.archlinux.org/android-studio.git
$ cd android-studio
$ makepkg -si
$ cd ..
```

#### Set permissions for Flutter

Add permission on `/opt/flutter` which is created in installing `flutter`:

```
$ sudo gpasswd -a <your-user> flutterusers
```

Log out and log in again.

#### Run Flutter doctor

Launch Android Studio. The first configuration will start.
Choose your option on sending analytical data and so on, and click "Next" several times:

![Android Studio SDK components Setup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/scj9kswrtma6tst15txf.png)

And the installation of Android SDK and its platform tools will begin.
It will take time. When the process is finished, quit Android Studio.

Run `flutter doctor` with `--android-licenses` option to install Android licenses. You will be asked if you accept them:

```console
$ flutter doctor --android-licenses
$ # choose "y", "y", ...
```

After accepting all of them, run `flutter doctor` without any options, which will be successful:

```console
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.0.6, on Linux, locale en_US.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Chrome - develop for the web
[✓] Android Studio
[✓] Connected device (1 available)

• No issues found!
```

Well, some errors such as "Chrome is not found" which are not fatal will be printed in case. It's up to the env.

### Prepare Android Studio

Launch Android Studio again. Select "Plugins" menu:

![Android Studio open Plugins](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aza73ei1117m6qu7u92m.png)

Install "Flutter" plugin. Here, "Dart" is automatically selected and you will be confirmed to install it together:

![Android Studio Plugins menus](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/314lxkzikb8pj5ljng5i.png)

After installation of them, click "Restart IDE" button to restart Android Studio.

Then you will find Flutter with Dart in "Installed" Plugins.

![Android Studio Plugins Flutter and Dart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ahu9b4di2j5mamh1uzau.png)

### Create a project

In Android Studio start menus, you will see "Create New Flutter Project":

![Android Studio Create a project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yll69d1py8b65z4levpr.png)

Choose "Flutter Application":

![Android Studio Create a Flutter Application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xl2ojmcpuea1pxapc40i.png)

"Flutter SDK path" is `/opt/flutter`:

![Android Studio new Flutter application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rwe99r67p8kopzbj2rjf.png)

Almost done.

![Android Studio package name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9u28jlm7sz4wzhz7ppbe.png)

### Run a demo app

Your project will be generated and then you will see its directory structure as tree view.
`lib/main.dart` is the primary file.

![Android Studio directory structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/335u2pec2v60x8fuw30r.png)

Select device, and the emulator will start.
Click the "Run 'main.dart' (Shift+F10)" Button in the menu bar above, which is a green triangle to the right of "Loading Devices...".

![Android Studio Flutter 2 demo app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gktf0e66axx8koypln33.png)

Here is you Flutter 2 app in your hand 😃

Besides, you can also create another project with a menu.

![Android Studio Create another flutter project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ehx52cis5d7mqsprsju.png)