Flutter 2 on Arch Linux: 始め方
Tags: flutter, dart, mobile, archlinux
Published: 2022-12-31 02:59:36

## Summary

[Flutter](https://flutter.dev/) はモバイルアプリを開発するための人気のあるフレームワークです。公式サイトでは以下のように説明されています:

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

(私訳: Flutter は Google の UI ツールキットです。モバイル / Web / デスクトップ向けのアプリケーションを、単一のコードベースから構築できます。それぞれのネイティヴコードにコンパイルされたすばらしいアプリケーションを構築することができます。)

新しいメジャーバージョンである 2 が、2021 年 3 月 3 日にリリースされました。

開発環境を下記の公式ドキュメントにそって [Arch Linux](https://archlinux.org/) に構築しました。その流れを本記事で示します。

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

### 環境

- OS: Arch Linux
- モバイルアプリ向けフレームワーク: Flutter 2
- プログラミング言語: [Dart](https://dart.dev/)
- IDE: Android Studio

## チュートリアル

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

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

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

```console
$ sudo pacman -Sy dart
$ # `/opt/dart-sdk` が作成されます
```

[AUR](https://aur.archlinux.org/) すなわち "Arch User Repository" には、[`dart-sdk-dev`](https://aur.archlinux.org/packages/dart-sdk-dev) というパッケージもあります。しかしここで私がインストールしたのは galaxy/community リポジトリにある `dart` です。

必須ではありませんが、[Kotlin](https://kotlinlang.org/) を追加でインストールすることも一つです。インストールするのが初めての場合、JDK のバージョンをたずねられます。デフォルトを選択すれば OK です:

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

さらに、必要に応じて、[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
$ sudo pacman -Sy android-tools
```

ご参考までに、Arch Linux は [Android に関する Wiki ページ](https://wiki.archlinux.org/title/android) を公開してくれています。

#### AUR パッケージ

AUR のパッケージをインストールします。

##### Flutter

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

##### Android SDK

特に何もする必要がありません。というのは、後ほど、Android Studio の初期設定時にインストールされるものだからです。

##### Android Studio

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

#### Flutter 向けパーミッション設定

`flutter` インストールで `/opt/flutter` が作成されます。そちら向けのパーミッションを設定します:

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

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

#### Flutter doctor の実行

Android Studio を起動します。初期設定が始まります。
IDE 使用情報の収集に協力するか等の回答を行ったあとに、複数回 "Next" をクリックします:

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

Android SDK とプラットフォーム向けツールのインストールが始まります。
ここではいくらか時間を要します。終わったら Android Studio をいったん終了します。

`--android-licenses` オプション付きで `flutter doctor` を実行しましょう。Android ライセンスのインストールを行うためです。承認確認が表示されます:

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

すべて承認したら、`flutter doctor` を、今度はオプション無しで実行しましょう。以下のように成功するでしょう:

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

なお環境によっては "Chrome が見付からない" 等の致命的では無いエラーが出力されることもあります。

### Prepare Android Studio

Android Studio をふたたび立ち上げます。"Plugins" メニューを選択してください:

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

"Flutter" プラグインをインストールしましょう。この時 "Dart" が自動的に追加で選択されます。両方をインストールするかどうか確認されます:

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

インストール後、"Restart IDE" ボタンを押して Android Studio を再起動しましょう。

Plugins の "Installed" に Flutter と Dart が表示されているはずです。

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

### プロジェクト作成

Android Studio の起動メニューの中に "Create New Flutter Project" があるはずです:

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

"Flutter Application" を選択します:

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

"Flutter SDK path" には `/opt/flutter` をセットします:

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

ゴールはもうすぐです。

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

### デモアプリを動かす

プロジェクトが作成されて、ディレクトリ構成がツリーで表示されます。
`lib/main.dart` が中心になるファイルです。

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

device (デバイス) を選択すると、エミュレーターが動き始めます。
上のメニューバーにある "Run 'main.dart' (Shift+F10)" ボタンを押します。"Loading Devices..." の右にある緑の三角のボタンです。

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

Flutter 2 アプリが動き始めました 😃

余談ですが、メニューから別のプロジェクトを新たに作成することも可能です。

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