○ 記事に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で、
プラグイン追加が出来ていません。
随時、加筆と整理 ʕ•ᴥ•ʔ