Does Microsoft Clarity work with Flutter web?
Not in any useful way. Clarity's DOM-based recording and heatmaps have nothing to anchor to, because Clarity reads the DOM and a Flutter web app has no DOM to read. At best you get a low-framerate video of the canvas with no element-level insight.
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.
There is also a privacy catch worth flagging. DOM-based tools mask sensitive fields by selecting the elements to redact (a CSS class, a selector, an attribute). On a Flutter canvas there are no such elements, so even when one of these tools does manage a low-framerate video capture of the canvas, none of them can mask anything inside it. Every tool in this space documents that canvas content cannot be masked. Anything Flutter painted (passwords, payment details, personal data) is recorded in the clear, which is a real concern for GDPR, HIPAA, PCI, and similar obligations.
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.
It also closes the privacy gap. Because Pixeltrace works inside Flutter, you can mark sensitive widgets and it redacts those regions at capture time, on-device, so personal data never lands in the recording. That's masking on canvas, which Clarity and other DOM tools can't offer.
Pixeltrace is in development and not yet available. Join the waitlist to be notified at launch.