勢い余ってMacbookを買ってしまった人のためのflutter環境構築(2021年v2.2)

こんにちは、初めまして、tomisourです。

IT業界に勤めてはや数年、業務外でのアウトプットをしたいと思い立ちこの度Macbook airを購入しました。
個人開発といえばMacbook、個人開発といえばスマホアプリ(偏見)と思ったので今をときめくクロスプラットフォームフレームワーク、flutterはじめました。
公式サイトに沿って環境構築を行なった結果それなりに苦戦したので手順書がてら記事に残します。

##本記事の対象者

- Macbookで新たにflutter開発を行いたい
- Macbookでスマホ開発をやってみたい。


##flutterとは

（ここにURL）

- 天下のgoogle社が開発するフレームワーク
- ios,Android,web,webアプリを一度に開発できるクロスプラットフォーム
- 特に１つのコードでそれぞれのアプリを動かせることが強みの一つ
- 最近flutter2.0になったよ、かっこいいね。

詳細は上記の公式サイトを確認してください。

##前準備(本記事では扱いません)

Homebrewのインストール

https://brew.sh/index_ja

最新のgitインストール
下記を参考にしました。

https://qiita.com/normalsalt/items/f200ba50363ebfd46df0#fnref1

##flutterのインストール
下記URLの手順で進める

https://flutter.dev/docs/get-started/install

インストールが完了したらzipファイル解凍する。

```
mkdir ~/development
cd ~/development
unzip ~/Downloads/(zipファイル名)
```

pathを通す。
公式の進め方だとターミナルを閉じるとパスが消えてしまうため、以下の方法でパスを設定する。

```
↓この方法では現在のターミナルを閉じるとパスが切れてしまう。
export PATH="$PATH:`pwd`/flutter/bin"

↓ホームディレクトリに戻り.zshrcを開く
cd ../
open .zshrc

↓開いた.zhrcファイルに下記行を追加する
export PATH="$PATH:`pwd`/development/flutter/bin"

↓ファイルを閉じ、下記コマンドを実行
source ~/.zshrc

ターミナルを開き直しパスが通っていることが確認できれば完了
echo $PATH
```

下記コマンドの実行ができればflutterの完了

```
flutter --version
```

##実行に必要なアプリケーションをインストール

下記コマンドを実行し、必要なアプリケーションを確認する。

```
flutter doctor
```

![スクリーンショット 2021-05-30 0.36.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/782308/16ddac77-4cd2-fa2a-fa9a-7b9732666cdb.png)

###Xcodeインストール

App StoreからXcodeをインストールする
＊場合によってはかなり時間がかかります。一晩放置するぐらいの気持ちで待ちましょう

![スクリーンショット 2021-05-30 0.40.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/782308/961fd315-4fc4-7508-c2db-2b0550c12c05.png)

下記コマンドを実行する

```
sudo xcode-select --switch/Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
sudo gem install cocoapods
```

![スクリーンショット 2021-05-30 10.27.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/782308/e827ba3a-e100-b26c-b4e8-1e3f6fab027d.png)

ここまで実行して再度flutter doctorで確認するとXcodeの項目がチェックされる。

###Android Studioインストール、エミュレーター設定

下記サイトから最新のAndroid studioをインストールする。

https://developer.android.com/studio

ダウンロードしたzipファイルを実行し、ガイドに沿ってセットアップを進める。

セットアップ完了後、flutterプラグインをインストールする。
![スクリーンショット 2021-06-01 0.02.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/782308/98e81053-b891-873f-fcb7-d6d9a0421f6a.png)

AVDマネージャーでを開き、エミュレーターをインストールする。

![スクリーンショット 2021-06-01 0.04.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/782308/68cf6fb1-665c-2128-32a1-d761807ea0d1.png)

左下のCreate Virtual Device...を押下する

![スクリーンショット 2021-06-01 0.06.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/782308/07d40264-3b76-091d-0a5f-af010aec2137.png)

手順に従いデバイス、OSのバージョンを選択しインストールする。
完了後、AVDマネージャーを閉じる。
　
以上で環境構築は完了です。

##プロジェクト作成、エミュレーター実行

Android studioメイン画面から、Create New Flutter Projectを押下する。

![スクリーンショット 2021-06-01 0.18.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/782308/c6e7dce8-7d50-6d45-29d0-011f890c4ad6.png)

SDK path を設定し、nextを押下する。

![スクリーンショット 2021-06-01 0.20.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/782308/ce257f92-6995-e40b-9fb6-444415adf911.png)

任意のProject Nameを設定し、他はそのままでfinishを押下。プロジェクトが生成される。(キャメルケースで設定してください。)

![スクリーンショット 2021-06-01 0.22.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/782308/54697c8d-f616-e848-a769-5cf102938406.png)

生成されたプロジェクトを開き、デバイスを選択するとエミュレーターが起動する。

![スクリーンショット 2021-06-01 0.24.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/782308/2dba076a-c7a6-f2e9-8241-bdd17ce08120.png)

![スクリーンショット 2021-06-01 0.27.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/782308/be24aaab-7778-7735-113e-13236538dd4c.png)

実行ボタン（緑色の三角ボタン）を押下し、サンプルプロジェクトを実行する。

![スクリーンショット 2021-06-01 0.29.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/782308/cadd408b-0993-f3ba-478f-0a438a28aaeb.png)


![Screenshot_1622475176.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/782308/9b2ee74e-bdc9-ea37-a206-6fb75bf379f6.png)

シンプルなカウンターアプリが表示され、動作が確認できれば完了です。

##感想

思いつきでMacBookを購入し、思いつきでflutter始めてみましたが、思った以上にスムーズに作成できました。
現在はアプリではなく個人開発でwebアプリの作成をしていますが、機を見てスマホアプリの作成もチャレンジしようと思っています。

最後まで読んでいただきありがとうございました。