4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Flutter環境構築手順(mac編)

Last updated at Posted at 2023-04-05

はじめに

Flutterを使用するプロジェクトに参画した際に学んだことを備忘録として残しておこうと思います。
まずは環境構築手順から。
また、利用規約の同意については自己判断でお願いします。(そもそも同意しないと使えませんが。。)

1、FlutterSDK のインストールと PATH 設定

1、以下のリンクを開き、画面右上の「Get Started」ボタンをクリックする
ダウンロード先:Flutter - Build apps for any screen

スクリーンショット 2023-03-13 19.28.15.png

2、macOS を選択する

スクリーンショット 2023-03-13 19.30.11.png

3、お使いのMacに応じてintel or Apple Siliconどちらかのzipファイルをダウンロードする

image.png

4、ターミナルを起動して、cdコマンドで解凍したい場所に移動する

cd ~/解凍先パス

5、zipファイルをダウンロードした際のページに、unzipコマンドが記載されているので実行する
 (参照しているMacがintelなのかM1以降なのかでコマンド表記が自動で変わるらしい。凄く助かる)

スクリーンショット 2023-03-13 19.48.13.png

解凍するとFlutterという名のフォルダが出来ているはず。
image.png

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

スクリーンショット 2023-03-14 11.58.54.png

2、お使いのMacに応じてintel or Apple Siliconどちらかのzipファイルをダウンロードする
image.png

3、ダウンロードした dmg を開くと自動的に以下の画面が表示されるので、Android Studio.app のアイコンを Applications にドラッグ&ドロップする
image.png

4、Android Studioを起動する(Launchpadにアイコンが追加されているはず。)
image.png

5、画面に従ってセットアップを完了する。(基本的にデフォルトのままNextや肯定的な選択肢を選べばよいかと。)
※ 以下の画像はピックアップしたもの

こだわりがなければ、Standardでよいと思います。
スクリーンショット 2023-03-15 9.25.21.png
UIテーマはお好みで選択してください。   
スクリーンショット 2023-03-15 9.25.27.png
利用規約はしっかり確認してからAcceptを選択し、Finishボタンを押下する
スクリーンショット 2023-03-15 9.25.03.png
そうすると色々ダウンロードが始まりますので終わるまで待ちます。
スクリーンショット 2023-04-04 18.00.19.png
ダウンロードが終わったらFinishボタンを押下して閉じます。
image.png

6、FlutterとDartのプラグインをインストール
左側に表示されるメニュー一覧から Plugins を開き、「flutter」と検索する
image.png
検索結果で表示された以下のインストールボタンを押下する
スクリーンショット 2023-04-04 18.03.05.png
利用規約はしっかり確認してからAcceptを選択する
image.png
Dartのプラグインをインストールすると出た場合は、必要なので、Installボタンを押下する
image.png
※ 上記の選択肢が出てこなければ、同じ手順で「dart」と検索し、検索結果で表示された以下のインストールボタンを押下する

Restart IDEとなっていたらInstall完了
スクリーンショット 2023-04-04 18.07.03.png
プラグインを適応するためには再起動が必要
以下の選択肢が出てきた場合は、Restartボタンを押下し再起動させる
image.png

7、SDKとAndroidエミュレータのインストール
左側メニューの「Projects」画面に戻り、「More Actions」>「SDK Manager」を押下する
image.png
エミュレータのためのAPIをインストールする。Preview以外のものを選択し、Applyボタンを押下する(今回は記事作成時点で最新のものを選択)
image.png
OKボタンを押下する
スクリーンショット 2023-04-04 18.27.46.png
インストールが終わったら、Finishボタンを押下する
スクリーンショット 2023-04-04 18.29.18.png
エミュレータをインストールする。画面右下の方の「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」
スクリーンショット 2023-04-04 18.36.31.png
OKボタンを押下する
image.png
利用規約はしっかり確認してからAcceptを選択し、Nextボタンを押下する
image.png
 インストールが終わったら、Finishボタンを押下する
image.png
SDK Tools タブを開き、画面右下の方の「Hide Obsolete Packages」のチェックを外すと
「Android SDK Tools (Obsolete)」の選択肢が出てくるのでチェックを入れる
スクリーンショット 2023-04-04 18.24.36.png
Android SDK Command-line Tools (latest)にチェックを入れて、OKボタンを押下する
image.png
OKボタンを押下する
image.png
 インストールが終わったら、Finishボタンを押下する
image.png

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
スクリーンショット 2023-04-04 19.18.48.png

2、ダウンロードした zip ファイルをダブルクリックで展開し、展開された VSCode アプリをアプリケーションフォルダにドラッグ&ドロップする(スクショ撮り忘れたため割愛。。)

3、VSCode を起動する
image.png

4、FlutterとDartのプラグインをインストール
左側に表示されているメニューから、拡張機能のページを開き、「flutter」と検索し、Flutterを選択後、インストールボタンを押下する
スクリーンショット 2023-04-04 19.27.17.png
以下のようになっていたらインストール完了
image.png
「Dart」と検索すると、FLutterと同時にインストールされているはず。されていなければ、こちらもインストールする
image.png
5、Vscodeを再起動する
プラグインを適応するためには再起動が必要

4、Xcode のインストールとライセンス同意

iOSエミュレータを起動するためにXcodeをインストールする

1、AppStoreを起動し、左側の検索バーに「Xcode」 と入力すると以下の画像のものが見つかるので、インストールするのだが、これがすごく時間かかる。。。。
image.png
2、インストールが終了したら Xcode を開く
image.png
3、利用規約はしっかり確認してからAgreeボタンを押下し、ライセンスに同意する
スクリーンショット 2023-04-04 19.51.16.png
以下の画面が出てきたら、Installボタンを押下する
image.png
Countineボタンを押下する
image.png
この画面になったらXcodeの準備は完了
image.png
4、シュミレータ起動
DockerにあるXcodeのアイコンを右クリックし、「Open Develop Tool」 → 「Simulator」を選択する
image.png
iOSのシュミレータが起動する
image.png

補足

M1以降のMacだと、Xcodeインストール後に、以下のコマンドを実行しないといけないようです。

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

このコマンドを実行すると、ライセンス規約についての表示が出てきたら内容確認してretrun/Enterキーを押下する(出ない時もある?)

sudo xcodebuild -runFirstLaunch

5、Homebrew のインストール

MacOS専用ではあるが、パッケージ管理(FlutterSDK..etc)には最適なのでインストールする。

1、以下のリンクを開き、記載してあるコマンドをターミナルで実行する
  ダウンロード元:Homebrew
スクリーンショット 2023-04-04 19.48.02.png
このワードが表示されたら、文字のごとく 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)を選択して開く
image.png

Vscode上で作成したプロジェクトが開く
image.png

3、ターミナルをVscode上で開く
メニューからターミナル → 新しいターミナルを選択する
image.png
Vscodeの下の方に以下のようにターミナルが開く
image.png

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」と入力する
image.png

5、エミュレータを選択する(画像だとiOS)
image.png

6、VSCodeのターミナルで以下のコマンドを実行するとサンプルアプリが起動する

fvm flutter run

7、選択した端末のシミュレータが起動し、サンプルアプリが起動することを確認出来れば環境構築は完了です
image.png

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?