Flutterの環境構築

Flutterの環境構築を行った時のメモです。2021年に追記しました。大きく変更はないと思いますが、最新の情報は[公式ドキュメント](https://docs.flutter.dev/get-started/install)をご参照ください。（もし「変わってるよ！」という点があれば、ご指摘お願いします。）

また、Android Studioのpluginが認識されない(`Flutter plugin not installed`と表示される)件についても[追記](https://qiita.com/mkosuke/items/7957e71968aefc6558be#flutter-plugin%E3%81%8C%E8%AA%8D%E8%AD%98%E3%81%95%E3%82%8C%E3%81%AA%E3%81%84-%E8%BF%BD%E8%A8%982020118-202117)しております。


## 開発環境
mac High Sierra(10.13.4) (M1 Big Sur(11.2.2)でも確認済）
Android Studio 4.1.3
Xcode 12

## Flutterのinstall

:::note info
Flutterのバージョン管理について
プロジェクトによって利用するFlutterのバージョンが変わるため、[fvm](https://fvm.app/)や[asdf](https://blog.dalt.me/2730)の導入をすると便利です。ここでは通常のインストール方法とasdfでのインストール方法を記載します。
:::

### asdfによるFlutter導入方法

brew経由でインストールします。

```
brew install asdf
```

次にpathを通します。zshの場合は以下のコマンドで対応可能です。（ご利用のshellに合わせて変更してください）

```
echo -e "\n. $(brew --prefix asdf)/libexec/asdf.sh" >> ${ZDOTDIR:-~}/.zshrc
source ~/.zshrc
```

asdfにflutterのプラグインを追加します。

```
asdf plugin add flutter
```

最後に任意のFlutterバージョンをインストールしてください。

```
# 最新のstable版をインストールする場合
asdf install flutter latest
# 任意のFlutterバージョンのインストールする場合
asdf install flutter xxx
```

なお、Flutterのバージョンは下記コマンドで確認できます。

```
# インストール可能なFlutterのバージョン一覧
asdf list all flutter
# インストール済みのFlutterのバージョン一覧
asdf list flutter
```

プロジェクトごとに利用するバージョンを変える場合は、プロジェクトのルートで

```
asdf set flutter xxx(Flutterバージョン名)
```

とすることで変更できます。また、Android StudioのPreference>Flutter SDK pathを
`/Users/ユーザー名/.asdf/installs/flutter/3.0.1-stable`　のように変更してあげる必要があります。（これが難点…）

:::note info
asdfの更新により、コマンドがasdf localからasdf setに変わっています
:::

:::note warn
Flutter3.0以降のインストールに失敗する場合：
asdfを最新化し、 `brew install jq` で　jqをインストールしてみてください(下記記事参照)
:::

https://zenn.dev/mkosuke/scraps/e27d2cc67a8b62

公式ドキュメントはこちら。

https://asdf-vm.com/guide/getting-started.html

### 通常のFlutterインストール方法

※asdfでの手順を実行した場合は、こちらはスキップしてください。

Flutterを任意の場所にgitからcloneします

```terminal
$ git clone https://github.com/flutter/flutter.git
```

pathを通す

```terminal
$ export PATH=`pwd`/flutter/bin:$PATH
```

または.bash_profileを直接書き直してもOKです

```terminal
vi ~/.bash_profile
```

下記を追加してください

```shell:.bash_profile
(略)
# Add Flutter
export FLUTTER="/(flutterへのpath)/flutter/bin"
export PATH=$FLUTTER:$PATH
(略)
```



## 必要なライブラリのセットアップ
flutterの開発環境について確認します

```terminal
$ flutter doctor
```

私の環境では以下のような出力が行われました。

```terminal
[✓] Flutter (Channel beta, v0.3.1, on Mac OS X 10.13.4 xxxx, locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK 27.0.3)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[!] iOS toolchain - develop for iOS devices
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
    ✗ libimobiledevice and ideviceinstaller are not installed. To install, run:
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
        For more info, see https://flutter.io/platform-plugins
      To install:
        brew install cocoapods
        pod setup
[✓] Android Studio (version 3.1)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] Connected devices
    ! No devices available

! Doctor found issues in 3 categories.
```

「✗」がついた部分を順に解決していきます。

### iOS

※Android toolchainは後述します

```terminal
Xcode installation is incomplete; a full installation is necessary for iOS development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
```

XcodeをDownloadしてxcode-selectをしろと言われています。私はbeta版をDL済みでしたので以下のコマンドを実行しました。

```terminal
$ sudo xcode-select --switch /Applications/Xcode-beta.app/Contents/Developer/
```

その後、出力されたとおりに以下のコマンドを実行しました。

```terminal
$ brew install --HEAD libimobiledevice
$ brew install ideviceinstaller
$ brew install ios-deploy
$ brew install cocoapods
$ pod setup
```

### Android

下記の出力ですが、Android StudioでPluginをインストールすればOKです。

```terminal
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
```

Android Studio > Preferences > Plugins
- [Install JetBrains plugin]から[Dart]をインストール
- [Browse Repositories]から[Flutter]をインストール

AS4.1のでpluginが認識できない問題について [こちら](https://qiita.com/mkosuke/items/7957e71968aefc6558be#flutter-plugin%E3%81%8C%E8%AA%8D%E8%AD%98%E3%81%95%E3%82%8C%E3%81%AA%E3%81%84-%E8%BF%BD%E8%A8%982020118-202117) に追記しました。(2021/1/7)

次にライセンスの解決を行います。

```terminal
$ flutter doctor --android-licenses
```

実行すると色々聞かれますが、ひたすら「y」(yes)と入力してください。
なお、Android Studioの次期バージョンであるArctic Foxでは上記コマンドもエラーになってしまうので、stable版のAndroid Studioも入れた状態で試してください。

### 再実行

ここまでできたら一度flutter doctorを実行すると、以下の出力がされました。

```terminal
[!] iOS toolchain - develop for iOS devices (Xcode 9.4)
    ✗ Missing Xcode dependency: Python module "six".
      Install via 'pip install six' or 'sudo easy_install six'.
```

私はpython未インストールのため、以下のコマンドを実行しました。　

```terminal
$ brew reinstall python@2
$ pip install six
```

ここで再度flutter doctorを実行すると、私の環境では全ての警告が解消しました。
（No devices availableにはなっていますが。）

### Device

「No devices available」と出力されているのはデバイスが接続されていないためです。
iosシミュレータを立ち上げる場合は下記コマンドで立ち上がります。

```terminal
$ open -a Simulator.app
```

また、Androidの場合はAndroid StudioでTools > AVD ManagerでVirtual Deviceを作成して起動してあげればOKです。

ちなみに、AVDは最初x86で作ったのですが、Android StudioでFlutterプロジェクトを起動させると
「PANIC: Missing emulator engine program for 'x86'」
とエラーが出てしまいました…ので、x86_64で作り直したところうまく起動できました。
この辺はまだよくわかっていないので、勉強していきたいと思います。

## Flutter Pluginが認識されない :追記（2020/11/8, 2021/1/7）


Android Studio 4.1の`flutter doctor`でAndroid Studioのpluginが認識されず、not installedとなってしまう問題があります。

結論から言うと、一旦は下記のコマンドを実行することで回避できます。

```terminal
ln -s ~/Library/Application\ Support/Google/AndroidStudio4.1/plugins ~/Library/Application\ Support/AndroidStudio4.1
```

これはAS4.1からpluginのpathが微妙に変更されたために、flutter doctorで検出できなくなったためのようです。解決方法としては、下記のようにリンクを貼ることでいったんは回避できますが、ここがエラーになっていても開発および実行には支障がないため、 ~~flutter側の対応を待つのでもよいと思います。~~ スルーでOKだと思います。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">flutter doctorでAS4.1のplugin認識されてないなと思ったらこれだった。微妙にpathが変わってるからリンクを作ればとりあえず回避できるとのこと。<br>ln -s ~/Library/Application\ Support/Google/AndroidStudio4.1/plugins ~/Library/Application\ Support/AndroidStudio4.1<a href="https://t.co/YbNK8hr7hb">https://t.co/YbNK8hr7hb</a></p>&mdash; m.kosuke (@kosuke_mtm) <a href="https://twitter.com/kosuke_mtm/status/1323662380727898113?ref_src=twsrc%5Etfw">November 3, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

2021/1/7追記
Flutter側の対応待ちのつもりでしたが、該当のissueはクローズされていました。

[Flutter Doctor: Android Studio 4.1 is not detected](https://github.com/flutter/flutter/issues/67986)

コメントを抜粋すると、以下の通りです。

> if you refer to the original post, you are actually facing a different issue, that the plugins are not detected. To be clear, failing to detect the plugins will not affect Flutter development at all. The Flutter CLI tool does not touch the plugins, only your editor does. Because of this, we plan to deprecate the plugin validators.  I am locking this issue as to avoid further confusion.

意訳すると、pluginの件は開発に直接関係しないので、plugin validatorは非推奨にするとのことです。そして以下のissueが新しく立てられています。

[[flutter_tools] IDE plugin validators should be deprecated](https://github.com/flutter/flutter/issues/61246)

> Supporting the filepaths to the android studio plugins is a moving target, that has proven difficult to keep up to date. In addition, the warning makes Flutter users think that the SDK will not function properly, when this is a completely informational warning; in other words, Flutter does not directly use the IDE plugins, so doctor failing to detect them does not affect any behavior (it's just annoying).

同様に意訳すると、先のissueに加えて、最新のIDEに対してキャッチアップしていくのは大変だという理由も添えられています。なので、いずれ `flutter doctor` でpluginの状態はチェックされなくなるのだと思います。