はじめに
Flutterを使用するプロジェクトに参画した際に学んだことを備忘録として残しておこうと思います。
まずは環境構築手順から。
また、利用規約の同意については自己判断でお願いします。(そもそも同意しないと使えませんが。。)
1、FlutterSDK のインストールと PATH 設定
1、以下のリンクを開き、画面右上の「Get Started」ボタンをクリックする
ダウンロード先:Flutter - Build apps for any screen
2、macOS を選択する
3、お使いのMacに応じてintel or Apple Siliconどちらかのzipファイルをダウンロードする
4、ターミナルを起動して、cdコマンドで解凍したい場所に移動する
cd ~/解凍先パス
5、zipファイルをダウンロードした際のページに、unzipコマンドが記載されているので実行する
(参照しているMacがintelなのかM1以降なのかでコマンド表記が自動で変わるらしい。凄く助かる)
解凍するとFlutterという名のフォルダが出来ているはず。
6、以下のコマンドを実行し、使用しているシェルを確認する。
echo $SHELL
表示されたのが、/bin/zshだった場合、設定ファイル名は「.zshrc」
表示されたのが、/bin/bash の場合、設定ファイル名は「.bash_profile」
7、設定ファイルの有無を確認するためホームディレクトリに戻り、lsコマンドで確認する
(設定ファイルは隠しファイルのため -a オプションをつける)
cd
ls -a
一覧が表示されるので、その中に設定ファイル名がなければ以下のtouchコマンドで作成し、あれば作成不要
zshの場合
touch .zshrc
bashの場合
touch .bash_profile
8、設定ファイルをopenコマンドで開き、Pathと環境変数を記載する
zshの場合
open .zshrc
bashの場合
open .bash_profile
9、ファイルに以下を追記し、保存してファイルを閉じる
export PATH="$PATH:[通したいパス]/bin"
入力例
export PATH="$PATH:$HOME/development/flutter/bin"
10、Pathと環境変数の変更を反映させる
この工程を忘れがち。これやらないと変更結果が反映されませんので注意!
zsh の場合
source ~/.zshrc
bash の場合
source ~/.bash_profile
11、whichコマンドでflutterのPathが反映出来ているか確認する
which flutter
表示例
[設定したパス]/bin/flutter/flutter
が返ってきたら OK
2、Android Studio のインストールとセットアップ
続いては、Android Studioをインストールしていきます。
Androidのエミュレーターを使用するには必須ですね。
1、以下のリンクを開き、画面真ん中の緑の「Download Android Studio 〜」ボタンをクリックし利用規約が出てくるのでよく読み、納得出来たら同意する。
ダウンロード元:Download Android Studio & App Tools - Android Developers
2、お使いのMacに応じてintel or Apple Siliconどちらかのzipファイルをダウンロードする
3、ダウンロードした dmg を開くと自動的に以下の画面が表示されるので、Android Studio.app のアイコンを Applications にドラッグ&ドロップする
4、Android Studioを起動する(Launchpadにアイコンが追加されているはず。)
5、画面に従ってセットアップを完了する。(基本的にデフォルトのままNextや肯定的な選択肢を選べばよいかと。)
※ 以下の画像はピックアップしたもの
こだわりがなければ、Standardでよいと思います。
UIテーマはお好みで選択してください。
利用規約はしっかり確認してからAcceptを選択し、Finishボタンを押下する
そうすると色々ダウンロードが始まりますので終わるまで待ちます。
ダウンロードが終わったらFinishボタンを押下して閉じます。
6、FlutterとDartのプラグインをインストール
左側に表示されるメニュー一覧から Plugins を開き、「flutter」と検索する
検索結果で表示された以下のインストールボタンを押下する
利用規約はしっかり確認してからAcceptを選択する
Dartのプラグインをインストールすると出た場合は、必要なので、Installボタンを押下する
※ 上記の選択肢が出てこなければ、同じ手順で「dart」と検索し、検索結果で表示された以下のインストールボタンを押下する
Restart IDEとなっていたらInstall完了
プラグインを適応するためには再起動が必要
以下の選択肢が出てきた場合は、Restartボタンを押下し再起動させる
7、SDKとAndroidエミュレータのインストール
左側メニューの「Projects」画面に戻り、「More Actions」>「SDK Manager」を押下する
エミュレータのためのAPIをインストールする。Preview以外のものを選択し、Applyボタンを押下する(今回は記事作成時点で最新のものを選択)
OKボタンを押下する
インストールが終わったら、Finishボタンを押下する
エミュレータをインストールする。画面右下の方の「Show package Details」にチェックいれると、詳細画面に切り替わるので、イメージを選択し、Applyボタンを押下する。
Macが、Apple Silicon または Intelで選択肢が変わる。
Apple Siliconの場合:「Google APIs ARM 64 v8a System Image」
Intelの場合:「Google APIs Intel x86_64 Atom System Image」
OKボタンを押下する
利用規約はしっかり確認してからAcceptを選択し、Nextボタンを押下する
インストールが終わったら、Finishボタンを押下する
SDK Tools タブを開き、画面右下の方の「Hide Obsolete Packages」のチェックを外すと
「Android SDK Tools (Obsolete)」の選択肢が出てくるのでチェックを入れる
Android SDK Command-line Tools (latest)にチェックを入れて、OKボタンを押下する
OKボタンを押下する
インストールが終わったら、Finishボタンを押下する
8、ターミナルを起動し、以下のコマンドを実行することでAndroidのライセンスに同意する
flutter doctor --android-licenses
以下のように利用規約の同意を何度か求められるので「y」を入力する
Review licenses that have not been accepted (y/N)? y
Accept? (y/N): y
以下の文言が表示されたらライセンス同意手続きが完了する
All SDK package licenses accepted
3、Visual Studio Code のインストールと、Flutter,Dart のプラグイン導入
1、以下のリンクを開き、画面真ん中のMacボタンをクリックし、Zipファイルをダウンロードする
ダウンロード元:Download Visual Studio Code
2、ダウンロードした zip ファイルをダブルクリックで展開し、展開された VSCode アプリをアプリケーションフォルダにドラッグ&ドロップする(スクショ撮り忘れたため割愛。。)
4、FlutterとDartのプラグインをインストール
左側に表示されているメニューから、拡張機能のページを開き、「flutter」と検索し、Flutterを選択後、インストールボタンを押下する
以下のようになっていたらインストール完了
「Dart」と検索すると、FLutterと同時にインストールされているはず。されていなければ、こちらもインストールする
5、Vscodeを再起動する
プラグインを適応するためには再起動が必要
4、Xcode のインストールとライセンス同意
iOSエミュレータを起動するためにXcodeをインストールする
1、AppStoreを起動し、左側の検索バーに「Xcode」 と入力すると以下の画像のものが見つかるので、インストールするのだが、これがすごく時間かかる。。。。
2、インストールが終了したら Xcode を開く
3、利用規約はしっかり確認してからAgreeボタンを押下し、ライセンスに同意する
以下の画面が出てきたら、Installボタンを押下する
Countineボタンを押下する
この画面になったらXcodeの準備は完了
4、シュミレータ起動
DockerにあるXcodeのアイコンを右クリックし、「Open Develop Tool」 → 「Simulator」を選択する
iOSのシュミレータが起動する
補足
M1以降のMacだと、Xcodeインストール後に、以下のコマンドを実行しないといけないようです。
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
このコマンドを実行すると、ライセンス規約についての表示が出てきたら内容確認してretrun/Enterキーを押下する(出ない時もある?)
sudo xcodebuild -runFirstLaunch
5、Homebrew のインストール
MacOS専用ではあるが、パッケージ管理(FlutterSDK..etc)には最適なのでインストールする。
1、以下のリンクを開き、記載してあるコマンドをターミナルで実行する
ダウンロード元:Homebrew
このワードが表示されたら、文字のごとく RETURN/ENTERキーを押下する
Press RETURN/ENTER to continue or any other key to abort:
2、インストールされたか確認する
brew -v
バージョンが表示されていたら成功
Homebrew 2.5.5
補足
M1以降のMacだと、ディレクトリ構成が変わるらしく、「/usr/local」ではなく「opt/homebrew」にhomebrewをインストールする必要があるようです。
1、ホームに移動する
cd /
2、lsコマンドでホーム直下にoptフォルダがあるか確認する
ls
optフォルダがあれば、cdコマンドで移動し、lsコマンドで直下にhomebrewフォルダがあるか確認する
cd /opt
ls
そもそも、optフォルダがなければ作成する
mkdir opt
opt直下にHomebrewをインストールする
mkdir homebrew && curl -L https://github.com/Homebrew/brew/tarball/master | tar xz --strip 1 -C homebrew
設定ファイルを開く
open ~/.zshrc
Pathを追加し、保存する
export PATH="/opt/homebrew/bin:$PATH"
修正内容を反映するためのおまじないコマンドをお忘れなく
source ~/.zshrc
6、CocoaPods のインストール
iOSのライブラリ管理のために導入する
その前に、デフォルトでMacに搭載されているRubyを最新化する必要があるので
Rubyのパッケージ管理のためにrbenvを導入する
1、Rubyのパッケージ管理ツールを最新化する(MacはデフォルトでRubyが入ってます)
rbenvをインストールする
brew install rbenv
rbenvの初期設定
rbenv init
以下の記載を.zshrc または .bash_profileに追加しろと出てくるので追加する
eval "$(rbenv init - zsh)"
2、設定ファイルに以下を追記し、保存してファイルを閉じる
zshの場合
open .zshrc
bashの場合
open .bash_profile
以下を記載する
eval "$(rbenv init - zsh)"
修正内容を反映するためのおまじないコマンドをお忘れなく
zsh の場合
source ~/.zshrc
bash の場合
source ~/.bash_profile
インストールされたか確認する
rbenv versions
初回であれば、systemが表示されていれば成功
* system
rbenvでインストールできる最新verを以下のコマンドで確認する
rbenv install --list
以下のように表示されるはず(今回は3.1.4を使用する)
2.7.8
3.0.6
3.1.4
jruby-9.4.2.0
mruby-3.2.0
picoruby-3.0.0
truffleruby-22.3.1
truffleruby+graalvm-22.3.1
最新のものをインストールする
rbenv install 3.1.4
標準で使用するバージョンを指定する
rbenv global 3.1.4
Rubyのバージョンを確認する
ruby -v
以下のようにバージョンが出てきたら成功
ruby 3.1.4p223 (2023-03-30 revision 957bb7cb81) [arm64-darwin22]
4、ターミナルで以下のコマンドを実行し、CocoaPods をインストールする
sudo gem install cocoapods
3、セットアップする
pod setup
4、インストール出来ているか確認する
pod --version
バージョンが表示されたら成功
1.12.0
7、fvm のインストール
Flutterのバージョン管理のために導入する
fvmを使用することで、Flutterのバージョンの切り替えが容易になる
1、ターミナルで以下のコマンドを実行し、Homebrew経由でfvmをインストールする
brew tap leoafarias/fvm
brew install fvm
2、設定ファイルをopenコマンドで開き、Pathと環境変数を記載する
zshの場合
open ~/.zshrc
bashの場合
open ~/.bash_profile
Pathを追記する
export PATH="$PATH:$HOME/fvm/default/bin"
修正内容を反映するためのおまじないコマンドをお忘れなく
zsh の場合
source ~/.zshrc
bash の場合
source ~/.bash_profile
8、fvmの使用方法
1、インストール可能なFlutterバージョン一覧を確認する
fvm releases
2、flutterをインストールしてバージョン指定する
fvm install <バージョン>
使用するバージョンを指定する
fvm use <バージョン>
全てのプロジェクトに反映したい場合はglobalを指定する
fvm global <バージョン>
3、アンインストールする時は以下のコマンドを実行する
fvm remove <バージョン>
4、インストール済みのFlutterバージョンを確認する
fvm list
9、動作確認
ここまできたら、flutter doctorコマンドで環境を確認してみましょう
ターミナルから、以下のコマンドを実行する
fvm flutter doctor
以下のように全てチェックになっていれば成功
[✓] Flutter (Channel stable, 3.7.7, on macOS 13.1 22C65 darwin-arm64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.1)
[✓] IntelliJ IDEA Community Edition (version 2019.3.2)
[✓] VS Code (version 1.73.1)
[✓] VS Code (version 1.77.0)
[✓] Connected device (2 available)
[✓] HTTP Host Availability
1、flutterプロジェクトの作成
ターミナルで任意のディレクトリ上にcdコマンドで移動し、以下のコマンドを実行する
flutter create myapp
※「myapp」は作成したいアプリ名で置き換える
2、VSCode の「開く」から、1 で作成したプロジェクトのフォルダ(myapp)を選択して開く
3、ターミナルをVscode上で開く
メニューからターミナル → 新しいターミナルを選択する
Vscodeの下の方に以下のようにターミナルが開く
4、flutter doctor コマンドを実行する
fvm flutter doctor
以下のように全てチェックになっていれば成功
[✓] Flutter (Channel stable, 3.7.7, on macOS 13.1 22C65 darwin-arm64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.1)
[✓] IntelliJ IDEA Community Edition (version 2019.3.2)
[✓] VS Code (version 1.73.1)
[✓] VS Code (version 1.77.0)
[✓] Connected device (2 available)
[✓] HTTP Host Availability
4、VScode上で、「comannd」+「Shift」+「p」を入力するとコマンドパレットが開くので、検索バーに「flutter :Launch Emulator」と入力する
6、VSCodeのターミナルで以下のコマンドを実行するとサンプルアプリが起動する
fvm flutter run