Flutter でアプリ開発(1. Windows で環境構築)

Android アプリを作ろうと思ったものの、私の経験は EclipseJava で止まったままです。最近はどんなものかと調べて、今回は Flutter を勉強してみることにしました。
Flutter は Google が開発しているフレームワークで、以下のような特徴があるようです。

  • 言語は Dart
  • AndroidiOSクロスプラットフォーム
  • Web やデスクトップアプリにも対応
  • React Native と同じくらい人気(たぶん)
  • コードを変更するとすぐに反映されるホットリロード機能
  • 標準で用意されている UI が豊富

ここでは、環境構築からサンプルアプリの起動までをします。 OS は Windows 10 です。


参考にしたページ

公式のチュートリアルです。

  1. Windows install | Flutter
  2. Set up an editor | Flutter
  3. Test drive | Flutter

システム要件

  • Windows 7 SP1 以上(64bit)
  • 1.64GB の空き容量(Flutter 単体で)
  • PowerShell 5.0 以上(Windows 10 には標準搭載)
  • Git for Windows 2 以上(git コマンドにパスが通っていること)

Flutter のインストール

Flutter と Android Studio をインストールします。私は普段から Chocolatey を使っているので、それで入れます。
Chocolatey とは、Linux の apt や yum のように、コマンド一発でソフトをインストールできるパッケージ管理システムです。便利なのでおすすめです。

PS C:\> choco install flutter androidstudio git -y

普通にやる場合は、場合は、手動でインストールしてください。

以下のバージョンが入りました

  • flutter 2.8.1
  • androidstudio 2020.3.1.26 (Arctic Fox)
  • git 2.34.1

Flutter にパスを通します。

設定 -> システム -> 詳細情報 -> システムの詳細設定 -> 環境変数 を開きます。

f:id:sulp:20220126004225j:plain

(ユーザー名)の環境変数 から Path を選択し、編集をクリック。
新規をクリックし、Flutter の bin ディレクトリのパスを入力します。Chocolatey で入れたので、パスは C:\tools\flutter\bin になりました。

f:id:sulp:20220126004252j:plain

Flutter の設定

Flutter が動作する環境になっているか確認するコマンド flutter doctor を実行します。
カレントディレクトリはどこでも良いです。

PS C:\> flutter doctor

  ╔════════════════════════════════════════════════════════════════════════════╗
  ║                 Welcome to Flutter! - https://flutter.dev                  ║
  ║                                                                            ║
  ║ The Flutter tool uses Google Analytics to anonymously report feature usage ║
  ║ statistics and basic crash reports. This data is used to help improve      ║
  ║ Flutter tools over time.                                                   ║
  ║                                                                            ║
  ║ Flutter tool analytics are not sent on the very first run. To disable      ║
  ║ reporting, type 'flutter config --no-analytics'. To display the current    ║
  ║ setting, type 'flutter config'. If you opt out of analytics, an opt-out    ║
  ║ event will be sent, and then no further information will be sent by the    ║
  ║ Flutter tool.                                                              ║
  ║                                                                            ║
  ║ By downloading the Flutter SDK, you agree to the Google Terms of Service.  ║
  ║ Note: The Google Privacy Policy describes how data is handled in this      ║
  ║ service.                                                                   ║
  ║                                                                            ║
  ║ Moreover, Flutter includes the Dart SDK, which may send usage metrics and  ║
  ║ crash reports to Google.                                                   ║
  ║                                                                            ║
  ║ Read about data we send with crash reports:                                ║
  ║ https://flutter.dev/docs/reference/crash-reporting                         ║
  ║                                                                            ║
  ║ See Google's privacy policy:                                               ║
  ║ https://policies.google.com/privacy                                        ║
  ╚════════════════════════════════════════════════════════════════════════════╝


Running "flutter pub get" in flutter_tools...                       9.9s
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.8.1, on Microsoft Windows [Version 10.0.19043.1466], locale ja-JP)
[X] Android toolchain - develop for Android devices
    X Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

[√] Chrome - develop for the web
[!] Android Studio (not installed)
[√] VS Code, 64-bit edition (version 1.63.2)
[√] Connected device (2 available)

! Doctor found issues in 2 categories.

まだ Android Studio での設定をしていないので、Android toolchain と Android Studioバツになっています。

Android SDK のインストール

Android Studio を起動します。
Android Studio の初期設定が始まるので、進めます。Next や Finish を押していけば、だいたい大丈夫です。途中で、AndroidSDK やツールがダウンロードされます。

初期設定が終わると、このような画面になりました。

f:id:sulp:20220126004319j:plain

Android StudioIntelliJ IDEA ベースなので、PyCharm などと見た目も操作感もほとんど同じですね。

再度、flutter doctor を実行します。

PS C:\> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.8.1, on Microsoft Windows [Version 10.0.19043.1466], locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
    X cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    X Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/windows#android-setup for more details.
