[Flutter] MacにFlutterの開発環境を構築する

2019年7月5日

Flutterを使い始めたので開発環境の作り方をまとめていきます。

スポンサーリンク

前準備

Homebrewを使用するので、先にインストールしておく必要があります。

Flutterをインストールする

Flutterのオフィシャルサイトから、SDKのインストーラをダウンロードします。

SDKを取得する

「Get Started」を押します。

「macOS」を選択します。

少しスクロールすると「flutter_macOS_vxxx_xxxx_stable.zip」(xxxの部分はバージョン番号など)と書かれたボタンがあるので押します。

インストーラのダウンロードが始まるので、しばらく待ちます。

SDKをインストールする

ダウンロードが終わったら、適当なフォルダに移動して解凍します。

※PATHを通すので、あまり変なところに置かない方がいいです

ターミナルで「.bash_profile」を開きます。

$ vi ~/.bash_profile

移動先のフォルダに対してPathを設定します。

私の場合は、以下を追記しました。

export PATH="$PATH:/Users/[user-name]/Dev/flutter/bin"

設定が完了したら、ターミナルを再起動するか、以下のコマンドを実行して設定を反映させます。

$ source ~/.bash_profile

インストールができたか確認する

ターミナルを再起動して、以下のコマンドを実行します。

$ flutter --version

正しくPATHが設定されていれば、以下のようにFlutterのバージョンが表示されます。

トラブルシューティング:Flutterの中身をコピーするときは隠しファイルに気をつける

こういうエラーがでます。

Error: The Flutter directory is not a clone of the GitHub project.
       The flutter tool requires Git in order to operate properly;
       to set up Flutter, run the following command:
       git clone -b stable https://github.com/flutter/flutter.git

zipを解凍したフォルダの中身をFinderで選択して移動するとでます。

隠しファイル非表示の状態でコピーすると、git関連のファイルが置いていかれるのが原因です。

解凍後のファイルをFinderで操作する場合には気をつけましょう。

flutter doctorを走らせる

doctorコマンドを使うと、開発環境に足りないものを教えてくれます。

私の環境はこんな感じでいろいろ足りないようです。

足りないものを確認したところで、Flutter SDKの環境構築は完了です。

iOSの開発環境を整える

Flutterをインストールしたあとに以下のコマンドを実行すると足りないものを教えてくれるので、指示に従って環境を整えていきます。

$ flutter doctor

iOSで開発するにはこれだけのものが足りないようです。

Xcodeをインストールする

App Storeからインストールします。

Apple Developer Programに登録している方は、そちらからインストーラを取得してインストールしてもいいです。

Command Line Toolをインストールする

ターミナルから以下のコマンドを実行して、Command Line Toolをインストールします。

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

✗ libimobiledevice and ideviceinstaller are not installed. To install with Brew, run:

書かれてある通りにターミナルで順番に実行します。

$ brew update
$ brew install --HEAD usbmuxd
$ brew link usbmuxd
$ brew install --HEAD libimobiledevice
$ brew install ideviceinstaller

✗ ios-deploy not installed. To install:

こちらも同じように指定されたコマンドを実行します。

$ brew install ios-deploy

✗ CocoaPods not installed.

こちらも同じです。

brew install cocoapods
pod setup

Xcodeのラインセンスに同意する

ターミナルから以下のコマンドを実行して、Xcodeのライセンスに同意します。

$ sudo xcodebuild -license from

iOS シミュレータを起動する

ターミナルから以下のコマンドを実行して、iOS シミュレータを起動します。

$ open -a Simulator

Flutterのプロジェクトを作る

ターミナルでプロジェクトを作成するディレクトリへ移動してから、以下のコマンドでFlutterのプロジェクトを作ります。

$ flutter create firstflutter

そこそこ時間がかかるので、しばし待ちます。

トラブルシューティング:プロジェクト名に大文字は使えない

createコマンドでは、プロジェクト名に大文字を入れると怒られます。

プロジェクトをシミュレータで実行する

ターミナルで作成したプロジェクトのディレクトリに移動します。

$ cd firstflutter

プロジェクトを実行します

$ flutter run

こんな感じにシミュレータが起動すれば大丈夫です。

Androidの環境については、また追記します。

おしまい。

スポンサーリンク