Visualizes the Flutter Widget Tree and shows a visual "pulse" whenever a widget rebuilds.
Features
Live Widget Tree Transcription: Automatically fetch and render the current widget hierarchy from the running Flutter debug session.
"The Pulse" (State Change Visualization): When a widget rebuilds, its corresponding node in the tree emits a brief visual glow. If a widget rebuilds too frequently, the pulse color shifts.
Code-to-UI Mapping: Clicking a node in the visual tree automatically opens the corresponding .dart file and scrolls to the widget's definition. (Coming in future releases)
Requirements
Flutter SDK: Must be installed and available in your environment.
Flutter Heartbeat Tracker: The Flutter app must include the flutter_heartbeat package (from the tracker directory).
Setup
Add the tracker package to your Flutter app's pubspec.yaml.
Wrap your root widget (or the part of the tree you want to track) with HeartbeatTracker.
Run your Flutter app in Debug Mode.
Open the Flutter Heartbeat panel in VS Code to see visually tracked updates!
Data Source
Hooks into developer.postEvent to stream rebuild signals to the VM Service. The extension host connects to the Dart VM Service Protocol via WebSockets and communicates with a React-based webview to render the tree and animations.
