Google Flutter 開発環境の構築(Mac OSにて)【保存版】

[ この記事を全て読んだ場合 ] 約 2 分間
○ 記事にPRが含まれることがあります。

Google Flutter(フラッター)の開発環境を構築したので、書き残しておきます

 

スマホ アプリの開発のため、
まだまだ、ノウハウも少ない
Google Flutter(フラッター)
実際に使う機会がありました。

 

新しい技術の開発環境の構築は、
誰もが苦労するところなので、
自分のメモ代わりにも、ここに書いていきます。

 

大まかな流れ的には、以下の順番です。

 

Flutter SDK
⬇️
Xcode
⬇️
Android Studio

 

2020年現在だとノウハウが無さ過ぎて、
自分も開発環境構築も開発も
吐きそうになりながらやりました……

 

Flutter SDK

 

途中で起きた問題や
よくわからなかった点についても、
わかりやすく詳しく書いておきます。

 

Flutter SDKのダウンロード

 

1.「Flutter SDK」のZipを、
Flutterの公式サイトからダウンロードする。

 

2. 画面の右上にある「Get Started」を押して、
MacOS」ボタンを押す。

※ 2020年5月現在は、flutter_macos_1.17.1-stable.zip

 

Flutter SDKの設置

 

ダウンロードしたZipファイルを
コピー&ペーストかカット&ペーストで、
解凍してもいいところに、移動させる。

(解凍すると「flutter」というディレクトリが出来るので、それを想定)

 

自分の場合は、

Users/shunota(ここはホーム)/Developer/SDK/

※ DeveloperとSDKディレクトリは手動で作成。

に置きました。

 

Flutter SDKの解凍

 

コマンドツール(自分の場合は、iTerm)で、

cd Developer/SDK

と移動して、

ls -l でZipがあることを確認したら、

unzip flutter_macos_1.17.1-stable.zip

で解凍!

 

Flutter SDKのPATH(パス)を通す

 

1.
解凍が終わったら、
ホーム(自分の場合は、shunota)で

ls -a

bash_profile

があることを確認。

※ bash_profileは隠しファイルだが、
隠しでも無い場合は、以下のコマンドでつくることが出来る。

touch ~/.bash_profile

 

2.
bash_profile があることが確認出来たら、

vi ~/.bash_profile

で、viで開いたら以下の様にPATH(パス)を追加する。

※ viの詳しい使い方は別で。
簡単に説明すると、一旦「i」を押して、以下を入力後に
「esc」を押して「:wq!」で保存でもOK!

# Flutter
export PATH=”$PATH:/Users/shunota/Developer/SDK/flutter/bin”

 

3.
念の為、ホームディレクトリ(shunota)
にいる状態で、
以下のコマンドで、
PATHを反映させる。

source .bash_profile

反映後に、

printenv PATH

で、PATHが通っているか確認出来る。

 

4.
他の手順書とかではよく、
ここで、flutter –versionで、
Flutterのバージョンを調べるとあるが、
Flutter SDKのバージョンによっては、恐らく、

 

shunota-MacBook-Pro:~ shunota$ flutter –version
xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun
Failed to find the latest git commit date: VersionCheckError: Command exited with code 1: git -c
log.showSignature=false log -n 1 –pretty=format:%ad –date=iso
Standard out:
Standard error: xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing
xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun

Returning 1970-01-01 09:00:00.000 instead.
Flutter 0.0.0-unknown • channel unknown • unknown source
Framework • revision () • 1970-01-01 09:00:00.000
Engine • revision 6bc433c6b6
Tools • Dart 2.8.2

 

といった様な
「Flutter 0.0.0-unknown」
(Flutter 0.0.0が不明)
エラーが出ることもある。

 

しかし、これは以下の手順で、
Xcodeをインストールすることで、
解決が出来るので、一先ず、次に進む。

 

Xcode

 

iOSアプリをつくるために必要。

 

XCodeのインストール

 

1.
App Storeで「Xcode」
と検索して入手!

入手は、結構、時間がかかります。

※ Mac OSのバージョンが、
10.15.2以上でないと入手出来ません。

(Officeが使えなくなるから上げていなかったのですが、泣)

 

