Finishes

A GlassFinish is the material the glass is made of: how much it blurs, the tint it lays over the refracted backdrop, the rim along its edge, and the shape of the refraction (GlassOptics). The presets are calibrated against Apple's own materials on iOS 26.

A finish can be set for the whole app (GlassHost.finish), for a subtree (a GlassTheme below the host), or for one surface (finish: on any component or GlassSurface).

The presets

Apple's .regular is two materials, dark over dark content and light over light. GlassFinish.regular(appearance:, backdrop:) picks the branch the way Apple does, and it is what the host uses when you name no finish.

When to use

• Regular (the default) for bars, cards, buttons and anything carrying text.
• Clear for lenses, drops and media overlays, where the content should show through. Pair it with minLabelContrast when text sits on it; see Legibility & theme.
• Frosted when the content behind should be suggested rather than seen.
• Don't invent a new name. The name keys the package's measured quality and cost tables, and an unknown name falls back to a full-resolution capture, which is slower.

Usage

// A brand tint that keeps the measured name, so the tables still apply.
final GlassFinish brand = GlassFinish.regularDark.copyWith(
  tint: const Color.fromRGBO(20, 30, 60, 0.6),
);

GlassCard(finish: GlassFinish.clear, child: Text('Clear'))

Tint and optics

• Tint: the alpha is how opaque the glass is, the colour is its hue. To tint glass for a brand, copyWith a preset's tint and keep its alpha, as the demo does.
• Rim: added along a 0.79 px outline (kCalibratedRim by default). It is also the press highlight of GlassButton.
• Optics: GlassOptics(thickness:, strength:, edgePower:, shoulder:, widen:, zoom:) shapes the bend. strength is the peak bend at the rim in pixels, negative being inward (Apple's direction); zoom magnifies about the centre, which is how a lens is made. GlassOptics.none turns the bend off.

Code

import 'package:flutter/material.dart';
import 'package:g1455/g1455.dart';

/// The four presets side by side, plus a brand-tinted one.
/// Assumes a GlassHost above, e.g. in MaterialApp.builder.
class FinishSwatches extends StatelessWidget {
  const FinishSwatches({super.key});

  /// Indigo glass that keeps regularDark's name, alpha and optics.
  static final GlassFinish brand = GlassFinish.regularDark.copyWith(
    tint: const Color(0xFF28348C).withValues(alpha: GlassFinish.regularDark.tint.a),
    optics: const GlassOptics(strength: -40),
  );

  static final List<(String, GlassFinish)> finishes = <(String, GlassFinish)>[
    ('Regular dark', GlassFinish.regularDark),
    ('Regular light', GlassFinish.regularLight),
    ('Clear', GlassFinish.clear),
    ('Frosted', GlassFinish.frosted),
    ('Brand', brand),
  ];

  @override
  Widget build(BuildContext context) => Wrap(
    spacing: 12,
    runSpacing: 12,
    children: <Widget>[
      for (final (String name, GlassFinish finish) in finishes)
        SizedBox(
          width: 140,
          height: 96,
          // GlassCard picks black or white text for each finish.
          child: GlassCard(
            finish: finish,
            child: Align(alignment: Alignment.bottomLeft, child: Text(name)),
          ),
        ),
    ],
  );
}

/// Apple's two-branch `.regular`, chosen from the appearance and the page colour.
Widget regularHost(BuildContext context, Widget page) => GlassHost(
  finish: GlassFinish.regular(
    appearance: MediaQuery.platformBrightnessOf(context),
    backdrop: const Color(0xFFF2F2F7),
  ),
  backdrop: const Color(0xFFF2F2F7),
  child: page,
);

API

GlassOptics

Presets and methods