Flutter環境構築手順
前提:AppleIDが作成済みであること、Mac OSであること
1. Flutter SDKのインストールとPATH設定
ダウンロード元:
https://flutter.dev/
a. 上記ダウンロード元リンクのページを開き、画面右上の「Get Started」ボタンをクリックする
b. 自分のPCのOSに合ったインストーラを取得する
c. "インストールされたzipファイルを「Macintosh HD > ユーザー > (ユーザー名)> development」のフォルダに移動し、解凍する
(上記のフォルダは例。任意のフォルダでよい)"
d. ターミナルを起動する
e. 以下のコマンドを実行し、使用しているシェルを確認する
echo $SHELL
「/bin/zsh」と返ってきたら使用しているシェルは「zsh」、「/bin/bash」 と返ってきたら「bash」
f. 手順eでzshだった場合は
open ~/.zshrc
のコマンドを実行してファイルを開き、下記を追記・保存して閉じる
open ~/.bash_profile
g. 手順fで開いたファイルに以下を追記し、保存してファイルを閉じる
export PATH="$PATH:$HOME/development/flutter/bin"
※ 手順cでzipファイルを「deployment」以外の任意のフォルダに移動させた場合、上記のファイルパスは適切なものに置き換える
h. ターミナルで以下のコマンドを実行し、手順gの変更内容を反映させる
手順eで「zsh」だった場合は
source ~/.zshrc
手順eで「bash」 だった場合は
source ~/.bash_profile
i. ターミナルで以下のコマンドを実行し、flutterが正しくインストールされていることを確認する
which flutter
「/Users/[ユーザ名]/development/flutter/bin/flutter/flutter」が返ってきたらOK
2. Android Studioのインストールとセットアップ
ダウンロード元:
https://developer.android.com/studio
a. 上記ダウンロード元リンクのページを開き、画面真ん中の緑のボタン「Download Android Studio」をクリックしてインストーラを取得する
b. ダウンロードしたdmgを開き、Android Studio.appのアイコンをApplicationsにドラッグ&ドロップする
c. Android Studioを起動する
d. 画面に従ってセットアップを完了する(基本的にそのまま「Next」を押下していけばOK)
e. 左側に表示されるメニュー一覧からPluginsを開き、「flutter」と検索する
f. 検索結果で表示された「Flutter」のインストールボタンを押下する(「Flutter Intl」も入れてる人がいるけど、必須じゃないかも)
g. 同じく「dart」と検索し、検索結果で表示された「Dart」のインストールボタンを押下する
※ flutterのインストールと同時に自動的にインストールされている場合は「Installed」になっているので、この手順はスキップしてよい
h. 左側メニューの「Projects」画面に戻り、「More Actions」>「SDK Manager」を押下する
i. SDK Toolsタブを開き、画面下の方の「Hide Obsolete Packages」のチェックを外す
「Android SDK Command-line Tools (latest)」と「Android SDK Tools (Obsolete)」を選択してOKを押下する
j. ターミナルで以下のコマンドを実行し、Androidのライセンスに同意する
flutter doctor --android-licenses
3. Visual Studio Codeのインストールと、Flutter,Dartのプラグイン導入
ダウンロード元:
https://code.visualstudio.com/download
a. 上記ダウンロード元リンクのページを開き、自分のPCのOSに合ったインストーラを取得する
b. ダウンロードしたzipファイルをダブルクリックで展開し、展開されたVSCodeアプリをアプリケーションフォルダにドラッグ&ドロップする
c. VSCodeを起動する
d. 左側に表示されているメニューから、拡張機能のページを開く
e. Flutter, Dartをそれぞれ検索してインストールする
4. Xcodeのインストールとライセンス同意
ダウンロード元:
https://apps.apple.com/jp/app/xcode/id497799835?mt=12
a. 上記のダウンロード元リンクのページを開き、AppStoreで開く
b. AppStoreからXCodeをインストールする
c. インストールが終了したらXCodeを開く
d. ターミナルで「flutter doctor」を実行し、エラー文に記載のコマンドを実行してライセンスに同意する
5. Homebrewのインストール (必須じゃない)
ダウンロード元:
https://brew.sh/index_ja
a. 上記のダウンロード元リンクのページを開き、記載してあるインストールコマンドをターミナルで実行する
6. fvmのインストール (必須じゃない)
a. ターミナルで以下のコマンドを実行する
brew tap leoafarias/fvm
brew install fvm
b. 使用しているシェルが「zsh」の場合は
open ~/.zshrc
使用しているシェルが「bash」の場合は
open ~/.bash_profile
のコマンドを実行して、ファイルを開く
c. 手順bで開いたファイルに以下を追記してPATHを通す
export PATH="$PATH:$HOME/.pub-cache/bin"
7. Rubyのインストールとバージョンアップ(必須じゃない)
a. ターミナルで以下のコマンドを実行し、rbenvをインストールする
brew install rbenv
echo 'eval "$(rbenv init -)"' >> ~/.zshrc
source ~/.zshrc
b. 以下のコマンドを実行し、Rubyの最新バージョンを調べる
rbenv install --list
c. 手順bの結果で確認した最新バージョンをインストールする(以下のコマンドの数字部分を置き換える)
rbenv install 3.1.2
d. 標準で利用するRubyのバージョンを指定する(以下のコマンドの数字部分を置き換える)
rbenv global 3.1.2
e. 以下のコマンドを実行してバージョンを確認する
ruby -v
8. CocoaPodsのインストール
a. ターミナルで以下のコマンドを実行し、CocoaPodsをインストールする
sudo gem install cocoapods
動作確認
1. Flutterプロジェクトの作成
a. ターミナルから、任意のディレクトリ上で以下のコマンドを実行する
flutter create myapp
※「myapp」は作成したいアプリ名で置き換える
※アプリ名には、半角小文字と「_」のみ使用可能
2. VSCodeで実行
a. VSCodeの「開く」から、1で作成したプロジェクトのフォルダ(myapp)を選択して開く
b. flutter doctorコマンドを実行し、「×」が付いている項目があれば記載通りに解消する
c. VSCodeでlib/main.dartを開き、F5キーを押下する
d. 動作させたい端末(Chrome, iOS, Android)のエミュレータを選択する
e. 選択した端末のエミュレータが起動し、サンプルアプリが起動することを確認する