DEV Community

nabbisen
nabbisen

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

1 1 1

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 🥁 🎶 🎵

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay