Dart
クロスプラットフォーム
Flutter

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

この記事は全部俺 Advent Calendar 2018の13日目の記事です。


Flutter Desktop Embeddingについて

Flutterでデスクトップアプリ(Windows, macOS, Linux)を動作させるためのプロジェクトです。

Flutter Live 2018で使用していたプレゼンテーションアプリが、実はmacOSで動作しているFlutterのアプリだったというのが印象的でしたね。

Flutter Desktop Embeddingを使用すれば、以下のようなアプリケーションをデスクトップで実行することが可能になります。

途中で一瞬赤い画面が映るのは、Issueにあがっているように現行のバグのようです。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をビルドする

ここの記載に則って、flutter-desktop-embedding/library/macosをXcodeで開いて(macOSの場合)ビルドします。

ビルドに10分ほどかかったので、辛抱強く待ってみてください。

ビルドが完了したら、flutterflutter-desktop-embeddingと並んでflutter_engine_frameworkディレクトリが作成されているはずです。

ビルドが完了した後、Xcode自体を終了させて実行するプログラムのビルドに移ります。


3. 実行するプログラムをビルドして実行する

実際に実行するプログラムをビルドして実行します。

今回はここのサンプルプログラムを動かしてみることにします。

flutter-desktop-embedding/example/macos/をXcodeで開き、ビルド・実行をします。

すると、最初の動画のようなアプリケーションが起動するはずです。


ホットリロード/ホットリスタートについて

アプリ実行時、Xcode上のコンソールに以下のようなメッセージが表示されているはずです。

flutter: Observatory listening on http://127.0.0.1:61006/

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

image.png

ここにホットリロードのやり方が書いてあるので、それを試してみます。

今回のソースコードはflutter-desktop-embedding/example/flutter_app/lib/以下にあるので、main.dartを編集してプライマリカラーを緑に変えてホットリロードしてみます。

ホットリロードは、flutter-desktop-embedding/example/flutter_appにて以下のコマンドを実行することでできます。

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

--debug-portの値は先程確認したポートの値で毎回変わるので適宜変更してください。

実行後、見慣れた以下のようなメッセージがでるので、ホットリロードしたい場合はr、ホットリスタートしたい場合は[Shift] + rを押します。ちなみに、今回の色変更についてはホットリスタートでしか変更が反映されませんでした。

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


まとめ

Flutterを使えば、Android、iOSはもちろん、Web/Widows/macOS/LinuxにChrome OSやFuchsiaなんかでも動作するアプリケーションを書くことができます!

すごいカバー範囲ですね。

おまけ:IntelliJ IDEを使用したいなーと思ったら今後の動向が書かれてました。


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リポジトリ