GlassChip class

A glass morphism chip following Apple's iOS 26 design patterns.

GlassChip provides a compact, pill-shaped chip with glass effect, perfect for tags, filters, selections, and dismissible elements. It composes GlassButton internally for consistent interaction behavior.

Key Features

Pill-Shaped Glass: Rounded chip with glass morphism effect
Optional Leading Icon: Icon before the label
Optional Delete Button: Dismissible variant with X button
Selected State: Highlight state for filter chips
Press Effects: Inherits squash/stretch and glow from GlassButton
Flexible Sizing: Automatically sizes to content

Usage

Basic Chip

GlassChip(
  label: 'Technology',
  onTap: () => print('Tapped'),
)

With Leading Icon

GlassChip(
  label: 'Favorite',
  icon: Icon(CupertinoIcons.heart_fill),
  onTap: () => toggleFavorite(),
)

Dismissible Chip

GlassChip(
  label: 'Selected Tag',
  onDeleted: () => removeTag(),
)

Selected State (Filter Chips)

GlassChip(
  label: 'Active',
  selected: true,
  selectedColor: Colors.blue,
  onTap: () => toggleFilter(),
)

Within LiquidGlassLayer (Grouped Mode)

AdaptiveLiquidGlassLayer(
  settings: LiquidGlassSettings(
    thickness: 30,
    blur: 3,
  ),
  child: Wrap(
    spacing: 8,
    children: [
      GlassChip(label: 'Flutter', onTap: () {}),
      GlassChip(label: 'Dart', onTap: () {}),
      GlassChip(label: 'iOS', onTap: () {}),
    ],
  ),
)

Standalone Mode

GlassChip(
  label: 'Technology',
  useOwnLayer: true,
  settings: LiquidGlassSettings(
    thickness: 30,
    blur: 8,
  ),
)

Inheritance

Constructors

GlassChip({required String label, Key? key, Widget? icon, VoidCallback? onTap, VoidCallback? onDeleted, bool selected = false, Color? selectedColor, Widget? deleteIcon, double deleteIconSize = 16.0, double iconSize = 16.0, Color? iconColor, TextStyle? labelStyle, EdgeInsetsGeometry padding = const EdgeInsets.symmetric(horizontal: 12, vertical: 8), double spacing = 6.0, LiquidGlassSettings? settings, bool useOwnLayer = false, GlassQuality? quality, bool platformViewBackdrop = false, double interactionScale = 1.03, double stretch = 0.3, double glowRadius = 0.8, bool anchorStretch = true, AnchorStretchSettings anchorStretchSettings = const AnchorStretchSettings(), FocusNode? focusNode, bool autofocus = false, String? semanticLabel}): Creates a glass chip.
const

Properties

anchorStretch → bool: Whether to anchor the chip in place while stretching toward the finger.
final
anchorStretchSettings → AnchorStretchSettings: Fine-tuning for the anchor stretch effect.
final
autofocus → bool: Whether to request focus immediately.
final
deleteIcon → Widget: Widget used for the delete button.
final
deleteIconSize → double: Size of the delete icon.
final
focusNode → FocusNode?: Externally provided focus node.
final
glowRadius → double: Glow radius multiplier.
final
hashCode → int: The hash code for this object.
no setterinherited
icon → Widget?: Optional leading icon widget.
final
iconColor → Color?: Color of the leading icon.
final
iconSize → double: Size of the leading icon.
final
interactionScale → double: Scale factor when pressed.
final
key → Key?: Controls how one widget replaces another widget in the tree.
finalinherited
label → String: The label text displayed in the chip.
final
labelStyle → TextStyle?: Style for the label text.
final
onDeleted → VoidCallback?: Called when the delete button is tapped.
final
onTap → VoidCallback?: Called when the chip is tapped.
final
padding → EdgeInsetsGeometry: Padding inside the chip.
final
platformViewBackdrop → bool: Render the backdrop through a live BackdropFilter instead of the shader's captured backdrop.
final
quality → GlassQuality?: Rendering quality for the glass effect.
final
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
selected → bool: Whether the chip is in selected state.
final
selectedColor → Color?: Color used when the chip is selected.
final
semanticLabel → String?: Semantic label for screen readers. Defaults to label.
final
settings → LiquidGlassSettings?: Glass effect settings (only used when useOwnLayer is true).
final
spacing → double: Spacing between icon and label, and label and delete button.
final
stretch → double: Stretch intensity during animation (0-1).
final
useOwnLayer → bool: Whether to create its own layer or use grouped glass.
final

Methods

build(BuildContext context) → Widget: Describes the part of the user interface represented by this widget.
override
createElement() → StatelessElement: Creates a StatelessElement to manage this widget's location in the tree.
inherited
debugDescribeChildren() → List<DiagnosticsNode>: Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void: Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode: Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String: A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String: Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String: Returns a one-line detailed description of the object.
inherited
toStringShort() → String: A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool: The equality operator.
inherited