mohumohu studio

こちらのサイトを参考にMacでの環境構築をしていきます！！

目次

1. Macの環境構築
2. Flutter SDKのインストール
3. PATHを通す
4. Xcodeのセットアップ
5. Android Studioのセットアップ
6. Android License の設定
7. flutter doctor
8. まとめ

Macの環境構築

こちらのサイトにアクセスします。

macOSをクリックします。

iOSを選択します。

Flutter SDKをインストールする

続いてFlutter SDKをインストールします。

お使いの Mac が Intel 製の CPU 搭載の MacであればIntel Processorの方を、Apple 社製の Apple シリコン プロセッサ搭載の MacであればApple Siliconクリックしてダウンロードします。

もし分からない場合は Apple メニューから「この Mac について」を選択し、「プロセッサ」の欄に Intel を含む記載があれば Intel Mac、「チップ」の欄に Apple を含む記載があれば Apple シリコン Mac です。

ダウンロードしたファイルをダブルクリックして解凍します。

ユーザーフォルダ直下にdevelopmentという名前のフォルダを作成します。

developmentフォルダの中に先ほど解凍したflutterフォルダを配置します。

PATH を通す

続いてPATHを通していきます。

ターミナルを開いて以下のコマンドを打ち込みます。

     echo 'export PATH="$PATH:[flutterフォルダが格納されているディレクトリ]/flutter/bin"' >> [SHELLの設定ファイルのパス]

Flutter フォルダのパスの調べ方が分からないという方は、ターミナル内にフォルダをドラッグ&ドロップすることでディレクトリのパスを表示してくれるので、そちらで確認してみてください。

SHELL の設定ファイルがない、もしくは分からない場合は以下のコマンドを入力してみてください。

     echo $SHELL
     /bin/zsh
     #　もしくは
     /bin/bash

/bin/zshなら zsh、/bin/bashなら bash を使っています。

SHELL の設定ファイル名はzsh であれば.zshrc、bash であれば.bash_profileというファイルが設定ファイルになります。

設定ファイルがない場合は以下コマンドでルートディレクトリ配下に作成してください。

     # zshの場合
     touch ~/.zshrc

     # bashの場合
     touch ~/.bash_profile

PATH を通したら設定の有効化をします。

     source [.zshrcもしくは.bash_profileのパス]

最後に下記コマンドを実行し、パスが表示されれば設定成功です。

     which flutter

Xcodeのセットアップ

XcodeをApp Storeからインストールします。

Xcodeのインストールができたら、続いてCocoaPods をインストールします。

お使いのMacがApple シリコンプロセッサ搭載の Macの場合では先にRosetta 2 のインストールが必要とのことです。

Apple シリコンプロセッサ搭載の Mac の場合はターミナルで以下のコマンドを実行します。

     sudo softwareupdate --install-rosetta --agree-to-license

CocoaPods をインストールします。

ターミナルに以下のコマンドを打ち込みます。

     sudo gem install cocoapods

パスワード入力を求められるので、PC のパスワードを入力しインストールを完了してください。

続いてiOSシュミレーターを入れていきます。

Xcodeを開いてXcode → Settingsをクリックします。

PlattformsからiOSのGetをクリックしてインストールしてください。

Android Studio のセットアップ

こちらの公式サイトからAndroid Studioをダウンロードしてください。

任意のフォルダにダウンロードをしたファイルを開き、指示に従って Application に追加しましょう。

Application フォルダから Android Studio を立ち上げ、指示に従ってインストールを進めます。

次に Flutter を使う為のプラグインを Android Studio にインストールします。

Android Studio を開き、Plugin から flutter を検索し、インストールをクリックします。

インストールが完了したら、「Restart IDE」を押して完了です。

次にコマンドラインから Android を実行する為のAndroid SDK Command-line Toolsをインストールします。

Android Studio を起動し、「SDK Manager」を開きます。

次に「Android SDK」欄の「SDK Tools」タブを開き、 「Android SDK Command-line Tools (latest)」にチェックを入れ、「Apply」を押します

その後、確認画面が出るので OK を押してインストールしてください。

Android License の設定

android license を設定をしていきます。

ターミナルを開いて以下のコマンドを打ち込みます。

     flutter doctor --android-licenses

すると下記の通り、いくつかのライセンス契約書を確認する様に求められるので y を入力した後 Enter を押して進みます。

     Review licenses that have not been accepted (y/N)? y

すると５枚ほどライセンスの確認書類が表示されるので全て y を入力して Enter で承認します。

通常のターミナルに戻ったら設定完了です。

flutter doctor

Android Studio と Xcode の設定が完了したら以下コマンドを実行してみてください。

      flutter doctor

flutter doctorコマンドでは Flutter SDK、 Dart、Android Studio、Xcode など Flutter 開発で必要とされるツールの設定状況を確認する事が出来ます。

末尾に-vを付ける事で詳細な情報を表示してくれるので、エラーが発生しているような場合はflutter doctor -vで詳細を確認してください。

すべての項目が緑色のチェックになっていれば完了です！！

お疲れ様でした！！

まとめ

今日はFlutter環境構築(Mac編)を解説していきました！！

いかがだったでしょうか？

もしエラーなどが出てうまくいかないことがあれば落ち着いてエラーメッセージなどで検索してみてください。

よろしくお願いします！！

次回は環境構築(Windows編)を解説していきたいと思います！！

良きFlutterライフを！！