State & Storage Lab: Flutter

State & Storage Lab is an interactive, visual training laboratory designed to help Flutter developers master State Management mechanics, Widget Rebuild profiling, and Local Storage persistence through side-by-side architectural comparisons and live benchmarks.
Whether you are preparing for technical interviews or architecting production-grade Flutter applications, this app provides real-time visual feedback and real-world code snippets for all primary data architectures.
🚀 Key Learning Tracks & Features:
⚡ Track 1: State Management Showdown
Compare 4 core state management approaches side-by-side on a live interactive shopping cart:
•
setState(): Visualizing parent tree rebuilds and performance impact.
•
ValueNotifier & InheritedWidget: Targeted lightweight reactive rebuilds.
•
BLoC & Cubit: Event-driven architecture with a live real-time Event-to-State timeline logger.
•
Riverpod: Modern provider architecture with StateNotifier and ref.watch().
🔍 Track 2: On-Screen Widget Rebuild Profiler
•
Live Rebuild Counters: On-screen badge overlays on every widget showing exact rebuild counts (Rebuilds: X).
•
Color-Coded Health Indicators: Badges turn green for optimal renders, orange for moderate updates, and red for wasteful renders with animated border highlights.
💾 Track 3: Local Storage & Persistence Sandbox
Test and benchmark offline database technologies side-by-side:
•
Key-Value Store (SharedPreferences): Interactive settings inspector and custom key-value tester.
•
Fast NoSQL Object Store (Hive): Instant document vault for complex Dart objects.
•
Relational Database (SQLite): Indexed task and expense database with status filters, date range queries, and aggregations.
•
Performance Benchmark Suite: Measure real-time Read/Write performance (in milliseconds) for 100, 1,000, and 5,000 items across all three engines.
🔄 Track 4: App Lifecycle & Dynamic Theme Engine
•
Lifecycle Monitor: Real-time observer tracking resumed, inactive, paused, and detached app state transitions using WidgetsBindingObserver.
•
Dynamic Localization & Theme: Toggle between Dark, Light, and System modes with full English (LTR) and Arabic (RTL) localization support.
📚 Track 5: Architecture Best Practices Guide & Code Viewer
•
Curated offline guide on Cubit vs BLoC, storage decision matrix, and anti-pattern prevention.
•
Built-in Code Viewer with "Copy Snippet" buttons for instant copy-pasting into your projects.