skills.rest
zakariaf
zakariafCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

flutter-performance

Diagnoses and fixes Flutter UI jank through rebuild scoping, lazy lists, and profile-mode measurement.

Updated Aug 22, 2026
Search Tags:#performance#profiling#devtools#flutter#riverpod#jank#rebuild scope
One-click install
npx skills add https://github.com/zakariaf/NearlyStop --skill flutter-performance-zakariaf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: flutter-performance
Source: https://github.com/zakariaf/NearlyStop/tree/main/.claude/skills/flutter-performance
Command: npx skills add https://github.com/zakariaf/NearlyStop --skill flutter-performance-zakariaf

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Flutter apps drop frames and stutter when widgets rebuild too broadly, lists render eagerly, images decode at full resolution, or heavy work blocks the UI isolate. This Skill provides a disciplined rule set and profiling workflow to hold a steady 60 fps (16 ms/frame) on low-end devices. ## Core Features & Use Cases - Rebuild Scope Control: Enforces const subtrees and ref.watch with .select so a small state change never rebuilds a heavy sibling widget. - Rendering Discipline: Mandates lazy ListView/GridView builders, sized image decode via cacheWidth/ResizeImage, surgical RepaintBoundary use, and zero-allocation CustomPainter paint() methods. - Isolate Offloading & Profiling: Moves heavy CPU work to compute()/Isolate and defines a DevTools profile-mode workflow on a real floor device, checking both UI and raster threads. - Use Case: A scrolling product list stutters on an old Android phone. Apply the profiling workflow, find raster-thread cost from Opacity widgets in list items, replace them with FadeTransition, and re-measure to confirm frames stay under 16 ms. ## Quick Start Review my Flutter screen for performance issues and fix any rebuild, list, or image problems causing jank.

Frequently Asked Questions about flutter-performance

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

FAQPage Schema
How do I fix jank and dropped frames in a Flutter app?▼

Run the app in profile mode on a real low-end device and record the jank with DevTools. Check whether over-budget frames are Build, Layout, or Raster heavy, then narrow rebuild scope with .select, add const, or reduce Opacity and clip usage, and re-measure after each fix.

How do I stop a Flutter widget from rebuilding too often with Riverpod?▼

Use ref.watch(provider.select((s) => s.field)) to watch only the field that changes instead of the whole state object. The selector requires immutable state with real value equality so rebuilds fire only when the selected value actually changes.

Why is my Flutter ListView slow with many items?▼

ListView(children: [...].toList()) builds every off-screen row up front, which is expensive for long or unbounded content. Switch to ListView.builder or slivers so only visible rows are built lazily.

Can I measure Flutter performance in debug mode?▼

No. Debug mode uses JIT compilation and asserts, making timings meaningless. Always measure in profile mode on a physical floor device with DevTools, watching both the UI thread and the raster thread.

When should I use RepaintBoundary in Flutter?▼

Use RepaintBoundary surgically around costly, independently repainting subtrees like animations or charts so their repaint does not re-raster neighbors. Do not apply it everywhere, since each boundary is a compositor layer that costs memory.

How do I run heavy computation without freezing the Flutter UI?▼

Move heavy CPU work such as parsing large payloads or image processing off the UI isolate using compute() or a spawned Isolate. The entry function must be top-level or static, and blocking the UI thread guarantees jank.

Related Skills

Explore More Software Engineering Skills→
serverpodserverpod
8

riverpod-select

Watch subsets of Riverpod provider state to minimize widget rebuilds.

Official
Intermediate
joshtoljoshtol
18

performance-auditor

Diagnose performance bottlenecks in emotive-mascot animations across devices.

Community
Advanced
zakariafzakariaf

widget-composition

Enforces Flutter widget composition rules for const widget classes, lean build methods, and structural layout.

Community
Advanced
zakariafzakariaf

custom-canvas-and-gestures

Enforces CustomPainter discipline for Flutter canvas rendering, hit-testing, gestures, and semantics.

Community
Advanced