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.
Constructors
- TextFieldComponent.new({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 setterinherited
- 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.
finalinherited
- 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.
finalinherited
- runtimeType → Type
-
A representation of the runtime type of the object.
no setterinherited
- 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