🕊️

Flutterの実務環境構築

2023/12/05に公開

最近会社用・私用など複数台のMacでFlutterの環境構築をしたので、共通して最初に行う内容を改めてまとめました📝
初期状態のMacを「既存のFlutterプロジェクトを実機でビルドできる状態」にするまでを想定しています。

【実施環境】
・M2 MacBook Air / M2Max Mac Studio

なお、コピーしやすくするためにコマンドを表す$%は省略しています。
予めご了承ください🙇‍♂️


Homebrewのインストール

コマンドの実行

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"



PC自体のパスワードを求めれるので入力

(ログ)
==> Checking for `sudo` access (which may request your password)...
Password:



キー入力を求められたらEnter

(ログ)
Press RETURN/ENTER to continue or any other key to abort:



パス通し(M2以降のみ)
Homebrewのインストールが終わると、

(ログ)
==> Next steps:
- Run these two commands in your terminal to add Homebrew to your PATH:

というログが出るので、その下にあるコマンドをそれぞれ実行

(echo; echo 'eval "$(/opt/homebrew/bin/brew shellenv)"') >> /Users/〇〇〇〇/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"

(実際には〇〇〇〇の部分は各ユーザー名が入っているのでログをコピーして実行する)


バージョン確認してエラーが出なければ完了

brew --version

https://brew.sh/


Gitのインストール

brew install git

nodebrewのインストール

brew install nodebrew

CocoaPodsのインストール

brew install cocoapods

Dartのインストール

brew tap dart-lang/dart
brew install dart

FVMのインストール

brew tap leoafarias/fvm
brew install fvm

Rubyのインストール

rbenvをインストール

brew install rbenv



インストール可能なRubyバージョン確認

rbenv install -l



指定したバージョンのRubyをインストール

rbenv install バージョン番号

(例: rbenv install 3.2.2


指定したバージョンのRubyを使用可能にする

rbenv global バージョン番号

(例: rbenv global 3.2.2


バージョン確認

ruby --version

Firebase系CLIのインストール

Firebase CLI

brew install firebase-cli



FlutterFire CLI

dart pub global activate flutterfire_cli

パスの追記

先ほどインストールしたrbenvFlutterFire CLIのパスを通しておきます。


zshrcファイル作成(初回のみ)

touch .zshrc



zshrcファイルを開く

open ~/.zshrc



zshrcに↓を追加

# FlutterFire CLI
export PATH="$PATH":"$HOME/.pub-cache/bin"

# rbenv 
eval "$(rbenv init - zsh)"



変更を保存

source ~/.zshrc

その他ツールのインストール

(必要に応じて追加)

  • Flutter Genのインストール
brew install FlutterGen/tap/fluttergen


  • Melosのインストール
dart pub global activate melos


  • AWS Amplify CLIのインストール
brew install aws-amplify

SSHでのGitHub接続

SSHキーを生成

ssh-keygen -t ed25519 -C "キー名"

(例: ssh-keygen -t ed25519 -C "M2 MacBook Air Key"


保存場所を求められるので(特に気にしなければ)そのままEnter

(ログ)
Enter file in which to save the key (/Users/〇〇〇〇/.ssh/id_ed25519): 



パスフレーズを求められるので入力

(ログ)
Enter passphrase (empty for no passphrase): 
Enter same passphrase again: 



ssh-agentをバックグラウンド実行するようにする

eval "$(ssh-agent -s)"



ssh Configを開く

vi ~/.ssh/config



適当なキーを叩いてINSERT状態にして下記情報を入力

Host *
  AddKeysToAgent yes
  UseKeychain yes
  IdentityFile ~/.ssh/id_ed25519

(入力したらesc+:wqで閉じる)


作成したキー情報をクリップボードにコピーする

pbcopy < ~/.ssh/id_ed25519.pub

(ターミナル上にログは特に出ません。)
クリップボードに内容がコピーされているのでそれをGitHubのSSHキー作成ページで貼り付けてSSHKeyを作成



接続を確認

ssh -T git@github.com



接続するか聞かれるのでyesを選択

(ログ)
Are you sure you want to continue connecting (yes/no/[fingerprint])? yes 



パスフレーズを聞かれるのでキー作成時に設定したものを入力

(ログ)
Warning: Permanently added 'github.com' (ED25519) to the list of known hosts.
Enter passphrase for key '/Users/〇〇〇〇/.ssh/id_ed25519':



公式ドキュメント
https://docs.github.com/ja/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent


開発ツールのダウンロード


AndroidStudioのセットアップ

  • コマンドラインツールの設定
  1. Android Studioを開く
  2. 上部メニューバーからAndroid Studioを選択
  3. Settingsを選択
  4. Languages&Frameworks/Android SDKを選択
  5. SDK Toolsタブをクリック
  6. Android SDK Command-line Toolsにチェックを入れてOKボタンをクリック


  • Andridライセンスコマンドの実行
    (どこかしらのFlutterプロジェクト下で)
flutter doctor --android-licenses

複数回Accept? (y/N):を聞かれるので都度yを入力してEnter


Xcodeのセットアップ

  • Xcodeでログイン
  1. Xcodeを開く
  2. ライセンスに同意する
  3. iOSを選択してダウンロード
  4. 上部メニューバーからXcodeを選択
  5. Settingsを選択
  6. Accountsを選択
  7. 左下の+ボタンをクリック
  8. Apple IDを選択
  9. ログイン


  • コマンド実行
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch

アプリのビルド

  • 環境に不備がないか確認
flutter doctor -v
  • (実機が認識しない場合は端末のデベロッパモードを確認する or 端末を接続し直す)
  • エディタで実機を選択してビルド

後はプロジェクト毎に必要なenv等を配置し、ビルドが出来たら完了です。
お疲れ様でした🙌


Spellaエンジニアリングブログ

Discussion