Why Flutter heatmaps break
Flutter heatmaps break because DOM-based heatmap tools need each tap to map to a known UI element, but on Flutter web every tap lands on the same canvas node, so the tool cannot tell which control was tapped.
A heatmap is only useful when a hot spot maps to a known UI element: "users keep tapping here, and here is the button it lands on." DOM-based tools get that mapping for free, because every element is already a DOM node.
The reason is how Flutter web renders. It does not draw your interface to the DOM. With the CanvasKit renderer (a WebAssembly build of Google’s Skia graphics engine, and the production default for most Flutter web apps) and the newer Skwasm renderer, Flutter paints the entire UI as pixels onto one HTML canvas element. To the browser, and to any tool that reads the DOM, your app is a single opaque rectangle. No buttons, no text nodes, nothing to attach to.
On Flutter web every tap lands on the same canvas element. A DOM-based tool sees one node soaking up every interaction. It cannot tell which on-screen control each tap was meant for, so the heatmap is meaningless.
What a Flutter heatmap requires
To build an accurate heatmap on canvas-rendered Flutter, you have to correlate tap coordinates with what Flutter rendered at that point in space and time. That means capturing the frames and the interaction stream together, then overlaying interaction density on the visuals the user saw.
Done well, this beats a DOM heatmap. It anchors to the real pixels rather than to element bounding boxes.
Flutter heatmaps with Pixeltrace
Pixeltrace records the rendered frames of your Flutter web app and keeps the interaction stream alongside them. With both in hand, a hot spot can be drawn over the pixels the user saw, which is what a Flutter heatmap needs and a DOM tool can never supply.
Heatmap features are part of the roadmap, and Pixeltrace isn't generally available yet. Join the waitlist to be notified.