DEV Community

nabbisen
nabbisen

Posted on • Edited on • Originally published at scqr.net

Flutter 3 on Devuan 4: 始め方

はじめに

Flutter はモバイルアプリ・フレームワークのひとつです。Google によって開発されていて、AndroidiOS もサポートしています。クロス・プラットフォームであり、他のプラットフォームにも適用できるように更新と拡張が進められています。公式ウェブサイトで以下のようにうたわれています:

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

2022 年 5 月 12 日に、最新のメジャー・バージョンである 3 がリリースされました。

私は開発環境を Devuan GNU+Linuxという、Debian のフォークであり且つ systemd を使っていないディストロ上に、構築しました。過去に行った Artix Linux における構築に近い流れでした

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

環境

  • OS: Devuan 4 (Chimaera)
  • アプリ・フレームワーク: Flutter 3
  • プログラミング言語: Dart
  • IDE: Android Studio 2022.3.1.18

チュートリアル

doasOpenBSD 由来 のものですが、いずれも sudo に置き換え可能です。

Android Studio (IDE) の取得

インストールおよび設定を行います。こちらの記事 が役に立つかもしれません。

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

以下を実行します:

$ doas apt install cmake clang ninja-build libgtk-3-dev
Enter fullscreen mode Exit fullscreen mode

Flutter と Dart SDK の取得

Flutter

公式 Docs の "Install Flutter manually".tar.xz 形式のパッケージを入手します。

flutter-package-officially-distributed

展開します:

$ tar xJf flutter_linux_3.xx.xx-stable.tar.xz
Enter fullscreen mode Exit fullscreen mode

Dart SDK

公式サイト "Dart SDK archive" の "Stable channel" から .zip パッケージを入手します。

dart-sdk-package-officially-distributed

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

PATH 環境変数の設定

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

$ export PATH=(readlink -f dart-sdk/bin):"$PATH"
$ export PATH=(readlink -f flutter/bin):"$PATH"
Enter fullscreen mode Exit fullscreen mode

上記において、実行の順番は重要です: まず 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.
Enter fullscreen mode Exit fullscreen mode

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

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

export PATH="$HOME/(...)/dart-sdk/bin:$PATH"
export PATH="$HOME/(...)/flutter/bin:$PATH"
Enter fullscreen mode Exit fullscreen mode

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

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

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

flutter doctor によるテストをすべてパスするためには、Google Chrome を使うか CHROME_EXECUTABLE を定義しておく必要があります。
私は Chromium を使っていたので、以下を実行しました:

$ export CHROME_EXECUTABLE=/usr/bin/chromium
Enter fullscreen mode Exit fullscreen mode

IDE の設定

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

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

ide-setup-flutter-dart-01

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

ide-setup-flutter-dart-02

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

ide-setup-flutter-dart-03

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

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

ide-setup-flutter-dart-04

ide-setup-flutter-dart-05

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

ide-setup-flutter-dart-06

flutter doctor の実行

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

いずれも flutter doctor で実施します。これは flutter コマンド (英語) の一つです。
ターミナルを開いて、1 つ目のやることを実行しましょう:

$ flutter doctor --android-licenses
Enter fullscreen mode Exit fullscreen mode

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

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

$ flutter doctor
Enter fullscreen mode Exit fullscreen mode

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

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!
Enter fullscreen mode Exit fullscreen mode

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

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

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

$ flutter --disable-telemetry
Analytics reporting disabled.
Enter fullscreen mode Exit fullscreen mode

Flutter プロジェクトの作成

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

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

flutter-project-01

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

flutter-project-02

flutter-project-03

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

flutter-project-04

少し待つと完了します。

flutter-project-05

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

flutter-project-06

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

flutter-project-07

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

カスタマイズ例

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

flutter-project-08

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

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

flutter-project-09

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

flutter-project-10

おわりに

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

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

🎶 🎵 🎸 Happy development 🥁 🎶 🎵

Top comments (0)