skills.rest
yunior123
yunior123COMMUNITY
Explore all skills by this author →
WebsiteGitHub

flutter-performance

Diagnose frame drops, scroll jank, and animation stutter in Flutter apps using overlays, DevTools, and benchmarks.

Updated Mar 9, 2026
Search Tags:#performance#benchmarking#profiling#devtools#flutter#jank#frame drops
One-click install
npx skills add https://github.com/yunior123/origna_gta_firebase --skill flutter-performance-yunior123
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: flutter-performance
Source: https://github.com/yunior123/origna_gta_firebase/tree/main/.claude/skills/flutter-performance
Command: npx skills add https://github.com/yunior123/origna_gta_firebase --skill flutter-performance-yunior123

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Flutter apps can suffer from frame drops, scroll jank, and animation stutter that are hard to locate without a structured profiling workflow. This Skill provides a repeatable process for finding and fixing rendering bottlenecks in the OrignaGTA Flutter app, from quick overlay checks to automated benchmark tests. ## Core Features & Use Cases - Performance Overlay & DevTools Workflow: Toggle the performance overlay in profile mode and use DevTools Frame Analysis to pinpoint whether jank comes from the UI thread (Dart rebuilds) or the raster thread (GPU rendering). - Automated Benchmarking: Write integration tests with traceAction and a flutter drive driver that output timeline summaries with average/worst frame times and missed-frame percentages. - OrignaGTA-Specific Hotspot Guide: A lookup table of known bottlenecks (product card rebuilds, mascot painters with shouldRepaint: true, heavy provider watches) with concrete fixes like const constructors, RepaintBoundary, and select(). - Use Case: A user reports the home feed stutters while scrolling. Run the app in profile mode, press 'P' to check the overlay, trace the scroll in DevTools, then apply RepaintBoundary around product cards and verify with a perf_home_test.dart benchmark. ## Quick Start Ask the AI to diagnose scroll jank on the home feed by running the app in profile mode and analyzing the performance overlay and DevTools timeline.

Frequently Asked Questions about flutter-performance

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

FAQPage Schema
How do I diagnose scroll jank in a Flutter app?▼

Run the app in profile mode on a physical device and press 'P' to toggle the performance overlay. Red bars on the UI thread indicate excessive Dart rebuilds, while red bars on the raster thread indicate expensive rendering like saveLayer, clips, or image decoding.

How to benchmark Flutter scroll performance with integration tests?▼

Use IntegrationTestWidgetsFlutterBinding with traceAction around a fling gesture, then run flutter drive in profile mode with a driver that writes a TimelineSummary. The output JSON reports average and worst frame times plus missed frame percentages.

Why should Flutter performance testing use profile mode instead of debug mode?▼

Debug mode includes assertions and JIT compilation that skew frame timing results. Profile mode compiles with AOT and near-release optimizations while still exposing tracing data, giving measurements representative of real user experience.

Why does a Flutter CustomPainter repaint every frame?▼

If shouldRepaint always returns true, the painter triggers full GPU repaints 60 times per second. Fix it by comparing the animation fields between old and new painter instances and returning true only when a value actually changed.

Can Firebase Performance Monitoring track custom Flutter operations?▼

Yes, the firebase_performance package supports custom traces via FirebasePerformance.instance.newTrace(). Start and stop the trace around slow operations like payment sheet initialization, alongside auto-captured HTTP traces and screen render metrics.

Related Skills

Explore More Software Engineering Skills→
brahiamsinhobrahiamsinho

flutterfire-configure

Automate Firebase setup and configuration for Flutter applications.

Community
Intermediate
altrupetsaltrupets

Performance Optimization

Optimize Flutter app performance by reducing widget rebuilds and improving list rendering.

Official
Advanced
berksunduriberksunduri
23

golang-observability

Instrument Go services with structured logging, Prometheus metrics, OpenTelemetry tracing, and pprof profiling.

Community
Advanced
firebasefirebase
402

firebase-crashlytics

Sets up Firebase Crashlytics SDK for crash reporting in Android and iOS apps.

Official
Intermediate