Flutter

始め方

開発環境のダウンロードとインストール

の通りに実行するだけだが一応要点だけ書く。

• https://storage.googleapis.com/flutter_infra_release/releases/stable/macos/flutter_macos_3.7.6-stable.zip をダウンロード

cd ~/development
unzip ~/Downloads/flutter_macos_3.7.6-stable.zip
PATH=$PATH:$HOME/development/flutter/bin
flutter doctor

iOS 向け設定

Xcode インストール

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

iOS シミュレータ設定

open -a Simulator

テスト実行

Terminal で実行

flutter create my_app
cd my_app
flutter run

VSCode で実行

• flutter extension をインストール

• Cmd + P Flutter: Run Flutter Doctor.

• my_app を開く

• Cmd + P Debugging: Start Debugging

• Cmd + P Flutter: Open DevTools Widget Inspector Page で Widget Inspector が開く。

• main.dart を編集保存すると Hot Reload が効く。

• note: VSCode で初回 Run and Debug しようとすると flutter debuggers ignore と表示される。無視して何度か実行するとなぜか動く。

もしも他の人が書いた Flutter アプリを開発する時は、pubspec.yaml の記述を元にパッケージをダウンロード/更新する。

flutter packages get

iPhone 実機で実行するための設定

• iPhone 設定 > プライバシーとセキュリティ > デベロッパモード ON
• ios/Runner.xcworkspace を開く
• Run ボタンの左で使いたいデバイスを選択
• Runner プロジェクトを選択
• Signing & Capabilities > Team で Team を選択
• 必要に応じて Bundle Identifier を変更する。
• 実行時に「信頼されていないデベロッパ」ダイアログが出たら?
  • iPhone 設定 > 一般 > VPN とデバイス管理 > デベロッパAPP の自分の項目を信頼する。
• 実行時に "iproxy" cannot be opened because the developer cannot be verified ダイアログ出たら?
  • MacOS 設定 > Security & Privacy > General の下の方に "iproxy" was blocked ... が出るので Allow Anyway を押す。

デバイス実機で実行

flutter CLI リファレンスが https://docs.flutter.dev/reference/flutter-cli にあるが情報が少ないので flutter help (command) で聞いたほうが良い。

実行可能デバイス一覧

% flutter devices
4 connected devices:

lapislazuli-iphone13 (mobile) • 00008110-0001753EHOGEHOGE            • ios            • iOS 16.3.1 20D67
iPhone 14 Pro Max (mobile)    • 462ED41A-B343-48EB-99E4-4908HOGEHOGE • ios            • com.apple.CoreSimulator.SimRuntime.iOS-16-2 (simulator)
macOS (desktop)               • macos                                • darwin-x64     • macOS 12.6.3 21G419 darwin-x64
Chrome (web)                  • chrome                               • web-javascript • Google Chrome 110.0.5481.177

Debug mode で実機で実行。Flutter 開発環境と接続中の時だけ動く。

flutter run -d (device id or name)

ここで、device id or name はデバイスを特定する名前。prefix でも良いので、例えば上の例では flutter run -d lap のように指定すると私の携帯 lapislazuli-iphone13 が選ばれる。

Release mode で実行。Flutter が無くてもホーム画面からアプリを実行出来る。

flutter run --release -d (device id or name)

おまけ: iPhone の画面を Mac に出す方法

• iPhone を繋げた状態で Quick Time Player から簡単に iPhone の画面を出せる。
• File > New Movie Recording 録画ボタンの右側の Camera 選択で iPhone を選ぶだけで OK。