CNSearchBar class

A native expandable search bar with Liquid Glass effects.

When expandable is true, the search bar starts as a compact icon button and expands to a full-width text field when tapped. This creates an elegant iOS-native animation.

Example:

CNSearchBar(
  placeholder: 'Search...',
  onChanged: (text) => print('Search: $text'),
  onSubmitted: (text) => performSearch(text),
  expandable: true,
)
Inheritance
Available extensions

Constructors

CNSearchBar({Key? key, String placeholder = 'Search', ValueChanged<String>? onChanged, ValueChanged<String>? onSubmitted, VoidCallback? onCancelTap, ValueChanged<bool>? onExpandStateChanged, bool expandable = true, bool initiallyExpanded = false, double collapsedWidth = 44.0, double expandedHeight = 36.0, Color? tint, Color? backgroundColor, Color? textColor, Color? placeholderColor, bool showCancelButton = true, String cancelText = 'Cancel', bool autofocus = false, CNSearchBarController? controller, CNSymbol? searchIcon, CNSymbol? clearIcon, bool autoHideOnModal = true})
Creates an expandable search bar.
const

Properties

autofocus → bool
Whether to automatically focus when expanded.
final
autoHideOnModal → bool
When true (default), destroys the native search bar's PlatformView while a modal sheet is presented above this widget's host route. Fixes the iOS hybrid-composition z-order bleed (Issue #53) where a host-page CNSearchBar's pixels leak through a sheet that also contains a CN-widget. Requires CNTabBarRouteObserver() to be registered in the app's navigatorObservers. No effect on iOS < 26 / non-iOS (Flutter fallback).
final
backgroundColor → Color?
Background color for the search field.
final
cancelText → String
Text for the cancel button.
final
clearIcon → CNSymbol?
Custom clear icon (defaults to xmark.circle.fill SF Symbol).
final
collapsedWidth → double
Width of the collapsed search bar (icon-only mode).
final
controller → CNSearchBarController?
Controller for programmatic control.
final
expandable → bool
Whether the search bar can expand from icon to full width.
final
expandedHeight → double
Height of the expanded search bar.
final
hashCode → int
The hash code for this object.
no setterinherited
initiallyExpanded → bool
Whether the search bar starts in expanded state.
final
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
onCancelTap → VoidCallback?
Called when the cancel button is tapped.
final
onChanged → ValueChanged<String>?
Called when the search text changes.
final
onExpandStateChanged → ValueChanged<bool>?
Called when the expand/collapse state changes.
final
onSubmitted → ValueChanged<String>?
Called when the user submits the search (presses return).
final
placeholder → String
Placeholder text shown when the search field is empty.
final
placeholderColor → Color?
Color for the placeholder text.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
searchIcon → CNSymbol?
Custom search icon (defaults to magnifyingglass SF Symbol).
final
showCancelButton → bool
Whether to show the cancel button when expanded.
final
textColor → Color?
Color for the search text.
final
tint → Color?
Tint color for the search bar and icon.
final

Methods

createElement() → StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<CNSearchBar>
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
liquidGlass({CNGlassEffect effect = CNGlassEffect.regular, CNGlassEffectShape shape = CNGlassEffectShape.capsule, double? cornerRadius, Color? tint, bool interactive = false}) → Widget

Available on Widget, provided by the LiquidGlassExtension extension

Applies a Liquid Glass effect to this widget.
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