DEV Community

nabbisen
nabbisen

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

Flutter 2 on Arch Linux: 始め方

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

Top comments (0)