[√] Chrome - develop for the web
[√] Android Studio (version 2020.3)
[√] VS Code, 64-bit edition (version 1.63.2)
[√] Connected device (2 available)

! Doctor found issues in 1 category.

Android Studio にはチェックが入りました。次は、Androidコマンドラインツール(cmdline-tools)をインストールます。

Android Studio で、Projects -> More Action -> SDK Manager をクリックし、SDK Tools を開きます。

f:id:sulp:20220126004335j:plain

Android SDK Command-line Tools (latest)にチェックを入れます。Google USB Driver も後で必要になるのでチェックし、OK をクリック。ダウンロードとインストールが始まります。
Licence Agreement の画面では、Accept を選択し Next をクリックします。
インストールが終わったら Finish をクリックします。

最後に、Android のライセンスを確認する flutter doctor --android-licenses を実行し、同意します。

PS C:\> flutter doctor --android-licenses
6 of 7 SDK package licenses not accepted. 100% Computing updates...
Review licenses that have not been accepted (y/N)? y

1/6: License android-googletv-license:
---------------------------------------
(ライセンス文のため省略)
---------------------------------------
Accept? (y/N): y
(他にもライセンス文が表示されるので、すべて"y"で同意する)
All SDK package licenses accepted

再度、flutter doctor を実行。

PS C:\> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.8.1, on Microsoft Windows [Version 10.0.19043.1466], locale ja-JP)
[√] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
[√] Chrome - develop for the web
[√] Android Studio (version 2020.3)
[√] VS Code, 64-bit edition (version 1.63.2)
[√] Connected device (2 available)
    ! Device emulator-5562 is offline.

• No issues found!

問題ないようです。

Flutter プラグインのインストール

Android Studio に Flutter プラグインをインストールします。
Plugins -> Marketplace をクリックし、Flutter で検索します。

f:id:sulp:20220126004407j:plain

Install をクリック。警告や、Dart プラグインを入れるか聞かれるので、Accept、Yes をクリック。
イントールが終わると Install ボタンが Restart IDE ボタンに変わるので、Restart をクリック。
これで、Flutter の準備は終わりです。

エミュレータの設定

実機でもデバッグできますが、エミュレータも準備しておきます。不要ならスキップしてください。

まず、CPU の仮想化を有効にするとのことですが、それぞれの環境でうまいことやってください。
Android Studio で、Projects -> More Actions -> AVD Manager -> Create Virtual Device…を選択。

f:id:sulp:20220126004426j:plain

Play Store の列は、Play ストアなどが入ったエミュレータができるようですが、root が取れなかったりするので、デバッグしづらいとのこと。
仮想デバイスを作成して管理する  |  Android デベロッパー  |  Android Developers より)

とりあえず、Pixel 5 を選択しました。
Next をクリック。

f:id:sulp:20220126004443j:plain

システムイメージの選択になりました。ABI が x86 のものを選びます。Android のバージョンは、デバッグに使うスマホと同じ 7.0 を選びました。最新のスマホや古いスマホと同じ環境で検証したければ、それぞれ適切なバージョンを選択すれば良いのだと思います。
Download をクリックし、終わったら Finish をクリック。ダウンロードしたイメージを選択して Next をクリック。

f:id:sulp:20220126004455j:plain

Graphics を Hardware に設定します。グラフィックスのパフォーマンスがよくなります。
Finish をクリック。

f:id:sulp:20220126004547j:plain

エミュレータ一覧の画面に戻ります。Actions から実行ボタンをクリックするとエミュレータが起動します。
ただ、以下のようなエラーが出ました。

f:id:sulp:20220126004601j:plain

Could not automatically detect an ADB binary. Some emulator functionaity will not work until a custom path to ADB is added. This can be done in Extended Controls (...) > Settings > General tab > 'Use detected ADB location'

adb.exe が見つからないようです。エミュレータを起動して、More ボタン(・・・) -> Settings -> Use Detected ADB location をオフ -> adb.exe のパスの設定をします。パスは、先程の Android SDK の設定画面に表示されています。

f:id:sulp:20220126004612j:plain

例:C:/Users/(ユーザー名)/AppData/Local/Android/Sdk/platform-tools/adb.exe

Play ストアがないイメージを選んだので、その代わりのアプリストアとして F-Droid をインストールしました。

エミュレータに対しては、ホスト PC のキーボードが使えますが、今風なフリックで入力するキーボードも使いたいところです。そこで、Mozc for Android を F-Droid からインストールしようとしました。が、できませんでした。たぶん、Arm 用のアプリしか用意されていないようです。
x86 用 Mozc for Android を自分でビルドしたのは、また別のお話。

実機デバッグの設定

実機でデバッグする場合は、Androidバイス設定側で USB デバッグを有効にしておきます。
デバイスの開発者向けオプションを設定する  |  Android デベロッパー  |  Android Developers

f:id:sulp:20220126004650j:plain

USB ケーブルで PC と接続し、flutter devices を実行して、認識しているか確認します。HUAWEI VNS L22 が今回デバッグ用に使うスマホです。

