Flutter 開発環境構築 for Mac

  • 2019年5月18日
  • 2019年8月4日
  • Flutter
  • 546view

Flutterはクロスプラットフォームに対応しています。

Flutterを使えば、iOSとAndroidアプリを分けて作る必要がありません。(OSに依存するコードについてはネイティブ実装をする必要があります)

iOSアプリを開発するにはX-codeが必要です。X-codeをインストールするにはMacが必要です。要するにMacを使わないとFlutterでクロスプラットフォーム対応アプリを作ることができません。

本記事では使用するパソコンがMacであることを前提として話を進めていきます。また、Macを使用してFlutter開発を行う上でX-codeとAndroidStudioのインストールが必要になります。

X-codeとAndroidStudioが既にインストールされていることを前提としてFlutterの環境を構築する手順を説明していきます。

Flutter インストール

Flutter SDKダウンロード

以下のサイトからmacOS版のFlutter SDK ダウンロードサイトを開きます。

ダウンロードサイト中のGet the Flutter SDKからzipファイルをダウンロードします。zipファイルを解凍するとFlutterプロジェクトが表示されます。

Flutterプロジェクトを任意の場所に配置

ダウンロードフォルダ直下にFlutterプロジェクトをおいたまま進めることも可能ですが、ダウンロードフォルダ内の不要になったファイルを消す時にFlutterプロジェクトも消してしまう可能性があります。

上記理由により、Flutterプロジェクトを任意の場所に移動します。私は以下のようなディレクトリを作成し、そこにFlutterプロジェクトを配置しています。

<username>には自分のユーザー名を指定します。

/Users/<username>/dev/flutter

パス設定

ターミナルから以下のコマンドを叩いてルートディレクトリに移動します。

cd ~

その後、以下のコマンドを叩き、ルートディレクトリに置かれているファイルを一覧表示します。

ls -al

その中に「.bash_profile」ファイルが表示されているか確認します。

この画像には alt 属性が指定されておらず、ファイル名は スクリーンショット-2019-04-25-15.55.09.png です

.bash_profileがなければ以下のコマンドを叩き、「.bash_profile」ファイルを新規作成します。

touch .bash_profile

.bash_profileにPathを追加

Flutterプロジェクト直下にbinフォルダが置かれています。

以下の<bin>にbinフォルダまでのパスを設定し、ターミナルから以下のコマンドを叩いて、パス設定を行います。

export PATH="<bin>:$PATH"
(例:export PATH="/Users/username/dev/flutter/bin:$PATH")

ターミナルから以下のコマンドを叩いた時に「Manage your Flutter app development.」(ヘルプ)が表示されればFlutterの実行準備が整っています。

flutter

Homebrewのインストール

既にHomebrewをお使いの方はこのステップを飛ばしてください。

Homebrewのサイトにアクセスします。

この画像には alt 属性が指定されておらず、ファイル名は スクリーンショット-2019-04-25-13.07.37-1024x745.png です

赤枠内のスクリプトをターミナルに貼り付けた後にEnterキーを叩きます。

叩くと最後にパスワードの確認が求められるので、Macで使用しているパスワードを入力してEnterキーを叩けば、Homebrewがインストールされます。

この画像には alt 属性が指定されておらず、ファイル名は スクリーンショット-2019-04-25-15.01.44-1024x148.png です

Flutterの依存関係の確認

ターミナルから以下のコマンドを叩き、Flutterの依存関係の確認を行います。

flutter doctor

[!]は警告です。Connected device(スマホの実機接続がされていない為の警告)以外は解消しておきましょう。

× は対応が必要な箇所です。

Android 側のライセンスエラー解決

Android toolchain…とAndroid側のライセンスエラーが出ています。

以下のコマンドを叩いて、ライセンスを読んで「y(yes)」を押した後にEnterキーを押していきます。yとEnterキーのタイプを繰り返せば大丈夫です。

flutter doctor --android-licenses

iOS側のエラー解決

iOS toolchain…とエラーが出ています。

その中に

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

と表示されています。ターミナルで上から順に上記のbrewコマンドを叩いていきます。私の場合、上から順番にコマンドを叩いた時に以下のような警告が出ました。

Warning: ios-deploy 1.9.4 is already installed, it’s just not linked

brew側でリンクが切れているパッケージがあるとエラーが出てきます。

このようなエラーが出た場合、以下のコマンドを叩き、brew側でリンク切れとなっているパッケージを確認します。

brew doctor

コマンドを叩いた時に以下のような警告が出ました。

You have unlinked kegs in your Cellar.
Leaving kegs unlinked can lead to build-trouble and cause brews that depend on
those kegs to fail to run properly once built. Run `brew link` on these:
  libimobiledevice
  libtool
  libplist
  gdbm
  xz
  libtasn1
  pcre
  libzip
  libusb
  ios-deploy
  cocoapods

these:の後に列挙されているのがリンク切れとなっているパッケージです。以下のようにコマンドを上から順に叩いて、パッケージをリンクされた状態にします。

brew link libimobiledevice
brew link libtool
brew link libplist
brew link gdbm
brew link xz
brew link libtasn1
brew link pcre
brew link libzip
brew link libusb
brew link ios-deploy
brew link cocoapods

ちなみに私の場合、上記のコマンドを叩いた時に以下のようなエラーが出ました。

Linking /usr/local/Cellar/libimobiledevice/1.2.0_3...
Error: Could not symlink include/libimobiledevice
/usr/local/lib is not writable.

このようなエラーが出た場合、書き込み権限の設定が必要です。以下のコマンドを叩いた後にパッケージをリンクするコマンド(brew link…)を上から順に叩いてエラーを解消させました。

sudo mkdir -p /usr/local/lib /usr/local/sbin
sudo chown -R $(whoami) /usr/local/lib /usr/local/sbin
sudo chown -R $(whoami) $(brew --prefix)/*

権限の設定変更、パッケージリンクの設定が終わったら再度以下のコマンドを叩きます。

brew doctor

「Your system is ready to brew.」が表示されたらbrew側の問題は解消です。

再度、以下のコマンドを叩いてFlutter側の依存関係に問題がないか確認します。

flutter doctor

brew コマンドのエラーが出ていますね。上記に表示されているbrewコマンドを上から順に叩いてみましょう。パッケージのリンクに問題がなければエラーが出ずにbrewコマンドが実行されます。

brew update
brew uninstall --ignore-dependencies libimobiledevice
brew uninstall --ignore-dependencies usbmuxd
brew install --HEAD usbmuxd
brew unlink usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller
brew install ios-deploy

再度、以下のコマンドを叩いたら先ほど表示されていたエラーが消えました。

flutter doctor

Android Studio側のエラー解決

Flutter pluginとDart pluginがインストールされていないとエラーを出しています。

Android StudioのプラグインにFlutterとDartを追加します。

「Android Studio > Preferences > Plugins」に進む、検索窓で「Flutter」と入力し、「Install」ボタンを選択します。

続いて、検索窓に「Dart」と入力し、「Install」ボタンを選択します。インストールが終わったら「Restart IDE」を押して、IDEを再起動します。

再度、ターミナルから以下のコマンドを叩き、依存関係の確認を行います。

flutter doctor

Connected device(スマホの実機接続がされていない為の警告)以外が全て有効となりました。

Flutterプロジェクトを作成

Flutterプロジェクトを作ります。

<username>には自分のユーザー名を指定します。

以下のコマンドを叩いて、Flutter用のプロジェクトフォルダを作成します。

mk /Users/<username>/dev/flutterProject/

続いて、以下のコマンドを叩いて、Flutter用のプロジェクトフォルダにディレクトリ移動します。

cd /Users/<username>/dev/flutterProject/

最後に、以下のコマンドを叩いてflutter用のプロジェクトフォルダにサンプルプロジェクトを作成します。

flutter create helloworld

Flutterのサンプルプロジェクトを実行

以下のコマンドを叩いて、作成したサンプルにディレクトリ移動をします。

<username>には自分のユーザー名を指定します。

cd /Users/<username>/dev/flutterProject/helloworld

それではflutterの実行コマンドを叩いてみましょう。

flutter run

私の場合「Run ‘flutter emulators’ to list and start any available device emulators.」

というエラーが出ました。実行可能なエミュレータが複数ある為、どのエミュレータで実行するのか特定できていないというエラーです。

以下のコマンドを叩いてエミュレータのリストを表示します。

flutter emulators

実行するエミュレータにどれを指定しても大丈夫ですが、とりあえずiOS Simulatorを指定します。

flutter emulators --launch iOS Simulator

それでは再度Flutterを実行してみましょう。

flutter run

エミュレータでFlutterプロジェクトが表示されるようになりました。以上、Flutterの開発環境構築でした。

Flutterの最新記事8件