Search Field

A search field allows users to enter a query and quickly find matching content.

Common alternative names:
Search bar, Search box, Search input

---

Variants

With Container

Basic search field with a container background and microphone icon.

Preview

Code

SearchField(
  hintText: 'Search',
  suffixIcon: Icon(Icons.mic_none, color: context.color.fgMuted),
)

---

No Container

Search field without a container background, with search and microphone icons.

Preview

Code

SearchField(
  hintText: 'Search',
  type: SearchFieldType.noContainer,
  prefixIcon: Icon(Icons.search, color: context.color.fgMuted),
  suffixIcon: Icon(Icons.mic_none, color: context.color.fgMuted),
)

---

With Back Navigation

Search field with a back button and clear icon for navigation.

Preview

Code

SearchField(
  hintText: 'Search',
  autoImautomaticallyImplyLeading: true,
  suffixIcon: Icon(Icons.clear, color: context.color.fgMuted),
)

---

Properties

Property	Type	Description
type	SearchFieldType	Visual style of the search field (withContainer or noContainer).
hintText	String?	Placeholder text displayed when the search field is empty.
fillColor	Color?	Background color of the search field.
borderRadius	BorderRadiusGeometry?	Corner radius for the search field borders.
prefixIcon	Widget?	Widget displayed at the start of the search field.
suffixIcon	Widget?	Widget displayed at the end of the search field.
onChanged	Function(String)?	Callback function when the search text changes.
controller	TextEditingController?	Controller for the search field input.
autofocus	bool	When true, the search field will be focused when first created.
height	double	Height of the search field container.
textInputAction	TextInputAction?	Determines the action button on the keyboard.
contentPadding	EdgeInsetsGeometry?	Custom padding for the content inside the search field.
border	BoxBorder?	Custom border for the search field.
leading	Widget?	Custom leading widget (typically used for back button).
autoImautomaticallyImplyLeading	bool	When true, shows a default back button if no leading widget provided.
onTapBack	Function()?	Callback function when the back button is tapped.