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.

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

Constructors

SearchBar({Key? key, TextEditingController? controller, FocusNode? focusNode, String? hintText, Widget? leading, Iterable<Widget>? trailing, GestureTapCallback? onTap, ValueChanged<String>? onChanged, ValueChanged<String>? onSubmitted, BoxConstraints? constraints, MaterialStateProperty<double?>? elevation, MaterialStateProperty<Color?>? backgroundColor, MaterialStateProperty<Color?>? shadowColor, MaterialStateProperty<Color?>? surfaceTintColor, MaterialStateProperty<Color?>? overlayColor, MaterialStateProperty<BorderSide?>? side, MaterialStateProperty<OutlinedBorder?>? shape, MaterialStateProperty<EdgeInsetsGeometry?>? padding, MaterialStateProperty<TextStyle?>? textStyle, MaterialStateProperty<TextStyle?>? hintStyle, TextCapitalization? textCapitalization}): Creates a Material Design search bar.
const

Properties

backgroundColor → MaterialStateProperty<Color?>?: The search bar's background fill color.
final
constraints → BoxConstraints?: Optional size constraints for the search bar.
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
focusNode → FocusNode?: An optional focus node to use as the focus node for this widget.
final
hashCode → int: The hash code for this object.
read-onlyinherited
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
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
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.
read-onlyinherited
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
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}) → 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