Flutter2.0 インストール to mac

自己紹介

Flutterをほぼ触ったことがありません。またAndroidアプリ開発も4年前で知識が止まっています。Flutter2が出て、PCやwebにも対応したそうで、興味が出たので触ってみることにしました。

環境・やること

• intel mac 11.2.1
• Pixel 4a (Android 11)

まずAndroidアプリの開発から始める。他のプラットフォームで動くようにする方法は別途調べる。

VScodeを普段使っており、公式ドキュメントに説明もあるが、AndroidStudioのほうがなんとなく良さそうなので、そちらで始めてみる。

参考

macOS install

Flutter環境構築

zipファイルをダウンロード、適当な場所に解凍する。

PATHを通す。

# .zshrcとかに入れる
export PATH="$PATH:`適当な場所`/flutter/bin"

flutter doctor

をやってみると、

[✗] Android toolchain - develop for Android devices
    ✗ 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/macos#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.

[✗] Xcode - develop for iOS and macOS
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
        sudo xcodebuild -runFirstLaunch
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage
        on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.

と出たが、今回はAndroidの開発ができればいい（iPhone持ってない）のでAndroid開発環境を整える。

Android Setup

macOS install

android studioが必要らしいので、インストール。起動して、スタンダードに設定をしたら、「Downloading Compornents」となり、いろいろなコンポーネントがインストールされた。

macにUSBケーブルでPixel4aを接続。

Pixel側は開発者モードにして、USBデバッグを有効にする。

flutter devices

で

Pixel 4a (mobile)
Chrome (web)

と表示された。

Androidアプリ開発

Android Studioを開き、最初の画面の右下から「Plugin」を選び、「Flutter」で検索し、プラグインをインストール。

Android Studioを再起動すると、「Start a new Flutter project」というボタンが増えているので、それを選択＞「Flutter Application」を選択＞上でインストールしたSDKのパスがあっていることを確認しNext＞プロジェクト名を適当に入れてFinish

プロジェクトができた。

すでにサンプルアプリが用意されているようなので、試しに手持ちのPixelで実行してみる。

上の方の再生マーク（Run）を押したら、なかなか始まらない。

* What went wrong:
Could not determine the dependencies of task ':app:compileDebugJavaWithJavac'.
> Failed to install the following Android SDK packages as some licences have not been accepted.
     build-tools;29.0.2 Android SDK Build-Tools 29.0.2
  To build this project, accept the SDK license agreements and install the missing components using the Android Studio SDK Manager.
  Alternatively, to transfer the license agreements from one workstation to another, see http://d.android.com/r/studio-ui/export-licenses.html

そしてこれが。

Tools＞SDK managerからv29を入れてみた。

そしたらできた！

なんとなくコードいじって、変えてみました！（Hot reloadすごいですね）