ふらっとFlutterはじめ【其の一】 環境構築 for Mac

ふらっと、Flutter でも始めてみようかと思い、Mac用に環境構築を行ったので備忘録的に記録します。モバイルアプリ開発の経験は全くなく、ここ数年、C#で社内の業務アプリケーションをいくつか開発している、といった程度です。
本記事でカバーする範囲としては、Flutter の構成、開発環境構築、実際にDemo Projectを作って走らせるところ、になります。
これから、なんとなくFlutter 触ってみようかなという方の手助けになれば幸いです。

Flutterの構成

①Flutter SDKのダウンロード

Flutterの公式Documentから、Flutter SDKをダウンロードしてきます。
今回は、Mac用の環境なのでこちらからダウンロード。適当な場所にファイルを解凍します。

②PATHを通す

Flutterを使えるようにするために、PATHを通します。ターミナルで、

open ~/.bash_profile

を叩く。Text Editorが開かれるので、PATHを編集。今回は、Developmentフォルダを作って、その配下にflutterフォルダを解凍したので、"$PATH:/解凍したflutterフォルダーの場所/flutter/binとなっています。

Text Editorを保存して閉じたら、PATHが通っているか確認します。ターミナルで、

which flutter

を叩いて、下記のようなディレクトリが返ってくればOKです。

開発環境構築

今回IDEは、Android Studioを使用します。

①Android Studioのセットアップ

公式ページから、Android Studioをダウンロード。

ダウンロードが完了したら、Android Studioを起動します。下記のような画面が立ち上がります。

左Paneの、Pluginsをクリック。検索バーにFlutterを入力して、Pluginをダウンロード。ダウンロードが完了したら、Android Studioを再起動します。

Android Studioを再起動して、スタート画面に「Create New Flutter Project」が表示されていれば、OKです。
次に、ターミナルで、

flutter doctor

を叩くと、適切にFlutter の構成ができているか確認ができます。恐らく未承認のライセンスがあるはずです。

はい、未承認のライセンスありとのこと。指示の通り、

flutter doctor --android-licenses

を叩くと、途中何度か（y/N）を聞かれるので、yを押して最後まで進んでください。

②Emulatorの設定

Debugする際に必要となる、Emulator（仮想のAndroid・iOS Device）を構成します。Android Studioで、右上のOpenの隣をクリックして、AVD Managerを選択します。

左下の「Create Virtual Device」からデバイスを新規追加できます。

様々なサイズのDeviceが選べます。お好みに合わせてどうぞ。

これで、先ほど追加したEmulatorをDebugする際に選べるようになります。iOS用のEmulatorを使う場合は、XcodeをダウンロードしておけばOKです。Android Studio上で選べるようになります。

Projectの作成

Android Studioで、「Create New Flutter Project」から新しくProjectを作成します。デフォルトでSDKパスが設定されているので、ここは特に触れずに次へ。

Project名を入力します。Project名は、小文字とアンダースコアしか使えません。

デフォルトのProjectが作成されます。

Emulatorを選択して、無事Debugができればこれで開発環境の構築は完了です。お疲れ様でした。

参考文献

macOS install