nabbisenはじめに
Flutter はアプリ開発のためのフレームワークです。モバイルアプリを第一のターゲットにしています。クロスプラットフォーム対応しているため、Android と iOS のどちらに向けても開発できます。公式サイトによると:
Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.
(私訳: Google の UI ツールキットです。すばらしい、ネイティヴコードにコンパイルされたアプリケーションを構築できます。モバイル / Web / デスクトップのすべてに単一のコードベースで対応できます。)
2022 年 5 月 12 日に、最新のメジャーバージョンである 3 がリリースされました。
私は Arch Linux をベースにした Artix Linux という OS 上に、Flutter の 公式ドキュメント に沿って開発環境を構築しました。この記事ではその流れを示します。
ご参考までに、Arch Linux から Android に関するオリジナルの Wiki ページ が公開されています。
環境
- OS: Artix Linux
- アプリ フレームワーク: Flutter 3
- プログラミング言語: Dart
- IDE: Android Studio
チュートリアル
doas は OpenBSD 由来 のものですが、いずれも sudo に置き換え可能です。
必要パッケージのインストール
Pacman
Dart
Dart をインストールします:
$ doas pacman -Sy dart
出力は以下の通りでした:
:: Synchronizing package databases...
(...)
resolving dependencies...
looking for conflicting packages...
Packages (1) dart-2.18.6-1
Total Download Size: 118.65 MiB
Total Installed Size: 500.47 MiB
:: Proceed with installation? [Y/n] y
(...)
:: Processing package changes...
(1/1) installing dart [######################] 100%
ここで /opt/dart-sdk が作成されます。
Android プラットフォーム ツール (スキップ可)
必要に応じて android-tools をインストールします。これには adb すなわち Android Debug Bridge などが含まれています。
以下のコマンドを実行することで取得できます:
$ doas pacman -Sy android-tools
AUR
AUR すなわち Arch User Repository から、以下のパッケージをインストールします。
Flutter
$ git clone https://aur.archlinux.org/flutter.git
$ cd flutter
$ makepkg -sci
初めてのインストールの場合、Java のバージョンをたずねられるかもしれません。特に避ける理由が無ければ、デフォルトを選択しましょう:
:: There are 7 providers available for java-environment:
:: Repository world
1) jdk-openjdk 2) jdk11-openjdk 3) jdk8-openjdk
:: Repository extra
4) jdk-openjdk 5) jdk11-openjdk 6) jdk17-openjdk 7) jdk8-openjdk
Enter a number (default=1):
:: There are 2 providers available for jre19-openjdk=19.0.1.u10-3:
:: Repository world
1) jre-openjdk
:: Repository extra
2) jre-openjdk
Enter a number (default=1):
:: There are 2 providers available for jre19-openjdk-headless=19.0.1.u10-3:
:: Repository world
1) jre-openjdk-headless
:: Repository extra
2) jre-openjdk-headless
Enter a number (default=1):
looking for conflicting packages...
Packages (7) java-environment-common-3-3.1 java-runtime-common-3-3.1
jdk-openjdk-19.0.1.u10-3 jre-openjdk-19.0.1.u10-3
jre-openjdk-headless-19.0.1.u10-3 unzip-6.0-19 flutter-3.3.10-1
Total Download Size: 117.10 MiB
Total Installed Size: 1622.78 MiB
:: Proceed with installation? [Y/n] y
出力は以下の通りでした:
:: Retrieving packages...
jdk-openjdk-19.0... 78.7 MiB 3.67 MiB/s 00:21 [######################] 100%
jre-openjdk-head... 38.1 MiB 4.00 MiB/s 00:10 [######################] 100%
jre-openjdk-19.0... 181.6 KiB 439 KiB/s 00:00 [######################] 100%
(...)
(7/7) installing flutter [######################] 100%
Flutter was installed on /opt/flutter
In case you encounter problems using Flutter as regular user, add your user into the group flutterusers:
gpasswd -a ${USER} flutterusers
Re-login your terminal in to the group flutterusers:
newgrp flutterusers
Run the following command to see if there are any dependencies you need to install to complete the setup (for verbose output, add the -v flag):
flutter doctor
Optional dependencies for flutter
android-sdk
android-studio
intellij-idea-community-edition
intellij-idea-ultimate-edition
ninja
perl [installed]
python [installed]
:: Running post-transaction hooks...
(1/2) Updating icon theme caches...
(2/2) Updating the desktop file MIME type cache...
==> Cleaning up...
完了です。次へ行きましょう。
$ cd ..
Android Studio
$ git clone https://aur.archlinux.org/android-studio.git
$ cd android-studio
$ makepkg -sci
私が実行した時は android-studio-2021.3.1.17-1 のバージョンがインストールされました。次へ進みましょう。
$ cd ..
Android SDK
開発のためには必要なものですが、ここでは何もする必要がありません。と言うのは、後ほど Android Studio の初期設定を行う時にインストールされるからです。
Flutter の設定
flutter インストール時に /opt/flutter が作成されるのですが、こちらへのアクセス権を付与しましょう:
$ doas usermod -a -G flutterusers <your-user>
ログアウトして、ログインします。
Andriod Studio の初期設定
Android Studio を起動します。
インポートするものがあるかをたずねられるかもしれません。私の場合、ありませんでした。
初期セットアップ
初期設定が始まります。
操作の分析データの送信を許すかどうか等についてたずねられるでしょう。
それらが終わったら "Next" を何度か押します。
ここで Current Settings として実際に表示されたのは以下です:
Setup Type: Standard
SDK Folder: /home/<your-user>/Android/Sdk
JDK Location: /opt/android-studio/jre
Total Download Size: 1.85 GB
SDK Components to Download:
Android Emulator
280 MB
Android SDK Build-Tools 33.0.1
53.4 MB
Android SDK Platform 33
64.2 MB
Android SDK Platform-Tools
7.16 MB
Google APIs Intel x86 Atom_64 System Image
1.41 GB
SDK Patch Applier v4
1.74 MB
Sources for Android 33
46.9 MB
次の画面は License Agreement (ライセンス事項への同意) についてです。承諾するかどうかを聞かれます。"Accept" (承諾) を選択すると、"Next" を押して進めるようになります:
以下の "Finish" ボタンを押すと Android SDK とプラットフォームツールのインストールが始まります。
確認が表示されたら "OK" を押します。
時間を要します。
完了すると、以下のウィンドウが表示されます。
Plugins のインストール
"Plugins" メニューを選択します。"Flutter" の "Install" を押下します。"Dart" を同時にインストールすることを認めるよう言われるでしょう。さらに以下の内容を受け入れることも求められます:
(私訳要約: サードパーティ製プラグインの中には、個人情報を取得しようとするものがあるかもしれません。その懸念に対しては、提供者のドキュメントを読むなどして、自己責任の下に確認する必要があります。)
"Restart IDE" ボタンを押下して Android Studio を再起動します。
完了すると、これらは "Installed" (インストール済) プラグインとして表示されるようになります:
Flutter プロジェクトの作成
トップメニューに戻ります。"New Flutter Project" を選択しましょう:
Flutter を選択します。"Flutter SDK path" に Flutter のパスである /opt/flutter/ をセットします:
次へ進みます:
表示内容を確認して "Finish" を押します。するとプロジェクトのファイル群が生成されます。ディレクトリ構成がツリービューで確認できるようになるでしょう:
良い感じですね。すぐにでも開発を始められそうです !! しかしお待ちください。
コーディングを始める前に、やるべきことがいくつか残っています。これらは flutter doctor 🏥 の "健康" のためです: Android SDK Command line tools (コマンドラインツール) をインストールします。
cmdline-tools のインストール
トップメニューの "File" を押して、それから "Settings..." を押します:
"Android SDK" に進みます。(検索機能が便利なはずです。) そして "SDK Tools" を開きます。Android SDK Command line tools をインストールします:
これで cmdline-tools がインストールされました。それによって flutter doctor の実行から Android ライセンスを承諾することができるようになりました。
Flutter doctor によるプロジェクト設定の検証
ターミナルを開きましょう。
まず、こちらを実行します:
$ git config --global --add safe.directory /opt/flutter
これは flutter doctor 実行時の以下のエラーを抑制するためです:
fatal: detected dubious ownership in repository at '/opt/flutter'
次に flutter doctor を --android-licenses オプション付きで実行します。これは Android ライセンスを承諾するためです:
$ flutter doctor --android-licenses
それぞれ承諾するかどうかをたずねられます:
[=======================================] 100% Computing updates...
5 of 6 SDK package licenses not accepted.
Review licenses that have not been accepted (y/N)? y
出力内容の例は以下の通りです。内容に問題が無ければ、すべての質問で "y"(es) を選択しましょう。
[=======================================] 100% Computing updates...
5 of 6 SDK package licenses not accepted.
Review licenses that have not been accepted (y/N)? y
1/5: License
(...)
---------------------------------------
Accept? (y/N): y
All SDK package licenses accepted
Flutter doctor による最終確認
上記のすべてを承諾した後は、flutter doctor をオプション無しで実行します。実行自体は正常終了するでしょう:
$ flutter doctor
出力は以下の通りでした:
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.3.10, on Artix Linux 6.0.12-artix1-1, locale en_US.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
[✗] Chrome - develop for the web (Cannot find Chrome executable at google-chrome)
! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[✗] Linux toolchain - develop for Linux desktop
✗ clang++ is required for Linux development.
It is likely available from your distribution (e.g.: apt install clang), or can be downloaded from https://releases.llvm.org/
✗ CMake is required for Linux development.
It is likely available from your distribution (e.g.: apt install cmake), or can be downloaded from https://cmake.org/download/
✗ ninja is required for Linux development.
It is likely available from your distribution (e.g.: apt install ninja-build), or can be downloaded from
https://github.com/ninja-build/ninja/releases
✗ pkg-config is required for Linux development.
It is likely available from your distribution (e.g.: apt install pkg-config), or can be downloaded from
https://www.freedesktop.org/wiki/Software/pkg-config/
[✓] Android Studio (version 2021.3)
[✓] Connected device (1 available)
[✓] HTTP Host Availability
! Doctor found issues in 2 categories.
おやおや、問題が検出されてしまいました。これらはパッケージのインストールまたは環境変数の指定で解決できます。
追加パッケージのインストール
$ doas pacman -Sy clang cmake ninja base-devel
ここで base-devel については pkgconf を選択します:
:: There are 27 members in group base-devel:
:: Repository system
1) autoconf 2) automake 3) binutils 4) bison 5) debugedit 6) esysusers
7) etmpfiles 8) fakeroot 9) file 10) findutils 11) flex 12) gawk
13) gcc 14) gettext 15) grep 16) groff 17) gzip 18) libtool 19) m4
20) make 21) pacman 22) patch 23) pkgconf 24) sed 25) sudo 26) texinfo
27) which
Enter a selection (default=all): 23
Flutter doctor 成功
google-chrome をインストールしていなくて、それでもすべてのチェックをパスしたい時は、CHROME_EXECUTABLE に何かのブラウザを紐付ける必要があります。例えば Chromium があるのであれば:
$ env CHROME_EXECUTABLE=chromium \
flutter doctor
出力は以下の通りでした:
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.3.10, on Artix Linux 6.0.12-artix1-1, locale
en_US.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
[✓] Chrome - develop for the web
[✓] Linux toolchain - develop for Linux desktop
[✓] Android Studio (version 2021.3)
[✓] Connected device (2 available)
[✓] HTTP Host Availability
• No issues found!
やりました。
デモアプリの実行
さあ、開発するための準備ができました。Android Studio のプロジェクトに戻りましょう。
lib/main.dart が中心になるファイルです。
このアプリは、実は生成された時点で実行できるようになっています。
device のボックスをクリックしてください。"<no device selected>" と表示されているところです。そして "Open Android Emulator" を選択してください:
Emulator (エミュレーター、動作の疑似再現環境) が立ち上がります。しかしまだプロジェクトのアプリはインストールされていない状態です。
次に緑の三角形をクリックします。Emulator ビューの上にあります。あるいは別の方法として、トップメニューから実行もできます: "Run" - "Run 'main.dart' (Shift+F10)" を押下します。
Run ビューが IDE の下の方で開きます。次のような出力がなされます:
Running "flutter pub get" in <project-name>...
Launching lib/main.dart on sdk gphone64 x86 64 in debug mode...
Running Gradle task 'assembleDebug'...
おそらくかなりの時間が掛かります。終わると、次のような内容が出力されます:
✓ Built build/app/outputs/flutter-apk/app-debug.apk.
Installing build/app/outputs/flutter-apk/app.apk...
Debug service listening on ws://127.0.0.1:46365/lxkuYf04cFo=/ws
Syncing files to device sdk gphone64 x86 64...
E/SurfaceSyncer( 6647): Failed to find sync for id=0
W/Parcel ( 6647): Expecting binder but got null!
加えて Emulator の表示が変わっているでしょう:
ボタンを押すことでカウントアップできます。
おわりに
さあ、開発も (プロダクション向けではまだありませんが) デプロイもできる、Flutter プロジェクトができました。
さらに良い知らせがあります。
Flutter は hot reload (ホットリロード) に対応しています。
例えば lib/main.dart の 25 行目を以下のように編集して、保存してみましょう:
- primarySwatch: Colors.blue,
+ primarySwatch: Colors.deepPurple,
Emulator ビューにすぐさま変化が現れるでしょう:
すばらしいですね。Flutter 3 アプリですごいことをする準備が整いました 😃
