MENU
CART

M1、M2、M3 MacでFlutter環境を構築しよう

AIとIT

    今回は、M1、M2、M3チップを搭載したMac（MacBook Air、MacBook Pro）でFlutterの開発環境を構築する方法を初心者向けに解説します。Intel搭載のMacとの環境構築には若干の違いがあるため、特にM1シリーズをお使いの方は参考にしてください。

    目次

    手順

    1. 必要なソフトウェアの準備
    2. Android Studioのインストール
    3. Xcodeのインストール
    4. Flutter SDKの設定
    5. PATHの環境変数にFlutterを追加
    6. flutter doctorの実行と問題の解決
    7. CocoaPodsのインストール
    8. Android StudioへのFlutterプラグインの追加
    9. 新規Flutterプロジェクトの作成とシミュレーターでの実行

    1. 必要なソフトウェアの準備

    Flutterの開発環境を構築するために、以下のソフトウェアが必要です。

    • Android Studio: Androidアプリの開発に必要なIDE。
    • Xcode: iOSアプリの開発に必要なツール。
    • Flutter SDK: Flutterアプリを開発するためのフレームワーク。
    • CocoaPods: iOSプロジェクトの依存関係管理ツール。

    2. Android Studioのインストール

    1. Android Studioのダウンロード
    2. インストール
      • ダウンロードした.dmgファイルを開き、Android Studioをアプリケーションフォルダにドラッグ＆ドロップします。
      • Android Studioを起動し、初回セットアップウィザードに従ってインストールを完了させます。テーマ（ダークモードやライトモード）を選択し、「Standard」設定を選びます。

    3. Xcodeのインストール

    1. Xcodeのダウンロード
      • App Storeを開き、「Xcode」を検索してインストールします。
    2. インストール
      • ダウンロードには約2時間かかる場合があります。安定したWi-Fi環境を確保してインストールを進めてください。
      • インストール後、Xcodeを一度起動して初期設定を行います。

    4. Flutter SDKの設定

    1. Flutter SDKのダウンロード
      • Flutter公式サイトから最新のFlutter SDKをダウンロードします。ZIPファイルを展開し、適当なディレクトリ（例：~/development/flutter）に配置します。
    2. ディレクトリの作成
      • ターミナルを開き、以下のコマンドでdevelopmentフォルダを作成します。 mkdir ~/development cd ~/development
      • 展開したFlutter SDKフォルダをdevelopmentディレクトリ内に移動します。

    5. PATHの環境変数にFlutterを追加

    1. .zshrcファイルの作成・編集
      • M1 MacではデフォルトのシェルがZshです。以下のコマンドで.zshrcファイルを作成します。 touch ~/.zshrc
      • .zshrcファイルを開き、Flutterのパスを追加します。 nano ~/.zshrc
      • ファイルの末尾に以下の行を追加します（Flutter SDKのパスに応じて変更してください）。 export PATH="$PATH:$HOME/development/flutter/bin"
      • 保存してエディタを閉じます（Nanoの場合、Ctrl + Oで保存し、Ctrl + Xで終了）。
    2. 環境変数の適用 source ~/.zshrc

    6. flutter doctorの実行と問題の解決

    1. Flutter Doctorの実行
      • ターミナルで以下のコマンドを実行し、環境が正しく設定されているか確認します。 flutter doctor
    2. M1 Mac特有のエラーの解決
      • 「bad CPU type in executable」というエラーが表示される場合、以下のコマンドを実行してRosetta 2をインストールします。 /usr/sbin/softwareupdate --install-rosetta --agree-to-license
      • 再度flutter doctorを実行し、他のエラーがないか確認します。

    7. CocoaPodsのインストール

    1. RubyとGemsの確認
      • macOSにはRubyがプリインストールされていますが、最新版を使用するためにHomebrewを使ってインストールすることを推奨します。 brew install ruby
    2. CocoaPodsのインストール
      • 以下のコマンドでCocoaPodsをインストールします。 sudo gem install cocoapods
    3. インストールの確認
      • インストールが完了したら、以下のコマンドで確認します。 pod --version

    8. Android StudioへのFlutterプラグインの追加

    1. Flutterプラグインのインストール
      • Android Studioを開き、「Preferences」（設定）に移動します。
      • 「Plugins」を選択し、「Marketplace」タブで「Flutter」を検索します。
      • 「Flutter」プラグインをインストールします。同時にDartプラグインのインストールも求められるので、承認してください。
    2. Android Studioの再起動
      • プラグインのインストールが完了したら、Android Studioを再起動します。

    9. 新規Flutterプロジェクトの作成とシミュレーターでの実行

    1. 新規プロジェクトの作成
      • Android Studioを開き、「Start a new Flutter project」を選択します。
      • プロジェクト名や保存場所を指定し、「Flutter application」を選択して「Next」をクリックします。
      • 必要な設定を行い、「Finish」をクリックしてプロジェクトを作成します。
    2. iOSシミュレーターの起動
      • プロジェクトが作成されたら、上部メニューから「Run」→「Run ‘main.dart’」を選択します。
      • iOSシミュレーターが自動で起動し、デフォルトのFlutterアプリが表示されます。
    3. Androidエミュレーターの設定と起動
      • Android Studioの「AVD Manager」を開き、新しいエミュレーター（例：Pixel 5）を作成します。
      • 作成したエミュレーターを起動し、Flutterアプリを実行します。
    4. エラーの対応
      • エミュレーター起動時にエラーが発生した場合、エラーメッセージを確認し、必要な設定やインストールを行います。一般的なエラーには、SDKツールの不足やライセンスの未承認などがあります。
      • 例えば、ライセンスの承認が必要な場合は以下のコマンドを実行します。 flutter doctor --android-licenses すべて「yes」で承認してください。

    10. まとめ

    以上で、M1、M2、M3チップを搭載したMacでのFlutter環境構築が完了しました。これで、iOSおよびAndroid向けのFlutterアプリを開発・テストする準備が整いました。今後は、Flutterの公式ドキュメントや他のチュートリアルを参考にして、アプリ開発を進めてください。

    補足説明

    • Rosetta 2の重要性: M1シリーズのMacはARMアーキテクチャを採用しているため、一部のツールやライブラリがIntel向けにビルドされています。Rosetta 2をインストールすることで、これらのツールを動作させることができます。
    • CocoaPodsの役割: FlutterでiOSアプリを開発する際、ネイティブのiOSライブラリを管理するためにCocoaPodsが必要です。これをインストールしておくことで、FlutterのiOSビルドがスムーズに進行します。
    • 環境変数の設定: PATHにFlutter SDKを追加することで、ターミナルからflutterコマンドを直接実行できるようになります。これにより、プロジェクトのビルドやデバッグが容易になります。
    • エミュレーターとシミュレーターの違い: iOSではシミュレーター、Androidではエミュレーターを使用します。それぞれの環境でアプリをテストすることで、異なるプラットフォーム間の動作確認が可能です。

    Flutterの環境構築は初めての方にとっては少々複雑に感じるかもしれませんが、一つ一つ手順を踏んでいくことでスムーズに設定できます。問題が発生した場合は、エラーメッセージをよく読み、公式ドキュメントやコミュニティフォーラムを活用して解決してください。

    AIとIT
    よかったらシェアしてね！
    • URLをコピーしました！
    目次