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
390
RepaintBoundary で Flutter のパフォーマンスを向上
mine2424
June 17, 2024
Tweet
Share
More Decks by mine2424
See All by mine2424
アニメーションを最深まで理解してパフォーマンスを向上させる
mine2424
0
430
金融×キャリア教育で人生をシミュレーション
mine2424
0
120
実務2年目の学生がエンジニアとして働くことについて思ったこと
mine2424
0
110
Other Decks in Programming
See All in Programming
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
100
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
990
XP, Testing and ninja testing
m_seki
3
200
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
230
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
100
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
Team operations that are not burdened by SRE
kazatohiei
1
260
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
100
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
320
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
200
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
460
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
380
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Code Reviewing Like a Champion
maltzj
524
40k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Building Applications with DynamoDB
mza
95
6.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Rails Girls Zürich Keynote
gr2m
94
14k
Optimizing for Happiness
mojombo
379
70k
The Cult of Friendly URLs
andyhume
79
6.5k
It's Worth the Effort
3n
185
28k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Code Review Best Practice
trishagee
68
18k
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