CompletionTextInput

A TextInput with an anchored completion menu.

See also: Autocomplete when the result is one picked option.

Import: package:fleury/fleury.dart, or package:fleury/fleury_core.dart in browser code.

Usage

CompletionTextInput(
  placeholder: 'Type a command…',
  showOnEmptyQuery: true,
  provider: (request) {
    const options = <TextCompletionOption>[
      TextCompletionOption(label: 'benchmark'),
      TextCompletionOption(label: 'storybook'),
      TextCompletionOption(label: 'command-palette'),
      TextCompletionOption(label: 'semantic-tree'),
    ];
    final q = request.query.toLowerCase();
    return options.where((o) => o.label.toLowerCase().contains(q));
  },
)

Details

The field uses core TextCompletionController semantics for option state and acceptance. This widget supplies provider-driven options plus the floating menu UI; TextInput still owns editing, Tab acceptance, Escape dismissal, and Up/Down completion navigation. Clicking a completion also accepts it; Enter submits the text rather than accepting.

Constructors

`CompletionTextInput()`

Parameter	Type	Default	Description
`provider:`	`TextCompletionProvider`	required	Produces completion options for the current request.
`requestBuilder:`	`TextCompletionRequestBuilder`	`defaultTextCompletionRequest`	Builds the completion range and query from the current text value.
`controller:`	`TextEditingController?`	—	Text editing controller for the underlying input.
`completionController:`	`TextCompletionController?`	—	External completion state controller. If omitted, this widget owns one.
`historyController:`	`TextHistoryController?`	—	Optional command-history controller shared with the input.
`focusNode:`	`FocusNode?`	—	Focus node used by the underlying text input.
`autofocus:`	`bool`	`false`	Whether the field should request focus when mounted.
`onChanged:`	`void Function(String text)?`	—	Called after user and semantic edits. Programmatic controller writes notify controller listeners instead. See `TextInput.onChanged`.
`onSubmit:`	`void Function(String text)?`	—	Called when the user submits the current text.
`onEscape:`	`void Function()?`	—	Called when Escape is pressed and the completion menu does not consume it.
`onCompletionAccepted:`	`void Function(TextCompletionOption option)?`	—	Called after a completion option is accepted into the input.
`placeholder:`	`String`	`''`	Placeholder text shown when the input is empty.
`placeholderStyle:`	`CellStyle`	`const CellStyle(dim: true)`	Style used for `placeholder`.
`style:`	`CellStyle`	`CellStyle.none`	Entered-text base styling, plus optional hover, focus, disabled, and invalid state entries from `CellStyle.interactive`.
`cursorStyle:`	`CellStyle`	`const CellStyle(inverse: true)`	Style applied to the cursor cell.
`blinkInterval:`	`Duration`	`const Duration(milliseconds: 500)`	Cursor blink period.
`enableBlink:`	`bool`	`true`	Whether cursor blinking is enabled.
`enabled:`	`bool`	`true`	Whether editing, completion, and focus behavior are enabled.
`readOnly:`	`bool`	`false`	Whether the field can receive focus but not edit text.
`validationError:`	`String?`	—	Marks the current value invalid: the field draws in the theme’s error style and reports this message through semantics, but doesn’t show the text. Inside a `FormField`, this message wins over the `FormField`’s validator, though not over its own `error`, and the `FormField` shows the winning message below the input.
`semanticLabel:`	`String?`	—	Label exposed through the underlying text-field semantic node. More
`semanticState:`	`SemanticState`	`SemanticState.empty`	Extra semantic state merged into the underlying text-field node.
`clipboardPolicy:`	`TextClipboardPolicy?`	—	Clipboard write/read policy for input copy and paste.
`pastePolicy:`	`TextPastePolicy`	`const TextPastePolicy()`	Paste normalization and size policy for inserted text.
`commitHistoryOnSubmit:`	`bool`	`true`	Whether submitted text is added to `historyController`.
`showOnEmptyQuery:`	`bool`	`false`	Whether to show completions even when the current query is empty.
`maxVisible:`	`int`	`6`	Maximum number of completion rows visible in the overlay.

semanticLabel: When omitted, placeholder is used when non-empty.

Source

CompletionTextInput is defined in packages/fleury/lib/src/catalog/completion_text_input.dart.

Category: Inputs & controls · All widgets

completiontextinput_example.dart

Example · editable

Widget example() => CompletionTextInput(
  placeholder: 'Type a command…',
  showOnEmptyQuery: true,
  provider: (request) {
    const options = <TextCompletionOption>[
      TextCompletionOption(label: 'benchmark'),
      TextCompletionOption(label: 'storybook'),
      TextCompletionOption(label: 'command-palette'),
      TextCompletionOption(label: 'semantic-tree'),
    ];
    final q = request.query.toLowerCase();
    return options.where((o) => o.label.toLowerCase().contains(q));
  },
);

Live preview

Live · interactive

click & type to interact ⓘ how this demo runs