pin_code_fields_liquid_glass 0.1.0-dev.1

iOS 26 Liquid Glass styled PIN input field for Flutter. Built on pin_code_fields with GPU-accelerated glass effects.

pin_code_fields_liquid_glass

iOS 26 Liquid Glass styled PIN input field for Flutter.

Built on top of pin_code_fields with GPU-accelerated glass effects from liquid_glass_renderer.

Demos

OTP Verification	Lock Screen	Playground

Requirements

This package requires the Impeller rendering engine and only works on:

• iOS
• Android
• macOS

Web, Windows, and Linux are NOT supported.

Installation

dependencies:
  pin_code_fields_liquid_glass: ^0.1.0

Quick Start

import 'package:pin_code_fields_liquid_glass/pin_code_fields_liquid_glass.dart';

LiquidGlassPinField(
  length: 6,
  theme: LiquidGlassPinTheme.blended(
    blur: 10,
    glassColor: Colors.white.withOpacity(0.2),
  ),
  onCompleted: (pin) => print('PIN: $pin'),
)

Available Styles

Separate Glass Cells

Individual glass cells with spacing between them. Traditional PIN field look.

LiquidGlassPinField(
  length: 4,
  theme: LiquidGlassPinTheme.separate(
    spacing: 12,
    borderRadius: 16,
    blur: 10,
  ),
)

Unified Glass Container

One glass container with internal dividers. Clean, minimal look.

LiquidGlassPinField(
  length: 4,
  theme: LiquidGlassPinTheme.unified(
    dividerWidth: 1,
    containerBorderRadius: 20,
    blur: 12,
  ),
)

Blended Glass Cells (iOS 26 Style)

Cells that blend together seamlessly. Modern iOS 26 aesthetic.

LiquidGlassPinField(
  length: 4,
  theme: LiquidGlassPinTheme.blended(
    blendAmount: 0.3,
    borderRadius: 12,
    blur: 10,
  ),
)

Theme Properties

Common Properties

Property	Type	Default	Description
cellSize	Size	Size(56, 64)	Size of each cell
blur	double	10	Glass blur intensity
thickness	double	20	Glass material thickness
glassColor	Color?	auto	Base glass color
textStyle	TextStyle?	auto	PIN text style
showCursor	bool	true	Show cursor in focused cell

Glass Settings

Property	Type	Default	Description
visibility	double	1.0	Glass visibility (0-1)
chromaticAberration	double	0.01	Color fringing effect
lightAngle	double?	auto	Light source angle
lightIntensity	double	0.5	Light reflection intensity
ambientStrength	double	0	Ambient light strength
refractiveIndex	double	1.2	Glass refraction amount
saturation	double	1.5	Color saturation boost

Glow Settings

Property	Type	Default	Description
enableGlowOnFocus	bool	true	Glow on focused cell
glowColor	Color?	auto	Default glow color
focusedGlowColor	Color?	auto	Focused state glow
filledGlowColor	Color?	auto	Filled state glow
errorGlowColor	Color?	auto	Error state glow
glowRadius	double	1.0	Glow spread radius

Stretch Animation Settings

Property	Type	Default	Description
enableStretchAnimation	bool	true	Stretch on character entry
stretchInteractionScale	double	1.05	Scale during stretch
stretchAmount	double	0.5	Stretch intensity
stretchResistance	double	0.08	Stretch spring resistance

Separate Style Properties

Property	Type	Default	Description
spacing	double	8	Gap between cells
borderRadius	double	12	Cell corner radius
glowPerCell	bool	true	Individual cell glow

Unified Style Properties

Property	Type	Default	Description
dividerWidth	double	1	Divider thickness
dividerColor	Color?	auto	Divider color
containerBorderRadius	double	16	Container corner radius
containerPadding	EdgeInsets	horizontal: 4	Inner padding

Blended Style Properties

Property	Type	Default	Description
blendAmount	double	0.3	Blend intensity (0-1)
borderRadius	double	12	Cell corner radius
overlapOffset	double	0	Cell overlap amount

Form Validation

Use LiquidGlassPinFormField for form integration with validation:

final _formKey = GlobalKey<FormState>();

Form(
  key: _formKey,
  child: LiquidGlassPinFormField(
    length: 6,
    theme: LiquidGlassPinTheme.blended(),
    validator: (value) {
      if (value == null || value.length < 6) {
        return 'Please enter all 6 digits';
      }
      if (value != '123456') {
        return 'Invalid PIN';
      }
      return null;
    },
    onSaved: (value) => print('PIN saved: $value'),
  ),
)

// Validate:
if (_formKey.currentState!.validate()) {
  _formKey.currentState!.save();
}

Form Field Properties

Property	Type	Default	Description
validator	String? Function(String?)	-	Validation function
onSaved	void Function(String?)	-	Called on form save
autovalidateMode	AutovalidateMode	disabled	When to auto-validate
initialValue	String?	-	Initial PIN value
errorTextSpace	double	8.0	Space above error text
errorTextStyle	TextStyle?	auto	Error text styling

Controller

Use PinInputController for programmatic control:

final controller = PinInputController();

LiquidGlassPinField(
  length: 6,
  pinController: controller,
  theme: LiquidGlassPinTheme.blended(),
)

// Set value
controller.setText('123456');

// Clear
controller.clear();

// Trigger error shake
controller.triggerError();

// Focus control
controller.requestFocus();
controller.unfocus();

Background Setup

For proper glass effects, ensure there's visual content behind the PIN field:

Stack(
  children: [
    // Background image or gradient
    Image.asset('assets/background.jpg', fit: BoxFit.cover),

    // Your PIN field
    Center(
      child: LiquidGlassPinField(
        length: 6,
        theme: LiquidGlassPinTheme.blended(),
      ),
    ),
  ],
)

Credits

• pin_code_fields - Headless PIN input core
• liquid_glass_renderer - GPU-accelerated glass effects