performance_skill

Overview

This skill helps diagnose and fix Flutter performance problems by guiding measurement, reducing UI work, optimizing lists and painting, and moving heavy work off the UI thread. It focuses on practical steps you can apply quickly to eliminate jank, shrink rebuild cost, and stabilize rendering under load.

How this skill works

Start by measuring with Flutter DevTools (frame chart, CPU profiler, memory inspector) and define a simple before/after metric such as 99th percentile frame time while scrolling. Inspect rebuilds, paint/compose times, and memory churn. Apply targeted mitigations: minimize rebuild cost, convert lists to lazy builders, isolate frequent repainters with RepaintBoundary where justified, and run heavy computation in isolates or compute.

When to use it

• You see dropped frames or jank during scrolling, animations, or transitions.
• App startup or screen open times feel slow or memory usage is high.
• Large lists or images cause stutters during interaction.
• Heavy parsing, sorting, or formatting runs on the UI thread.
• You need reliable before/after metrics to validate optimizations.

Best practices

• Measure first—profile frame, CPU, and memory to find the real bottleneck.
• Keep widget state minimal and prefer const widgets to reduce rebuild cost.
• Use ListView.builder or other lazy builders; give item widgets stable keys when order changes.
• Avoid patterns that force expensive compositing (unnecessary Opacity, Clip, saveLayer).
• Wrap only hot repainting subtrees with RepaintBoundary after profiling.
• Move heavy parsing or computation to isolates and keep logic testable and pure.

Example use cases

• Reduce jank in a chat app that stutters while new messages stream in by profiling and isolating repainting widgets.
• Speed up onboarding by moving large JSON parsing into an isolate and measuring startup frame times.
• Optimize a product list by switching to ListView.builder with stable keys and trimming widget rebuilds.
• Fix a CPU-bound animation by profiling, identifying repaint propagation, and applying RepaintBoundary selectively.
• Refactor formatting logic into pure functions so you can unit test and benchmark performance changes.