※自分の学習記録のメモとしてこの記事を書いています。

新しい技術を学ぶにはとにかく公式ドキュメントを読めと言われます。
今回もFlutterに関して知識0ですがとりあえず公式を読むところから始めます。

公式を読んだ後は良さげなロードマップを引いてくださっている方がいたので、これに従ってUdacityのFlutterコースやっていこうと思います
Flutterの効率良い学び方

インストール

InstallページからmacOSを選択。

Flutter SDKを入手

1. Git Hubからclone

公式の場合はdevelopフォルダになっていますが、私の場合はworksというフォルダで展開します。

cd ~/works
git clone https://github.com/flutter/flutter.git

実行すると展開するまでに少し時間がかかります。

2. flutterツールをパスに追加する

後で永続的にパスの更新をするので先に永続的にパスを更新するのでもいいかも。

export PATH="$PATH:`pwd`/flutter/bin"

※実行しても特に反応は返ってきません。

公式だと4の手順で、「オプションで、開発バイナリを事前にダウンロードします。」とありますがオプションなので一旦スルーします。
これでFlutterコマンドを実行する準備が整いました。

flutter doctorを実行

flutter doctor

を実行してセットアップに必要なインストールする必要のあるソフトウェアやタスクがあるか確認します。

私の場合はこんなエラーが出ました。

[✗] 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:
        sudo gem install cocoapods

エラー内容
- Xcodeのインストールが不完全
- CocoaPodsがインストールされていない

この2点を解消します。

Xcodeのインストールが不完全

私の場合はもう既にXCodeはインストール、アップデートもしてありました。
念の為App Storeを開きますがやはりアップデート済みのようです。

なのでインストールは飛ばして下記コマンドを実行します。

sudo xcode-select -switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch

調べてみたら上がパスを通すコマンド、下が追加コンポーネントをインストールするコマンドでした。
※iOS開発経験が無いのでよくわかってない

CocoaPodsがインストールされていない

言われた手順通り、

sudo gem install cocoapods

を実行します。

色々インストールされたみたいです。

エラーが解消されたか確認

もう一度flutter doctorを実行してエラーが解消されたか確認します。

flutter doctor

warningはまだあるもののエラーは解消されたみたいです。

パスを更新

公式の記述通りコマンドを実行したところ、ウィンドウを閉じるとパスがちゃんと通りませんでしたのでこちらはオリジナルになります。

open $HOME/.bash_profile

でファイルを開き、

export PATH=[Flutterのgitリポジトリのクローンを作成したパス]/flutter/bin:$PATH

を追加して保存。
私の場合は~/worksにクローンしたので、export PATH=~/works/flutter/bin:$PATHになります。

source $HOME/.bash_profile

を実行して現在のウィンドウを更新、またはターミナルを一旦閉じて再起動します。

echo $PATH

でfulutter/binが含まれていることを確認します。
また、

which flutter

を実行してflutterコマンドが実行できることも確認します。

プラットフォームのセットアップ

Xcodeをインストールする

先程flutter doctorで出てきたエラーを解消したので、Xcodeの準備は整っています。

iOSシミュレーターを設定する

open -a Simulator

を実行してシミュレーターを起動します。

シンプルなFlutterアプリを作成して実行する

環境構築が終わったのでFlutterアプリを作ってテストします。

1. コマンドを実行して新しいFlutterアプリを作成


flutter create my_app

またしばらく待ちます。

2. ディレクトリを移動

cd my_app

3.flutter runを実行

flutter run

シミュレーターの画面が変わりました。

iOSデバイスに展開する

Flutterアプリを物理iOSデバイスにデプロイするには、サードパーティのCocoaPods依存関係マネージャーとApple Developerアカウントが必要だそうです。Xcodeで物理デバイスの導入を設定する必要もあります。

1. CocoaPodsのインストールとセットアップ

先程flutter doctorでCocoa Podsはインストールしたので、セットアップをします。

pod setup

2. プロジェクトをプロビジョニングするためにXcodeの署名フローに従う

a. 先程作成したmy_appディレクトリでopen ios/Runner.xcworkspaceを実行してXcodeを開きます。

b. Signing & CapabilitiesのタブからAdd Acountをクリック

c. Apple IDでサインインします（Apple Developer Programに登録している必要があります）

d. 確認に使うApple製品をPCとケーブルで物理的に接続します（今回はiPad Pro）

e. 初めて接続をするデバイスの場合は「このコンピュータを信頼しますか？」というダイアログが表示されるので「信頼」をクリックします

f. XcodeでiPadが選択できるようになりました（runボタンの隣付近にあります）

g. デバイスを選択して、runボタンを押します

h. Could not launch “my_app”というエラーがXCode側で表示されるので、iPadの設定画面から「一般」＞「デバイス管理」を選択

i. 「"Apple Development:xxxx"を信頼」をクリックするとダイアログが表示されるので「信頼」をクリック

j. ホーム画面にFlutterのアイコンが表示されているのでクリック

k. 無事アプリがiPadで表示されました🎉

Android Studioをインストールする

Android Studioをインストールします（私は既にインストール済みでした）
Android Studioを起動してAndroid Studioセットアップウィザードを実行します。（これも実行済みでしたが長らくアップデートされてなかったのでアップデートしました）

Androidデバイスをセットアップする

Androidデバイスの設定から「デバイス情報」を選択、一番下の「ビルド番号」を7回クリック（私の場合はpixel3aです。デバイスによって設定方法は異なるので公式を御覧ください。）
設定＞「システム」に「開発者向けオプション」のボタンが出現します
「開発者向けオプション」の中に「USBデバッグ」の項目があるのでONにして許可します
デバイスをPCとケーブルで物理的に接続すると許可を求めるダイアログが現れるので許可します
PCでflutter devicesコマンドを実行してAndroidデバイスが認識されていることを確認します