Flutterの開発環境構築をMacでやってみた

by

rectangle_large_type_2_cf4617af00f19a8c731c22aa5d1cf29b

rectangle_large_type_2_cf4617af00f19a8c731c22aa5d1cf29b

はじめまして、中尾陽菜です。
今回は、Flutter開発をMacで出来るように開発環境構築手順を紹介します。

 

FlutterのSDKをダウンロードする

最新のSDKをダウンロードします。
ダウンロードしたファイルを解凍して好きなところに配置してください。
※unzip対象はダウンロードしたFlutterのファイルです。

$ cd ~/development
$ unzip ~/Downloads/flutter_macos_v1.0.0-stable.zip

今回は、ホームディレクトリに解凍しました。
別にコマンドで解凍しなくても、Chromeでダウンロードボタンを押下すれば、
フッター部分に下の画像のようにダウンロードされたzipファイルが出てくるので、
クリックすれば解凍できます。

スクリーンショット 2020-07-17 12.42.14

 

 

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/

中尾 陽菜
20年卒。
趣味:洋画鑑賞、万年筆インク集め、ハンドメイド
最近、紅茶の缶などのお洒落な缶を集めることに嵌っています!

Egg Device Application

東京品川のスマホアプリ製作・開発会社です。
一般アプリ業務用アプリからVRアプリまで開発可能。

求人情報

スマホアプリ製作・開発の
相談を受け付けています

メールでのご相談

お電話でのご相談
TEL 03-5422-7524
平日10:00~18:00