Flutter 3 on Arch Linux: Getting started
Tags: flutter, dart, mobile, archlinux
Published: 2023-01-02 07:25:35


## Summary

[Flutter](https://flutter.dev/) is one of the frameworks to build apps, primarily focusing on the mobile. It is cross-platform so for Both [Android](https://www.android.com/) and [iOS](https://www.apple.com/ios/). Their official website says:

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

On May 12, 2022, its latest major version, [3](https://docs.flutter.dev/development/tools/sdk/release-notes/release-notes-3.0.0) was released.

I built the development environment on [Artix Linux](https://artixlinux.org/) based on [Arch Linux](https://archlinux.org/) due to [the official documentation of Flutter](https://flutter.dev/docs/get-started/install/linux).
This post shows how I did it.

As a reference, Arch Linux offers [their original wiki page about Android](https://wiki.archlinux.org/title/android).

### Environment

- OS: Artix Linux
- App Framework: Flutter 3
- Programming Language: [Dart](https://dart.dev/)
- IDE: [Android Studio](https://developer.android.com/studio/)

## Tutorial

All [`doas`](https://wiki.archlinux.org/title/Doas) from [OpenBSD's](https://man.openbsd.org/doas) can be replaced with [`sudo`](https://wiki.archlinux.org/title/Sudo).

### Install dependencies

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

##### Dart

Install Dart:

```console
$ doas pacman -Sy dart
```

The output was:

```console
:: Synchronizing package databases...
(...)
resolving dependencies...
looking for conflicting packages...

Packages (1) dart-2.18.6-1

Total Download Size:   118.65 MiB
Total Installed Size:  500.47 MiB

:: Proceed with installation? [Y/n] y
(...)
:: Processing package changes...
(1/1) installing dart                              [######################] 100%
```

Here, `/opt/dart-sdk` was created.

##### Android platform tools (Optional)

You may install [android-tools](https://archlinux.org/packages/community/x86_64/android-tools/) which includes [`adb`](https://wiki.archlinux.org/title/Android_Debug_Bridge) aka [Android](https://developer.android.com/) Debug Bridge and so on.
In order to get them, run the command lines below:

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

#### [AUR](https://aur.archlinux.org/)

Get and install the packages below from AUR, Arch User Repository.

##### Flutter

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

You will be asked which version of Java you install if it is the first time. Choose the defaults as far as you don't have the specific reason to avoid:

```console
:: There are 7 providers available for java-environment:
:: Repository world
   1) jdk-openjdk  2) jdk11-openjdk  3) jdk8-openjdk
:: Repository extra
   4) jdk-openjdk  5) jdk11-openjdk  6) jdk17-openjdk  7) jdk8-openjdk

Enter a number (default=1): 
:: There are 2 providers available for jre19-openjdk=19.0.1.u10-3:
:: Repository world
   1) jre-openjdk
:: Repository extra
   2) jre-openjdk

Enter a number (default=1): 
:: There are 2 providers available for jre19-openjdk-headless=19.0.1.u10-3:
:: Repository world
   1) jre-openjdk-headless
:: Repository extra
   2) jre-openjdk-headless

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

Packages (7) java-environment-common-3-3.1  java-runtime-common-3-3.1
             jdk-openjdk-19.0.1.u10-3  jre-openjdk-19.0.1.u10-3
             jre-openjdk-headless-19.0.1.u10-3  unzip-6.0-19  flutter-3.3.10-1

Total Download Size:    117.10 MiB
Total Installed Size:  1622.78 MiB

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

The output was:

```console
:: Retrieving packages...
 jdk-openjdk-19.0...    78.7 MiB  3.67 MiB/s 00:21 [######################] 100%
 jre-openjdk-head...    38.1 MiB  4.00 MiB/s 00:10 [######################] 100%
 jre-openjdk-19.0...   181.6 KiB   439 KiB/s 00:00 [######################] 100%
(...)
(7/7) installing flutter                           [######################] 100%
Flutter was installed on /opt/flutter

In case you encounter problems using Flutter as regular user, add your user into the group flutterusers:
gpasswd -a ${USER} flutterusers

Re-login your terminal in to the group flutterusers:
newgrp flutterusers

Run the following command to see if there are any dependencies you need to install to complete the setup (for verbose output, add the -v flag):
flutter doctor
Optional dependencies for flutter
    android-sdk
    android-studio
    intellij-idea-community-edition
    intellij-idea-ultimate-edition
    ninja
    perl [installed]
    python [installed]
:: Running post-transaction hooks...
(1/2) Updating icon theme caches...
(2/2) Updating the desktop file MIME type cache...
==> Cleaning up...
```

Done. Go on.

```console
$ cd ..
```

##### Android Studio

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

In my case, `android-studio-2021.3.1.17-1` was installed. Let's go to the next.

```console
$ cd ..
```

##### Android SDK

It is also required for development. There is, however, nothing to do here, for it will be installed in the first configuration of Android Studio later.

### Configure Flutter

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

```
$ doas usermod -a -G flutterusers <your-user>
```

Log out and log in again.

### Andriod Studio first configuration

Start Android Studio.

You may be asked if you have something to import. I didn't.

![android studio import settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y1s9kjk97o7k0bll6d23.png)

#### Initial setting up

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

![android studio welcome](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gpe692cnt832epfdz5p4.png)

![android studio install type](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/saefd9jxdqo6xkljcxpg.png)

![android studio select ui theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b1t6z96sol199476147o.png)

![android studio verify settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2b541k68smv1ki5zbpj3.png)

Here, the below was actually shown as current settings:

```
Setup Type: Standard
SDK Folder: /home/<your-user>/Android/Sdk
JDK Location: /opt/android-studio/jre
Total Download Size: 1.85 GB
SDK Components to Download: 

Android Emulator
  
280 MB

Android SDK Build-Tools 33.0.1
  
53.4 MB

Android SDK Platform 33
  
64.2 MB

Android SDK Platform-Tools
  
7.16 MB

Google APIs Intel x86 Atom_64 System Image
  
1.41 GB

SDK Patch Applier v4
  
1.74 MB

Sources for Android 33
  
46.9 MB
```

The next page is about License Agreement. You will be asked if you accept their licenses. Choose "Accept", and "Next" will be enabled to go next:

![android studio license agreement](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dr4gctwu8hwnhw0n0x5r.png)

Clicking the "Finish" button below starts the installation of Android SDK and its platform tools.

![android studio emulator settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y03s18bbaalgjxy7as57.png)

Confirmation will show. Click "OK".

![android studio downloading components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4iar90iz6frcsrs7rg6r.png)

It will take time.

![android studio finishing downloading components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/07blpd5xlodi9zxn55t3.png)

When it is finished, you will see the window below.

![android studio create a new project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ntdw3g95w76v023i3qxb.png)

#### Install Plugins

Select "Plugins" menu. Then click "Install" on "Flutter". You will be told to allow "Dart" to be installed at the same time, and also accept the terms:

![android studio plugins](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/viorftj0egubhf6ikw59.png)

Click "Restart IDE" button to restart Android Studio.

After finishing it, you will see them as "Installed" plugins:

![android studio install flutter plugin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/asub7yhwqdmsrq6ysd5b.png)

#### Create a Flutter project

Return to the top menu, and choose "New Flutter Project":

![android studio create a new flutter project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/70c81nr1jinogmbjam4i.png)

Choose Flutter and set its path, `/opt/flutter/`, at "Flutter SDK path":

![android studio flutter sdk path](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/acblhdboo5w0e5kjn6dg.png)

Go to the next:

![android studio flutter project settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vufm344an3rd5wa0mpxs.png)

Confirm them and click "Finish". Then the project files will be generated. And you will see the directory structure as tree view:

![android studio project directory structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0xf1o11n8jomp56oelu7.png)

It looks so nice that we seem start to build an app right now !! Wait, however, please.

There is a couple of things to do before start coding. It's for the "health" of flutter doctor 🏥 : Install Android SDK Command line tools.

#### Install cmdline-tools

Click "File" on the top menus. Then select "Settings...":

![android studio file settings menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bry6meglmp4qic9x4ff6.png)

Go to "Android SDK" (here, search is useful) and open "SDK Tools". Install Android SDK Command line tools:

![android studio android sdk tools settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uwilrac7elxqm6mf1hu4.png)

![android studio confirm change in android sdk tools](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/trzsdvh64x9duleisso6.png)

![android studio sdk component installer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ohv9nurwpg7st5su95p1.png)

Now you have cmdline-tools so you can proceed flutter doctor to accept android licenses.

### Run Flutter doctor to verify your project configuration

Open terminal.

First, run:

```console
$ git config --global --add safe.directory /opt/flutter
```

It suppresses the error in running `flutter doctor`:

```console
fatal: detected dubious ownership in repository at '/opt/flutter'
```

Then, run `flutter doctor` with `--android-licenses` option in order to accept the Android licenses:

```console
$ flutter doctor --android-licenses
```

You will be asked if you accept them:

```console
[=======================================] 100% Computing updates...             
5 of 6 SDK package licenses not accepted.
Review licenses that have not been accepted (y/N)? y
```

A part of the output was below. If there is a question or a problem, choose "y"(es) at every question.

```console
[=======================================] 100% Computing updates...             
5 of 6 SDK package licenses not accepted.
Review licenses that have not been accepted (y/N)? y

1/5: License
(...)
---------------------------------------
Accept? (y/N): y
All SDK package licenses accepted
```

#### Flutter doctor final check

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

```console
$ flutter doctor
```

The output was:

```console
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.3.10, on Artix Linux 6.0.12-artix1-1, locale en_US.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
[✗] Chrome - develop for the web (Cannot find Chrome executable at google-chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[✗] Linux toolchain - develop for Linux desktop
    ✗ clang++ is required for Linux development.
      It is likely available from your distribution (e.g.: apt install clang), or can be downloaded from https://releases.llvm.org/
    ✗ CMake is required for Linux development.
      It is likely available from your distribution (e.g.: apt install cmake), or can be downloaded from https://cmake.org/download/
    ✗ ninja is required for Linux development.
      It is likely available from your distribution (e.g.: apt install ninja-build), or can be downloaded from
      https://github.com/ninja-build/ninja/releases
    ✗ pkg-config is required for Linux development.
      It is likely available from your distribution (e.g.: apt install pkg-config), or can be downloaded from
      https://www.freedesktop.org/wiki/Software/pkg-config/
[✓] Android Studio (version 2021.3)
[✓] Connected device (1 available)
[✓] HTTP Host Availability

! Doctor found issues in 2 categories.
```

Oh, some issues were found. They can be solved by installing some packages or specifying an environment variable.

#### Install additional packages

```console
$ doas pacman -Sy clang cmake ninja base-devel
```

Here, at base-devel, choose pkgconf:

```console
:: There are 27 members in group base-devel:
:: Repository system
   1) autoconf  2) automake  3) binutils  4) bison  5) debugedit  6) esysusers
   7) etmpfiles  8) fakeroot  9) file  10) findutils  11) flex  12) gawk
   13) gcc  14) gettext  15) grep  16) groff  17) gzip  18) libtool  19) m4
   20) make  21) pacman  22) patch  23) pkgconf  24) sed  25) sudo  26) texinfo
   27) which

