設定画面を作り直し / データが他から変更されたことを検知 – 開発日記(71)

2024/02/07

設定画面は settings_ui というパッケージを使っている。これは短時間できれいな見た目にできて重宝していたものの、細かな調整がしづらく感じてきた。

たとえば文字サイズがプラットフォームごとにハードコーディングされていたり、テーマの持ち方が独自だったり、（画面ショットでは見えないが）スクロールバーの位置が中身と重なりがちだったり。これをベースに修正しても良いが、今後のことも考えると自分でコンポーネントを作ったほうが良さそうと思い始めてきた。

設定画面以外にも細かな不具合修正を行った。

表示中のキャンバスのデータが「他から編集された」ことを検知する仕組みを付けた。

同一のキャンバスが別の場所から（同一人物のIDで）変更されたときに、それが分かるようにしないとデータ不整合などのトラブルの元になる。

たとえばPCであるキャンバスを開いたまま、スマホで同じキャンバスを開いて編集した場合など。

できれば即座に両方を同期したいところだが、いざやると結構難しい。片方が表示専用なら出来そうだが、編集している最中のコンフリクトを考えると相当やっかい。

たとえば片方はあるアイディアを編集していて、一方ではそのアイディアを含むレーンを丸ごと削除した場合にどうするか。さらにUndo/Redoがあるので余計ややこしい。

将来的には複数人での同時編集まで実現したいところだが、今はひとまず「変更があった」ということだけ検知・通知して手動でリロードを促す形とした。

昨日に引き続きキャンバスの変更検知の対策。誤検知をせずうまく動かすための制御はなかなか難しい。

設定画面は、コツコツ作り直したのが形になった。

見た目はだいぶシンプルになってしまったが、制御がしやすくなったので今後はこちらにする。

設定画面をスマホでも使えるようケアした。

元々はスマホの細長い画面だと窮屈になっていたので、ダイアログ自体を広げた。

この実装はSimpleDialogのinsetPaddingを設定するだけで済んだ。

SimpleDialog(
　　insetPadding: const EdgeInsets.all(8),
　　…

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

この記事はアイディア整理ソフト「idea Lane」の開発記録です

↓どなたでも、ユーザ登録だけで無料ですぐに使えます↓
テキストベースの思考整理ツール「idea Lane」