RepaintBoundary で Flutter のパフォーマンスを向上

Transcript

1. PUBLIC Flutter Meetup Tokyo #20 2024-06-17 RepaintBoundary で Flutter のパフォーマンスを向上 1
2. PUBLIC 自分を表す#(ハッシュタグ) みね (Ryota) # 奈良県出身 # ソフトテニス6年 # ポーカー1年 # F1 # 麻雀にはまり中 # 来年ポーカーの世界大会でます 経歴 大阪経済大学 経済学部卒 2024/4~ サイバーエージェント入社(24卒) X : nihon_kaizou github : mine2424 zenn: mine2424
3. PUBLIC RepaintBoundary とは？ はみ出ている... 無駄なペンキ塗りが発生... 事前にテープを貼ろう!
4. PUBLIC RepaintBoundary とは？ This widget creates a separate display list for its child, which can improve performance if the subtree repaints at different times than the surrounding parts of the tree. 他と異なるタイミングで再描画される Widget を切り離す ex) animation, chart, CustomPaint, BackDropFilter etc… 頻繁に再描画されるもの
5. PUBLIC Deep Dive RepaintBoundary RenderObject とは？ config, def state, lifecycle painter
6. PUBLIC Deep Dive RepaintBoundary RenderObject.markNeedsPaint によって 描画が必要であるというフラグが立つ RenderObject.isRepaintBoundary を持つ一番近い祖先 である RenderObject が再描画の対象となる （何も指定していないとアプリの root より子孫全てが再描画対象となる...） PaintingContext も同様
7. PUBLIC Deep Dive RepaintBoundary PaintingContext.paintChild() RenderObject.markNeedsPaint()
8. PUBLIC Deep Dive RepaintBoundary 実は Drawer にも RepaintBoundary が...! ref: https://github.com/flutter/flutter/blob/5187cab7bdd434ca74abb45895d17e9fa553678a/packages/flutter/lib/src/material/drawer.dart#L690 DrawerControllerState
9. PUBLIC RepaintBoundary の使い所 Transform & ジャイロスコープ (sensors_plus)
10. PUBLIC RepaintBoundary の使い所
11. PUBLIC RepaintBoundary の使い所
12. PUBLIC RepaintBoundary の計測方法 Dev Tools の Flutter inspector より
13. PUBLIC RepaintBoundary の計測方法 main.dart にて 全ての RenderObject に対して timeline event を生成 再描画箇所の 色が変わる！
14. PUBLIC まとめ • RepaintBoundary は異なるタイミングで再描画される widget と切り離すためにある • RenderObject 内で どこで isRepaintBoundary が true に なっているかを見ている • debug によって直感的にも定量的にも使いどころが把握できる UI のパフォーマンスを向上させて 快適なアプリを構築！
15. PUBLIC END 15