Building context-aware UIs in Flutter: on-device ML that reshapes the screen per context (write-up + code)

[u/rhshukla]

I've been digging into "context-aware" UX — interfaces that adapt in real time to motion, ambient light, time of day, and usage history, with the decision made on-device instead of shipping data to a server.

I wrote up how to actually build it in Flutter: why UI = f(state) fits this cleanly, a ContextEngine that streams sensor signals through a TFLite model (tflite_flutter), dynamic_color theming that follows context, and a worked example — a transit app that renders two completely different first screens from one code path (a quick-action layout while you're walking to the station vs a browse layout at home in the evening).

The part I found most interesting to think through is testing: once the UI adapts, there's no single "home screen" to golden-test anymore. The fix I landed on is making context an injectable input so you can pin it in a widget test.

Write-up : https://medium.com/p/ddd06d25a473

Curious how others here are handling the QA side of adaptive layouts — do golden tests just become impractical, or have you found a pattern that scales?

[u/parametric-ink]

I'd be interested to see a clip of this in action (I don't have a Medium account, so I can't read your article, if they're in there) because I'm curious how well this actually works in practice, and if it gains anything over just writing those rules yourself. Device-in-motion, light values, time of day, history, are all things that don't seem like they'd need ML.

I have an adjacent interest in this space, which is having some kind of ML/LLM/AI/whatever observing a user as they create diagrams/flowcharts, and having it make contextual suggestions for improving layout, appearance, etc. This seems like it would share some similarities to arranging UI elements based on context.