スタッフブログ

STAFF BLOG

やってみた

2020.07.20

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

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/

BACK

お問合せ

イーディーエーに興味をお持ちいただいて
ありがとうございます!
スマホアプリに関するご相談、
お見積りや弊社へのご質問など、
お気軽にお問い合わせください。
担当者より折り返しご連絡させていただきます。

    お名前必須
    会社名
    メールアドレス必須
    電話番号必須
    お問合わせ種別必須
    お問合わせ内容必須

    アンケートにご協力ください。
    弊社サイトへはどのようにしてアクセスされましたか?

    個人情報のお取扱いに関する同意事項

    1.事業者の氏名又は名称

    株式会社イーディーエー

    2.個人情報保護管理者の氏名又は職名、所属及び連絡先

    個人情報保護管理者 木下 晴晶
    Mail:[email protected]

    3.取得した個人情報の利用目的的

    当フォームで取得した個人情報は、お問い合わせに関する回答のために利用し、目的外利用はいたしません。

    4.弊社が取得した個人情報の第三者への委託、提供について

    弊社は、ご本人に関する情報をご本人の同意なしに第三者に委託または提供することはありません。

    5.個人情報保護のための安全管理

    弊社は、ご本人の個人情報を保護するための規程類を定め、従業者全員に周知・徹底と啓発・教育を図るとともに、その遵守状況の監査を定期的に実施いたします。
    また、ご本人の個人情報を保護するために必要な安全管理措置の維持・向上に努めてまいります。

    6.個人情報の開示・訂正・利用停止等の手続

    ご本人が、弊社が保有するご自身の個人情報の、利用目的の通知、開示、内容の訂正、追加又は削除、利用の停止、消去及び第三者への提供の停止を求める場合には、下記に連絡を頂くことで、対応致します。

    株式会社イーディーエー 個人情報お問合せ窓口
    〒106-0032 東京都港区六本木7丁目14番23 ラウンドクロス六本木4F
    TEL:03-5422-7524 FAX:03-5422-7534
    Mail:[email protected]

    7.ご提供いただく情報の任意性

    個人情報のご提供は任意ですが、同意を頂けない場合には、第3項にあります利用目的が達成できない事をご了承いただくこととなります。

    8.弊社Webサイトの運営について

    弊社サイトでは、ご本人が弊社Webサイトを再度訪問されたときなどに、より便利に閲覧して頂けるよう「クッキー(Cookie)」という技術を使用することがあります。これは、ご本人のコンピュータが弊社Webサイトのどのページに訪れたかを記録しますが、ご本人が弊社Webサイトにおいてご自身の個人情報を入力されない限りご本人ご自身を特定、識別することはできません。
    クッキーの使用を希望されない場合は、ご本人のブラウザの設定を変更することにより、クッキーの使用を拒否することができます。その場合、一部または全部のサービスがご利用できなくなることがあります。