Flutterで環境構築(Mac) Android Studio編

Googleが出しているモバイルアプリケーション開発用フレームワーク(アプリ開発においてボタンや文字のコードが用意されているもの)で単一のコードベースでiOSとAndroidアプリを構築できます。同じくGoogleが開発した言語Dart（ダート）を使います。Flutterを利用してコードを書くと、同一のコードベースでAndroidとiOSの両方向けのアプリケーションをビルドできます(クロスプラットフォーム開発)

①Flutterを公式HPからインストール

![スクリーンショット 2021-07-10 15.59.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/0d241610-6db5-2ae9-6eca-99b1ae06136c.png)

②ユーザーフォルダ直下に「Developer」フォルダを作成してダウンロードし「flutter」フォルダを移動。

![スクリーンショット 2021-07-10 16.08.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/9b24dc65-1d3b-e0af-2545-ef6ae4c43579.png)

③Flutterを使用できるようにするためパスを通す。

```
echo $SHELL
```

`/bin/zsh`と表示されたらシェルは`zsh`なので

```
vim .zshrc
```

`/bin/bash`の場合は

```
vim .bash_profile
```
④vimエディターが起動するので`i`キーで「INSERT」モードにする。

⑤`export PATH="$PATH:`の後に「Flutterフォルダ」をターミナル内にドラッグ＆ドロップさせ`/bin"`を加え入力する。

```
export PATH="$PATH:/Users/xxxxxx/Developer/flutter/bin"
```
⑥`esc`キーでINSERTモードを解除して`:wq`と入力後にENTERで内容を上書き保存。

⑦ターミナルで`which flutter`と打ち実行しパスが表示されれば設定完了です。

⑧次にAndroid Studioを公式HPからダウンロードしてインストールします。

![スクリーンショット 2021-07-10 17.11.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/87917967-56db-77a6-8b91-2ce34eab5961.png)
`Configure`から`Preferences`を開き、

![スクリーンショット 2021-07-10 17.23.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/2f2bfe54-4a63-c724-5669-330d6a8a5fab.png)
⑨Flutter(Dartプラグイン)をインストールします。

![スクリーンショット 2021-07-10 17.27.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/378bf7b7-3c2f-a0aa-aabc-a483ccfc25d1.png)
⑩Android Studioを再起動してスタート画面に`「＋Create New Flutter Project」`があることを確認。

![スクリーンショット 2021-07-10 17.33.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/1d7fd854-535e-91f9-6a62-93d0a4fcfb20.png)
⑪`Create New Flutter Project`→`Flutter App`→`Project name`にアプリの名前を入れます。

⑫`main.dart`画面になったら、`AVD Manager`ボタンを押して`＋Create Virtual Device`ボタンからアンドロイドデバイスを選びます。

![スクリーンショット 2021-07-13 20.03.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/3dd73fed-95e1-88eb-8e8d-9615bfe260b4.png)

⑬今回は`Pixel 3a`を選択してMac Bookの中に仮想的にインストールします。OSは、APIレベル３０を選択しダウンロード開始。

![スクリーンショット 2021-07-13 20.11.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/b6b4ba9b-996c-6f3a-611c-30d1374986b9.png)

⑭完成したバーチャルデバイスを確認してみると、こちらのように表示されます。`➤`再生ボタンを押すとエミュレーターが起動します。

![スクリーンショット 2021-07-13 20.18.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/68ba2ec2-6053-a82d-945a-bc4dcd52cc3b.png)

![スクリーンショット 2021-07-14 3.10.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/a029de25-41ac-6b35-0b29-e9b186961457.png)

![スクリーンショット 2021-07-14 3.27.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/43b32a08-f519-6357-65ea-86c3bdf983e8.png)

⑮デバッグボタンまたは、`control+D`でビルドできるか試してみましょう。

![スクリーンショット 2021-07-17 13.06.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/e459f800-7afc-ffb5-6e1a-23bf0cd6c62a.png)

⑯こちらのFlutterの初期状態デモアプリ画面が出てくれば無事ビルド出来たことになります。右下のプラスを押すと、カウントが増えていく単純なデフォルトアプリです。

![スクリーンショット 2021-07-17 13.15.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/c9683a69-7699-8f47-b2f8-6baaabefa589.png)

[※うまくビルドが出来ない方はこちらを御覧下さい](https://qiita.com/ume-bar/items/b5042dc2b40c84dafd78)