プログラマーのメモ書き

伊勢在住のプログラマーが気になることを気ままにメモったブログです

Mac 上の Flutter 開発環境を整える

今までは、 WIndows 上の Android Studio を利用して Flutter を開発して、ある程度動作するようになったら、 mac の XCode でビルドと実機デバッグを行うという方法を取っていました。

この方法でも、コードを修正することがほとんどないので、特に問題ありませんでした(修正が必要な場合も、大体簡単な手直しなのでコンソールで vim とかで対応しています)。

とはいえ、色々と触ってきて、 iOS 用の機能を調整する機会も増えてくるようになると、 mac 上にも開発環境が欲しくなってきます。

それに、こういう形はあんまり推奨されていないようで、下記などでは、けちょんけちょんに言われています。

Any Way To Use Xcode For Flutter Instead Of Android Studio Or VSCode - Stack Overflow

ということで、改めて、 mac に VSCode の Flutter 開発環境を整えたので、やったことを簡単にメモっておきます。

準備

何をすれば良いのかを確かめるため、下記の公式ドキュメントをざっと見ておきます。

Make iOS apps | Flutter

あと、現在の状態を確認しておきます。

mor@Junichi-MORI-Mac-mini ~ % flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[] Flutter (Channel stable, 3.22.2, on macOS 14.5 23F79 darwin-x64, 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 15.4)
[] Chrome - develop for the web (Cannot find Chrome executable at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[!] Android Studio (not installed)
[] Connected device (2 available)
[] Network resources

! Doctor found issues in 3 categories.
mor@Junichi-MORI-Mac-mini ~ % 

ということで、 Flutter の SDK も入ってるし、 VSCode 周りを設定するだけで良さそうですね。

VSCode のインストール

mac 版の VSCode ってマイクロソフトのサイトからダウンロードする必要があるんですね。

ということで、ダウンロードします。ダウンロードできたら、 Applications フォルダに移動させておきます。

VSCode のアイコンをダブルクリックすると VSCode が立ち上がります。立ち上がったら、拡張機能として

  • Japanese Language Pack for VS Code
  • Flutter

をインストールします。 Flutter をインストールすると Dart 拡張機能も自動的にインストールされます。

ここまでできたら、一度 VSCode を終了して再起動しておきます。

開発環境の確認

一応、Flutter doctor を使って確認しておきます。

mor@Junichi-MORI-Mac-mini ~ % flutter doctor   
Doctor summary (to see all details, run flutter doctor -v):
[] Flutter (Channel stable, 3.22.2, on macOS 14.5 23F79 darwin-x64, 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 15.4)
[] Chrome - develop for the web (Cannot find Chrome executable at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[!] Android Studio (not installed)
[] VS Code (version 1.94.2)
[] Connected device (2 available)
[] Network resources

! Doctor found issues in 3 categories.
mor@Junichi-MORI-Mac-mini ~ % 

VSCode に関する記述が増えただけですね。特に問題もなさそうです。

サンプルプロジェクトの作成と実機デバッグ

一応、開発環境が整ったということで、下記を参考に実際にサンプロプロジェクトを作成して、実行してみたいと思います。

【Dart】 Flutter × VSCode で、環境構築 から HelloWorld まで(Mac) | SIOS Tech. Lab

まず、 VSCode のコマンドパレットを立ち上げて、 Flutter と入力すると、

上記のような選択肢が表示されるので、 New Project を選択します。

次に、どのような Project を作成するかテンプレートの選択が表示されるので、

Application を選択します。

次に、どこにプロジェクトフォルダを作成するのか聞かれるので、

こんな感じに適当なフォルダを指定してやリます。

最後に、プロジェクト名を聞かれるので、

適当な名前をつけておきます。すると、先ほどのフォルダ配下に、プロジェクト名のフォルダが作成され、その内部に、flutterのプロジェクトが作られました。 VSCode 側でもこんな感じに見えます。

毎度お馴染みのカウンターアプリですね。

ところで、ここでプロジェクトフォルダをよくみてみると、ちょっと違和感があります。

フォルダに web や macon や linux などというのが見えます。

これ、今まで AndroidStudio で作成したときは、どのプラットフォームを対象にプロジェクトを作るかダイアログで選択してたんですが、考えてみると、 VSCode でプロジェクトを新規作成したときはそんな選択画面ありませんでした。

多分、そのため web, macos, linux などという具合に Flutter で扱える全てのプラットフォーム用のフォルダが作成されてしまっているようです。

この辺りは、ちょっと設定を変更してやる方が良さそうですね。

実行

では、作成したプロジェクトを実行してみたいと思います。実行するには、エミュレータか実機が必要になります。すでにエミュレータは作成済みなので、それを選択したいと思います。

VSCode の画面の下の方に、デバイス名が表示されている箇所があります。 No Device となっている場合もあるのですが、このときは macOS となってました。

ここをクリックすると、デバイスの選択メニューが表示されます。

ここで、『Start iOS Simulator』を選択してやります。

しばらくすると、上記のように iOS のエミュレータが起動しました。これで、デバイスの準備ができました。

ここまでできたら、サイドメニューから『実行とデバッグ』を選択します。

特に問題なければ、エミュレータにカウンターアプリが表示されます。

デバッグも VSCode でブレークポイントを設定して、呼び出してやれば、問題なく動作しました。

デバッグ設定とかを残しておきたいときは、 launch.json を作ってやればいいですね。

まとめ

思ったより簡単に開発環境を整えることができました。まあ、 XCode でビルドとかして、実機デバッグしてたので、そりゃやること少ないのも当然かな。

いずれにしても、これで mac でも開発作業がやりやすくなりそうです。