Flutterはじめた (VSCode環境構築)

Flutter始めようと思ったきっかけ

私は普段はWebアプリとか作ってる人です。Webアプリで作りたいものが思いついたんですが、WebアプリだとCORSに引っかかってどうにもならない(cors-anywhereを使えばなんとかなるが、自分のサーバーを経由させたくない)ものをどうにか作りたくなったため、ネイティブで動かせる言語を触る気になりました。なお、手持ちのスマホはAndroidです。Kotlinでの開発は以前やったことがあったので今回はやらないとして、さてKotlin以外で何やろう。まぁFlutterしかないかな、って思ってFlutterにもチャレンジすることにしました。

作りたい環境

OS: Windows10
IDE: (AndroidStudio動かすにはPCが力不足なので)VSCode
検証環境: (エミュレータ動かすにはPCが力不足なので)実機デバッグ

導入

VSCodeは既にインストール済みなので、FlutterとAndroid-SDKについてだけを書きます。

1 Flutterのインストール

まずこのページから flutterの最新stable版ZIPをダウンロードします。
インストーラ形式ではなく、ZIPを適当なところに展開して環境変数を通す仕様だとのこと。パスはこんな感じに指定します→ C:\flutter_windows_2.5.3-stable\bin

コマンドプロンプトかPowerShellで flutter って入力して実行できたら パスが通っています。

TIPS

Chocolatelyを入れてるなら、それを使ってインストールすることもできるらしいです。
https://project-flora.net/2021/01/31/dart-flutter%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%85%A5%E9%96%80-flutter%E9%96%8B%E7%99%BA%E3%83%84%E3%83%BC%E3%83%AB%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9/

2 Android SDKのインストール

Android向けのビルドをするので、ビルドツールを揃えるためにandroid-studioをインストールする必要があります。(今回は既に1年前に導入したAndroid-Studioがあったのでそれを使いました。) インストールしてAndroid Studioを立ち上げたらSDK Managerを開いて android-sdk build-tools platform-tools sdk-platform-tools をインストールします。 インストールが終わったらAndroidStudioを閉じます。

注意

導入しているSDKが古すぎるとこんな感じに怒られます

[!] Android toolchain - develop for Android devices (Android SDK version 28.0.1)
    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.

2つの点で怒られてましたが AndroidStudio を開いて 右上の SDK Manager を開いて Android-sdk build tools platform-tools sdk-platform-tools を更新すれば両方解決しました。
なお、現行のFlutterは API Level29 のAndroid-SDKをインストールする必要があるとのことなので
SDK Platforms タブの Android 10 もインストールする必要があります。

3 ライセンス同意

flutter doctor --android-licenses とすると AndroidSDKがちゃんとインストールされていれば
ライセンス同意してねみたいなプロンプトが出てきます。それぞれちゃんと読んで yを押して行けば 同意完了です。

4 Flutterの準備が完了してることを確認する

flutter doctor するとビルドに必要なツールが揃っているか確認してくれます。

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.5.3, on Microsoft Windows [Version 10.0.19043.1348], locale
    ja-JP)
[√] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[√] Chrome - develop for the web
[√] Android Studio (version 4.0)
[√] Connected device (2 available)

• No issues found!

No issues found! になっていれば Flutterの準備完了です。

5 VSCodeに拡張機能をインストール

マーケットストアを開いて Flutter って検索します。
恐らく一番上に出るのが、開発環境を揃えるものです

あとは AwesomeFlutterSnippetsっていうのが 入力補助機能として便利そうなので入れてみました

ほかはお好みでどうぞ。

6 VSCodeで Flutterプロジェクト作成

ここまで揃ったらいよいよプロジェクト作成です。
VSCodeを開いたら コマンドパレットを開き(Ctrl+Shift+P) Flutter: Create project を実行します。 選択肢が出たら Application を選んで プロジェクトフォルダの保存先を指定します。
最後に プロジェクト名を適当に指定したら プロジェクトの作成がはじまります。

7 そしてできたプロジェクトがこちら

8 Android端末を開発用に設定

今回は普段使ってるスマホ(Oppo Reno A)を開発用に使います。設定画面からバージョン情報画面を開き、ビルド番号を10回ほど連打すると 開発者モードの設定が開放されます。開放されたら、設定画面から開発者オプションを開き、USBデバッグを有効にします。

注意点

USBデバッグがONの場合、銀行のアプリでは警告が表示され、チート対策が厳しいいくつかのアプリ(例えばきららファンタジア)では そもそもアプリが起動できなくなります。 もし起動できないアプリがあれば、あとでUSBデバッグをOFFに切り替え直してください。

9 PCに接続

PCにUSBケーブルで普通に接続します。このときAndroid端末側で転送方法を訊かれたら ファイル転送を選択します。(割とよく選択し忘れるのですが、これが充電のままだと全くPCに認識されません。) 次に PCで コマンドプロンプトかPowerShellを開いて

adb devices

とやります。そしたらUSBデバッグを許可するかどうかがAndropid端末側で訊かれるので許可します。
再度 adb devices したときに 以下のような感じに表示されればOKです。

C:\Users\craft>adb devices
List of devices attached
530fb134        device

注意点

adb が実行できない場合は flutter同様、adbの環境変数を通しましょう
https://windroid.work/2020/04/adb-windows-android-2020.html/

10 プロジェクトをAndroid上で実行する

ここまですれば、なんともうVSCode側で認識されているので、右下から使う環境を切り替えて 右上の実行ボタンを押すだけで動くようになります。すごく便利。（初回実行時は結構ビルドに時間がかかります）

エディタ側での変更はスマホに一瞬で反映されるのですごいやつです。

11 開発準備完了!!

これで必要なものはたぶん揃ったので 次回から開発します。

参考