Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
RepaintBoundary で Flutter のパフォーマンスを向上
Search
mine2424
June 17, 2024
Programming
0
460
RepaintBoundary で Flutter のパフォーマンスを向上
mine2424
June 17, 2024
Tweet
Share
More Decks by mine2424
See All by mine2424
Android 16KBページサイズ対応をはじめからていねいに
mine2424
1
8.1k
アニメーションを最深まで理解してパフォーマンスを向上させる
mine2424
0
590
金融×キャリア教育で人生をシミュレーション
mine2424
0
120
実務2年目の学生がエンジニアとして働くことについて思ったこと
mine2424
0
130
Other Decks in Programming
See All in Programming
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
430
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
140
Vueのバリデーション、結局どれを選べばいい? ― 自作バリデーションの限界と、脱却までの道のり ― / Which Vue Validation Library Should We Really Use? The Limits of Self-Made Validation and How I Finally Moved On
neginasu
2
870
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
240
Google Opalで使える37のライブラリ
mickey_kubo
3
140
Devoxx BE - Local Development in the AI Era
kdubois
0
140
チームの境界をブチ抜いていけ
tokai235
0
210
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
2
360
開発組織の戦略的な役割と 設計スキル向上の効果
masuda220
PRO
8
1.4k
NIKKEI Tech Talk#38
cipepser
0
170
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
6.7k
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
270
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
340
57k
GraphQLとの向き合い方2022年版
quramy
49
14k
Facilitating Awesome Meetings
lara
57
6.6k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
130k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
630
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Designing Experiences People Love
moore
142
24k
Done Done
chrislema
185
16k
Transcript
PUBLIC Flutter Meetup Tokyo #20 2024-06-17 RepaintBoundary で Flutter のパフォーマンスを向上
1
PUBLIC 自分を表す#(ハッシュタグ) みね (Ryota) # 奈良県出身 # ソフトテニス6年 # ポーカー1年
# F1 # 麻雀にはまり中 # 来年ポーカーの世界大会でます 経歴 大阪経済大学 経済学部卒 2024/4~ サイバーエージェント入社(24卒) X : nihon_kaizou github : mine2424 zenn: mine2424
PUBLIC RepaintBoundary とは? はみ出ている... 無駄なペンキ塗りが発生... 事前にテープを貼ろう!
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… 頻繁に再描画されるもの
PUBLIC Deep Dive RepaintBoundary RenderObject とは? config, def state, lifecycle
painter
PUBLIC Deep Dive RepaintBoundary RenderObject.markNeedsPaint によって 描画が必要であるというフラグが立つ RenderObject.isRepaintBoundary を持つ一番近い祖先 である
RenderObject が再描画の対象となる (何も指定していないとアプリの root より子孫全てが再描画対象となる...) PaintingContext も同様
PUBLIC Deep Dive RepaintBoundary PaintingContext.paintChild() RenderObject.markNeedsPaint()
PUBLIC Deep Dive RepaintBoundary 実は Drawer にも RepaintBoundary が...! ref:
https://github.com/flutter/flutter/blob/5187cab7bdd434ca74abb45895d17e9fa553678a/packages/flutter/lib/src/material/drawer.dart#L690 DrawerControllerState
PUBLIC RepaintBoundary の使い所 Transform & ジャイロスコープ (sensors_plus)
PUBLIC RepaintBoundary の使い所
PUBLIC RepaintBoundary の使い所
PUBLIC RepaintBoundary の計測方法 Dev Tools の Flutter inspector より
PUBLIC RepaintBoundary の計測方法 main.dart にて 全ての RenderObject に対して timeline event
を生成 再描画箇所の 色が変わる!
PUBLIC まとめ • RepaintBoundary は異なるタイミングで再描画される widget と切り離すためにある • RenderObject 内で
どこで isRepaintBoundary が true に なっているかを見ている • debug によって直感的にも定量的にも使いどころが把握できる UI のパフォーマンスを向上させて 快適なアプリを構築!
PUBLIC END 15