Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

tez
libora
e-Learning一括検索サービス『LIBORA』の開発・運営を行っています。
https://libora.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした