ゆずめも

メモ的なブログです。主に勉強した事について書いてます。

flutterインストールして起動してみた

flutter

flutterのmacosへのインストールをnotionにメモしてたのでそれを公開 *1

インストール

直接入れるよりも nodebrew 的な fvm を利用して入れるのが良さそう

fvm.app

macへのインストール

install

brew tap leoafarias/fvm
brew install fvm

uninstall

brew uninstall fvm
brew untap leoafarias/fvm

fvm入れたら dart が入ってきた

プロジェクトの作成

fvm install stableしたあとにfvm flutter create してもダメで、先に fvm use <version> --force で無理やり初期化してやる必要がある（fvmのドキュメントでflutterの公式のインストール方法に従ってflutterをグローバルにインストールすることを推奨してるので、 flutter コマンドプロキシしてcreateとかが楽にできたりするのか…？）

iosでのrun

デフォルトのアプリが起動できるかやってみる

fvm flutter doctor を実行すると以下のように設定できているものの一覧が出る。下記の例だとAndroidもiosもできてなくてchrome(web)だけ使える。直前にxcodeのインストールだけApp Storeからやってしまったので入れてない場合の表記はわからない。

[✓] Flutter (Channel stable, 3.3.9, on macOS 12.6.1 21G217 darwin-arm, locale ja-JP)
[✗] 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 14.1)
    ✗ 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.
[✓] Chrome - develop for the web

（cocoapodsがrubyに依存してたりでめんどくさくなってきた）

ちなみにxcodeというかiosのセットアップはflutterのios setupの部分を参考にした

docs.flutter.dev

cocoapodsインストール

自分はhomebrewでcocoapodsインストールするだけでdoctorが大丈夫になった

brew install cocoapods

インストールが終わったらios simulatorが立ち上がる事を確認する

open -a Simulator

画面サイズ等変えれるがなんとなくiphone se第3世代にした

設定後の確認

emulators と devices というコマンドがあるらしいが違いはよくわかってない。いろんな記事でemulatorsコマンドで apple_ios_simulator • iOS Simulator • Apple • ios というのが表示されると書いてたが表示されなかった

> fvm flutter emulators
Unable to find any emulator sources. Please ensure you have some
Android AVD images or an iOS Simulator available.

> fvm flutter devices
3 connected devices:

iPhone SE (3rd generation) (mobile) • <UUID>                               • ios            • com.apple.CoreSimulator.SimRuntime.iOS-16-1 (simulator)
macOS (desktop)                     • macos                                • darwin-arm64   • macOS 12.6.1 xxxxxx darwin-arm
Chrome (web)                        • chrome                               • web-javascript • Google Chrome xxxxxxx

実行

ios simulatorを立ち上げてる状態でflutter run コマンドを使うと自動的にシミュレーター上でアプリが立ち上がってきた

flutter run

# 端末を指定したい時
flutter run -d chrome

(devicesコマンドで取れたmacosとかchromeと書かれた部分でios立ち上げたかったらuuid指定するのか？)

editorの設定

まだプラグイン入れただけで特に何もしてないがこの辺参考にすると良さそう

dev.classmethod.jp

まとめ

しょうがないけど初期セットアップがめんどくさいな。。主にxcodeのインストールだけど。。

とりあえずバージョンマネージャー入れて動かすところまでを忘れる前にメモ的に書いてるので、本当はこうやったほうがいいと言ったようなことがあれば知りたい。

*1:notionのものをexportしてはてなブログに貼ったらどうなるのかも実験したかった