How to Recreate iOS 26 Liquid Glass in Flutter: Shaders, SDF, and Real‑Time Effects

Liquid Glass Overview

iOS 26 introduced a “Liquid Glass” UI element that goes beyond simple blur; each element’s edge reflects colors from outside the glass, its translucency adapts to surrounding content and light, and it behaves like a fluid when interacted with.

Key Technical Characteristics

Translucency & Adaptive Color : semi‑transparent material whose color is influenced by nearby UI and system theme.

Refraction : light bends around the glass, giving a sense of depth.

Reflection & Highlights : surrounding content and wallpaper are reflected with dynamic highlights.

Fluid Deformation : shapes smoothly morph based on user interaction.

SwiftUI Implementation

SwiftUI provides

GlassEffectContainer

and

glassEffectUnion

to merge multiple glass‑styled views. The following snippet demonstrates a basic setup:

<code>@State private var isExpanded: Bool = false
@Namespace private var namespace

var body: some View {
    GlassEffectContainer(spacing: 40.0) {
        HStack(spacing: 40.0) {
            Image(systemName: "scribble.variable")
                .frame(width: 80, height: 80)
                .font(.system(size: 36))
                .glassEffect()
                .glassEffectID("pencil", in: namespace)

            if isExpanded {
                Image(systemName: "eraser.fill")
                    .frame(width: 80, height: 80)
                    .font(.system(size: 36))
                    .glassEffect()
                    .glassEffectID("eraser", in: namespace)
            }
        }
    }
    Button("Toggle") {
        withAnimation { isExpanded.toggle() }
    }
    .buttonStyle(.glass)
}
</code>

Flutter Recreation

The

liquid_glass_example

project reproduces the effect with a custom fragment shader. The required steps are:

Magnify and refract content beneath the glass, especially at edges.

Simulate soft lighting that reacts to a fixed light direction.

Add subtle ambient light for a tangible feel.

Overlay a faint shadow.

The shader relies on signed distance fields (SDF) to define shapes,

smoothstep

for smooth transitions, and a series of calculations for normals, height, refraction, chromatic aberration, and lighting.

<code>float RBoxSDF(vec2 p, vec2 center, vec2 size, float radius) {
    vec2 q = abs(p - center) - size + radius;
    return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - radius;
}
</code>

During rendering, Flutter first draws the background into an off‑screen texture, then passes that texture together with

LiquidGlassSettings

parameters to the fragment shader. The shader computes:

SDF distance to the merged glass shape.

Alpha for smooth edge blending.

Surface normal and virtual height.

Refraction vectors (with optional chromatic dispersion).

Lighting including ambient, diffuse, Fresnel rim, and reflections.

Final color by mixing the refracted background with the glass’s own color.

Key helper functions include

smoothUnion

for blending multiple SDFs,

getNormal

and

getHeight

for geometry, and a lighting routine that combines Fresnel, soft glints, and base reflections.

<code>float smoothUnion(float d1, float d2, float k) {
    float e = max(k - abs(d1 - d2), 0.0);
    return min(d1, d2) - e * e * 0.25 / k;
}
</code>

The

liquid_glass_renderer

package expands the concept with components such as

LiquidGlass

,

LiquidGlassLayer

,

LiquidGlassSettings

, and

LiquidGlassSquircle

, supporting background blur, refraction, and various shapes.

Only Impeller‑based engines can use ImageFilter.shader because the shader needs a sampler2D uniform supplied by BackdropFilterLayer , which captures the background texture.

Conclusion

Liquid Glass is a physically‑based, interactive glass effect that combines translucency, refraction, reflection, and fluid deformation. While Flutter does not provide a built‑in widget, the open‑source packages and shader examples demonstrate that a high‑fidelity recreation is feasible, albeit with non‑trivial performance considerations on older devices.