PS C:\> flutter devices
3 connected devices:

HUAWEI VNS L22 (mobile) • 72V7............ • android-arm64  • Android 7.0 (API 24)
Chrome (web)            • chrome           • web-javascript • Google Chrome 97.0.4692.71
Edge (web)              • edge             • web-javascript • Microsoft Edge 97.0.1072.69

• Device emulator-5562 is offline.

また、Androidバイスに「USB デバッグの許可」のプロンプトが出たら、OK を押します。

f:id:sulp:20220126004707j:plain

アプリを作って実行してみる

プロジェクトの作成

Android Studio を開いて、New Flutter Project をクリック。

f:id:sulp:20220126004720j:plain

Flutter を選択し、Flutter SDK Path にダウンロードした Flutter のパスを入力。Next をクリック。

f:id:sulp:20220126004729j:plain

Project name を適当に入力して Finish をクリック。

f:id:sulp:20220126004738j:plain

プロジェクトができました。

ビルドと実行

画面上部のツールバーから、実行したいデバイス(ここでは、エミュレータAndroid SDK built for x86 mobile)を選択して Run(緑の右向き三角)をクリック。ビルドが終わるまで待ちます。同時に Android SDK もダウンロードされます。
以下はログです。

Launching lib\main.dart on Android SDK built for x86 in debug mode...
Running Gradle task 'assembleDebug'...
Checking the license for package Android SDK Build-Tools 29.0.2 in C:\Users\(ユーザー名)\AppData\Local\Android\sdk\licenses
License for package Android SDK Build-Tools 29.0.2 accepted.
Preparing "Install Android SDK Build-Tools 29.0.2 (revision: 29.0.2)".
"Install Android SDK Build-Tools 29.0.2 (revision: 29.0.2)" ready.
Installing Android SDK Build-Tools 29.0.2 in C:\Users\(ユーザー名)\AppData\Local\Android\sdk\build-tools\29.0.2
"Install Android SDK Build-Tools 29.0.2 (revision: 29.0.2)" complete.
"Install Android SDK Build-Tools 29.0.2 (revision: 29.0.2)" finished.
Checking the license for package Android SDK Platform 31 in C:\Users\(ユーザー名)\AppData\Local\Android\sdk\licenses
License for package Android SDK Platform 31 accepted.
Preparing "Install Android SDK Platform 31 (revision: 1)".
"Install Android SDK Platform 31 (revision: 1)" ready.
Installing Android SDK Platform 31 in C:\Users\(ユーザー名)\AppData\Local\Android\sdk\platforms\android-31
"Install Android SDK Platform 31 (revision: 1)" complete.
"Install Android SDK Platform 31 (revision: 1)" finished.
√  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:24934/-r4CM8s9Jbw=/ws
Syncing files to device Android SDK built for x86...
D/EGL_emulation( 3834): eglMakeCurrent: 0xa14856c0: ver 2 0 (tinfo 0x8d395bd0)

エミュレータ上で、アプリが起動します。

f:id:sulp:20220126004752j:plain

実機でも同様に実行できました

f:id:sulp:20220126004801j:plain

SDK のバージョン

ログを見ると、Android SDK Platform 31(Android 12)の SDK が自動でダウンロードされたようです。SDK バージョンがどのように決まっているのか調べてみました。
ダウンロードされる SDK は、プロジェクト内の以下のファイルで指定されているようです。

// android/app/build.gradle

android {
    compileSdkVersion flutter.compileSdkVersion
}

flutter.compileSdkVersion は、Flutter SDK で以下のように指定されているようです。

// packages/flutter_tools/gradle/flutter.gradle

class FlutterExtension {
    static int compileSdkVersion = 31
    static int minSdkVersion = 16
    static int targetSdkVersion = 31
}

これを見る限り、API レベル 16 の Android 4.1 まで動くということなのでしょうか。

その他

bundle.gradle のエラー

ビルドはできますが、android/build.gradle にエラーがありました。

f:id:sulp:20220126004821j:plain

以下のサイトを参考に、File -> Project Structure...を開いて SDK を指定し(とりあえず、現時点で最新の Android API 32 に設定)、また android/build.gradle 内の GradleException を FileNotFoundException に変更したところ、直りました。

Android Studio で作成した Flutter プロジェクトが Gradle まわりの Error を吐いたので解決する - shn_hsn

日本語化

検索してみると、Pleiades 日本語化プラグインを使う方法が出てきますが、今は非推奨のようです。公式のプラグインをインストールして日本語化します。以下、参考サイトです。

Android Studio Arctic Fox を日本語化する方法 | CBTDEV

まとめ

無事に、Flutter の環境構築とサンプルアプリの実行ができました。次回からは、実際にアプリ作りに進んでいきたいと思います。と言っても、アプリを作ってたのは 5 年以上前だし、Dart も書いたこと無いし、大丈夫だろうか?

次回 svpl.hatenablog.jp