Flutter 2 on Arch Linux: 始め方

nabbisen - Dec 31 '22 - - Dev Community

Summary

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

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 に構築しました。その流れを本記事で示します。

環境

  • OS: Arch Linux
  • モバイルアプリ向けフレームワーク: Flutter 2
  • プログラミング言語: Dart
  • IDE: Android Studio

チュートリアル

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

Pacman

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

$ sudo pacman -Sy dart
$ # `/opt/dart-sdk` が作成されます
Enter fullscreen mode Exit fullscreen mode

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

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

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

さらに、必要に応じて、android-tools をインストールすると役に立つかもしれません。こちらによって adb つまり Android Debug Bridge やその他のものが使えるようになります。

$ sudo pacman -Sy android-tools
Enter fullscreen mode Exit fullscreen mode

ご参考までに、Arch Linux は Android に関する Wiki ページ を公開してくれています。

AUR パッケージ

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

Flutter
$ git clone https://aur.archlinux.org/flutter.git
$ cd flutter
$ makepkg -si
$ cd ..
Enter fullscreen mode Exit fullscreen mode
Android SDK

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

Android Studio
$ git clone https://aur.archlinux.org/android-studio.git
$ cd android-studio
$ makepkg -si
$ cd ..
Enter fullscreen mode Exit fullscreen mode

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

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

$ sudo gpasswd -a <your-user> flutterusers
Enter fullscreen mode Exit fullscreen mode

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

Flutter doctor の実行

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

Android Studio SDK components Setup

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

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

$ flutter doctor --android-licenses
$ # choose "y", "y", ...
Enter fullscreen mode Exit fullscreen mode

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

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

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

Prepare Android Studio

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

Android Studio open Plugins

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

Android Studio Plugins menus

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

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

Android Studio Plugins Flutter and Dart

プロジェクト作成

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

Android Studio Create a project

"Flutter Application" を選択します:

Android Studio Create a Flutter Application

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

Android Studio new Flutter application

ゴールはもうすぐです。

Android Studio package name

デモアプリを動かす

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

Android Studio directory structure

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

Android Studio Flutter 2 demo app

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

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

Android Studio Create another flutter project

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .