Glass

Easily convert any Widget into a glass / frosted glass version of itself, following the glassmorphism / glassmorphic design trend, or into Apple-style liquid glass (experimental).

Installation

1. Add it

flutter pub add glass

Requires Flutter 3.29 or newer (Dart 3.7+). Older Flutter versions automatically resolve to an earlier glass release (2.1.x on Flutter 3.27, 2.0.0 before that).

2. Import it

Now in your Flutter code, you can use:

import 'package:glass/glass.dart';

Usage

Simply call .asGlass()

For example:

Container(
    child: someChild,
).asGlass()

Glass blurs what is behind the widget, so it only shows up when there is content underneath (for example inside a Stack or over a background image).

Parameters

Parameter	Default	Description
enabled	true	Enable or disable all effects.
blurX / blurY	10.0	Blur amount along each axis.
tintColor	Colors.white	Tint of the glass. Use Colors.transparent for no tint.
frosted	true	Adds a noise texture for a frosted look.
clipBorderRadius	BorderRadius.zero	Rounded corners. Ignored if clipper is set.
clipBehavior	Clip.antiAlias	How the glass is clipped.
clipBehaviour	null	Deprecated misspelling of clipBehavior, removed in 3.0.0.
tileMode	TileMode.clamp	How the blur samples at the edges.
clipper	null	Custom CustomClipper<RRect>.

| liquid | null | Experimental liquid glass settings, see below. |

A full example can be found in the example directory.

Liquid glass (experimental)

Pass liquid: to get a glass that bends the backdrop at its edges and draws a light rim, modelled on Apple's liquid glass:

Container(child: someChild).asGlass(
  clipBorderRadius: BorderRadius.circular(32),
  liquid: LiquidGlass.clear, // or LiquidGlass.regular
)

• LiquidGlass.clear is highly transparent, for use over rich media (like Apple's Glass.clear).
• LiquidGlass.regular is a light, mostly opaque frost with a soft shadow, for when content on the glass must stay legible (like Apple's Glass.regular).
• For your own look, create LiquidGlass(...) with blur, tintColor, tintStrength, saturation, refraction, edgeWidth, lift, midtoneLift, highlight and shadow, or start from a preset with LiquidGlass.clear.copyWith(...). Explicit blurX, blurY, tintColor and frosted arguments to asGlass override the preset.

Things to know:

• The refraction and rim need a fragment shader backdrop filter, which Flutter supports only on Impeller (the default on iOS, Android and macOS). On web and on the Skia renderer, liquid: falls back to plain blur and tint, so it is safe to use everywhere.
• The shape follows clipBorderRadius with a uniform (circular) radius. A custom clipper or different radii per corner are clipped correctly, but the refraction ignores them.
• Corners are circular, not Apple's continuous "squircle" corners. Overlapping glass shapes don't merge.
• Like plain glass, each liquid glass is a backdrop filter, so keep the number on screen small.

Using glass with scrolling

Glass blurs what is behind it, so a glass panel that should stay in place while content scrolls should wrap the scroll view rather than sit inside it:

SingleChildScrollView(
  child: Column(children: [...]),
).asGlass()

If the glass is inside the scroll view, Android's Material 3 stretch overscroll renders the scrollable in its own layer, and the blur disappears while you drag past the top or bottom edge. If you do need glass items inside a scrollable (for example glass cards in a list), turn the stretch off for that scroll view:

ScrollConfiguration(
  behavior: ScrollConfiguration.of(context).copyWith(overscroll: false),
  child: ListView(children: [...]),
)

About me

Visit my LinkedIn at https://www.linkedin.com/in/zaca