Skip to content
Fleury Fleury

SearchPanel

A search field over a list of results: typing filters and ranks them, and the user activates one.

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

Usage

Section titled “Usage”
const SearchPanel(
  groupByCategory: true,
  results: <SearchResult>[
    SearchResult(title: 'main.dart', subtitle: 'lib/', category: 'Files'),
    SearchResult(
      title: 'pubspec.yaml',
      subtitle: './',
      category: 'Files',
    ),
    SearchResult(
      title: 'runApp',
      subtitle: 'lib/src/app.dart',
      category: 'Symbols',
    ),
    SearchResult(
      title: 'Gauge',
      subtitle: 'widgets/gauge.dart',
      category: 'Symbols',
    ),
  ],
)

Details

Section titled “Details”

By default a query keeps results that match it exactly, by prefix, as a substring, or as a fuzzy subsequence, listed in that order; pass matcher to decide matches yourself (results then keep their order). An empty query shows every result in order.

While the query field has focus, Up and Down move the selected result and Enter activates it. In the result list, Up, Down, PageUp, PageDown, Home, and End move the selection, and Enter or a click activates. Activating an enabled result calls onActivate. Ctrl+C copies the selected result (in the query field, selected query text is copied instead).

Constructors

Section titled “Constructors”

SearchPanel()

Section titled “SearchPanel()”
ParameterTypeDefaultDescription
results:List<SearchResult>requiredSource results to search, display, activate, and copy.
queryController:TextEditingController?—External controller for the query input.
controller:ListController?—External controller for result-list selection.
matcher:SearchResultMatcher?—Optional app-owned matcher used instead of the default ranked search.
semanticLabel:String'Search'Semantic label (the accessibility name; not rendered) for the search surface.
placeholder:String'Search...'Placeholder shown in the query input.
width:int60Width, in terminal cells, reserved for the query and result rows.
maxVisible:int10Cap on the number of result rows when fillHeight is false. When fillHeight is true this is ignored and the list grows to fill the available vertical space.
fillHeight:boolfalseWhen true the result list expands to fill the height handed down by the parent (e.g. an Expanded panel slot) instead of being capped at maxVisible rows. Requires a bounded-height parent.
groupByCategory:boolfalseWhen true (and no search query is active), a muted category header is drawn above the first item of each category group, and the per-row category tag is suppressed. Assumes results are already ordered by category. Searching re-ranks results, so headers are hidden while a query is active.
queryFocusNode:FocusNode?—Focus node used by the query input.
resultsFocusNode:FocusNode?—Focus node used by the result list.
autofocus:boolfalseWhether the query input should request focus when mounted.
copySelection:booltrueWhether Ctrl+C (and the semantic copy action) copies the selected result.
copyOptions:SearchPanelCopyOptionsconst SearchPanelCopyOptions()Clipboard/export options for the selected result.
onActivate:void Function(SearchResult result, int resultIndex)?—Called with the result and its index in results when the user activates an enabled result: Enter in the query field or the list, or a click on its row.
onCopy:void Function(SearchPanelCopyResult result)?—Called after a copy attempt completes.

Source

Section titled “Source”

SearchPanel is defined in packages/fleury/lib/src/catalog/search_panel.dart.

Category: Navigation & overlays · All widgets