From 5bc897ac06ea4b47fb4e714e2464534ef6091f06 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 11 Nov 2025 08:41:52 +0000 Subject: [PATCH 1/3] Initial plan From 82c93ba223e7fbc3933abce7fd1c8232b2b2cb34 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 11 Nov 2025 08:46:07 +0000 Subject: [PATCH 2/3] docs: Add all LiquidGlassSettings parameters to README Co-authored-by: timcreatedit <42270125+timcreatedit@users.noreply.github.com> --- packages/liquid_glass_renderer/README.md | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/packages/liquid_glass_renderer/README.md b/packages/liquid_glass_renderer/README.md index e03e809b..e35815a7 100644 --- a/packages/liquid_glass_renderer/README.md +++ b/packages/liquid_glass_renderer/README.md @@ -254,7 +254,6 @@ LiquidGlassLayer( thickness: 10, glassColor: Color(0x1AFFFFFF), lightIntensity: 1.5, - outlineIntensity: 0.5, saturation: 1.2, ), child: LiquidGlassBlendGroup( @@ -269,16 +268,36 @@ Here's a breakdown of the key settings: - `glassColor`: The color tint of the glass. The alpha channel controls the intensity. - `thickness`: How much the glass refracts the background (higher = more distortion). - `blur`: Background blur strength (0 = no blur). +- `chromaticAberration`: Creates color fringing effects at glass edges (higher values = more pronounced color separation). This effect is still a work in progress and may look imperfect. +- `visibility`: A scaling factor (0.0 to 1.0) that affects all thickness-related properties (thickness, blur, chromatic aberration, light intensity, etc.). Useful for animating the glass effect in/out. - `refractiveIndex`: The refractive index of the glass material (1.0 = no refraction, ~1.5 = realistic glass). - `lightAngle`, `lightIntensity`: Control the direction and brightness of the virtual light source, creating highlights. - `ambientStrength`: The intensity of ambient light on the glass. -- `outlineIntensity`: The visibility of the glass outline/edge. - `saturation`: Adjusts the color saturation of background pixels visible through the glass (1.0 = no change, <1.0 = desaturated, >1.0 = more saturated). **Note:** The `blend` parameter has been moved from `LiquidGlassSettings` to the `LiquidGlassBlendGroup` constructor, as it specifically controls shape blending behavior. Increasing saturation when using colored glass helps achieve an Apple-like aesthetic. +#### Figma-style Settings (Experimental) + +For those familiar with Figma's glass effect controls, there's an experimental `.figma()` factory constructor that uses percentage-based parameters (0-100) similar to Figma's interface: + +```dart +LiquidGlassLayer( + settings: LiquidGlassSettings.figma( + refraction: 50, // 0-100: Controls refractiveIndex (0 = 1.0, 100 = 1.2) + depth: 20, // Maps to thickness + dispersion: 25, // 0-100: Controls chromaticAberration + frost: 10, // Maps to blur + lightIntensity: 50, // 0-100: Controls light intensity + ), + child: // ... your glass widgets +) +``` + +**Note:** This factory constructor was crudely eyeballed to approximate Figma's glass effect and may change in future versions as we refine the mapping between Figma's parameters and our internal settings. + ### Adding Blur You can apply a background blur using the `blur` property in `LiquidGlassSettings`. This is independent of the glass refraction effect. From 89ba61d6de99ffdcfa17425e80e0efc5cdf7e649 Mon Sep 17 00:00:00 2001 From: Tim Lehmann Date: Tue, 11 Nov 2025 16:54:03 +0100 Subject: [PATCH 3/3] ci: add golden tag to geometry test --- .../test/src/liquid_glass_blend_group_test.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/liquid_glass_renderer/test/src/liquid_glass_blend_group_test.dart b/packages/liquid_glass_renderer/test/src/liquid_glass_blend_group_test.dart index 03cab78b..56605211 100644 --- a/packages/liquid_glass_renderer/test/src/liquid_glass_blend_group_test.dart +++ b/packages/liquid_glass_renderer/test/src/liquid_glass_blend_group_test.dart @@ -44,7 +44,7 @@ void main() { ); } - testWidgets('generates a geometry image', (tester) async { + testWidgets('generates a geometry image', tags: ['golden'], (tester) async { final thicknesses = [10, 20, 30]; final refractiveIndices = [1.0, 1.1, 1.2, 1.3]; final blendValues = [0.0, 10, 20, 30, 300];