Flutter Webのレンダリング問題。文字がにじむ – 開発日記(59)

2023/10/12

Flutterのクロスプラットフォーム対応で文字がにじむ問題に困っている。

Windows版とWeb版それぞれでビルドしたものを比べると、見た目が全く同じにならずテイストが違う。
それはまぁ良いのだがWeb側の文字はいつも少しぼやけたような印象がある(1枚目左がWindows、右がWeb(Chrome))。

左:Windows、右:Web(Chrome)

しかもこの現象はChromeが顕著のようだ(2枚目左Edge、右Chorome)。

同じWebでもブラウザによって違う。分かりづらい場合は画像を元のサイズで表示してみて頂きたい


なおレンダリング方式を変えるため、ビルド時に flutter build web –web-renderer html をすれば、クリアになったように見える。

とはいえ公式によればデフォルトのCanvasKitの方が高速だそうだ。試した感じではWeb Renderer Htmlでも速度的にはまあなんとか行けそうだが……。

なんとMacで見たら全部文字が太字になって、BOLD状態との区別が付かなくなった。しかも全部ゴシック的で角張っている。

本当は太字と細字のところがあるのだが、区別が付かない

なんじゃこりゃ~。

ちなみに他のソフト、たとえばNotionでもWindowsとMacを比べるとMacの方が字が太い感じがする。そういうテイストなのかもしれないが、さすがに太字と細字の区別は付く。標準で指定されているフォントが問題だったりするのだろうか?

結局Webレンダラーをhtmlにすると、勝手に太字になったりして見た目が不安定な感じ。それと最初にアクセスしたときに画面が開くまで時間が余計かかる印象がある。採用は難しそうだ。

2023/10/13

引き続きレーンとアイディアの描画テスト。

ほぼ作り直しのレベルで相変わらず色々と試している。特にレーンヘッダーの部分がやはり難しい。

しかしこれではいつまでも終わらない。既に半年作ってきた複雑なものを再度作り直したら、また数ヶ月はかかる。モデルやウィジェットを大きく作り直したい気持ちもあるが、そもそも複雑なのであまりきれいなものにはならない予感がする。

そろそろ切り上げて、必要な実験のみに絞り早く完成に向かわないと、長すぎる足踏みになる気がしてきた。リファクタをやるにしても、複雑なものの作り直しは壮大な無駄になり得る。


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

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

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


コメント

タイトルとURLをコピーしました