Flutter環境構築(Mac編)
作業環境
MacBook Air(macOS Monterey 12.4)
チップ: Apple M1
メモリ: 16 GB
当記事では以下の手順は省略します。
1)Web環境のセットアップ(Chromeをインストール)
2)使用するエディタのインストール（vscodeがおすすめ！）
3)アプリの新規作成/実行（flutter create {APP_NAME} / flutter run)
0.Homebrewのインストール
公式ページを参考に以下コマンドを実行
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
上記コマンドが完了すると、Pathを通すよう指示があるので.zshrcに追記します。
vi ~/.zshrc
# homebrew
alias brew="PATH=/opt/homebrew/bin brew"
eval "$(/opt/homebrew/bin/brew shellenv)"
export PATH="/opt/homebrew/bin:$PATH"
下記コマンドを実行して、バージョンが表示されれば完了です。
brew -v
1.FlutterSDKのインストール
公式ページを参考にbrew installを実行
brew install --cask flutter
下記コマンドを実行して、バージョンが表示されれば完了です。
flutter --version
補足）Apple Silicon Macの場合はRosettaが必要なので、以下を実行してください。
sudo softwareupdate --install-rosetta --agree-to-license
2.iOSのセットアップ
flutter doctorを実行してみると以下が出力されます。
出力された内容に従って、以下の順に進めていきます。
- WebまたはAppStoreからXcodeをインストール
- インストールが完了したら指示通りにコマンドを実行
- プラグインを利用するためにはCocoaPodsが必要なのでインストールする
2-1.Xcodeのインストール
インストールが終わったら以下コマンドを実行
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
2-2.CocoaPodsのインストール
以下コマンドを実行し、CocoaPodsをインストール
sudo gem install cocoapods
これでiOSの環境構築が完了しました！
flutter doctorを実行して確認してみましょう
3.Androidのセットアップ
iOSのセットアップ時と同様にflutter doctorを実行してみると以下が出力されます。
また出力された内容に従って、以下の順に進めていきます。
- WebからAndroidStudioをインストール（今回はHomebrew経由でインストールします）
- インストールが完了したらアプリを起動。初期設定を進める
- Androidの各種ライセンスに同意
３-1.Android Studioのインストール
brew install --cask android-studio
3-2.AndroidStudioの初期設定
AndroidStudioを起動
→ 設定をインポートするか（インポートしない）
→ 統計情報を送信するかどうか（どちらでも）
→ 次へ
→インストールタイプを選択（Standardを選択)(スクショ撮り忘れました・・・。)
→ UIテーマの選択(どちらでも)
→ android-sdk-licenseのライセンスに同意
→ android-sdk-arm-dbt-licenseのライセンスに同意
→ More Actionのプルダウンを展開
→ SDK Managerを選択
→Android SDK Command-line Toolsにチェック
→OKを押下し、追加のインストールを開始する
3-3.ライセンスに同意
flutter doctor --android-licenses
いくつか文面が出てくるので、それぞれ読み進めてyを押していきます。
これでAndroidの環境構築も完了しました。
flutter doctorを実行して確認してみましょう
最後に
記事にしてみると、結構手順が多いですね・・・。
参考にしていただければ幸いです。
Discussion