Flutter Desktop Embeddingを実行してFlutterでデスクトップアプリを動かしてみる

この記事は[全部俺 Advent Calendar 2018](https://adventar.org/calendars/3702)の13日目の記事です。

# Flutter Desktop Embeddingについて
Flutterでデスクトップアプリ(Windows, macOS, Linux)を動作させるためのプロジェクトです。
Flutter Live 2018で使用していたプレゼンテーションアプリが、実はmacOSで動作しているFlutterのアプリだったというのが印象的でしたね。
Flutter Desktop Embeddingを使用すれば、以下のようなアプリケーションをデスクトップで実行することが可能になります。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">Flutter Desktop Embedding <a href="https://t.co/yNTyzef99W">pic.twitter.com/yNTyzef99W</a></p>&mdash; tez (@te22eret) <a href="https://twitter.com/te22eret/status/1073229736833216513?ref_src=twsrc%5Etfw">2018年12月13日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

途中で一瞬赤い画面が映るのは、Issueにあがっているように[現行のバグ](https://github.com/google/flutter-desktop-embedding/issues/171)のようです。macOSでのみ起きているようですね。

## 筆者の環境
|software     |version     |
|:------------|:-----------|
|macOS Mojave |10.14.1     |
|Xcode        |Version 10.1|

## 手順
1. 必要なリポジトリをクローンする
2. `flutter_engine_framework`をビルドする
3. 実行するプログラムをビルドして実行する

### 1. 必要なリポジトリのクローン
```
mkdir desktop_embedding
cd desktop_embedding
git clone https://github.com/flutter/flutter
git clone https://github.com/google/flutter-desktop-embedding
```
現状では、`flutter-desktop-embedding`だけでなく`flutter`自体もクローンしてくる必要があります。

### 2. `flutter_engine_framework`をビルドする
[ここ](https://github.com/google/flutter-desktop-embedding/tree/master/library)の記載に則って、`flutter-desktop-embedding/library/macos`をXcodeで開いて(macOSの場合)ビルドします。
ビルドに10分ほどかかったので、辛抱強く待ってみてください。
ビルドが完了したら、`flutter`や`flutter-desktop-embedding`と並んで`flutter_engine_framework`ディレクトリが作成されているはずです。
ビルドが完了した後、Xcode自体を終了させて実行するプログラムのビルドに移ります。

### 3. 実行するプログラムをビルドして実行する
実際に実行するプログラムをビルドして実行します。
今回は[ここ](https://github.com/google/flutter-desktop-embedding/tree/master/example)のサンプルプログラムを動かしてみることにします。
`flutter-desktop-embedding/example/macos/`をXcodeで開き、ビルド・実行をします。
すると、最初の動画のようなアプリケーションが起動するはずです。

### ホットリロード/ホットリスタートについて
アプリ実行時、Xcode上のコンソールに以下のようなメッセージが表示されているはずです。
`flutter: Observatory listening on http://127.0.0.1:61006/`

この`61006`というポートがデバッグポートになり、ホットリロードで使用するのでコピーしておきます。（実行する度に変わります。）

![image.png](https://qiita-image-store.s3.amazonaws.com/0/190807/de7a59f3-85ea-7c92-40c5-3b4d8d6c9df0.png)

[ここ](https://github.com/google/flutter-desktop-embedding/blob/master/Debugging.md)にホットリロードのやり方が書いてあるので、それを試してみます。
今回のソースコードは`flutter-desktop-embedding/example/flutter_app/lib/`以下にあるので、`main.dart`を編集してプライマリカラーを緑に変えてホットリロードしてみます。
ホットリロードは、`flutter-desktop-embedding/example/flutter_app`にて以下のコマンドを実行することでできます。

```bash
flutter attach --device-id=flutter-tester --debug-port=61006
```

`--debug-port`の値は先程確認したポートの値で毎回変わるので適宜変更してください。
実行後、見慣れた以下のようなメッセージがでるので、ホットリロードしたい場合は`r`、ホットリスタートしたい場合は`[Shift] + r`を押します。ちなみに、今回の色変更についてはホットリスタートでしか変更が反映されませんでした。

```bash
Syncing files to device Flutter test device...               1.6s

🔥  To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
An Observatory debugger and profiler on Flutter test device is available at: http://127.0.0.1:61006/
For a more detailed help message, press "h". To detach, press "d"; to quit, press "q".
```

ホットリスタートすると、以下のように画面の色が変更されるのが確認できるはずです。
![hot-restart.gif](https://qiita-image-store.s3.amazonaws.com/0/190807/d338b151-ffe3-ae88-26d3-d87db768988f.gif)


## まとめ
Flutterを使えば、Android、iOSはもちろん、Web/Widows/macOS/LinuxにChrome OSやFuchsiaなんかでも動作するアプリケーションを書くことができます！
すごいカバー範囲ですね。

おまけ：[IntelliJ IDEを使用したいなーと思ったら今後の動向が書かれてました。](https://github.com/google/flutter-desktop-embedding/blob/master/Debugging.md)

> IntelliJ
TBD. If you test IntelliJ and are able to attach successfully, please contribute instructions!

TBD = To Be Determined = これからどうするか決定する。。
実際、IntelliJ系列の何で開発するのが適切なんでしょうね？
Android Studioはちょっと違う気がするし。。
早く対応してほしいと願うばかりです。

## 参考
[flutter-desktop-embeddingリポジトリ](https://github.com/google/flutter-desktop-embedding)