Flutterで最小のアプリを動かす

# 概要

最近 Flutter に入門した。せっかくなので環境構築（こっちが記事のメイン）から実際にエミュレータでア動かすところまで残しておこうと思う。

# 環境

- MacOS
- Visual Studio Code
- Flutter 3.0.4

# インストール手順

## 1. Flutter のインストール

```sh
wget https://storage.googleapis.com/flutter_infra_release/releases/stable/macos/flutter_macos_3.0.4-stable.zip

unzip flutter_macos_3.0.4-stable.zip

vim ~/.zshrc
# export PATH="$PATH:`pwd`/flutter/bin"
```

Flutter に必要なものが揃っているか確認。

```sh
flutter doctor
```

```
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.0.4, on macOS 12.4 21F79 darwin-x64, locale ja-JP)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

[!] Xcode - develop for iOS and macOS (Xcode 13.4.1)
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] VS Code (version 1.68.1)
[✓] Connected device (2 available)
[✓] HTTP Host Availability
```

出力結果に基づいて諸々インストールする。この結果は個人によると思うので上記以外で不足があった場合はそれぞれ対処する必要あり。

### android studio

Flutter が android studio に依存しているため、直接利用しない場合でもインストールする必要がある。

下記リンクからダウンロードできる。

https://developer.android.com/studio?hl=ja

インストール後、起動すると勝手に色々なパッケージを入れてくれる。

完了した後にもう一度 `flutter doctor` を実行すると、command-line ツールが足りないと言われるので以下の手順で追加する。他のツールをインストールしたい時も基本的に以下の流れに従えば良い。（はず？現状この方法しか知らない）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193600/9f4486a3-f156-296f-642a-802dba3ebbb6.png)


チェックを入れて Finish を押せばインストールされる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193600/acc8559a-f0d1-b010-d545-57ebf2f940fa.png)


ライセンスに承諾していないものがあるということで、以下を実行。

```sh
flutter doctor --android-licenses
```

これで android 系の問題はすべて解決される。

```
[✓] Flutter (Channel stable, 3.0.4, on macOS 12.4 21F79 darwin-x64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[!] Xcode - develop for iOS and macOS (Xcode 13.4.1)
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.68.1)
[✓] Connected device (2 available)
[✓] HTTP Host Availability
```

### cocoapods のダウンロード

公式では gem で入れると案内されているが、これだとうまく行かない場合がある。（自分はうまく行かなかった。）
ので、brew で入れる。

```
brew install cocoapods
```

```
[✓] Flutter (Channel stable, 3.0.4, on macOS 12.4 21F79 darwin-x64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.68.1)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

• No issues found!
```


## 2. VS Code の設定

Flutter の拡張を入れる。これにより必要な Dart のプラグインも入る。

`cmd + Shift + p` でコマンドパレットを開き、`Flutter: Run Flutter Doctor` を実行することで設定できるか確認することができる。最初は Flutter SDK のパスを設定する必要あり。


## 3. エミュレータの追加

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193600/959d660f-9ded-f28c-7386-ab613968ae25.png)

Create Device で適当なデバイスを追加する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193600/9dc8b640-40d6-e697-94bf-dcf4a2930c32.png)


最後のページで Show Advanced Settings を押すとメモリやストレージのサイズを変更できる。アプリのサイズがでかい場合はこれを変更したほうが良さそう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193600/e4054c43-db07-3b30-6edd-c2052b8c0a47.png)


出てくるようになった。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193600/5e5000ba-6e01-324f-9edc-07d48bc4b4e0.png)

# アプリの実装

## 1. プロジェクトの作成

`cmd + Shift + p` でコマンドパレットを開き、`Flutter: New Project` -> `Application` と選択後、作成先のディレクトリを指定してアプリ名を入力する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193600/a1906162-8386-fbfe-5b1f-d6a79c424e4f.png)

## 2. エミュレータで実行

手順1を行うともう動くアプリができてしまう。最低限のアプリを実装すると言いながら勝手に作られてしまった。

のでこれをエミュレータで実行してみる。とりあえずどのデバイスで動かしたいかを選択する。

VS Code 右下の、画像だと `macOS (darwin)` となっているところをクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193600/75a259ec-8834-969b-b705-1240ecf00945.png)

選択画面が出てくるので、今回は上で追加した `Pixcel 5 API 31` にする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193600/45e5318f-ddce-3227-fa17-8ce51174a5e4.png)

クリックするとエミュレータが立ち上がるとともに VS Code の表示も Android に変わる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193600/ba5cd6df-0940-826b-3ead-8cf74e79e582.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193600/b0a3a7b4-c78c-fad1-c3cb-68c3575021fd.png)

ここまで来たら実行は簡単で `F5` キーを押すだけ。何らかの事情で `F5` キーが押せない場合は `Run` -> `Start Debugging` とかでも良い。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193600/d9f43f47-db77-414f-fcc7-3790f9c7c199.png)

動いた 🙌


# Links

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

https://cocoapods.org/

https://developer.android.com/studio