LoginSignup
14

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-12-13

この記事は全部俺 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リポジトリ

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14