描画軽量化で見違えるように速くなった！ – 開発日記(61)

2023/10/23

描画が重いことが気になっていたので、軽量化のための試行錯誤を行った。

一番のポイントはTextFieldを画面にたくさん置くのでは無く、「TextFieldに見えるContainer」を配置しておくこと。そして必要なタイミングで（ユーザに気づかれないように）TextFieldに切り替えて何事もなく処理を継続。終わったらまたContainerに戻すというもの。

しかしそのためにはこれまでと色々な前提が変わってしまうので、大規模な修正が必要になる。

１つの問題として、TextFieldにフォーカスを当てたとき勝手にテキストを選択したくないのだが、どうしてもその指定が出来ない。最終的に分からずStackOverflowへ人生２回目の投稿をすることに。

How can I give focus to a TextField without any text being selected in flutter?

2023/10/24

TextFieldのフォーカス関連でその後色々実験した結果、addPostFrameCallbackの中にさらにaddPostFrameCallbackを行う事で目的は果たせる事は分かった。しかしこれで良いのだろうか……。
（下記は addPostFrameCallback の入れ子のイメージ）

if(focusedIdeaModel != null) {
  WidgetsBinding.instance.addPostFrameCallback((_) {
    canvasBodyModel.focusController.setFocusToIdea(targetLane, focusedIdeaModel!.index);
    //カーソル位置も元に戻す。かなり強引だが、このようにしないと反映しなかった。。。
    if(savedSelection != null) {
      WidgetsBinding.instance.addPostFrameCallback((_) {
        focusedIdeaModel!.ideaWidget.key.currentState?.textController.selection = savedSelection!;
      });
    }
  });
}

ちなみにこの日はノートPCが壊れてその作業でほとんど終わってしまった。

2023/10/25

描画関連の処理を軽くしてパフォーマンスを上げるための試行錯誤の続き。

キーボード操作の処理が全体的にぐちゃぐちゃだったので整理しようとしたが、理由があってぐちゃぐちゃだったのでそんなにスッキリ出来ない。そういう意味では勉強になった。

TextField風に見えるコンテナを描画することでTextFieldよりかなりの軽量化に貢献している。しかしこの状態でWidgetをクリックしたとき、Containerではなく本物のTextFieldにフォーカスを切り替える処理が、既存のロジックと干渉してなかなかうまくいかなかった。

ちなみに壊れたノートPCはメーカーに発送した……。

2023/10/26

この日もフォーカス関連で苦しんだ。

アイディアを編集中にEnterを押すと編集が終わるのだが、そのときTextFieldから軽量ウィジェット(TextField風に見えるContainer)に表示を変えたときのフォーカス切り替えがうまく行かない。

一日それで苦戦。

2023/10/27

引き続きアイディア編集中→Enterで軽量ウィジェット切り替えに苦戦。

TextFiledでEnterを押した際 onSubmit と KeyDown イベント両方が走ってしまう問題だったり、フォーカス切り替えのときに呼ばれる処理が重なってうまくいかなかったり、onSubmitではなくonEditingCompleteだとまだマシだったりと、複合的な理由が関係していたようだ。カオス。

他にもEasyDebounceの影響で軽量ウィジェット側に情報が反映されていないなど、もう複雑過ぎて影響範囲を読むのが難しい状態。。。。。

何度もシンプル化を試みたが、なかなか難しい。

たとえばカーソルキーを押したときの操作は現状各アイディアウィジェットで処理を行っているが、Canvasウィジェットで一律に扱ってスッキリしたい。しかしCanvasでカーソルキーを扱ってしまうと、アイディアのTextFieldの処理が全部そちらに奪われてしまい、今の構造ではうまくいかなくなる。

作ろうとしているプログラム自体がシンプルではないので、ある程度複雑さは許容しないとダメかもしれない。

—

そんななか、操作性の改善につながる新機能を加えた。

編集中のアイディアでEnterを押すと次のアイディア作成に移るのだが、ただ単に編集終了したいときもある。次のアイディアの新規作成が必ず行われるのは少し煩わしく感じたので、”中間の状態”を作ってみた。

ちょっと分かりづらいが、慣れれば便利かもしれないのでしばらくこの仕様で行ってみよう。

2023/10/28

軽量化対応後、初めてWebにデプロイしてみたが、見違えるように速くなった！

これは驚き。ここまで違うとは……。

今までは全てがもっさり。しかし今は全てがキビキビ動く。

めちゃくちゃ苦労したけれど構造を変えて（ウィジェット描画とモデルを分離）、高速化対応して（TextFieldではなく軽量コンテナでの描画にして）良かった。

（動画を残してなくてすみません。実際の挙動はアイディア・レーン最新版でご確認ください。この当時からだいぶ時間が経っているので速度が劣化しているかもしれませんが……）

※開発日記は当時の記録をもとに作成し、必要に応じて加筆・補足しています