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
410
RepaintBoundary で Flutter のパフォーマンスを向上
mine2424
June 17, 2024
Tweet
Share
More Decks by mine2424
See All by mine2424
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
640
アニメーションを最深まで理解してパフォーマンスを向上させる
mine2424
0
470
金融×キャリア教育で人生をシミュレーション
mine2424
0
120
実務2年目の学生がエンジニアとして働くことについて思ったこと
mine2424
0
110
Other Decks in Programming
See All in Programming
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
190
slogパッケージの深掘り
integral0515
0
120
「App Intent」よくわからんけどすごい!
rinngo0302
1
120
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
1
350
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
440
構造化・自動化・ガードレール - Vibe Coding実践記 -
tonegawa07
0
140
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
120
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
18
9.2k
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
290
iOS開発スターターキットの作り方
akidon0000
0
180
テスト駆動Kaggle
isax1015
1
880
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7.4k
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.7k
Writing Fast Ruby
sferik
628
62k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Agile that works and the tools we love
rasmusluckow
329
21k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
How GitHub (no longer) Works
holman
314
140k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
Speed Design
sergeychernyshev
32
1k
Side Projects
sachag
455
43k
Facilitating Awesome Meetings
lara
54
6.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
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