Enter a selection (default=all): 23
```

#### Flutter doctor passes

When you don't have [google-chrome](https://aur.archlinux.org/packages/google-chrome) and want all checks passed, you have to bind `CHROME_EXECUTABLE` to some browser. For example, when you use chromium:

```console
$ env CHROME_EXECUTABLE=chromium \
      flutter doctor
```

The output was:

```console
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.3.10, on Artix Linux 6.0.12-artix1-1, locale
    en_US.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
[✓] Chrome - develop for the web
[✓] Linux toolchain - develop for Linux desktop
[✓] Android Studio (version 2021.3)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

• No issues found!
```

OK. 

### Run a demo app

Now we are ready for actual development. Let's go back to the Android Studio project.

`lib/main.dart` is the primary file.

![android studio project main.dart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2pey2zg7u6gocgg2ko3f.png)

Well, your app is ready for running out of the box.

Click device form which shows "\<no device selected\>" and select "Open Android Emulator":

![android studio select device](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ylpp4omnuuue4mylx3fz.png)

Then you will see the emulator starts where your app, however, is not installed.

Next, click the green triangle icon above the emulator view. Alternatively, you can the top menus: "Run" - "Run 'main.dart' (Shift+F10)".

![android studio run main.dart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9cwhqlsx388r8mzqsdwr.png)

Then, the Run view will be opened at the bottom of the IDE and it will show:

![android studio gradle task starts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ha6vaddayh0o1w65hb1.png)

```
Running "flutter pub get" in <project-name>...
Launching lib/main.dart on sdk gphone64 x86 64 in debug mode...
Running Gradle task 'assembleDebug'...
```

It will perhaps take long. When it is finished, you will see: 

``` 
✓  Built build/app/outputs/flutter-apk/app-debug.apk.
Installing build/app/outputs/flutter-apk/app.apk...
Debug service listening on ws://127.0.0.1:46365/lxkuYf04cFo=/ws
Syncing files to device sdk gphone64 x86 64...
E/SurfaceSyncer( 6647): Failed to find sync for id=0
W/Parcel  ( 6647): Expecting binder but got null!
```

Also what the emulator shows will be updated:

![flutter demo app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/65rpr28ab82gqp9dmwnj.png)

You can click the button to count up.

## Conclusion

Now you have a flutter project ready for development and deployment (but not for production).

There is another good news on it.

Flutter supports [hot reload](https://docs.flutter.dev/development/tools/hot-reload).
For example, modify line 25 in `lib/main.dart` as below, and save it:

```diff
-         primarySwatch: Colors.blue,
+         primarySwatch: Colors.deepPurple,
```

The emulator view will change instantly:

![flutter demo app hot reloading](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n7r2dppgwurfmjswi14c.png)

Yay. Your Flutter 3 app started to get rocks 😃