【Flutter】開発超初心者だから環境構築がしたい

Flutterの開発環境を構築した手順をご紹介します。
業務で初めて使うことになったので備忘録的に。

環境構築の手順

①Flutterをダウンロードする
②ダウンロードしたフォルダを配置する
③AndroidStudioをダウンロードする
④AndroidStudioでFlutterのプラグインをインストールする
⑤ターミナルでパスを通す
⑥開発準備の確認
⑦新規でプロジェクトを作成
※ブラウザはGoogle Chromeを使用

①Flutterをダウンロードする

公式サイトにてダウンロードできます。
https://docs.flutter.dev/get-started/install/macos

Apple Siliconを選択します。

②ダウンロードしたフォルダを配置する

①でダウンロードしたフォルダを解凍し、お好みの場所に配置します。
僕の場合、ユーザーディレクトリ/development/flutterに置きました。

③AndroidStudioをダウンロードする

こちらも公式ページよりダウンロードできます。
https://developer.android.com/studio?hl=ja&gclid=Cj0KCQjwhqaVBhCxARIsAHK1tiNOT096HH_-90z5Bna9rXyEzEf16Uy1BVLOjZkHm1VUJX3sf1UfsQMaAsdjEALw_wcB&gclsrc=aw.ds

M1チップのMacを使用しているため、Mac with Apple chipを選択します。

④AndroidStudioでFlutterのプラグインをインストールする

AndroidStudioを起動し、Pluginsを選択します。
ここで「Dart」と「Flutter」をインストールします。

⑤ターミナルでパスを通す

システムに対して、ダウンロードしたflutterのありかを教えてあげる作業になります。
ここからはターミナルを使います。

まず、下記コマンドを打ってvimを立ち上げます。
vim .zshrc
以下のような画面に切り替わると思います。

iを押下するとinsertモードになり、左下に表示されます。
この状態で書き込みが可能になリます。

次に、flutterのbinフォルダまでのパスを記述します。

vim

export PATH="$PATH:/Users/ユーザ名/development/flutter/bin"

記述が終わったらescキー押下でinsertモードから抜け、:wq(保存してvimを終了する)を打ちます。これで元の画面に戻れるはずです。

そして、下記コマンドでパスが通ります。

zsh

source $HOME/.zshrc

最後に以下を打って応答があれば成功です。

zsh

echo $PATH

⑥開発準備の確認

以下を実行することで、開発に必要な準備が整っているかを確認できます。

zsh

flutter doctor

※私の場合はAndroidアプリ開発が目的だったため、Xcodeはインストールしませんでした。Xcodeが「!」になっているのはそのためです。

⑦新規でプロジェクトを作成

AndroidStudioの起動画面「New Flutter Project」から作成できます。

「Next」押下。

Project nameを入力し、「Finish」押下でプロジェクトが作成されます。

お役立ち

コマンドの種類についてはこちらのサイトが結構わかりやすいと思いました。
https://eng-entrance.com/linux-command-vi

おわりに

そもそも開発環境の構築というものをほぼ初めてだったので、他の方のサイトを参考にしてやりました。フォルダの配置もコマンドでやればいいんじゃない？等あると思いますが、無事にできて一安心。。。
今後も環境構築をする機会が出てくると思うので、都度このように残すと良さそうです。
この記事が参考になると嬉しいです(￣▽￣)