Skip to main content

flutter_sea_glass 0.1.0-dev.2 copy "flutter_sea_glass: ^0.1.0-dev.2" to clipboard
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:) with SeaGlassFinish.mineral(). etch runs from barely etched glass that shows the content beneath, bent by its lens, to a deep, glittering etch that hides it; caustic focuses the light through the glass into a brighter glow and a band of light on the surface beneath. New finish controls, 0 in every other finish: glitter (granules of the etch, lit and shadowed from every side) and caustic; glow now reaches 2. MineralTint holds six tints with their swatch and body colors. The example adds lib/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 a SeaGlassFinish (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.seaGlass sets a shape's body color; SeaGlassColors holds colors sampled from real sea glass, and SeaGlassFinish.shadows a body-tinted shadow. FakeGlass approximates the finish. The default SeaGlassFinish.none() renders exactly as before.
  • Sea glass physics. The seaGlass preset 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, and LiquidStretch.seaGlass gives a heavier response than Apple's glass.
  • Clearer sea glass. The seaGlass preset frosts as lightly as iOS 27's resting glass (frost: 2), and SeaGlassFinish() 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.lightAngle turns the light that places the glint, border, inner shadow and sea glass rim and sparkles; feed it device tilt for Apple-style motion highlights. 0 renders as before.
  • FakeGlass blend groups. FakeGlass now joins the shapes of a LiquidGlassBlendGroup the 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.seaGlass stretches far enough to flow into a neighbor in a blend group and wobbles back when let go (the new LiquidStretch.wobble). In the example, the sea glass quick settings tiles and accent pebbles merge and pinch off like drops.
  • Organic shapes. LiquidBlob is an ellipse rippled by up to three LiquidWaves: LiquidBlob.pebble gives a tumbled, irregular pebble and LiquidBlob.cookie a scalloped one. It renders, blends and works in FakeGlass like the other shapes.
  • Living glass. LiquidBlob.alive(time: ...) flows and breathes as time advances; drive it from a ticker. In the example, the sea glass palette has a living pebble.
  • Dome lens. The seaGlass preset's lens is a 100 pt dome (refractionHeight: 100, refractionAmount: 30), so pebbles bow the backdrop like a magnifying glass; it takes a dispersion for rainbow edges on clear glass.
  • Gloss. SeaGlassFinish.gloss lights 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, following lightAngle. Real glass and FakeGlass.
  • More colors. SeaGlassColors.ruby, clear and mist.
  • Slab sea glass. A separate preset of thick, milky glass slabs, inspired by the Sea Glass design concept: LiquidGlassSettings.slabSeaGlass() with SeaGlassFinish.slab() renders thick, milky slabs, lit from straight above by default. New finish controls, all 0 in the other finishes: shading shows 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; glow lights the edge away from the light, where the light through the slab gathers; flecks chips the face like terrazzo; shadow casts a soft shadow from elevation points up with a band of the glass's color; and wobble sinks the outline in hand-made undulations (full glass only). SlabSeaGlass holds the concept's four glass sets by role.
  • Scene light. LiquidGlassSettings.light (GlassLight) is daylight along lightAngle, or, given a position, a lamp that lights each shape from its own side and fans shadows out away from itself; with color, intensity, ambient and a flashlight reach. It is uniforms only.
  • Slab sea glass example. example/lib/slab_sea_glass_main.dart recreates the concept's component sheet, with daylight, dusk, a flashlight that follows the pointer and the four glass sets.
  • Clear colored glass. SeaGlassFinish.colorClarity clears 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 at 1 the 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 before runApp. 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, or io.flutter.embedding.android.EnableFlutterGPU). Everywhere else layers render FakeGlass. The minimum Flutter version is 3.47.0.
  • Settings are split. LiquidGlassSettings keeps the optics and lighting shared by a layer. Color and visibility move to the new per-shape LiquidGlassAppearance, set on a LiquidGlass or as a layer's defaultAppearance.
  • Renamed and replaced settings:
    • glassColor becomes LiquidGlassAppearance.tint.
    • saturation moves to LiquidGlassAppearance.saturation.
    • visibility moves to LiquidGlassAppearance.visibility and the new LiquidGlassVisibility widget.
    • blur becomes frost, a blur sigma in logical pixels.
    • thickness becomes refractionHeight, the width of the refracting bevel. 0 now means flat glass instead of no glass.
    • refractiveIndex becomes refractionAmount, the displacement in logical pixels at the silhouette, falling off across the bevel as a quarter circle.
    • chromaticAberration becomes dispersion, and defaults to 0.
    • lightIntensity becomes highlight. 1 now matches the iOS 27 glint on an iPhone.
    • lightAngle and ambientStrength are removed; the light direction is no longer configurable.
  • LiquidGlassSettings.figma is removed for now. It may come back in a later release.
  • Children always paint above the glass. glassContainsChild is removed from every LiquidGlass constructor. Children are clipped to the shape but never blurred, tinted or refracted.
  • No Opacity between a layer and its shapes. It only faded the children, not the glass. Use LiquidGlassVisibility or LiquidGlassAppearance.visibility. Opacity above a whole LiquidGlassLayer still 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, ios27ToolbarDark and ios27Clear, and LiquidGlassAppearance.ios27Regular, ios27Toolbar and ios27Clear (with light and dark variants), fitted against captures of Apple's glass in light and dark.
  • The Liquid Glass slider. LiquidGlassSettings.tintAmount takes 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 through LiquidGlassSettings.ios27RegularFrost and ios27ClearFrost.
  • 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 exposes saturation, transmissionGamma and vibrancy for manual looks.
  • Bevel refraction. refractionFitsShape (default true) shrinks the lens on small shapes like iOS 27 regular glass; clear glass keeps the full lens. backdropShrink shrinks 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 LiquidGlassBlendGroup keep shared straight edges straight and round only concave joins and bridges, as in iOS 27's GlassEffectContainer.
  • LiquidGlassVisibility fades 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.
  • LiquidGlassCapture captures 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.auto renders on a parent layer if there is one and creates its own otherwise.
  • LiquidGlass.precache() loads the shaders and warms the Flutter GPU pipeline before runApp, so the first glass on screen renders fully.
  • backdropKey on LiquidGlassLayer shares a backdrop capture between layers explicitly.
  • Per-shape shadows, cut out behind the translucent glass, also under blended shapes.
  • FakeGlass rework. 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 renders FakeGlass.

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 LiquidGlassSettings defaults 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 LiquidGlass to 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 blend setting from LiquidGlassSettings to LiquidGlassBlendGroup.

  • 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 fake parameter to LiquidGlassLayer and 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 fake parameter to LiquidGlass to enable it to turn into FakeGlass dynamically (#103).

0.1.1-dev.24 #

  • FIX: import @internal from meta again (#102).
  • FIX: scrolling elements work again.
  • FEAT: add FakeGlass.inLayer which 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: resistance parameter 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.mirror in FakeGlass blur.
  • FEAT: allow customizing resistance in LiquidStretch.
  • FEAT: expose RawLiquidStretch for custom pixel-based stretching.
  • FEAT: expose Offset.withResistance extension method.
  • BREAKING FEAT: LiquidStretch now 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:meta again.

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 StretchGlass to LiquidStretch.

0.1.1-dev.14 #

  • FIX: LiquidGlassLayer breaks 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 LiquidGlass applies transform to children.
  • FEAT: add GlassGlowLayer and GlassGlow widget for glow effects.
  • FEAT: add StretchGlass widget that can stretch its child with user gestures.
  • FEAT: add FakeGlass widget that aims to match LiquidGlass appearance while being much more performant.
  • BREAKING REFACTOR: remove useless lightness parameter from shader and LiquidGlassSettings.
  • BREAKING REFACTOR: change default value of glassContainsChild to 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 AssertionError when 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 clipBehavior to LiquidGlass.
  • 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 🎉
1
likes
150
points
103
downloads
screenshot

Documentation

API reference

Publisher

unverified uploader

Weekly Downloads

Sea glass and liquid glass for Flutter: tumbled, frosted and colored glass, milky pastel slabs and living shapes, rendered with Impeller.

Repository (GitHub)
View/report issues

Topics

#sea-glass #liquid-glass #glassmorphism #shaders #effects

License

Apache-2.0 (license)

Dependencies

equatable, flutter, flutter_gpu, flutter_gpu_shaders, flutter_shaders, hooks, logging, meta, motor

More

Packages that depend on flutter_sea_glass