flutter-debugging
Original:🇺🇸 English
Translated
Flutter DevTools, Profiling, Logging & Memory Management
3installs
Sourcedhruvanbhalara/skills
Added on
NPX Install
npx skill4agent add dhruvanbhalara/skills flutter-debuggingTags
Translated version includes tags in frontmatterSKILL.md Content
View Translation Comparison →Logging
- Use a centralized class for all logging — NEVER use
AppLoggeror rawprint()debugPrint() - Define log levels: ,
verbose,debug,info,warning,errorfatal - In dev flavor: log everything (verbose and above)
- In staging: log info and above
- In production: log warning and above only, route to Crashlytics
- Include context in logs:
AppLogger.error('Failed to fetch user', error: e, stackTrace: st) - NEVER log sensitive data (passwords, tokens, PII) at any level
Flutter DevTools
- Use Widget Inspector to debug layout issues and identify unnecessary rebuilds
- Use Performance Overlay () to monitor frame rates
showPerformanceOverlay: true - Use Timeline View to identify jank — target 16ms per frame (60fps)
- Use Memory View to detect memory leaks and monitor allocation patterns
- Use Network Profiler to inspect Dio requests/responses during development
Debugging Strategies
- Layout Issues: Use to visualize widget boundaries
debugPaintSizeEnabled = true - Overflow Errors: Check — use
RenderFlex overflowed,Expanded, or constrain dimensionsFlexible - Unbounded Height: Wrap in
ListViewor useSizedBoxwithshrinkWrap: trueNeverScrollableScrollPhysics - Rebuild Tracking: Add temporarily to identify excessive rebuilds — remove before commit
debugPrint('$runtimeType rebuild') - Async Errors: Always catch and log errors in blocks with stack traces
try-catch - Use for development-time invariant checks that are stripped in release builds
assert()
Memory Management
- Dispose ALL controllers, subscriptions, , and
TimerinAnimationControllerdispose() - Use initialization in
late— never inline-initialize disposable objectsinitState() - Use for caches that should not prevent garbage collection
WeakReference - Profile memory with DevTools Memory tab — watch for monotonically increasing allocations
- Watch for common leaks: undisposed listeners, closures capturing , global streams without cancellation
BuildContext
Performance Profiling
- Always profile with mode (not debug):
--profileflutter run --profile --flavor dev -t lib/main_dev.dart - Use /
Timeline.startSyncfor custom performance tracing of critical pathsTimeline.finishSync - Monitor shader compilation jank on first run — use for warmup:
--cache-skslbashflutter run --profile --cache-sksl --purge-persistent-cache - Target metrics: < 16ms frame build time, < 100ms screen transition, < 2s cold start
Error Boundaries
- Route errors to Crashlytics in staging/prod ()
FlutterError.onError = FirebaseCrashlytics.instance.recordFlutterFatalError - Set and
FlutterError.onErrorto catch framework and async errorsPlatformDispatcher.instance.onError - Wrap critical widget subtrees in custom error boundary widgets that show fallback UI instead of red screens
- In release mode: NEVER show stack traces to users — show user-friendly error messages only