Flutter 3 on Arch Linux: 始め方
Tags: flutter, dart, mobile, archlinux
Published: 2023-01-02 07:26:11

## はじめに

[Flutter](https://flutter.dev/) はアプリ開発のためのフレームワークです。モバイルアプリを第一のターゲットにしています。クロスプラットフォーム対応しているため、[Android](https://www.android.com/) と [iOS](https://www.apple.com/ios/) のどちらに向けても開発できます。公式サイトによると:

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

(私訳: Google の UI ツールキットです。すばらしい、ネイティヴコードにコンパイルされたアプリケーションを構築できます。モバイル / Web / デスクトップのすべてに単一のコードベースで対応できます。)

2022 年 5 月 12 日に、最新のメジャーバージョンである [3](https://docs.flutter.dev/development/tools/sdk/release-notes/release-notes-3.0.0) がリリースされました。

私は [Arch Linux](https://archlinux.org/) をベースにした [Artix Linux](https://artixlinux.org/) という OS 上に、Flutter の [公式ドキュメント](https://flutter.dev/docs/get-started/install/linux) に沿って開発環境を構築しました。この記事ではその流れを示します。

ご参考までに、Arch Linux から [Android に関するオリジナルの Wiki ページ](https://wiki.archlinux.org/title/android) が公開されています。

### 環境

- OS: Artix Linux
- アプリ フレームワーク: Flutter 3
- プログラミング言語: [Dart](https://dart.dev/)
- IDE: [Android Studio](https://developer.android.com/studio/)

## チュートリアル

[`doas`](https://wiki.archlinux.org/title/Doas) は [OpenBSD 由来](https://man.openbsd.org/doas) のものですが、いずれも [`sudo`](https://wiki.archlinux.org/title/Sudo) に置き換え可能です。

### 必要パッケージのインストール

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

##### Dart

Dart をインストールします:

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

出力は以下の通りでした:

```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%
```

ここで `/opt/dart-sdk` が作成されます。

##### Android プラットフォーム ツール (スキップ可)

必要に応じて [android-tools](https://archlinux.org/packages/community/x86_64/android-tools/) をインストールします。これには [`adb`](https://wiki.archlinux.org/title/Android_Debug_Bridge) すなわち [Android](https://developer.android.com/) Debug Bridge などが含まれています。
以下のコマンドを実行することで取得できます:

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

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

AUR すなわち Arch User Repository から、以下のパッケージをインストールします。

##### Flutter

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

初めてのインストールの場合、Java のバージョンをたずねられるかもしれません。特に避ける理由が無ければ、デフォルトを選択しましょう:

```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
```

出力は以下の通りでした:

```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...
```

完了です。次へ行きましょう。

```console
$ cd ..
```

##### Android Studio

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

私が実行した時は `android-studio-2021.3.1.17-1` のバージョンがインストールされました。次へ進みましょう。

```console
$ cd ..
```

##### Android SDK

開発のためには必要なものですが、ここでは何もする必要がありません。と言うのは、後ほど Android Studio の初期設定を行う時にインストールされるからです。

### Flutter の設定

`flutter` インストール時に `/opt/flutter` が作成されるのですが、こちらへのアクセス権を付与しましょう:

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

ログアウトして、ログインします。

### Andriod Studio の初期設定

Android Studio を起動します。

インポートするものがあるかをたずねられるかもしれません。私の場合、ありませんでした。

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

#### 初期セットアップ

初期設定が始まります。
操作の分析データの送信を許すかどうか等についてたずねられるでしょう。

それらが終わったら "Next" を何度か押します。

![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)

ここで 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
```

次の画面は License Agreement (ライセンス事項への同意) についてです。承諾するかどうかを聞かれます。"Accept" (承諾) を選択すると、"Next" を押して進めるようになります:

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

以下の "Finish" ボタンを押すと Android SDK とプラットフォームツールのインストールが始まります。

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

確認が表示されたら "OK" を押します。

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

時間を要します。

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

完了すると、以下のウィンドウが表示されます。

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

#### Plugins のインストール

"Plugins" メニューを選択します。"Flutter" の "Install" を押下します。"Dart" を同時にインストールすることを認めるよう言われるでしょう。さらに以下の内容を受け入れることも求められます:

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

(私訳要約: サードパーティ製プラグインの中には、個人情報を取得しようとするものがあるかもしれません。その懸念に対しては、提供者のドキュメントを読むなどして、自己責任の下に確認する必要があります。)

"Restart IDE" ボタンを押下して Android Studio を再起動します。

完了すると、これらは "Installed" (インストール済) プラグインとして表示されるようになります:

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

#### Flutter プロジェクトの作成

トップメニューに戻ります。"New Flutter Project" を選択しましょう:

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

Flutter を選択します。"Flutter SDK path" に Flutter のパスである `/opt/flutter/` をセットします:

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

次へ進みます:

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

表示内容を確認して "Finish" を押します。するとプロジェクトのファイル群が生成されます。ディレクトリ構成がツリービューで確認できるようになるでしょう:

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

良い感じですね。すぐにでも開発を始められそうです !! しかしお待ちください。

コーディングを始める前に、やるべきことがいくつか残っています。これらは flutter doctor 🏥 の "健康" のためです: Android SDK Command line tools (コマンドラインツール) をインストールします。

#### cmdline-tools のインストール

トップメニューの "File" を押して、それから "Settings..." を押します:

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

"Android SDK" に進みます。(検索機能が便利なはずです。) そして "SDK Tools" を開きます。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)

これで cmdline-tools がインストールされました。それによって flutter doctor の実行から Android ライセンスを承諾することができるようになりました。

### Flutter doctor によるプロジェクト設定の検証

ターミナルを開きましょう。

まず、こちらを実行します:

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

これは `flutter doctor` 実行時の以下のエラーを抑制するためです:

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

次に `flutter doctor` を `--android-licenses` オプション付きで実行します。これは Android ライセンスを承諾するためです:

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

それぞれ承諾するかどうかをたずねられます:

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

出力内容の例は以下の通りです。内容に問題が無ければ、すべての質問で "y"(es) を選択しましょう。

```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 による最終確認

上記のすべてを承諾した後は、`flutter doctor` をオプション無しで実行します。実行自体は正常終了するでしょう:

```console
$ flutter doctor
```

出力は以下の通りでした:

```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.
```

おやおや、問題が検出されてしまいました。これらはパッケージのインストールまたは環境変数の指定で解決できます。

#### 追加パッケージのインストール

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

ここで base-devel については 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 成功

[google-chrome](https://aur.archlinux.org/packages/google-chrome) をインストールしていなくて、それでもすべてのチェックをパスしたい時は、`CHROME_EXECUTABLE` に何かのブラウザを紐付ける必要があります。例えば Chromium があるのであれば:

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

出力は以下の通りでした:

```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!
```

やりました。

### デモアプリの実行

さあ、開発するための準備ができました。Android Studio のプロジェクトに戻りましょう。

`lib/main.dart` が中心になるファイルです。

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

このアプリは、実は生成された時点で実行できるようになっています。

device のボックスをクリックしてください。"\<no device selected\>" と表示されているところです。そして "Open Android Emulator" を選択してください:

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

Emulator (エミュレーター、動作の疑似再現環境) が立ち上がります。しかしまだプロジェクトのアプリはインストールされていない状態です。

次に緑の三角形をクリックします。Emulator ビューの上にあります。あるいは別の方法として、トップメニューから実行もできます: "Run" - "Run 'main.dart' (Shift+F10)" を押下します。

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

Run ビューが IDE の下の方で開きます。次のような出力がなされます:

![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'...
```

おそらくかなりの時間が掛かります。終わると、次のような内容が出力されます: 

``` 
✓  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!
```

加えて Emulator の表示が変わっているでしょう:

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

ボタンを押すことでカウントアップできます。

## おわりに

さあ、開発も (プロダクション向けではまだありませんが) デプロイもできる、Flutter プロジェクトができました。

さらに良い知らせがあります。

Flutter は [hot reload](https://docs.flutter.dev/development/tools/hot-reload) (ホットリロード) に対応しています。
例えば `lib/main.dart` の 25 行目を以下のように編集して、保存してみましょう:

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

Emulator ビューにすぐさま変化が現れるでしょう:

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

すばらしいですね。Flutter 3 アプリですごいことをする準備が整いました 😃