RepaintBoundary (Widget of the Week)

[MUSIC PLAYING] SPEAKER: Imagine you're a painter redoing part of a home. But every time you try to paint just one wall, you accidentally get a few drops on an adjacent wall. And before you know it, you have to repaint the whole room. This is similar to how Flutter's rendering works, with each room in our hypothetical house being a layer in Flutter's layer tree. Any time Flutter needs to repaint something in a given layer, it winds up repainting the entire layer. Painters get around this by adding blue tape to edges to keep their paint off adjacent surfaces. So wouldn't it be nice if Flutter developers had a similar trick? Luckily, we do. It's called RepaintBoundary. To start, set debugRepaintRainbowEnable to true in your main method, right above where you call runApp. This flag tells Flutter to draw a colorful border around each repaint area and to change that color whenever the area is repainted. Now launch your app and look for which border colors change. If you have an animating widget, of course, its region will change colors. But if unrelated regions or your entire app are also changing colors, then the little painter inside your Flutter app is probably repainting entire rooms. To fix this, take that animating widget and wrap it in a RepaintBoundary. RepaintBoundary works by separating its child widget into its own layer, which makes it impossible to accidentally splash paint on neighboring widgets. Now run your app again and notice that even though you're animating widget keeps on animating, its neighbors no longer continuously repaint themselves. But keep in mind, it's good to check for these unnecessary repaints before wrapping everything in a repaint boundary because RepaintBoundaries do have a small CPU and memory cost that can add up. For more info on Flutter and all the other widgets, head to flutter.dev. [MUSIC PLAYING]

Channel: Flutter

Views: 79,160

Keywords: pr_pr: Flutter, series: Widget of the Week, campaign: FL: WidgetoftheWeek, type: DevByte (deck from scratch 0-2min), GDS: Yes, flutter example, build an app, app building, coding, widgets, create a widget, widgets for your app, coding an app, Flutter, package of the week, google, google developers, flutter 101, get started with flutter, flutter apps, flutter widgets, build apps with flutter, flutter widget, widget

Id: cVAGLDuc2xE

Length: 2min 20sec (140 seconds)

Published: Thu Apr 14 2022

Reddit Comments

[u/No_Appearance4886]

Interesting