flutter-performance-optimizer
Optimization Skill
Quick Wins
// 1. const: const Text('Title') vs Text('Title')
// 2. Narrow BlocBuilder: Scaffold(body: BlocBuilder(...))
// vs BlocBuilder(builder: (ctx, state) => Scaffold(...))
// 3. buildWhen: buildWhen: (prev, curr) => prev.data != curr.data
// 4. ListView.builder vs ListView(children: [])
// 5. Keys: key: ValueKey(items[i].id)
// 6. Batch API:
// ❌ for (item in items) await api.fetch(item.id);
// ✅ await Future.wait(items.map((i) => api.fetch(i.id)));
// ✅✅ await api.fetchBatch(ids);
// 7. Debounce:
Timer? _debounce;
void onSearchChanged(String q) {
_debounce?.cancel();
_debounce = Timer(Duration(milliseconds: 300), () => _search(q));
}
// 8. Heavy work: compute(_heavy, data) in Bloc, NOT in build()
// 9. Images: CachedNetworkImage with width/height
// 10. Memory leaks:
Future<void> close() { _controller.close(); return super.close(); }
void dispose() { _timer?.cancel(); super.dispose(); }
Common Issues
- BlocBuilder wraps entire screen → Narrow scope
- Missing const → Add const
- No buildWhen → Filter rebuilds
- ListView without .builder → Use .builder
- Sequential API calls → Batch or parallel
- Heavy computation in build() → Move to Bloc/isolate
- Streams/timers not closed → Dispose properly
Diagnostics
flutter run --profile --trace-skia
# DevTools → Memory, Performance
More from desquared/agents-rules-skills
shared-bug-investigation
Scientific method expert for systematic bug investigation and root cause analysis. Use when users report bugs, crashes, unexpected behavior, or debugging requests. Applies hypothesis-driven investigation, controlled experiments, and rigorous validation across any programming language or platform.
23android-performance-profiler
Identifies potential performance bottlenecks in Jetpack Compose code including expensive recompositions, unnecessary redraws, and memory issues. Use when code involves lists, animations, complex UI, or when the user asks about performance optimization.
19ios-swiftui-architecture-review
Analyze SwiftUI view hierarchies and suggest MVVM or other architectural improvements. Use when **reviewing existing SwiftUI code**, creating new SwiftUI components, analyzing view structure, or when the user asks about SwiftUI architecture patterns. Best for code review and refactoring guidance.
13android-compose-architecture-review
Analyze Jetpack Compose UI hierarchies and suggest MVVM/MVI or other architectural improvements. Use when reviewing existing Compose code, creating new Compose components, analyzing composable structure, or when the user asks about Compose architecture patterns. Best for code review and refactoring guidance.
13android-accessibility-validator
Checks and suggests accessibility improvements for Jetpack Compose and Android Views including TalkBack labels, dynamic text support, and color contrast. Use when creating or modifying UI components, screens, or when the user asks about accessibility.
12android-kotlin-api-design-reviewer
Review function and class interfaces for Kotlin Coding Conventions compliance. Use when creating public APIs, reusable components, library interfaces, or when the user asks for API design review or Kotlin naming conventions.
11