perf_diagnosis_demo
This repo collects examples of common performance pitfalls developers might run into for the purpose of demonstrating how to diagnose and resolve them.
List of examples
World Clock
Problem code: clock_demo.dart
Explanation: Because the whole screen is a single StatefulWidget, all the widgets get rebuilt whenever the text labels for the clocks get updated.
Solution: Extract the text label for the clock into its own StatefulWidget to localize the rebuild. See the updated code in clock_fix.dart.
List
Problem code: list_demo.dart
Explanation: A Column with hundreds of items is nested within a ListView, causing offscreen items to be built and drawn every time the user scrolls the screen.
Solution: Move the items from that single Column widget to the ListView, instead. See the updated code in list_fix.dart.
Spinning Boxes
Problem code: spinning_box_demo.dart
Explanation: The AnimatedBuilder's builder function contains a subtree
that does not depend on the animation, but it still gets rebuilt in every frame
of the animation.
Learn more from the API doc.
Solution: Extract the non-animation subtree into its own widget from the AnimatedBuilder. See the updated code in spinning_box_fix.dart.
Scorecard
Problem code: scorecard_demo.dart
Explanation: Opacity animations are created by directly manipulating the
opacity property of the Opacity widget, causing the widget itself and
its subtree to rebuild in every frame.
In addition, the Opacity widget is placed unnecessarily high in the tree.
Learn more from the API doc of Opacity.
Solution: Use AnimatedOpacity instead.
See the updated code in
scorecard_fix.dart.