performance-optimization

Diagnose and fix Flutter rebuild, list, chart, and layout performance bottlenecks.

Updated May 19, 2026
One-click install
npx skills add https://github.com/LonelyTraderBay/vittrade-flutter --skill performance-optimization-lonelytraderbay
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: performance-optimization
Source: https://github.com/LonelyTraderBay/vittrade-flutter/tree/main/.agents/skills/performance-optimization
Command: npx skills add https://github.com/LonelyTraderBay/vittrade-flutter --skill performance-optimization-lonelytraderbay

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Flutter trading screens can suffer from jank, slow scrolling, and excessive widget rebuilds, and this Skill provides a gated, measurement-first workflow to find and fix the real bottleneck instead of guessing. ## Core Features & Use Cases - Measure-First Gate: Requires reproduction, profiling with DevTools or profile mode, and a cited metric before any code change. - Targeted Checklists: Covers widget rebuilds, lazy list building, Riverpod provider scoping with select, RepaintBoundary for custom chart painters, image caching, and layout constraints. - Use Case: A user reports lag on the trade order list screen. Use this Skill to profile the route, discover an unbounded Column rebuilding on every price tick, convert it to a ListView.builder with a scoped provider, and verify the frame-time improvement. ## Quick Start Use the performance-optimization skill to profile the trade screen scroll lag and fix the main rebuild bottleneck.

Frequently Asked Questions about performance-optimization

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix slow scrolling in a Flutter ListView?

Replace unbounded Column plus children with ListView.builder, SliverList, or sliver composition so only visible items build lazily. Use fixed-height rows where possible, and only tune cacheExtent after profiling shows a measurable benefit.

How do I reduce widget rebuilds in Flutter with Riverpod?

Use ref.watch(provider.select(...)) to subscribe only to the fields a widget needs instead of entire state objects. Split providers by update frequency, such as separating price ticks from static config, and avoid ref.watch in leaf widgets that need one field.

How do I profile Flutter app performance and jank?

Run flutter run --profile from the flutter_app directory and open Flutter DevTools to inspect the Performance tab, timeline, and rebuild stats. Reproduce the lag on a specific device, route, and action, then cite a metric like frame time or rebuild count before changing code.

When should I use RepaintBoundary for Flutter custom painters?

Wrap custom painters such as chart painters in a RepaintBoundary when the parent rebuilds frequently, so the painted layer is isolated. Keep shouldRepaint precise so repaints only occur when the underlying data actually changes.

When should I not optimize Flutter performance?

Do not optimize speculatively when no plan gate requires it and no measurable problem exists. The workflow requires reproduction and a cited metric first, so premature optimization without profiling evidence is explicitly out of scope.