TextFieldComponent class Component

A focusable, hoverable, and editable text input component for terminal/canvas UIs.

The TextFieldComponent displays a single-line input area with optional styles for normal text, placeholder text, and hover/focus states.

It supports:

• Custom styling for text, placeholder, and hover states.
• Placeholder text when the field is empty.
• Max width control.
• Callbacks for text changes and submission.
• Obscured mode for password fields.
• Arrow key navigation and backspace support.

Example

final textField = TextFieldComponent(
  initialText: "Hello",
  maxWidth: 30,
  placeHolder: "Type something...",
  textStyle: TextComponentStyle().foreground(ColorRGB(255, 255, 255)),
  placeHolderStyle: TextComponentStyle().foreground(ColorRGB(128, 128, 128)),
  hoverStyle: TextComponentStyle().bold(),
  onChanged: (value) => print("Changed: $value"),
  onSubmitted: (value) => print("Submitted: $value"),
);

Styling

• Use TextComponentStyle.foreground or TextComponentStyle.background to set colors.
• Use style helpers like .bold() or .italic() to adjust font style.

Interaction

• Focus: The field shows a "|> " prefix when focused.
• Hover: Hover style applies when the pointer or cursor is over the field.
• Typing: Input is appended at the cursor position.
• Submission: Pressing Enter triggers onSubmitted.
• Navigation: Left/Right arrows move the cursor; Backspace deletes before cursor.

See also:

• TextComponentStyle for style customization.
• AnsiColorType for color definitions.

Inheritance

• Object
• Component
• TextFieldComponent

Constructors

TextFieldComponent({dynamic onChanged(String)?, dynamic onSubmitted(String)?, String? initialText, AnsiColorType? foreground, AnsiColorType? background, TextComponentStyle? textStyle, String? placeHolder, TextComponentStyle? placeHolderStyle, TextComponentStyle? hoverStyle, bool obsecure = false, int maxWidth = 20})

Creates a text field component for user input.

const

Properties

background → AnsiColorType?

Background color.

final

foreground → AnsiColorType?

Foreground (text) color.

final

hashCode → int

The hash code for this object.

no setter, inherited

hoverStyle → TextComponentStyle?

Style applied when hovered or focused.

final

initialText → String?

Initial text content of the field.

final

maxWidth → int

Maximum width of the text field (in characters).

final

obsecure → bool

If true, masks the text (for passwords).

final

onChanged → dynamic Function(String)?

Callback when the text changes.

final

onSubmitted → dynamic Function(String)?

Callback when the user presses Enter.

final

padding → EdgeInsets

The padding inside the component’s layout bounds.

final, inherited

placeHolder → String?

Placeholder text displayed when empty.

final

placeHolderStyle → TextComponentStyle?

Style for placeholder text.

final

position → Position?

The position of the component within its parent or layout.

final, inherited

runtimeType → Type

A representation of the runtime type of the object.

no setter, inherited

textStyle → TextComponentStyle?

Style for entered text.

final

Methods

createInstance() → ComponentInstance

Creates a ComponentInstance that can be rendered.

override

noSuchMethod(Invocation invocation) → dynamic

Invoked when a nonexistent method or property is accessed.

inherited

toString() → String

A string representation of this object.

inherited

Operators

operator ==(Object other) → bool

The equality operator.

inherited