Flutter liquid glass

attempt at implementing liquid glass specifications in flutter and turning it into a pub package for use in other's projects

Since this is a work in progress, its important to first start with laying out the target and providing resources so that others can contribute. We can assume theres going to be math involved, and possible a need to write custom shaders. I'd like to layout each individual concept such that it can be implemented incrementally with clear goals.

My theory is that the core can be accomplished in 2 main steps -> get the background layer to the shader, and implement the shader rendering.

I've been experimenting and have achieved step 1 via BackdropFilter with imagefilter.shader - which appears to pass the image data to the shader automatically! Huge win. heres what that looks like so far:

To-Do

Light Refraction - Refraction in JS

Blurring

Scale transitioning

Color transition from transparent glass to solid color

energizing touch

Gel touch&drag

Nuemorphic like effects - these are typically easily done with clever use of inner and outer shadows. putting a lighter inner shadow color facing the light source, and a shadow on the opposite side you get a convex button. Inverting the shadows gives you concave(button press)

Gooey Liquid / Surface tension pull effect. Save this for last as i dont think its all that important.SDF RAYMARCHING

Parameter ideas

blurStrength

child widget

borderRadius

frostStrength appears to also determine degree of refraction

appears to have a baseColor and animates between (its not simply changing immediately with the background layer)

bezelWidth

If you need my immediate attention message me on X