SearchBar class

A Material Design search bar.

A SearchBar looks like a TextField. Tapping a SearchBar typically shows a "search view" route: a route with the search bar at the top and a list of suggested completions for the search bar's text below. SearchBars are usually created by a SearchAnchor.builder. The builder provides a SearchController that's used by the search bar's SearchBar.onTap or SearchBar.onChanged callbacks to show the search view and to hide it when the user selects a suggestion.

For TextDirection.ltr, the leading widget is on the left side of the bar. It should contain either a navigational action (such as a menu or up-arrow) or a non-functional search icon.

The trailing is an optional list that appears at the other end of the search bar. Typically only one or two action icons are included. These actions can represent additional modes of searching (like voice search), a separate high-level action (such as current location) or an overflow menu.

This example demonstrates how to use a SearchBar as the return value of the SearchAnchor.builder property. The SearchBar also includes a leading search icon and a trailing action to toggle the brightness.
link

To create a local project with this code sample, run:
flutter create --sample=material.SearchBar.1 mysample

See also:

Inheritance

Constructors

Creates a Material Design search bar.
const

Properties

autoFocus → bool
Whether this text field should focus itself if nothing else is already focused.
final
backgroundColor → MaterialStateProperty<Color?>?
The search bar's background fill color.
final
constraints → BoxConstraints?
Optional size constraints for the search bar.
final
contextMenuBuilder → EditableTextContextMenuBuilder?
Builds the text selection toolbar when requested by the user.
final
controller → TextEditingController?
Controls the text being edited in the search bar's text field.
final
elevation → MaterialStateProperty<double?>?
The elevation of the search bar's Material.
final
enabled → bool
Whether or not this widget is currently interactive.
final
focusNode → FocusNode?
An optional focus node to use as the focus node for this widget.
final
hashCode → int
The hash code for this object.
no setterinherited
hintStyle → MaterialStateProperty<TextStyle?>?
The style to use for the hintText.
final
hintText → String?
Text that suggests what sort of input the field accepts.
final
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
keyboardType → TextInputType?
The type of action button to use for the keyboard.
final
leading → Widget?
A widget to display before the text input field.
final
onChanged → ValueChanged<String>?
Invoked upon user input.
final
onSubmitted → ValueChanged<String>?
Called when the user indicates that they are done editing the text in the field.
final
onTap → GestureTapCallback?
Called when the user taps this search bar.
final
onTapOutside → TapRegionCallback?
Called when the user taps outside the search bar.
final
overlayColor → MaterialStateProperty<Color?>?
The highlight color that's typically used to indicate that the search bar is focused, hovered, or pressed.
final
padding → MaterialStateProperty<EdgeInsetsGeometry?>?
The padding between the search bar's boundary and its contents.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
scrollPadding → EdgeInsets
Configures the padding for the edges surrounding a Scrollable when the text field scrolls into view.
final
shadowColor → MaterialStateProperty<Color?>?
The shadow color of the search bar's Material.
final
shape → MaterialStateProperty<OutlinedBorder?>?
The shape of the search bar's underlying Material.
final
side → MaterialStateProperty<BorderSide?>?
The color and weight of the search bar's outline.
final
surfaceTintColor → MaterialStateProperty<Color?>?
The surface tint color of the search bar's Material.
final
textCapitalization → TextCapitalization?
Configures how the platform keyboard will select an uppercase or lowercase keyboard.
final
textInputAction → TextInputAction?
The type of action button to use for the keyboard.
final
textStyle → MaterialStateProperty<TextStyle?>?
The style to use for the text being edited.
final
trailing → Iterable<Widget>?
A list of Widgets to display in a row after the text field.
final

Methods

createElement() → StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<SearchBar>
Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String
A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String
Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a one-line detailed description of the object.
inherited
toStringShort() → String
A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited