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
400
RepaintBoundary で Flutter のパフォーマンスを向上
mine2424
June 17, 2024
Tweet
Share
More Decks by mine2424
See All by mine2424
アニメーションを最深まで理解してパフォーマンスを向上させる
mine2424
0
440
金融×キャリア教育で人生をシミュレーション
mine2424
0
120
実務2年目の学生がエンジニアとして働くことについて思ったこと
mine2424
0
110
Other Decks in Programming
See All in Programming
GoのGenericsによるslice操作との付き合い方
syumai
3
720
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
350
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
0
640
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.2k
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
660
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
170
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
6
4.9k
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
620
CursorはMCPを使った方が良いぞ
taigakono
1
210
5つのアンチパターンから学ぶLT設計
narihara
1
140
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
180
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Raft: Consensus for Rubyists
vanstee
140
7k
Bash Introduction
62gerente
614
210k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Speed Design
sergeychernyshev
32
1k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Faster Mobile Websites
deanohume
307
31k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
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