Overview

TextField(initialText, props) renders editable text on SVG and Canvas. A native textarea receives keyboard, clipboard and composition events while Flitter paints the text, selection and caret. The API follows the controller and focus concepts of Flutter TextField.

When to use it?

• Search fields with an onChanged callback.
• Forms whose values are read through a TextEditingController.
• Programmatically focused inputs using FocusNode.
• Short multiline notes using maxLines greater than one.
• Inputs with a label, hint, prefix or suffix icon.
• Text entry using native selection, clipboard shortcuts and IME composition.

Basic Usage

import {
  Container, EdgeInsets, FocusNode, InputDecoration, State, StatefulWidget,
  TextEditingController, TextField, TextStyle, type Widget,
} from 'flitter-core';
 
class _MessageInput extends StatefulWidget {
  createState() { return new MessageInputState(); }
}
 
class MessageInputState extends State<_MessageInput> {
  controller = new TextEditingController('Hello');
  focusNode = new FocusNode();
 
  dispose() {
    this.controller.dispose();
    this.focusNode.dispose();
    super.dispose();
  }
 
  build(): Widget {
    return Container({
      padding: EdgeInsets.all(16),
      child: TextField('', {
        controller: this.controller,
        focusNode: this.focusNode,
        width: 320,
        style: new TextStyle({ fontSize: 18 }),
        decoration: new InputDecoration({
          labelText: 'Message',
          hintText: 'Write a message',
          contentPadding: EdgeInsets.all(8),
        }),
      }),
    });
  }
}
 
export default function MessageInput(): Widget {
  return new _MessageInput();
}

Props

InputDecoration accepts labelText, hintText, labelStyle, hintStyle, prefixIcon, suffixIcon, border, focusedBorder and contentPadding. Prefix and suffix icons are Flitter widgets.

Practical Examples

Update and select text

Inside the state class from the example:

this.controller.value = {
  text: 'Hello world',
  selection: { start: 6, end: 11 },
};
this.focusNode.requestFocus();

controller.text = 'New text' moves the selection to the end. controller.clear() empties the field. Controller listeners observe both text and selection changes.

Uncontrolled multiline input

TextField('First line\nSecond line', {
  width: 320,
  height: 100,
  maxLines: 4,
  decoration: new InputDecoration({ labelText: 'Notes' }),
});

User edits persist across ordinary parent rebuilds. Without a controller, changing the first argument replaces the current value.

Important Notes

• Dispose caller-owned controllers and focus nodes with their owning state. Removing a field detaches them and removes its native textarea.
• The native textarea provides clipboard and composition handling. The painted SVG/Canvas text is the visible field; provide a meaningful accessible label.
• Browser tests exercise composition events. Real keyboard/IME behavior should also be checked on the platforms your application supports.
• Selection offsets use UTF-16 code units, matching browser textareas. Programmatic focus preserves the controller's selection.
• Single-line fields scroll horizontally; multiline fields wrap and scroll vertically to keep the active caret visible. The full value remains editable beyond maxLines.
• The viewport is at least height pixels tall, or maxLines times the text line height when that is larger.
• This widget does not implement password masking, form validation, autofill integration or a full bidirectional editing engine.

Related Widgets

• RichText for styled, non-editable text.
• GestureDetector for actions around an input.
• Container for surrounding layout and decoration.