I wanted Apple’s liquid glass in Flutter without native code, so I vibe-coded it with Claude, one piece at a time: a shader-driven lens that refracts the icons beneath it.
Plain Flutter, Not React Native
The liquid glass is plain Flutter, not React Native. It is a floating tab bar with a moving selection lens, search, badges and a compact shape while scrolling, and there is no native code in it.
What the Glass Does
- A lens that travels: tap or drag across the tabs, and the glass droplet follows and settles on the selected tab.
- Real refraction: Snell’s-law refraction, dispersion along the bevel and a soap-film rim, not a blur.
- It folds while you scroll: the bar shrinks to a small pill while scrolling and opens again when you come back.
- Accessible: screen readers, right-to-left layouts and reduced motion are supported.
One Piece at a Time
I built it with Claude, one piece at a time, then published it on pub.dev. A year earlier I was struggling to learn Blender and Spline because I wanted interactive 3D elements.
The downloads made me really happy. Fixes and enhancements are coming, and I’m even thinking of finishing a liquid glass UI kit.
The glass on this website is a WebGL port of the same shader.