SearchBox constructor

const SearchBox({
  1. Key? key,
  2. double? minWidth,
  3. ValueChanged<String>? onChanged,
  4. VoidCallback? onEditingComplete,
  5. ValueChanged<String>? onSubmitted,
  6. String? initialText,
  7. FocusNode? focusNode,
  8. TextEditingController? controller,
  9. bool autofocus = false,
  10. Widget placeholder = const Text("Search"),
  11. Widget? leading,
  12. Widget? trailing,
})

Initializes a SearchBox with flexible configuration for search inputs.

Key features include:

  • placeholder: A widget (typically Text) shown when empty, customizable for context like "Search items...".
  • leading and trailing: Optional icons or buttons, e.g., search IconButton or clear IconButton.
  • onChanged: Invoked on every keystroke for live updates, trimming whitespace implicitly in callers like SearchButton.
  • onSubmitted: Triggered on enter key, passing the full input string for processing (e.g., query submission).
  • onEditingComplete: Called when editing ends (e.g., focus loss), useful for validation.
  • focusNode: External FocusNode for manual control, integrating with ArcaneFieldProvider or keyboard shortcuts.
  • autofocus: Enables immediate focus on render, common in SearchButton expansions.
  • initialText: Pre-fills the field, preserved via controller.
  • controller: Custom TextEditingController for advanced management, like linking to MutableText.
  • minWidth: Constrains the box's minimum size for layout consistency.

Usage example:

SearchBox(
  autofocus: true,
  leading: Icon(Icons.search),
  onChanged: (query) => filterCollection(query),
  placeholder: Text("Search in [Collection]"),
)

Often nested in SearchButton for toggleable UIs or used directly in Sheet for modal searches.

Implementation

const SearchBox(
    {super.key,
    this.minWidth,
    this.onChanged,
    this.onEditingComplete,
    this.onSubmitted,
    this.initialText,
    this.focusNode,
    this.controller,
    this.autofocus = false,
    this.placeholder = const Text("Search"),
    this.leading,
    this.trailing});