Does Microsoft Clarity work with Flutter web?
No. Microsoft Clarity does not work on Flutter web. Recordings come back blank and heatmaps have nothing to anchor to, because Clarity reads the DOM and a Flutter web app has no DOM to read.
Clarity records sessions and builds heatmaps by reading the page DOM and tracking cursor and tap coordinates against DOM elements. That works beautifully on HTML pages.
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 a Flutter web app there is no DOM structure for Clarity to read. Every click lands on the same canvas element. So even when a recording captures activity, Clarity cannot tell which button or link a given heat spot belongs to.
Why heatmaps are especially hard on canvas
A heatmap is only useful if a hot spot maps to a known element: "32% of users tap the upgrade button." On canvas-rendered Flutter, every tap lands on the same node. The DOM-based heatmap collapses to noise.
Solving heatmaps on Flutter means correlating tap coordinates with what Flutter rendered at that position and time. A generic DOM tool cannot do that.
A Flutter-native option
Pixeltrace captures the rendered frames of your Flutter web app. Once you have the frames, the two jobs Clarity could not do (visual replay and position-accurate heatmaps) become tractable on canvas, because every tap can finally be matched to what was drawn under it.
Pixeltrace is in development and not yet available. Join the waitlist to be notified at launch.