Flutter / Dart 言語で Android 用開発環境を構築する / 桃缶食べたい。

Flutter / Dart 言語で Android 用開発環境を構築する

Flutter の開発環境を構築する

Flutter プロジェクトを作成する

Flutter プロジェクトを実行する

まとめ

Flutter をインストールする

Android SDK をインストールする

Flutter / Dart プラグインをインストールする

Android エミュレーターを作成する

Flutter は Google 製のハイクオリティな UI フレームワークです。Android と iOS の 2 つのプラットフォームで同時に開発ができ、そのため使用言語は Java でも Swift でもなく、Dart という言語になります。クロスプラットフォーム開発という点では以前試した Ionic 2 と同じようなコンセプトにも聞こえますが、Ionic 2 と異なりネイティブアプリの開発を前提としているようです。

ハイクオリティというからにはどのくらいハイクオリティなのか試してやろうということで、今回は開発環境の構築からアプリを起動するところまでをやってみたいと思います。
ちなみに開発環境はいつもどおり Fedora 26 64bit 版です。なので iOS でアプリを動かすのはいったんおいておいて、Android アプリを起動するところまでがゴールとなります。公式サイトに環境毎の開発環境構築手順が載っているので、Linux 用のドキュメントをベースに進めてみます。

Flutter での開発環境を構築するには、Flutter の他に Android や iOS の開発環境も準備しておく必要があります。
冒頭に記載したとおり、今回は Android アプリを動かすことを目標としているので、Android Studio を使って Android 版の開発環境だけを作っていきます。

それでは Flutter からインストールしていきます。
公式サイトからLinux 用 Flutterをダウンロードし、展開します。現時点での最新バージョンは 0.2.8-beta でした。

$ wget https://storage.googleapis.com/flutter_infra/releases/beta/linux/flutter_linux_v0.2.8-beta.tar.xz
$ tar xf flutter_linux_v0.2.8-beta.tar.xz
# mv flutter /usr/local/

ここでは展開した flutter を /usr/local 配下に配置しています。

flutter/bin 配下に実行バイナリがあるので、これを呼び出せるようパスを通します。
~/.bash_profile に以下のように追記しました。追記後は source コマンドも忘れずに。

FLUTTER_HOME=/usr/local/flutter

PATH=$PATH:$FLUTTER_HOME/bin

パスを通したら、--version オプションを指定して flutter コマンドを実行してみます。
以下のようにバージョン情報が表示されれば完了です。

$ flutter --version
Flutter 0.2.8 • channel beta • https://github.com/flutter/flutter.git
Framework • revision b397406561 (2 weeks ago) • 2018-04-02 13:53:20 -0700
Engine • revision c903c217a1
Tools • Dart 2.0.0-dev.43.0.flutter-52afcba357

Android SDK は Android Studio の公式サイトで入手できます。Android SDK 単体でも配布されているのかもしれませんが、Android Studio をインストールしておけばそれから Android SDK もインストールできます。Android Studio はどうせコードを書くのに使うので、素直に入れておきます。

Linux 用最新 Android Studio をダウンロードし、適当なディレクトリに配置しておきます。これも Flutter と同じく /usr/local 配下に置くことにします。

$ wget https://dl.google.com/dl/android/studio/ide-zips/3.1.1.0/android-studio-ide-173.4697961-linux.zip?hl=ja
$ unzip android-studio-ide-173.4697961-linux.zip
# mv android-studio /usr/local/

また、環境変数 $ANDROID_HOME を設定しておきます。ANDROID_HOME は Android SDK の配置されるディレクトリで、Android Studio のインストールディレクトリとは別に用意します。

# mkdir /usr/local/android
# chown momokan.momokan /usr/local/android

用意したディレクトリを $ANDROID_HOME として設定します。~/.bash_profile に以下のように追記しました。source コマンドも忘れずに。

ANDROID_HOME=/usr/local/android

PATH=$PATH:$ANDROID_HOME/bin

export ANDROID_HOME

さらに、公式ドキュメントによると Fedora 64 bit 版を使う場合、以下のパッケージが必要になるとのことなので、yum で入れておきます。

# yum install zlib.i686 ncurses-libs.i686 bzip2-libs.i686

配置した Android Studio ディレクトリの bin/studio.sh を実行すると、Android Studio が起動し、セットアップウィザードが開始されます。途中で設定した $ANDROID_HOME 配下に Android SDK がダウンロードされ、インストールされます。
Wellcome to Android Studio というダイアログが出れば、いったん完了です。

Android Studio で Dart 言語による Flutter 開発をするため、Android Studio に Flutter プラグインと Dart プラグインをインストールします。

Android Studio のさきほどの Wellcome to Android Studio ダイアログにて、右下の Configure > Plugins からプラグインのインストールができます。
既に何らかのプロジェクトが作られている等で Wellcome to Android Studio ダイアログが表示されない場合は、メニューの File > Settings > Plugins からもインストール可能です。
Browse repositories... ボタンを押すとプラグインの検索ダイアログが表示されるので Flutter を探してインストールしましょう。

