Fletでいい感じなフレームレスウィンドウを作る

フレームレスウィンドウ

Fletにはタイトルバーのウィジェットが無く、かわりにAppBarがあります。しかし、このAppBarはデスクトップ向けのGUIとしてはかなり不格好。 (スマホ向けのデプロイも意識してのことだろうから仕方ないけども!)

そんなわけで、上記画像のようなタイトルバーを下記要件を満たす形で作ってみました。

  • タイトルバー部分をドラッグすることでウィンドウを動かせる。
  • ウィンドウはリサイズできる。
  • 右上にコントロールボタンを設定する。
  • 最大化ボタンは、ウィンドウ最大時と非最大時とでアイコンを分ける。

実装

内部はFlutterてことで、Dartっぽく書いてることもあり縦長ですがご愛嬌。

ポイントは最大化ボタンのところぐらいだろうか。ウィンドウの最大化タイミングは色々(画面上端にドロップ等)あるため、pageのon_window_eventに最大化アイコン変更の処理を持たせてます。 メソッドを上書いてますが、Pageを継承しても良しです。

一個注意なのが、Fletの標準アイコンによくある縮小ボタンぽいのが全然ないことです!限りなく近いicons.PHOTO_SIZE_SELECT_SMALLを使っていますが若干苦し紛れです。 もっといいのあれば教えてください!

それにしても、Material系ライブラリはプライマリカラーの設定一つでガラッと雰囲気を変えられるので、デザインからっきしの自分はかなりテンションが上がりますな。