DEV Community

nabbisen
nabbisen

Posted on • Originally published at scqr.net

Flutter 3 on Arch Linux: 始め方

はじめに

Flutter はアプリ開発のためのフレームワークです。モバイルアプリを第一のターゲットにしています。クロスプラットフォーム対応しているため、AndroidiOS のどちらに向けても開発できます。公式サイトによると:

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

チュートリアル

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

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

Pacman

Dart

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

$ doas pacman -Sy dart
Enter fullscreen mode Exit fullscreen mode

出力は以下の通りでした:

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

ここで /opt/dart-sdk が作成されます。

Android プラットフォーム ツール (スキップ可)

必要に応じて android-tools をインストールします。これには adb すなわち Android Debug Bridge などが含まれています。
以下のコマンドを実行することで取得できます:

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

AUR

AUR すなわち Arch User Repository から、以下のパッケージをインストールします。

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

初めてのインストールの場合、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
Enter fullscreen mode Exit fullscreen mode

出力は以下の通りでした:

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

完了です。次へ行きましょう。

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

私が実行した時は android-studio-2021.3.1.17-1 のバージョンがインストールされました。次へ進みましょう。

$ cd ..
Enter fullscreen mode Exit fullscreen mode
Android SDK

開発のためには必要なものですが、ここでは何もする必要がありません。と言うのは、後ほど Android Studio の初期設定を行う時にインストールされるからです。

Flutter の設定

flutter インストール時に /opt/flutter が作成されるのですが、こちらへのアクセス権を付与しましょう:

$ doas usermod -a -G flutterusers <your-user>
Enter fullscreen mode Exit fullscreen mode

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

Andriod Studio の初期設定

Android Studio を起動します。

インポートするものがあるかをたずねられるかもしれません。私の場合、ありませんでした。

android studio import settings

初期セットアップ

初期設定が始まります。
操作の分析データの送信を許すかどうか等についてたずねられるでしょう。

それらが終わったら "Next" を何度か押します。

android studio welcome

android studio install type

android studio select ui theme

android studio verify settings

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

次の画面は License Agreement (ライセンス事項への同意) についてです。承諾するかどうかを聞かれます。"Accept" (承諾) を選択すると、"Next" を押して進めるようになります:

android studio license agreement

以下の "Finish" ボタンを押すと Android SDK とプラットフォームツールのインストールが始まります。

android studio emulator settings

確認が表示されたら "OK" を押します。

android studio downloading components

時間を要します。

android studio finishing downloading components

完了すると、以下のウィンドウが表示されます。

android studio create a new project

Plugins のインストール

"Plugins" メニューを選択します。"Flutter" の "Install" を押下します。"Dart" を同時にインストールすることを認めるよう言われるでしょう。さらに以下の内容を受け入れることも求められます:

android studio plugins

(私訳要約: サードパーティ製プラグインの中には、個人情報を取得しようとするものがあるかもしれません。その懸念に対しては、提供者のドキュメントを読むなどして、自己責任の下に確認する必要があります。)

"Restart IDE" ボタンを押下して Android Studio を再起動します。

完了すると、これらは "Installed" (インストール済) プラグインとして表示されるようになります:

android studio install flutter plugin

Flutter プロジェクトの作成

トップメニューに戻ります。"New Flutter Project" を選択しましょう:

android studio create a new flutter project

Flutter を選択します。"Flutter SDK path" に Flutter のパスである /opt/flutter/ をセットします:

android studio flutter sdk path

次へ進みます:

android studio flutter project settings

表示内容を確認して "Finish" を押します。するとプロジェクトのファイル群が生成されます。ディレクトリ構成がツリービューで確認できるようになるでしょう:

android studio project directory structure

良い感じですね。すぐにでも開発を始められそうです !! しかしお待ちください。

コーディングを始める前に、やるべきことがいくつか残っています。これらは flutter doctor 🏥 の "健康" のためです: Android SDK Command line tools (コマンドラインツール) をインストールします。

cmdline-tools のインストール

トップメニューの "File" を押して、それから "Settings..." を押します:

android studio file settings menu

"Android SDK" に進みます。(検索機能が便利なはずです。) そして "SDK Tools" を開きます。Android SDK Command line tools をインストールします:

android studio android sdk tools settings

android studio confirm change in android sdk tools

android studio sdk component installer

これで cmdline-tools がインストールされました。それによって flutter doctor の実行から Android ライセンスを承諾することができるようになりました。

Flutter doctor によるプロジェクト設定の検証

ターミナルを開きましょう。

まず、こちらを実行します:

$ git config --global --add safe.directory /opt/flutter
Enter fullscreen mode Exit fullscreen mode

これは flutter doctor 実行時の以下のエラーを抑制するためです:

fatal: detected dubious ownership in repository at '/opt/flutter'
Enter fullscreen mode Exit fullscreen mode

次に flutter doctor--android-licenses オプション付きで実行します。これは Android ライセンスを承諾するためです:

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

それぞれ承諾するかどうかをたずねられます:

[=======================================] 100% Computing updates...             
5 of 6 SDK package licenses not accepted.
Review licenses that have not been accepted (y/N)? y
Enter fullscreen mode Exit fullscreen mode

出力内容の例は以下の通りです。内容に問題が無ければ、すべての質問で "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
Enter fullscreen mode Exit fullscreen mode

Flutter doctor による最終確認

上記のすべてを承諾した後は、flutter doctor をオプション無しで実行します。実行自体は正常終了するでしょう:

$ flutter doctor
Enter fullscreen mode Exit fullscreen mode

出力は以下の通りでした:

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

おやおや、問題が検出されてしまいました。これらはパッケージのインストールまたは環境変数の指定で解決できます。

追加パッケージのインストール

$ doas pacman -Sy clang cmake ninja base-devel
Enter fullscreen mode Exit fullscreen mode

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

Flutter doctor 成功

google-chrome をインストールしていなくて、それでもすべてのチェックをパスしたい時は、CHROME_EXECUTABLE に何かのブラウザを紐付ける必要があります。例えば Chromium があるのであれば:

$ env CHROME_EXECUTABLE=chromium \
      flutter doctor
Enter fullscreen mode Exit fullscreen mode

出力は以下の通りでした:

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

やりました。

デモアプリの実行

さあ、開発するための準備ができました。Android Studio のプロジェクトに戻りましょう。

lib/main.dart が中心になるファイルです。

android studio project main.dart

このアプリは、実は生成された時点で実行できるようになっています。

device のボックスをクリックしてください。"<no device selected>" と表示されているところです。そして "Open Android Emulator" を選択してください:

android studio select device

Emulator (エミュレーター、動作の疑似再現環境) が立ち上がります。しかしまだプロジェクトのアプリはインストールされていない状態です。

次に緑の三角形をクリックします。Emulator ビューの上にあります。あるいは別の方法として、トップメニューから実行もできます: "Run" - "Run 'main.dart' (Shift+F10)" を押下します。

android studio run main.dart

Run ビューが IDE の下の方で開きます。次のような出力がなされます:

android studio gradle task starts

Running "flutter pub get" in <project-name>...
Launching lib/main.dart on sdk gphone64 x86 64 in debug mode...
Running Gradle task 'assembleDebug'...
Enter fullscreen mode Exit fullscreen mode

おそらくかなりの時間が掛かります。終わると、次のような内容が出力されます:

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

加えて Emulator の表示が変わっているでしょう:

flutter demo app

ボタンを押すことでカウントアップできます。

おわりに

さあ、開発も (プロダクション向けではまだありませんが) デプロイもできる、Flutter プロジェクトができました。

さらに良い知らせがあります。

Flutter は hot reload (ホットリロード) に対応しています。
例えば lib/main.dart の 25 行目を以下のように編集して、保存してみましょう:

-         primarySwatch: Colors.blue,
+         primarySwatch: Colors.deepPurple,
Enter fullscreen mode Exit fullscreen mode

Emulator ビューにすぐさま変化が現れるでしょう:

flutter demo app hot reloading

すばらしいですね。Flutter 3 アプリですごいことをする準備が整いました 😃

Top comments (0)