Back to results for “Debugging”
Flutter › Flutter DevTools & Debugging

How can you use the DevTools widget rebuild profiler and the Flutter Inspector's own select widget mode together to actually diagnose a specific widget that is genuinely rebuilding far more frequently than it actually genuinely needs to?

Advanced

Answer

The Flutter Inspector's select widget mode lets you directly tap on any specific visible widget currently displayed within your actively running app to immediately jump directly to its own exact corresponding location within the underlying widget tree and its own source code, while DevTools' dedicated rebuild tracking feature can highlight and clearly indicate exactly which specific widgets are actually rebuilding on every single frame, and combining both of these particular tools together lets you quickly and precisely identify a specific widget that is genuinely rebuilding unnecessarily far too often, then trace that specific unnecessary rebuild directly back to its actual genuine root cause, such as an improperly scoped Provider or a genuinely missing const constructor.
// Enabling the 'Track widget rebuilds' option within DevTools' Inspector tab
// highlights every widget that actually rebuilds on each individual frame
Real-world example A developer notices an entire large product list is being unnecessarily rebuilt in full every single time a user simply toggles an unrelated favorite icon, and uses DevTools' rebuild tracking feature to correctly trace that specific unnecessary widespread rebuild directly back to an improperly and overly broadly scoped Provider higher up within the widget tree.

Common follow-ups: What is the specific difference between a widget rebuilding and that same widget actually needing to be genuinely fully repainted?;How does properly and correctly using const constructors help meaningfully reduce this exact same specific kind of unnecessary rebuild?