GlassTextField class

A glass text field widget following Apple's input field design.

GlassTextField provides a text input field with glass morphism effect, matching iOS design patterns with customizable styling.

Usage Modes

Grouped Mode (default)

AdaptiveLiquidGlassLayer(
  settings: LiquidGlassSettings(...),
  child: Column(
    children: [
      GlassTextField(
        placeholder: 'Email',
        keyboardType: TextInputType.emailAddress,
      ),
      GlassTextField(
        placeholder: 'Password',
        obscureText: true,
      ),
    ],
  ),
)

Standalone Mode

GlassTextField(
  useOwnLayer: true,
  settings: LiquidGlassSettings(...),
  placeholder: 'Search...',
  prefixIcon: Icon(Icons.search, size: 20, color: Colors.white70),
)

Customization Examples

With prefix and suffix icons:

GlassTextField(
  placeholder: 'Search',
  prefixIcon: Icon(Icons.search, size: 20, color: Colors.white70),
  suffixIcon: Icon(Icons.clear, size: 20, color: Colors.white70),
  onSuffixTap: () => controller.clear(),
)

Multiline text area:

GlassTextField(
  placeholder: 'Enter your message...',
  maxLines: 5,
  minLines: 3,
)

Inheritance

Constructors

GlassTextField({Key? key, TextEditingController? controller, FocusNode? focusNode, String? placeholder, Widget? prefixIcon, Widget? suffixIcon, VoidCallback? onSuffixTap, bool obscureText = false, TextInputType? keyboardType, TextInputAction? textInputAction, int maxLines = 1, int? minLines, int? maxLength, bool enabled = true, bool readOnly = false, bool autofocus = false, ValueChanged<String>? onChanged, ValueChanged<String>? onSubmitted, ValueChanged<int>? onLineCountChanged, List<TextInputFormatter>? inputFormatters, TextStyle? textStyle, TextStyle? placeholderStyle, EdgeInsetsGeometry padding = const EdgeInsets.symmetric(horizontal: 16, vertical: 12), double iconSpacing = 12.0, CrossAxisAlignment iconAlignment = CrossAxisAlignment.center, double? height, double? minHeight, double? maxHeight, Widget? bottom, LiquidShape shape = const LiquidRoundedRectangle(borderRadius: 10), LiquidGlassSettings? settings, bool useOwnLayer = false, GlassQuality? quality, GlassInteractionBehavior interactionBehavior = GlassInteractionBehavior.full, double pressScale = 1.03, Color? glowColor, double glowRadius = 1.5, TapRegionCallback? onTapOutside}): Creates a glass text field.
const
GlassTextField.search({Key? key, TextEditingController? controller, FocusNode? focusNode, String? placeholder, Widget? prefixIcon, Widget? suffixIcon, VoidCallback? onSuffixTap, bool enabled = true, bool readOnly = false, bool autofocus = false, ValueChanged<String>? onChanged, ValueChanged<String>? onSubmitted, List<TextInputFormatter>? inputFormatters, TextStyle? textStyle, TextStyle? placeholderStyle, EdgeInsetsGeometry padding = const EdgeInsets.symmetric(horizontal: 12, vertical: 8), double iconSpacing = 8.0, double? height = 44.0, LiquidShape shape = const LiquidRoundedRectangle(borderRadius: 22), LiquidGlassSettings? settings, bool useOwnLayer = false, GlassQuality? quality, GlassInteractionBehavior interactionBehavior = GlassInteractionBehavior.full, double pressScale = 1.03, Color? glowColor, double glowRadius = 1.5, TapRegionCallback? onTapOutside}): Creates a glass text field styled specifically for search, matching the compact layout and visuals of GlassSearchBar.
const

Properties

autofocus → bool: Whether the text field should auto-focus.
final
bottom → Widget?: Optional widget displayed below the text area, inside the same glass card.
final
controller → TextEditingController?: Controls the text being edited.
final
enabled → bool: Whether the text field is enabled.
final
focusNode → FocusNode?: Controls the focus state of the text field.
final
glowColor → Color?: Colour of the directional glow.
final
glowRadius → double: Spread radius of the directional glow relative to the field's dimensions.
final
hashCode → int: The hash code for this object.
no setterinherited
height → double?: Fixed height of the text field.
final
iconAlignment → CrossAxisAlignment: Vertical alignment of prefix and suffix icons.
final
iconSpacing → double: Spacing between the icons and the text field.
final
inputFormatters → List<TextInputFormatter>?: Input formatters for the text field.
final
interactionBehavior → GlassInteractionBehavior: Controls which press-interaction effects are active on this field.
final
key → Key?: Controls how one widget replaces another widget in the tree.
finalinherited
keyboardType → TextInputType?: The type of keyboard to display.
final
maxHeight → double?: Maximum height constraint.
final
maxLength → int?: Maximum number of characters allowed.
final
maxLines → int: Maximum number of lines for the text field.
final
minHeight → double?: Minimum height constraint.
final
minLines → int?: Minimum number of lines for the text field.
final
obscureText → bool: Whether to obscure the text (for passwords).
final
onChanged → ValueChanged<String>?: Called when the text changes.
final
onLineCountChanged → ValueChanged<int>?: Called when the number of rendered text lines changes.
final
onSubmitted → ValueChanged<String>?: Called when the user submits the text.
final
onSuffixTap → VoidCallback?: Callback when suffix icon is tapped.
final
onTapOutside → TapRegionCallback?: Called when the user taps outside the text field.
final
padding → EdgeInsetsGeometry: Padding inside the text field.
final
placeholder → String?: Placeholder text shown when the field is empty.
final
placeholderStyle → TextStyle?: The style of the placeholder text.
final
prefixIcon → Widget?: Widget displayed at the start of the field.
final
pressScale → double: Scale factor applied when the field is pressed.
final
quality → GlassQuality?: Rendering quality for the glass effect.
final
readOnly → bool: Whether the text field is read-only.
final
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
settings → LiquidGlassSettings?: Glass effect settings (only used when useOwnLayer is true).
final
shape → LiquidShape: Shape of the text field.
final
suffixIcon → Widget?: Widget displayed at the end of the field.
final
textInputAction → TextInputAction?: The action button on the keyboard.
final
textStyle → TextStyle?: The style of the text being edited.
final
useOwnLayer → bool: Whether to create its own layer or use grouped glass.
final

Methods

createElement() → StatefulElement: Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<GlassTextField>: Creates the mutable state for this widget at a given location in the tree.
override
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