flutter_sea_glass 0.1.0-dev.2
flutter_sea_glass: ^0.1.0-dev.2 copied to clipboard
Sea glass and liquid glass for Flutter: tumbled, frosted and colored glass, milky pastel slabs and living shapes, rendered with Impeller.
0.1.0-dev.2 #
Features #
- Mineral sea glass. A third sea glass, beside the pebbles and the
slabs:
LiquidGlassSettings.mineralSeaGlass(etch:, caustic:)withSeaGlassFinish.mineral().etchruns from barely etched glass that shows the content beneath, bent by its lens, to a deep, glittering etch that hides it;causticfocuses the light through the glass into a brighter glow and a band of light on the surface beneath. New finish controls,0in every other finish:glitter(granules of the etch, lit and shadowed from every side) andcaustic;glownow reaches2.MineralTintholds six tints with their swatch and body colors. The example addslib/mineral_sea_glass_main.dart, and the sea glass showcase lists Mineral among its glasses. Its style tray adds Frost etch and Caustic glow sliders and the mineral tints.
0.1.0-dev.1 #
The first release of flutter_sea_glass, a fork of
liquid_glass_renderer
1.0.0-dev.1 by whynotmake.it. Import package:flutter_sea_glass/flutter_sea_glass.dart
in place of package:liquid_glass_renderer/liquid_glass_renderer.dart; the
widget API keeps its names. It includes everything below, which was not
released in liquid_glass_renderer.
Features #
- Sea glass. A tumbled, frosted, colored glass material.
LiquidGlassSettings.seaGlass()pairs a shallow lens, light frost and a soft glint with aSeaGlassFinish(LiquidGlassSettings.seaGlassFinish): the appearance tint becomes the glass body, which filters the backdrop deepest at the pebble's center and pales toward its thin rim, under a scattered glow in the body's color, a frosted rim glow, fine grain, sparkles and pitted transmission.LiquidGlassAppearance.seaGlasssets a shape's body color;SeaGlassColorsholds colors sampled from real sea glass, andSeaGlassFinish.shadowsa body-tinted shadow. FakeGlass approximates the finish. The defaultSeaGlassFinish.none()renders exactly as before. - Sea glass physics. The
seaGlasspreset uses a pebble lens (refractionFitsShape: false), larger shapes are thicker glass, each shape's frost moves with that shape and cross-fades seamlessly across a blend group's bridge, andLiquidStretch.seaGlassgives a heavier response than Apple's glass. - Clearer sea glass. The
seaGlasspreset frosts as lightly as iOS 27's resting glass (frost: 2), andSeaGlassFinish()scatters less (scatter: 0.12,pitting: 0.6), so the backdrop reads through it. - Frost on the shape's surface. Each shape's frost is evaluated in the shape's own frame, so it turns and stretches with a rotated or scaled shape, not only moves with it.
- FakeGlass thickness. FakeGlass sea glass now deepens toward the center like real glass: the color filter applies the thin rim's face and a multiply-blended thickness pass darkens toward the full-thickness face.
- Lean frost.
SeaGlassFinish.stochasticFrost(on by default) renders the frost in the glass pass with scattered samples, so sea glass layers need no blur pass. - Light direction.
LiquidGlassSettings.lightAngleturns the light that places the glint, border, inner shadow and sea glass rim and sparkles; feed it device tilt for Apple-style motion highlights.0renders as before. - FakeGlass blend groups.
FakeGlassnow joins the shapes of aLiquidGlassBlendGroupthe way full glass does. Each member's surface draws the group's smooth union where it is the nearest member, and the bridges get their own clipped backdrop filter from the layer's shared copy. - Droplet merging.
LiquidStretch.seaGlassstretches far enough to flow into a neighbor in a blend group and wobbles back when let go (the newLiquidStretch.wobble). In the example, the sea glass quick settings tiles and accent pebbles merge and pinch off like drops. - Organic shapes.
LiquidBlobis an ellipse rippled by up to threeLiquidWaves:LiquidBlob.pebblegives a tumbled, irregular pebble andLiquidBlob.cookiea scalloped one. It renders, blends and works in FakeGlass like the other shapes. - Living glass.
LiquidBlob.alive(time: ...)flows and breathes astimeadvances; drive it from a ticker. In the example, the sea glass palette has a living pebble. - Dome lens. The
seaGlasspreset's lens is a 100 pt dome (refractionHeight: 100,refractionAmount: 30), so pebbles bow the backdrop like a magnifying glass; it takes adispersionfor rainbow edges on clear glass. - Gloss.
SeaGlassFinish.glosslights the dome: a curved glint on the shoulder facing the light, a softer one on the far wall and a thin bright line along the outline, followinglightAngle. Real glass and FakeGlass. - More colors.
SeaGlassColors.ruby,clearandmist. - Slab sea glass. A separate preset of thick, milky glass slabs,
inspired by the Sea Glass design concept:
LiquidGlassSettings.slabSeaGlass()withSeaGlassFinish.slab()renders thick, milky slabs, lit from straight above by default. New finish controls, all0in the other finishes:shadingshows the body color where the slab is thickest, brightens its thin outline and keeps its rim clear, so content behind shows through, bent by the lens;glowlights the edge away from the light, where the light through the slab gathers;fleckschips the face like terrazzo;shadowcasts a soft shadow fromelevationpoints up with a band of the glass's color; andwobblesinks the outline in hand-made undulations (full glass only).SlabSeaGlassholds the concept's four glass sets by role. - Scene light.
LiquidGlassSettings.light(GlassLight) is daylight alonglightAngle, or, given aposition, a lamp that lights each shape from its own side and fans shadows out away from itself; withcolor,intensity,ambientand a flashlightreach. It is uniforms only. - Slab sea glass example.
example/lib/slab_sea_glass_main.dartrecreates the concept's component sheet, with daylight, dusk, a flashlight that follows the pointer and the four glass sets. - Clear colored glass.
SeaGlassFinish.colorClarityclears glass of a color: it scatters, frosts and pits the backdrop less, so it shows and bends what is beneath while keeping its color. Frosted white and colorless glass in the same layer keep their frost, and a blended bridge clears gradually. Even at1the glass keeps some milkiness and frost, so it still reads as sea glass.0, the default, renders as before. - Flecks inside the glass. Slab glass's terrazzo chips now sit inside the glass rather than on it: their edges soften with their size, the milky body veils them, they fade toward the thin rim, and they take tones of the body color instead of grey and white.
Performance #
- Redraw only what moved. When a shape moves, the geometry renderer copies the previous matte and redraws only the region that shape can affect. The output is byte-identical to a full redraw; in the sea glass quick settings, a drag redraws about a fifth of the matte.
- Local blend groups. A group's union combines only the members within two blend radii of a pixel's nearest member, fading them out before that. Each pixel starts from its nearest box, and groups that can't win are skipped. Standalone shapes and two-member groups render exactly as before. Groups of three or more can differ slightly where several members meet.
Fixes #
LiquidGlass.precache()no longer hangs on Android when awaited beforerunApp. Checking shader support and loading shaders there block on the engine's Impeller context, which arrives with the first frame, so the app stayed on its splash. On Android it now returns at once and loads everything right after the first frame.- A layer that has to drop shapes past its 16-shape limit now warns once in debug builds instead of dropping them silently.
- Geometry passes no longer read uniforms of a later frame. The shared uniform buffer rewinds into a slot only once the GPU has run every pass that read it; before, a GPU more than four frames behind could draw a later frame's shapes, and an incremental update then kept the stale stripes.
- Hidden glass (
visibility: 0) no longer owns the sea glass frost and shading of glass drawn over its box, and casts no shadow layer.
liquid_glass_renderer 1.0.0-dev.1 #
Note: This release has breaking changes.
A rewrite of the renderer on Flutter GPU, fitted against iOS 27 Liquid Glass.
It replaces the 0.2.x API without deprecations. This is an experimental
prerelease; APIs and rendering may still change.
Breaking changes #
- Requirements. Full glass needs Impeller and Flutter GPU
(
--enable-flutter-gpu,FLTEnableFlutterGPU, orio.flutter.embedding.android.EnableFlutterGPU). Everywhere else layers renderFakeGlass. The minimum Flutter version is 3.47.0. - Settings are split.
LiquidGlassSettingskeeps the optics and lighting shared by a layer. Color and visibility move to the new per-shapeLiquidGlassAppearance, set on aLiquidGlassor as a layer'sdefaultAppearance. - Renamed and replaced settings:
glassColorbecomesLiquidGlassAppearance.tint.saturationmoves toLiquidGlassAppearance.saturation.visibilitymoves toLiquidGlassAppearance.visibilityand the newLiquidGlassVisibilitywidget.blurbecomesfrost, a blur sigma in logical pixels.thicknessbecomesrefractionHeight, the width of the refracting bevel.0now means flat glass instead of no glass.refractiveIndexbecomesrefractionAmount, the displacement in logical pixels at the silhouette, falling off across the bevel as a quarter circle.chromaticAberrationbecomesdispersion, and defaults to0.lightIntensitybecomeshighlight.1now matches the iOS 27 glint on an iPhone.lightAngleandambientStrengthare removed; the light direction is no longer configurable.
LiquidGlassSettings.figmais removed for now. It may come back in a later release.- Children always paint above the glass.
glassContainsChildis removed from everyLiquidGlassconstructor. Children are clipped to the shape but never blurred, tinted or refracted. - No
Opacitybetween a layer and its shapes. It only faded the children, not the glass. UseLiquidGlassVisibilityorLiquidGlassAppearance.visibility.Opacityabove a wholeLiquidGlassLayerstill works. - New defaults. Glass renders with a 20 pt bevel, 60 pt edge
displacement, 2 pt frost and the rest of the light iOS 27 toolbar
settings, plus the iOS 27 toolbar appearance for the platform brightness, so
unconfigured glass looks different from
0.2.x.
New features #
- iOS 27 presets.
LiquidGlassSettings.ios27Toolbar,ios27ToolbarLight,ios27ToolbarDarkandios27Clear, andLiquidGlassAppearance.ios27Regular,ios27Toolbarandios27Clear(with light and dark variants), fitted against captures of Apple's glass in light and dark. - The Liquid Glass slider.
LiquidGlassSettings.tintAmounttakes the position of the iOS 27 Settings slider, from Clear (0) to Tinted (1). It moves the iOS 27 wash and border along fitted curves, and the presets derive their blur from it throughLiquidGlassSettings.ios27RegularFrostandios27ClearFrost. - Color models. A sealed
LiquidGlassColorModel: the iOS 27 models turn one tint and its opacity into backdrop-dependent tones, with dark regular glass getting denser on larger shapes. The direct model exposessaturation,transmissionGammaandvibrancyfor manual looks. - Bevel refraction.
refractionFitsShape(defaulttrue) shrinks the lens on small shapes like iOS 27 regular glass; clear glass keeps the full lens.backdropShrinkshrinks the backdrop seen through the face and never enlarges it. The backdrop is sampled bilinearly so refracted lines don't snap to pixels. - Glint and rim lighting. A glint that recolors the glass instead of
adding white, with HDR headroom on wide-gamut surfaces; a dark border
(
contourStrength,contourDirectionality); and an inner shadow cast by the rim (bevelShadowStrength). The rim geometry is the fitted iOS 27 one and is not configurable. - Per-shape appearance in blend groups. Each shape can have its own
LiquidGlassAppearance; blended neighbors cross-fade where they meet without another backdrop capture. - Blending without bulges. Shapes in a
LiquidGlassBlendGroupkeep shared straight edges straight and round only concave joins and bridges, as in iOS 27'sGlassEffectContainer. LiquidGlassVisibilityfades glass in a subtree: refraction, lighting, blur and children fade together. Nested scopes multiply, and a layer with no visible shapes stops sampling the backdrop.LiquidGlassCapturecaptures the backdrop once, only as large as the glass inside, so glass on glass (an indicator refracting its tab bar) no longer pays a second full-screen readback.LiquidGlass.autorenders on a parent layer if there is one and creates its own otherwise.LiquidGlass.precache()loads the shaders and warms the Flutter GPU pipeline beforerunApp, so the first glass on screen renders fully.backdropKeyonLiquidGlassLayershares a backdrop capture between layers explicitly.- Per-shape
shadows, cut out behind the translucent glass, also under blended shapes. FakeGlassrework. It renders at layer level with the same foreground order as full glass and keeps frost, tint, color response, glint, border, inner shadow, visibility and exterior shadows. Only refraction is missing. The web build compiles and rendersFakeGlass.
Performance #
- Geometry mattes, coordinate mappings, image filters and static transforms are cached; geometry textures grow only when needed and are reused after one frame. Fragment work is clipped to the glass.
- Frost up to 1.25 device pixels runs in the final pass instead of a separate blur pass.
- Debug builds log a warning when a frame makes more than one independent backdrop capture.
- The README documents measured Pixel 10 GPU-power costs and best practices.
0.2.0-dev.4 #
Note: This release has breaking changes.
- BREAKING FIX: fake glass didn't render properly on skia and had bad specular highlights (#119).
0.2.0-dev.3 #
-
FIX: improve logging readability and names.
-
FIX: don't create intermediate images for geometry until it's settled.
This should decrease memory consumption somewhat, as a layer with one animating geometry would create 2 images per frame before
-
FEAT: export
debugPaintLiquidGlassGeometry(#111).
0.2.0-dev.2 #
- FIX: glass was always grouped no matter which constructor was used.
- FIX: one frame delay in geometry mattes.
- FIX: link doesn't need to notify listeners, we can mark it dirty.
0.2.0-dev.1 #
Note: This release has breaking changes.
-
FIX: adjust
LiquidGlassSettingsdefaults to match the look more closely. -
FEAT: cache geometry images as well to make sure we only run the geometry shader when absolutely necessary.
-
DOCS: mention Impeller requirement earlier in README.
-
DOCS: update README with newest changes and performance tips.
-
BREAKING REFACTOR: remove the unsupported experimental widget API.
-
BREAKING REFACTOR: renamed many constructors and default
LiquidGlassto not creating its own layer.Please read the README to understand how to use this package.
-
BREAKING REFACTOR:
LiquidGlassShapes now take a simple double as radius. -
BREAKING REFACTOR: move
blendsetting fromLiquidGlassSettingstoLiquidGlassBlendGroup. -
BREAKING FEAT: adjust fake glass light intensity.
-
BREAKING FEAT: rewrote rendering pass to use two passes.
We now cache all geometry into textures first, then render liquid glass in a second pass. This allows us to save a lot of cycles while glass shapes are static.
0.1.1-dev.26 #
Note: This release has breaking changes.
-
FIX: only run shader on bounding box pixels.
-
FIX: set alwaysNeedsCompositing correctly on
FakeGlass. -
BREAKING REFACTOR: change default blend value to 0 in
LiquidGlassSettings. -
BREAKING REFACTOR: move
fakeparameter toLiquidGlassLayerand make entire layer fall back to fake glass on Skia. -
BREAKING FEAT: visibility parameter in
LiquidGlassSettings.This can be used to scale all relevant properties of the liquid glass effect at once.
If you have made glass appear and disappear manually before, you can now simply animate the visibility between 0 and 1.
0.1.1-dev.25 #
- FEAT: add
fakeparameter toLiquidGlassto enable it to turn intoFakeGlassdynamically (#103).
0.1.1-dev.24 #
- FIX: import
@internalfrom meta again (#102). - FIX: scrolling elements work again.
- FEAT: add
FakeGlass.inLayerwhich adopts settings from the nearest ancestor layer.
0.1.1-dev.23 #
Note: This release has breaking changes.
- BREAKING FEAT: re-use generated geometry more aggressively (#98).
0.1.1-dev.22 #
Note: This release has breaking changes.
-
FIX: reduce texture samples (#94).
-
FEAT: small performance wins in shader (#91).
-
BREAKING REFACTOR: remove
restrictThickness. -
BREAKING FEAT: rewrote the rendering process to use two passes.
This significantly improves performance while glass elements are static on screen. Moving glass elements will still induce the same performance cost as before.
0.1.1-dev.20 #
- FIX:
resistanceparameter didn't actually get used.
0.1.1-dev.19 #
Note: This release has breaking changes.
- FIX: revert matrix methods to support older Flutter versions again.
- FIX:
TileMode.mirrorinFakeGlassblur. - FEAT: allow customizing
resistanceinLiquidStretch. - FEAT: expose
RawLiquidStretchfor custom pixel-based stretching. - FEAT: expose
Offset.withResistanceextension method. - BREAKING FEAT:
LiquidStretchnow bases its stretch on the child's size.
0.1.1-dev.18 #
- FIX: removed unused transform from shader (#88).
- FIX: render liquid glass correctly on all Android devices (#82 by @teociaps).
0.1.1-dev.17 #
- FEAT: tried to improve the fidelity of fake light once more.
0.1.1-dev.16 #
- FIX: import annotations from
package:metaagain.
0.1.1-dev.15 #
Note: This release has breaking changes.
- FIX: settling springs.
- FIX: optimize some painting and transformations with early return.
- FEAT: better specular on all platforms for
FakeGlass(#83). - BREAKING REFACTOR: rename
StretchGlasstoLiquidStretch.
0.1.1-dev.14 #
- FIX:
LiquidGlassLayerbreaks when no child glass widgets are found.
0.1.1-dev.13 #
- DOCS: update README and add better disclaimer (#80).
0.1.1-dev.12 #
Note: This release has breaking changes.
- FIX: regression in how
LiquidGlassapplies transform to children. - FEAT: add
GlassGlowLayerandGlassGlowwidget for glow effects. - FEAT: add
StretchGlasswidget that can stretch its child with user gestures. - FEAT: add
FakeGlasswidget that aims to matchLiquidGlassappearance while being much more performant. - BREAKING REFACTOR: remove useless
lightnessparameter from shader andLiquidGlassSettings. - BREAKING REFACTOR: change default value of
glassContainsChildto false.
0.1.1-dev.11 #
Note: This release has breaking changes.
- BREAKING FEAT: performance gains and too many changes to cover one by one (#72).
0.1.1-dev.10 #
Note: This release has breaking changes.
- REFACTOR: move shader to uniform arrays for better shape support.
- FIX: transform children of liquid glass correctly.
- FEAT: add saturation and brightness controls (#47).
- FEAT: better light dispersion.
- FEAT: support up to 64 shapes per layer.
- FEAT: specular highlights now take the background color into account (#43).
- DOCS: updated README with new parameters (#56).
- DOCS: updated example gif (#55).
- BREAKING FEAT: cheat lighting that is independent from thickness.
0.1.1-dev.9 #
- DOCS: fix errors in README (#31).
0.1.1-dev.8 #
- FIX: glass now also renders when blend is set to 0.
- FIX: sharper glass edges whithout background shining through.
- FEAT: added refractive index to settings and show values in example.
- FEAT: nicer specular highlights.
- DOCS: update README.md and add better examples (#28)
0.1.1-dev.7 #
- FIX: throw
AssertionErrorwhen used without Impeller. - DOCS: update pubspec.yaml to reflect minimum SDK and supported platforms.
0.1.1-dev.6 #
- FIX: liquid glass not repainting in route transitions (#16).
0.1.1-dev.5 #
Note: This release has breaking changes.
- FEAT: decrease precision in shader to mediump, which should increase performance.
- BREAKING FIX: shader compilation and removed unused outline strength parameter.
0.1.1-dev.4 #
- FIX: fix shader on flutter stable.
- DOCS: new shape names.
0.1.1-dev.3 #
- DOCS: new shape names.
0.1.1-dev.2 #
Note: This release has breaking changes.
- REFACTOR: cleaned up shaders.
- FIX: squircle can handle zero radius.
- FEAT: add
clipBehaviortoLiquidGlass. - FEAT: flutter-approved SDF for squircles.
- FEAT: support three shapes per layer.
- FEAT: support all shapes.
- FEAT: better chromatic abberation.
- DOCS: added pub badge to README.
- BREAKING FEAT: renamed liquid glass shapes to match their OutlinedBorder counterparts.
0.1.1-dev.1 #
- DOCS: update pubspec and readme.
0.1.1-dev.0 #
- FEAT: initial release.
0.1.0 #
- feat: initial commit 🎉
