Flutterでいくつかアプリを作ってみたので、「こういうことをしたいときはどうするの？」といった内容を逆引き的な感じで記事にしていきたいと思います。

いくつか記事が溜まったらマガジン形式にしようかな？なんて思ってますが、それまでは反応を見ながら単記事で公開していきます。

はじめに

今回は実際にコードを書き始める前段階として、作ったばかりのプロジェクトを実機向けにリリース用ビルドを作成して動かしてみたいと思います。

Flutterで作ったアプリは十分高速に動くのですが、デバッグ環境ではイマイチ期待した速度になりません。
「VMで動いてるから」「独自のUI環境だから」という前評判を見た人が、試しにプロジェクトを作ってデバッグ環境で動かしてみると「やっぱりもっさりしてるね」と感じるかもしれません。

少し触っただけでそんな間違った評価にならないよう、この記事を書いてみました。

・プロジェクトの作成と実機デバッグ
・リリースビルド
・実機へのインストール
・デバッグビルドとリリースビルドの起動差

FlutterやAndroidStudioのインストール、AndroidやiOSへ自前アプリをインストールできるようにする方法などはいろいろ記事がありますので割愛してます。

執筆時点でのFlutterバージョン
Flutter 0.8.2 • channel beta • https://github.com/flutter/flutter.git
Framework • revision 5ab9e70727 (3 weeks ago) • 2018-09-07 12:33:05 -0700
Engine • revision 58a1894a1c
Tools • Dart 2.1.0-dev.3.1.flutter-760a9690c2

プロジェクトの作成と実機デバッグ

まずは新しくプロジェクトを作ります。
iOSやAndroidのソースを書かなくてはいけない機会はそれほどないとは思いますが、勢いがあるSwiftとKotlinを指定しています。

$ flutter create -i swift -a kotlin -description "Flutter Drive" flutter_drive

コマンドの実行完了後、出来上がったプロジェクトフォルダのlibに入っているmain.dartをVisualStudioCodeで開きます。

この状態でも「F5」で実機デバッグができますが、ほぼ空の状態のプロジェクトなのに起動速度も画面遷移も正直いって微妙です。原因はデバッグ情報付きのビルドとなっているからです。

リリースビルド

ということで、リリースビルドで実際のスピードを試してみましょう。

ビルド方法は下記のコマンドを入力するだけです。
iOS用とAndroid用でオプションが別れてますので、そこだけが注意点です。

下記はAndroid用なので、iOS向けにビルドするときは「apk」を「ios」に変えてください。
（iOS用ビルドにはAppleのデベロッパー契約が必要なはずです）

$ flutter build apk

Initializing gradle...                                       1.5s
Resolving dependencies...                                    7.7s
Running 'gradlew assembleRelease'...                        50.7s
Built build\app\outputs\apk\release\app-release.apk (5.6MB).

これでプロジェクトフォルダ配下の「build\app\outputs\apk\release」に「app-release.apk」という5.6MBのバイナリが作成されました。

「F5」でのデバッグビルドは「コンパイル ～ インストール ～ 起動」まで一連の流れで進みますが、リリースビルドの際はインストールが別途必要です。インストールが完了した後に画面タッチでの起動も、もちろん必須です。

実機へのインストール

PCに接続しているスマートフォンが1台でPCでシミュレーターを起動していなければ、下記コマンドだけでインストールすることができます。

$ flutter install

もしシミュレーターを起動していたり、PCに何台もスマートフォンを接続している場合はインストール先の指定が必要になります。

まず、下記のコマンドでつながっているデバイスをリストアップしてデバイスIDを特定します。

$ flutter devices

2 connected devices:
SO 02J                    • QV7006HH0D    • android-arm64 • Android 8.0.0 (API 26)
Android SDK built for x86 • emulator-5554 • android-x86   • Android 7.0 (API 24) (emulator)

今回は実機向けとして、「SO 02J」へインストールさせてみます。

特定のデバイスを指定してインストールする場合は「SO 02J」であれば「QV7006HH0D」を利用するわけですが、デバイス名が長くて入力しづらいです。

コピペでも良いのですが、もっといい方法があります。下記のようにデバイス名の先頭数文字だけを指定できるのです。

$ flutter install -d q

Initializing gradle...                                       1.3s
Resolving dependencies...                                    4.1s
Installing app.apk to SO 02J...
Uninstalling old version...
Installing build\app\outputs\apk\app.apk...                  5.1s

これだけで、インストールしてくれます。
なにやら新しいiOSの場合はデバイスIDがコロコロ変わるみたいですが、この入力であればそんなに面倒なことにはならずに済みそうです。

さて、細かい人はビルドされたバイナリのパスが違うんじゃないの？？なんて気づいた方もいるかと思います。

どうやらFlutterはビルド時に「release」と「debug」を使い分け、その際に1階層上の「app」に最後にビルドしたバイナリを保存する仕組みみたいです。

ここは少し注意が必要かもしれませんね。

デバッグビルドとリリースビルドの差

最後にデバッグビルドとリリースビルドで、実際にどのくらい差が出るのか動画を乗せておきます。

デバッグビルド

リリースビルド

起動速度が全然違いますよね？

プロジェクト作りたてでこのくらい違うので、作り込んだアプリではだいぶ差が出そうです。

ということで、今回は以上です。

・・・

Twitterにも時々顔をだしていて、稀にFlutterネタなどをつぶやいてます。