Flutter プラグインをインストールすると、同時に Dart プラグインをインストールするか聞かれるので、インストールしておきます。プラグインのインストール後は Android Studio の再起動が必要になります。

これで Android Studio で Flutter プロジェクトが作れるようになります。さきほどの Wellcome to Android Studio ダイアログや、メニューの File > New > New Flutter Project... から Flutter プロジェクトを作成します。
Flutter プロジェクトには Flutter アプリケーション、Flutter プラグイン、Flutter パッケージの 3 種類があるようです。他の 2 つはそれ自体で動くアプリという感じではないので、Flutter アプリケーションを選択しておきます。

他にもプロジェクト名やプロジェクトの場所などを求められるので、適切に入力してください。プロジェクトを作成すると、lib/main.dart としてソースコードが生成されます。

Flutter アプリケーションを実行するには、Android アプリと同じく開発用の Android エミュレーターが利用できます。なので最初にこれを作っておきます。
本当は開発環境構築の項でまとめて作っておきたかったのですが、例の Wellcome to Android Studio ダイアログから作る方法がいまいちよくわからにので、ここで作っておきます。作った Android エミュレーターは各 Flutter プロジェクトで使いまわせるので、プロジェクト毎に作成する必要はありません。

メニューの Tools > AVD Manager から、Create Virtual Device... ボタンを押します。
Android エミュレーターのプリセットが一覧に表示されるので、適当に Pixel 等を選択します。
次にシステムイメージを選択します。一覧から適当に Oreo (API level 26, ABI x86_64) などを選択しましょう。まだダウンロードされていないシステムイメージが選ばれると、ここでダウロードされます。

といいつつ、この Android エミュレーターの準備が一番のハマりポイントでした。私の開発環境が特殊なだけなのかもしれませんが、けっこう手こずったので、ポイントを記載しておきます。

私の環境は Fedora 26（64 bit 版）ですが、ABI x86 のシステムイメージは動きませんでした。動かす方法もあるのでしょうが、わざわざ 32 bit を動かすのもアレなので、ABI が x86_64 のシステムイメージを選択しています。

また、VMware Player などの仮想環境で開発する場合、VM の CPU の設定で VT-x (Intel Virtualization Technology) が有効になっているか確認してください。VT-x か SVM を利用しない場合、低速のエミュレーターを利用しなければならないようです。
VMware Player では、仮想マシンの編集から以下のようにハードウェアタブのプロセッサの設定で「Intel VT-x/EPT または AMD-V/RVI を仮想化（V）」欄にチェックをいれておけば VT-x が有効化されます。

加えて、システムイメージなどをダウンロードするのに /tmp が使われるのですが、ここの領域を使い切ってしまいエラーになるということがありました。
/tmp の空き容量不足で失敗した場合には、以下のコマンドで /tmp の容量を増やすなどすると解決する場合があります。

# mount -o remount,size=10G,noatime /tmp

そもそも / 配下に空き容量がなければディスクを増やすしかないのですが、まだ使えるディスクスペースがあるなら、このように /tmp だけを一時的に拡張することができます。OS を再起動するまでは有効です。

自動生成されたコードをそのままに Android エミュレーターで実行してみます。
Android Studio の右上のほうにアプリケーションの実行環境を選ぶプルダウンがあるので、ここで作成した Android エミュレーターを選びます。選択するとすぐに Android エミュレーターが起動します。

おそらく USB 接続などでデバック用の実機をつないでいる場合は、ここで実機を選べるのだと思います。

実行環境の選択プルダウンの右隣にあるのが実行するアプリケーションを選ぶプルダウンです。まだプロジェクトが 1 つしかないので、特になにも変更しなくていいはずです。

そして実行するアプリケーションの選択プルダウンの右隣に実行ボタンがあるので、これを押して実行してみましょう。
Android Studio では実行時に gradle が動くので、gradle 初回実行時の依存性解決などが走り、そのまま Flutter によるアプリケーションが動くはずです。

<<2024, 11>>

わりといろいろ用意しなければ開発環境を作れないのですが、やっていることはほとんどが Flutter 用というよりは Android 用の作業でした。Flutter 自体は、Flutter 本体と Android Studio への Flutter / Dart プラグインのインストールだけです。普段 Android 開発を行っている方にとっては追加で Flutter だけ入れればすぐに使えるのだと思います。iOS 用の開発環境も公式サイトにドキュメントがあって、軽く流し読みした感じだと、おそらく同じような感じなんじゃないかと思います。

そして Dart のソースコードには一切触れられなかったので、Flutter の使い勝手についてはもう少し触ってみたいと思います。
Flutter, Dart コメント (0) 2018/04/19 13:24:41