IT初学者部

プログラミングに関することを中心に、備忘録として残していきます。

Flutterの環境構築を行う(IDEを一通り揃えてdoctorの結果を問題なしにする編 in Mac)

はじめに

前回の記事で、flutterの導入までは行いました。(前回の記事からちょっと月日経っちゃってますが。)

まあそんなことは置いといて、今回は前回の続きみたいな感じになります。というのも、以下のコマンドを入力してflutterのインストールを確認したというのは覚えているでしょうか。

flutter doctor

これを入力すると、色々と必要なツールの中でどれが入っているか、入っていないか、何が足りていないのか、などを一度に表示してくれます。

そして、おそらく何の設定などもしていないのであれば、Android Studioなどのインストールができていない(あるいは設定ができていない)という表示がされているはずです。

Flutterの構築前にその辺入れてるよって人には特に関係ない話にはなってしまいますが…。

ということで、今回はそのflutter doctorで全てOKになっているように設定するところまでやってみます。

Android Studioをインストールする

公式サイトにアクセスし、インストールを進めてみます。

https://developer.android.com/studio

利用規約に同意し、自分の環境に合った方を選択してインストールしてください。(IntelMacチップかを選択します。)

インストール終了後、アプリケーションフォルダへの移動⇨起動と進んでください。(他のソフトウェアのインストールなどと同様の手順です。)

起動後は、一通りNext、Finishと進んで行って同意してください。

インストール完了後、PluginsからDart、Flutterを検索し、それぞれインストールしてください。

f:id:hirm159:20220412174447p:plain

Flutterのインストール時に、IDEが再起動されます。そのまま再起動を選択してOKです。

再起動後、ターミナルでflutter doctorを実行してください。

f:id:hirm159:20220412174715p:plain

Android Studioがインストールされたことで、チェックされているのが確認できます。

とりあえずプロジェクトを作成してみる

Android Studioを起動し、New Flutter Projectからプロジェクトを作成します。

プロジェクトネームをキャメルケースで入力しようとしたらエラーになりました。ので、キャメルでは入力しないでください。(というかできないです。)

それ以外で特に詰まるところはないと思います。プロジェクトの作成時に選択できる箇所ではFlutterを選択してください。

こんな感じの画面が出てくれば作成完了です。 f:id:hirm159:20220412175424p:plain

Android Studioインストール後の設定

Android toolchain - develop for Android devicesの部分でバツ印が出ていると思います。

これなんだっけ…?(昔Windowsで設定した)と思い、調べてみたのですが、どうやらAndroid Studio内で設定しなければならない箇所があるようです。

ということで、その辺の設定をしてみます。

Android StudioのToolsからSDK Managerを選択し、SDK Toolsを選択後、Android SDK Command-line Toolsを選択し、インストールしてください。

f:id:hirm159:20220412175747p:plain

インストール後、以下のコマンドを入力してください。

flutter doctor --android-licenses

これを入力すると、同意するかどうか聞かれます。yを選択して同意し、設定を終了させてください。

再度ターミナルで確認すると、以下のような表示になります。

f:id:hirm159:20220412180152p:plain

次は、以下のメッセージへの対処です。

CocoaPods not installed.

CocoaPodsを入れればいいんじゃね

XCodeに関しては、実は既にインストール済みでした。今回はXCodeはインストールしているが、CocoaPodsをインストールしていない状態ということになります。

ターミナルで以下のコマンドを実行してください。

sudo gem install cocoapods

パスワードを聞かれます。自分のPCのパスワードを入力してください。

その後、インストールが開始されます。

インストールが完了後、最後の確認作業です。

ターミナルで確認

死ぬほど打ちまくったコマンドである、flutter doctorを実行してください。 色々と表示後、以下のような記述が出てくると思います。

• No issues found!

これが出ているということは、環境構築完了です。

終わりに

CocoaPodsやらcommandlinetoolsやらで詰まることが多いらしいです。 ただ、偉大なる先人たちがウェブサイトやブログなどで備忘録を残してくださっているので、探しながら対処していけば問題ないと思います。

次回以降はそろそろ本格的に何か作るというところまでいきたいと思います。何を作れば良いのかはいまだに見えて来ませんが。。。

参考にさせていただいたサイト様

MacでFlutterの開発環境を構築する手順 - Qiita

Flutterの環境構築(Mac編)|Flutter基礎入門 by Flutter大学

qiita.com