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

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

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

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

Apple Siliconを選択します。
![スクリーンショット 2022-07-26 17.17.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2737303/8408b283-4747-93da-3215-1a52c2627656.png)

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

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

M1チップのMacを使用しているため、Mac with Apple chipを選択します。
![スクリーンショット 2022-07-26 17.23.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2737303/d9ab59b4-c6b6-81e8-a5db-fef29ddf67de.png)

# ④AndroidStudioでFlutterのプラグインをインストールする
AndroidStudioを起動し、Pluginsを選択します。
ここで「Dart」と「Flutter」をインストールします。
![スクリーンショット 2022-07-26 17.27.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2737303/96be9db8-6ba2-4a8d-e4a0-422da94edf20.png)

# ⑤ターミナルでパスを通す
システムに対して、ダウンロードしたflutterのありかを教えてあげる作業になります。
ここからはターミナルを使います。
![スクリーンショット 2022-07-27 9.57.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2737303/d43bafa2-c314-9bd8-c3be-3cc5bb92fd6d.png)

まず、下記コマンドを打ってvimを立ち上げます。
vim .zshrc
以下のような画面に切り替わると思います。
![スクリーンショット 2022-07-27 11.44.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2737303/972b9208-26a2-c4ee-9e11-ce3495035f2f.png)

iを押下するとinsertモードになり、左下に表示されます。
この状態で書き込みが可能になリます。
![スクリーンショット 2022-07-27 11.48.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2737303/ed2758b2-ff9c-f472-999e-541bd0c91213.png)

次に、flutterのbinフォルダまでのパスを記述します。
```php:vim
export PATH="$PATH:/Users/ユーザ名/development/flutter/bin"
```
記述が終わったらescキー押下でinsertモードから抜け、:wq(保存してvimを終了する)を打ちます。これで元の画面に戻れるはずです。

そして、下記コマンドでパスが通ります。
```php:zsh
source $HOME/.zshrc
```

最後に以下を打って応答があれば成功です。
```php:zsh
echo $PATH
```
![スクリーンショット 2022-07-27 15.04.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2737303/013be6c3-6ea9-a0d3-8ff9-f8a0bd23d59c.png)

# ⑥開発準備の確認
以下を実行することで、開発に必要な準備が整っているかを確認できます。
```php:zsh
flutter doctor
```
![スクリーンショット 2022-07-27 15.15.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2737303/89828992-d5ca-c2df-866b-15f3e6cd45d1.png)
※私の場合はAndroidアプリ開発が目的だったため、Xcodeはインストールしませんでした。Xcodeが「!」になっているのはそのためです。

# ⑦新規でプロジェクトを作成
AndroidStudioの起動画面「New Flutter Project」から作成できます。
![スクリーンショット 2022-07-27 15.30.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2737303/9ae480cf-0ef0-0f1b-ec1d-68644dad0e37.png)
「Next」押下。
![スクリーンショット 2022-07-27 15.48.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2737303/ab282576-90b3-8ff6-75b4-e9a7a42a4996.png)
Project nameを入力し、「Finish」押下でプロジェクトが作成されます。
![スクリーンショット 2022-07-27 15.42.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2737303/515beb80-05a8-0123-ad9a-3fd6b2036b4f.png)



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

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