2.
入手後、普通に画面(GUI)から
Xcodeを起動した後、

flutter –version

コマンドを入力したら、
さっきまでエラーが出ていましたが、
エラーにならず、正常に表示されました。

 

2.
GUIではなく、
コマンドでの起動もあります。

 

・Xcode command-line toolsを設定する。
sudo xcode-select –switch /Applications/Xcode.app/Contents/Developer from the command line.

 

・Xcodeのライセンスに同意する。
sudo xcodebuild -license from

 

・Xcodeを起動する。
Install Additional required components

 

XCodeのシミュレーター

 

コマンドだと、

open -a Simulator

 

画面からだと、

メニュー「Xcode」➡️「Open Developer Tool」➡️「Simulator」

 

Flutter プロジェクトの作成

 

ホームディレクトリにて、

flutter create –org aaa.bbb.ccc sample_flutter

※ aaa.bbb.ccc はパッケージ名
 (flutter create sample_flutter でもプロジェクトを作れるが、
  自動的に com.example の名前のパッケージになる。
  後々、パッケージ名を変更するのが面倒……)

でプロジェクトを作成。

 

「All done!」と表示されたら、
ls -l

で「sample_flutter」が出来ていたらOK

 

Flutter プロジェクトのシミュレーター実行

 

シミュレーターを起動したままで、

cd sample_flutter

で移動したら、

flutter devices

でデバイスを認識することを確認。

例)
1 connected device:

iPhone SE (2nd generation) • 44EC573E-60CC-422B-B940-B52127157ED1 • ios • com.apple.CoreSimulator.SimRuntime.iOS-13-4
(simulator)

 

flutter run

でシミュレーターで実行!

 

以下の様に表示されたら、
一先ず、成功!



 

Android Studio

 

Androidアプリをつくるために必要。

 

Android Studioのインストール

 

1.
Android Studioの公式サイトからダウンロード。

「DOWNLOAD ANDROID STUDIO」ボタンから。

 

2.
ダウンロードしたdmgを開いたら
「Android Studio」アイコンを
「Applications」にドラッグする。

 

3.
Android Studioを起動して、
「Next」ボタンで進んでいく。
最後は「Finish」ボタン。

 

プラグインのインストール

 

メニュー「Android Studio」→
「Preferences」→「Plugins」で、

「Flutter」
「Dart」

の2つをインストールしておく。

※ Flutterは、タブ「MarketPlace」に
 切り替えないと表示されない。

因みに、IDEの再起動を要求されます。

 

Sample プロジェクトの作成

 

Android Studio を起動したら、

「Start a new Android Studio Project」

からプロジェクトをつくっていく。

 

アクティビティは、一先ず、

「Empty Activity」

でOK

 

Android Emulator の作成

 

「Tools」→「AVD Manager」を起動する。

「Create Virtual Device…」を選択する。

端末は、Nexusの新しめのやつとか。

APIも新しめのを幾つか、
DOWNLOAD リンクより落としておく。

最後に「Finish」で、
デバイス一覧に追加されたことを確認する。

 

その一覧の右にある ▶️ を押して、
エミュレーターが起動することを確認する。

 

ホームディレクトリ(自分の場合は、shunota)
でいいので、以下を実行しておいて、
Androidのライセンスに同意しておく。

flutter doctor –android-licenses

 

Sample プロジェクトのエミュレーター起動

 

エミュレーターを起動したままで、

cd sample_flutter

で移動したら、

flutter run

でエミュレーターで実行!

 

以下の様に表示されたら、
一先ず、成功!



 

Flutter プロジェクトの雛形作成

 

「Start a new Flutter Project」
からプロジェクトをつくる。

 

Android Studio をベースに、
Dart で実装をして、
以下のコマンドで、Android, iOS
どちらにも吐き出せる感じですかね。

flutter build apk:Android用
flutter build ios:iOS用

 

諸々の設定の確認

 

flutter doctor

コマンドを入力する。

 

Flutter Pluginでエラーが出たら、
Android Studioで、
プラグイン追加が出来ていません。

 

随時、加筆と整理 ʕ•ᴥ•ʔ

 

コメントを残す