はじめに

Qiita初投稿です。
Napps Creators Cafe Vol. 1に参加させて頂き、初めてflutterに触りました。
その当日に教えて頂いたこと、個人的にflutterの環境構築等で躓いたことを、備忘録的に書いていきたいと思います。

VSコードでとりあえずflutterを触ってみたい！という人にオススメの記事です。

この記事での目標

モバイルアプリ開発ではビルド時間が長いことによる生産性低下が問題になりがちですが、
FlutterではHot Reload/Restartによって基本的にビルドは初回のみで済みます。
開発環境・プロジェクト規模によって差はあるはずですが、短い時間でコードの変更がアプリに反映されます。

flutterならではの、[Hot Reload],サクサク開発の片鱗を体感することがゴールです。

##Flutter SDKの設定

Flutterの公式サイトから

SDKをダウンロードします。

VSCodeではflutterでの開発を助けてくれる便利な拡張機能があります。同時にInstallしておくことをオススメします。

DLしたファイルに対しての操作

上記は操作は、zipファイルを解凍する。
解凍したflutterファイルを通して、ターミナルでコマンドを入力できるようにする操作です。

躓きポイント①

以後、flutterファイルに対して、パスを通しておかないと
flutterから始まるコマンドが使えないので、DLしたファイルに対して、予めパスを通しておくことをオススメします。

Zsh 入門者のための超速設定ガイド
↑パスを通す？となる僕のような初学者向けの記事です。
macOS Catalina以降ではデフォルトのシェルがzshになっているので、非常に参考になります。。

躓きポイント② (create appできない)

公式サイトの手順に沿って進めると、
新規のアプリ制作のコマンドを入力する項目に辿り着きます。

しかし、VSコードのターミナルにて
flutter create [my_app]しようとすると、
このようなエラーに直面します。

簡単に説明すると、
Flutterで開発環境を作る際にダウンロードするファイルについて、安全性が保証できない。
安全性を確認できないと、進めないよ
という警告です。(macOS Catalina以前では確認できていないようです。)

結論から申し上げますと、こちらのコマンドで、エラーが詰まっている部分をスルーできます。
sudo xattr -d com.apple.quarantine /PATH_TO_YOUR_FLUTTER_HOME/bin/cache/artifacts/libimobiledevice/idevice_id

[ /PATH_TO_YOUR_FLUTTER_HOME/bin/ ]の部分はflutterファイルへのPATHを入力してください。

例えば、
VSCodeでflutterファイルを開いて、[ Commabd + J ]でターミナルを開き、
pwdをすることで確認できます。

参考にさせて頂いたサイト↓
“idevice_id”は、開発元を検証できないため開けません。への対処法

躓きポイント③ (Xcodeのエミュレーターが使えない)

エミュレーターは、デスクトップ上に、仮想の端末を用意して、挙動を確認するできる機能です。

VScodeであれば、デバックを開始から、実機での開発環境をXcodeのエミュレーターを通して、使用することができます。

しかし、
VScodeのメニュタブから、
Xcodeのエミュレーターが選択できない。(存在していない)状況に陥りました。

そこで、最初にやっておくべきコマンドがこちら

sudo xcode-select —switch /Applications/Xcode.app/Contents/Developer

このコマンドを実行することによって、
VScodeがXcodeのエミュレーターを認識するようになります。

エラーがないか確認する

flutter doctorをターミナルで入力します。
このコマンドの意味は、開発環境内での(VScode ⇄ Xcode ⇄ other..)依存関係に問題がないか確認できます。

「HOT ReRoad」を見てみよう。

少し分かりにくいかもしれませんが、該当部分を変更すると、
エミュレーター(実機のテスト環境)に、変更がすぐに適用されます。

flutterは、
Hot Reload/Restartによって、実装と確認のフィードバックサイクルが極めて速い(ビルドで数十秒以上程度待たされることの多いネイティブ開発環境と比べて)ことが大きな強みのようです。

最後に

最初に興味を持つきっかけになった、先駆者様のサイトを紹介させて頂きます。
Flutter FAQ 🇯🇵

今回、アプリ開発初学者である私が、flutterを実際に触ってみるところまで、簡単に紹介させて頂きました。
どこから興味があるけど、どこから取っついていいか分からない！
という同じような初学者の方に少しでも参考になれば幸いです。
勉強会を開いて頂いた[Napps Creaters Cafe]様には、この場を借りて、感謝申し上げます。