Flutter on Desktopでアプリを常駐させる

この記事の続きです。Flutter Webではウィンドウの常駐化が出来ません。そこで本記事ではWindowsOSにてDesktopビルドを行ってアプリを常駐するまでを一緒に動かしてみたいと思います。Linuxだと需要がなさそうなので。

アプリの常駐とは？

本記事ではバックグラウンドワーカーでタスクを走らせるのではなく、ウィンドウを閉じてもアプリがタスクトレイに格納されて常駐する方法を実現してみます。Hidden at launchする方法はwindow_manager.dartのReadmeに書かれていますが、GUIをもたないアプリであればC++/C#（ネイティブ言語）で開発する方が自然だと思うので本記事では取り上げません。

タスクトレイに格納するパッケージの追加

window_manager.dartではタスクトレイに格納する機能がないのでsystem_tray.dartを利用して実現させます。まずはpub addなどであらかじめインストールを行っておいてください。

ウィンドウを閉じてもアプリを終了させないようにする

window_manager.dartのウィンドウマネージャーの設定を変更してウィンドウを閉じてもアプリを終了させないようにします。

dart

windowManager.waitUntilReadyToShow(windowOptions, () async {
  await windowManager.setPreventClose(true); <- add here
  await windowManager.show();
  await windowManager.focus();
});

await windowManager.setPreventClose(true); を追記していったんビルドし、ウィンドウをバツボタンで閉じても反応しないことを確認してください。

initSystemTrayメソッドを作成

Future<void> initSystemTray() async {
... omit code ...
}

ReadmeのUsageに記述されているコードをコピペします。

おことわり
私の記事ではリファレンスを参照してまるごと利用する場合はコードの全文を掲載しません。元記事が編集されている場合はフェッチが大変なのと書き写すこと自体が無駄と感じるため、あらかじめご了承ください。

initSystemTrayを実行

@override
void initState() {
  super.initState();
  windowManager.addListener(this);
  initSystemTray(); <- add here
}

リファレンスのExampleに書かれている方法で実装します。アイコンはご自身で用意します。

☕寄り道

Futureの場合はawaitをつけなくていいの？ 👉ページの最後にて後述します。

ウィンドウを閉じるボタンを押したらウィンドウを非表示にする

dart

@override
void onWindowClose() async {
  await windowManager.hide();
  setState(() {});
}

タスクトレイの機能を変更する

リファレンスのサンプルコードではShowとHideの切り替えがメニューに設定されていますが、現時点ではウィンドウを閉じるボタンを押すと非表示、タスクトレイのアイコンを左クリックするとウィンドウが表示される動作が確認できていると思います。

表示・非表示メニューは不要なのでかわりにCountUpをメニューに追加してみます。コードは次に記します。

メニューの動作とコードを揃える

MenuItemLabel(
    label: 'CountUp',
    onClicked: (menuItem) => setState(() {
          _counter++;
        })),
MenuItemLabel(
    label: 'Exit',
    onClicked: (menuItem) async => await windowManager.destroy()),

• CuntUpメニューをクリックするとカウンターを1回増やす
• Exitメニューをクリックするとアプリを終了する

setPreventClose(true)でアプリの終了がガードされているので、destroy()でウィンドウマネージャーを破棄することでアプリ終了となります。

タスクトレイ常駐で何をしたいのか？

複数ウィンドウの切り替えなどをやってみたかったのですが、Flutterでは出来ないか、力業で作り込む必要がありそうです。とりあえず今回はウィンドウ非表示の状態でstateを変更することを試せました。コードに慣れることも重要ですが、何を作りたいのかを考えることで学習や開発のモチベーションにつながります。ぜひ一緒に想像力を働かせていきましょう。

おまけ：非同期メソッドをFutureクラスでラップしなくていいの？

initSystemTray();
↓
Future(() async {
  await initSystemTray();
  ... hre some code ...
});

void main() async {}
↓
Future<void> main() async {}

Futureクラスでラップしなくても動作するので疑問に思っていたのですが、以下のスレッドを見つけたので共有します。

会話言語の解釈はひとそれぞれだと思うので翻訳はしませんが、少なくともvoidとFureの違いはawaitによって処理の完了を知る必要があるかどうかで使い分けましょうと説明されています。

この記事の続き