Flutter 3 on Devuan 4: 始め方
Tags: flutter, dart, mobile, devuan
Published: 2023-08-04 22:24:58

## はじめに

[Flutter](https://flutter.dev/) はモバイルアプリ・フレームワークのひとつです。[Google](https://www.google.com/) によって開発されていて、[Android](https://www.android.com/) も [iOS](https://www.apple.com/ios/) もサポートしています。クロス・プラットフォームであり、他のプラットフォームにも適用できるように更新と拡張が進められています。公式ウェブサイトで以下のようにうたわれています:

> Flutter はアプリ開発プロセスを変革します。単一のコードベースから、モバイル / Web / 組込み形式の、すばらしいアプリを、ビルド / テスト / デプロイできます。

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

私は開発環境を [Devuan](https://www.debian.org/) [GNU](https://www.gnu.org/)+[Linux](https://kernel.org/)という、[Debian](https://www.debian.org/) のフォークであり且つ [systemd](https://www.freedesktop.org/wiki/Software/systemd/) を使っていないディストロ上に、構築しました。[過去に行った Artix Linux における構築に近い流れでした](https://scqr.net/ja/blog/2023/01/02/flutter-3-on-arch-linux-getting-started/index.html)。

本記事でどのように実施したかを記します。
手動インストールの類であり、Debian のパッケージ・マネジメント・システム (`apt-get` など) は使いません。しかしながら、公式で配布されているパッケージのおかげで、複雑な手順にならずに済んでいます。

### 環境

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

## チュートリアル

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

### Android Studio (IDE) の取得

インストールおよび設定を行います。[こちらの記事](https://scqr.net/ja/blog/2023/07/31/android-studio-on-devuan-4-getting-started/index.html) が役に立つかもしれません。

### 依存パッケージのインストール

以下を実行します:

```console
$ doas apt install cmake clang ninja-build libgtk-3-dev
```

### Flutter と Dart SDK の取得

#### Flutter

公式 Docs の ["Install Flutter manually"](https://docs.flutter.dev/get-started/install/linux#install-flutter-manually) で `.tar.xz` 形式のパッケージを入手します。

![flutter-package-officially-distributed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nnx75d9twhvt3fi2jz1w.png)

展開します:

```console
$ tar xJf flutter_linux_3.xx.xx-stable.tar.xz
```

#### Dart SDK

公式サイト "Dart SDK archive" の ["Stable channel"](https://dart.dev/get-dart/archive#stable-channel) から `.zip` パッケージを入手します。

![dart-sdk-package-officially-distributed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ezur1yqyp0ds9rkvwy2y.png)

そして内容を展開します。

### `PATH` 環境変数の設定

それらを `PATH` に追加して IDE から使えるようにします:

```console
$ export PATH=(readlink -f dart-sdk/bin):"$PATH"
$ export PATH=(readlink -f flutter/bin):"$PATH"
```

上記において、実行の順番は重要です: まず `dart-sdk` が来て、それから `flutter` です。これは flutter のパス解決を dart よりも優先させるためです。
そうしておかないと、`flutter doctor` 実行時に、以下の警告が表示されるでしょう:

```
! Warning: `dart` on your path resolves to
  /(...)/dart-sdk/bin/dart, which is not inside your current
  Flutter SDK checkout at /(...)/flutter. Consider adding
  /(...)/flutter/bin to the front of your path.
```

#### ログイン時に `PATH` をセットする方法 (オプション)

少し寄り道になりますが、ログイン時に `PATH` 環境変数をセットしておくと便利かもしれませんね。
一例ですが `~/.profile` への追記で実現できます。

```sh
export PATH="$HOME/(...)/dart-sdk/bin:$PATH"
export PATH="$HOME/(...)/flutter/bin:$PATH"
```

さらに、他にも追加する変数がある場合は、以下のようなリストと For ループ文も使えます。

```sh
for x in \
    $HOME/(...)/(something to be added) \
    $HOME/(...)/dart-sdk \
    $HOME/(...)/flutter
do
    if [ -d "$x" ] ; then
        PATH="$x/bin:$PATH"
    fi
done
```

### Chromium を使う場合 `CHROME_EXECUTABLE` をセット (オプション)

`flutter doctor` によるテストをすべてパスするためには、Google Chrome を使うか `CHROME_EXECUTABLE` を定義しておく必要があります。
私は [Chromium](https://www.chromium.org/Home/) を使っていたので、以下を実行しました:

```console
$ export CHROME_EXECUTABLE=/usr/bin/chromium
```

### IDE の設定

トップメニューで "File" - "Settings" を開きます。そして "Plugins" を選びます。

"Flutter" と "Dart" をインストールします。

![ide-setup-flutter-dart-01](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/embm8lntjof0ndvip7gf.png)

Flutter インストールでは警告が表示されるでしょう。同意する必要があります:

![ide-setup-flutter-dart-02](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yyren6cf4mehy2gp41yv.png)

Flutter プラグインをインストールすると、"Restart" IDE (IDE の再起動) が求められます。

![ide-setup-flutter-dart-03](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/46vdeo3b8ulohigo9f76.png)

次は Android SDK Command-line Tools のインストールです。

"Settings" をふたたび開いて、"Languages & Frameworks" > "Android SDK" > "SDK Tools" と進みます。
"Android SDK Command-line Tools (latest)" にチェックを入れて "OK" を二度押します。

![ide-setup-flutter-dart-04](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jpf2z9g5op6zbyk2wnwx.png)

![ide-setup-flutter-dart-05](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w6bwxxtv1nz1p16x8rah.png)

ダウンロードが始まって、しばらくすると完了します:

![ide-setup-flutter-dart-06](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bvq9k84flhornf5yzaqg.png)

### `flutter doctor` の実行

あと 2 つやることがあります: Android ライセンスに同意することと、環境の最終チェックです。

いずれも `flutter doctor` で実施します。これは [`flutter` コマンド (英語)](https://docs.flutter.dev/reference/flutter-cli#flutter-commands) の一つです。
ターミナルを開いて、1 つ目のやることを実行しましょう:

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

一つ一つについて同意するかどうかをたずねられます。

次に環境のチェックです:

```console
$ flutter doctor
```

以下のように表示されましたか ?

```console
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.10.6, on Devuan GNU/Linux 4 (chimaera) 5.10.0-23-amd64, locale
    en_US.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Chrome - develop for the web
[✓] Linux toolchain - develop for Linux desktop
[✓] Android Studio (version 2022.3)
[✓] Connected device (2 available)
[✓] Network resources

• No issues found!
```

"• No issues found!" であれば、すべて OK です。
おめでとうございます 🎉🎉

#### Flutter によるテレメトリをオプト・アウト (オプション)

追加で掲題のオプト・アウトも行えます。以下を実行します:

```console
$ flutter --disable-telemetry
Analytics reporting disabled.
```

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

これで準備ができました。最初のプロジェクトをつくってみましょう !!

Android Studio を起動して、"New Flutter Project" をクリックします。

![flutter-project-01](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6j8riho7ugfzif2w7s72.png)

flutter と dart のパスを設定した後に、"Next" を押します:

![flutter-project-02](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hloc4qmx9u3dqam7m6u1.png)

![flutter-project-03](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/47hjr7y5qfrkfoki9z8q.png)

プロジェクト情報を設定して "Create" をクリックします:

![flutter-project-04](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j4ees8rinbxkg28b3z4v.png)

少し待つと完了します。

![flutter-project-05](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ympkvn6rgigym15jam6.png)

デフォルトのデモを実行してみましょう。"Device Manager" から仮想デバイスを立ち上げます:

![flutter-project-06](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3y5oxm22viadop7j6cfx.png)

次にトップメニューの一つ下の、中央やや右にある緑色の三角のボタンをクリックすると、アプリが起動します。
別の方法もあります。Shift + F10 を押すか、あるいはトップメニューで [Run] - [Run 'app'] を選びましょう。

![flutter-project-07](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/24zbgp6slczghuso3oe4.png)

flutter アプリが立ち上がりました !!

#### カスタマイズ例

以下はアプリを少しだけ変える試みです: タイトル文言を変えたり、色テーマを変えたりしています。(31, 34 行目)

![flutter-project-08](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gogijgfwdxaxpnljun34.png)

#### Android モバイル向け実行ファイルをビルドする

別のちょっとした試みもご紹介します。APK や App Bundle 形式でアプリをビルドできます:

![flutter-project-09](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rzftwmj7xd0gblyqnr8o.png)

...そして実行ファイルのかたちでかんたんにデリバリーできます ;)

![flutter-project-10](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/snq2uwffcj1yzzmlgj6t.png)

## おわりに

Flutter アプリ開発の準備が整いました。クロス・プラットフォーム開発を楽しめますように 💫

最後に少し余談です。本記事のインストール内容を実現する上では、他の方法もあるかもしれません。ただし [Flathub](https://flathub.org/) にはそれらしい [Flatpak](https://flatpak.org/) パッケージは見付かりませんでした。他の方法として考えられるシナリオは、例えば、どこかのリリース・チャネルを使用する、[Docker](https://www.docker.com/) / [Podman](https://podman.io/) を使う、などです。さらに、Devuan では無く systemd を採用している Linux ディストロを使っていて、それゆえ [Snaps](https://snapcraft.io/) (Snapd) が使える場合は、それを活用する方法もあるかもしれません。

🎶 🎵 🎸 Happy development 🥁 🎶 🎵