ZdsSearchAppBar class

An AppBar with an integrated ZdsSearchField.

This is typically used to switch out ZdsAppBar to perform a search action. As both widgets implement PreferredSizeWidget, the Scaffold's appBar's height stays the same, and the body content is not displaced.

Scaffold(
  appBar: isSearching
    ? ZdsSearchAppBar(
      hintText: 'Search',
      textEditingController: controller,
      onSubmit: (text) {
        controller.text = text;
        state.searchTerm = text;
        state.onSearchSubmit();
      },
      trailing: ZdsButton.text(
    )
    : ZdsAppBar(
      actions: [
        IconButton(onPressed: () => (setState() => isSearching = true))
      ],
    )
)

This component can be used to update search results in two ways. onChange and onClear can be used to update the search results as the user types their query without needing to be submitted through the press of a button. If the search requires a lookup that will take time, you can instead only use onSubmit to only query results when the user presses the search button on their keyboard.

It is also possible to show an overlay on this appBar, which is typically used to inform the user about validation errors or when no results are found.

Scaffold(
  appBar: ZdsSearchAppBar(
    showOverlay: state.showNoResultsBar && state.searchString != '',
    overlayBuilder: (_) => Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('no results found...').padding(5),
      ],
    ).padding(10),
    // Other code declaring the appBar's content goes here
  ),
)

See also:

  • ZdsSearchField, which this component uses to provide a search field.
  • ZdsAppBar, a more typical appBar
  • ZdsEmpty, which can be used to show a no results message.
Inheritance
Implemented types
Available Extensions

Constructors

ZdsSearchAppBar({Key? key, String? hintText, void onChange(String value)?, void onSubmit(String value)?, Widget? leading, Widget? trailing, FocusNode? focusNode, TextEditingController? textEditingController, double height = 80.0, WidgetBuilder? overlayBuilder, bool showOverlay = false, VoidCallback? onClear, String? initValue, Color? backgroundColor, double? topPadding})
Creates an appBar with a search field.
const

Properties

backgroundColor Color?
Set custom background color .
final
focusNode FocusNode?
The focusNode for the search field.
final
hashCode int
The hash code for this object.
no setterinherited
height double
This appBar's preferred height.
final
hintText String?
Hint text that will appear when the user hasn't written anything in the search field.
final
initValue String?
Optional pre-filled text.
final
key Key?
Controls how one widget replaces another widget in the tree.
finalinherited
leading Widget?
A widget shown before the search field.
final
onChange → (void Function(String value)?)
Callback called whenever the search field's text changes.
final
onClear VoidCallback?
Callback called whenever the text on the search field is cleared
final
onSubmit → (void Function(String value)?)
Callback called whenever the user presses the 'Search' button on their keyboard.
final
overlayBuilder WidgetBuilder?
A builder for an optional overlay that will be shown below the search field.
final
preferredSize Size
The size this widget would prefer if it were otherwise unconstrained.
no setteroverride
runtimeType Type
A representation of the runtime type of the object.
no setterinherited
showOverlay bool
Whether to show the overlay created with overlayBuilder.
final
textEditingController TextEditingController?
A controller that can be used to notify listeners when the text changes.
final
topPadding double?
Set custom top padding .
final
trailing Widget?
A widget shown after the search field.
final

Methods

createElement() StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() ZdsSearchAppBarState
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.
override
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