やってみた
2020.07.20
Flutterの開発環境構築をMacでやってみた
はじめまして、中尾陽菜です。
今回は、Flutter開発をMacで出来るように開発環境構築手順を紹介します。
FlutterのSDKをダウンロードする
最新のSDKをダウンロードします。
ダウンロードしたファイルを解凍して好きなところに配置してください。
※unzip対象はダウンロードしたFlutterのファイルです。
$ cd ~/development $ unzip ~/Downloads/flutter_macos_v1.0.0-stable.zip
今回は、ホームディレクトリに解凍しました。
別にコマンドで解凍しなくても、Chromeでダウンロードボタンを押下すれば、
フッター部分に下の画像のようにダウンロードされたzipファイルが出てくるので、
クリックすれば解凍できます。
SDKにパスを通す
解凍できたら、PATHを通してコマンドが利用できるようします。
ホームディレクトリに解凍したディレクトリにパスを通します。通すのは “flutter/bin” です。
$ export PATH="$PATH:`pwd`/flutter/bin"
これで、flutterコマンドが使えるようになります。
flutterコマンドが使えるのか確認します。
試しに、flutterのバージョン確認のコマンドを実行し、flutterコマンドを実行出来てるのが確認できました。
$ flutter --version Flutter 1.0.0 • channel stable • https://github.com/flutter/flutter.git Framework • revision 5391447fae (10 weeks ago) • 2018-11-29 19:41:26 -0800 Engine • revision 7375a0f414 Tools • Dart 2.1.0 (build 2.1.0-dev.9.4 f9ebf21297)
実際にflutterコマンドを実行し、動作確認できたら完了です。
Flutterの実行環境を整える
FlutterはAndoird,iOSのアプリを一括で作るので、両方の環境が必要になってきます。
実行環境を整えるのに便利なコマンドがFlutterにはあるのでそちらを利用して整えていきます。
$ flutter doctor
上記のコマンドは、Flutter 開発に必要な環境が揃っているかチェックしてくれる便利コマンドです。
パスが通っていればうまく実行できると思います。
問題がある場合は太字で表示されるので、それぞれ解決していきます。
$flutter doctor
Doctor summary (to see all details, run flutter doctor -v):</span></p>
<p>
[✓] Flutter (Channel stable, v1.17.3, on Mac OS X 10.15.5 19F101, locale ja-JP)</span></p>
<p>
[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)</span></p>
<p>
! Some Android licenses not accepted.To resolve this, run: flutter doctor
--android-licenses
[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
[✓] Android Studio (version 4.0)
[✓] VS Code (version 1.45.1)
[!] Connected device
! No devices available
! Doctor found issues in 2 categories.
上記の実行結果から、必要なツールのインストール状況が確認出来ます。
記述されている必要なツールをインストールすれば大丈夫です。
iOSのセットアップ
・Xcode9.0以降をインストールします。
・以下のように設定することで最新のXcodeが指定出来ます。
$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
別のバージョンを利用したい場合は、パスを設定してください。
・Xcodeを開いて確認するか以下のコマンドにて、仕様許諾に同意します。
$ sudo xcodebuild -license
・シミュレータを設定するために、以下のコマンドで起動します。
$ open -a Simulator
・シミュレータを起動して[ハードウェア]＞[デバイス]メニューの設定を確認して、
シミュレータが64ビットデバイス(iPhone5s以降)を使用していることを確認してください。
Androidのセットアップ
・Android Studioをインストールします。
・Android Studioを起動して、「Android Studioセットアップウィザード」を実行します。
Android開発に必要な、最新のSDKをインストールしてください。
・エミュレータを設定します。
エミュレータを起動するには[Android Studio] > [Tools] > [Android] > [AVD Manager]から
[Create Virtual Device]を選択して新規に作成してください。
エミュレータを作成するときはx86またはx86_64のイメージが推奨されています。
Dartプラグインのインストール
Androidstudioでflutter開発をするために、Dartをインストールします。
・Android Studioを起動します。
・プラグインの設定を開きます（[設定]> [プラグイン]はv3.6.3.0以降）。
・Flutterプラグインを選択し、[インストール]をクリックします。
・Dartプラグインをインストールするように求められたら、[はい]をクリックします。
・プロンプトが表示されたら、[再起動]をクリックします。
自分でセットアップした時
手順は公式のサイトを参考にしながら進めていきました。
xcode,Androidstudioのセットアップもflutter doctorが必要なツールインストールを
教えてくれるので、その通りに進めていけば出来ました。
後から、日本語でFlutterの情報を配信しているサイトを見つけました。
もし、英語で書かれている公式サイトが苦手だという方は、
日本語版のサイトを参考してみてください。
https://flutter.ctrnost.com/install/
