Top App Bar
- Web Components
- Flutter
Demo
zeta-web v0.6.6
Web Components
Top Appbars provide content and actions related to the current screen.
Storybook
https://design.zebra.com/web/storybook/?path=/docs/components-top-appbar--docs
Slots
| Name | Description | Type |
|---|---|---|
| default | The content of the appbar. | text |
| leading | The content to be placed at the start of the appbar. | text |
| trailing | The content to be placed at the end of the appbar. | text |
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| centered | Centers the content of the title. | boolean | false |
| extended | Places the title below the main appbar. | boolean | false |
Demo
Top app bars provide content and actions related to the current screen.
Widgetbook
Inheritance
Object > DiagnosticableTree > Widget > StatefulWidget > ZetaStatefulWidget
Constructors
Creates a ZetaTopAppBar.
ZetaTopAppBar.new({Key? key, bool? rounded, List<Widget> actions = const [], bool automaticallyImplyLeading = true, Widget? leading, Widget? title, TextStyle? titleTextStyle, ZetaTopAppBarType type = ZetaTopAppBarType.defaultAppBar, double? titleSpacing})
Creates a ZetaTopAppBar with centered title.
ZetaTopAppBar.centered({Key? key, bool? rounded, List<Widget> actions = const [], bool automaticallyImplyLeading = true, Widget? leading, Widget? title, TextStyle? titleTextStyle, double? titleSpacing})
Creates a ZetaTopAppBar with an extended title over 2 lines.
ZetaTopAppBar.extended({Key? key, bool? rounded, List<Widget> actions = const [], bool automaticallyImplyLeading = true, Widget? leading, Widget? title, TextStyle? titleTextStyle, bool shrinks = true, double? titleSpacing})
Creates a ZetaTopAppBar with an expanding search field.
ZetaTopAppBar.search({Key? key, bool? rounded, ZetaTopAppBarType type = ZetaTopAppBarType.defaultAppBar, bool automaticallyImplyLeading = true, ZetaSearchController? searchController, Widget? leading, Widget? title, TextStyle? titleTextStyle, ValueChanged<String>? onSearch, String? searchHintText, VoidCallback? onSearchMicrophoneIconPressed, List<Widget> actions = const [], String? clearSemanticLabel, String? microphoneSemanticLabel, String? searchSemanticLabel, String? searchBackSemanticLabel, double? titleSpacing})
Properties
| Name | Description | Type | Features |
|---|---|---|---|
| actions | A list of Widgets to display in a row after the title widget. | List<Widget> | final |
| automaticallyImplyLeading | Configures whether the back button to be displayed. | bool | final |
| clearSemanticLabel | The semantic label for the clear icon. | String? | final |
| hashCode | The hash code for this object. | int | no setter inherited |
| key | Controls how one widget replaces another widget in the tree. | Key? | final inherited |
| leading | Widget displayed first in the app bar row. | Widget? | final |
| microphoneSemanticLabel | The semantic label for the microphone icon. | String? | final |
| onSearch | Called when text in the search field is submitted. | ValueChanged<String>? | final |
| onSearchMicrophoneIconPressed | If omitted the microphone icon won't show up. Called when the icon button is pressed. Normally used for speech recognition/speech to text. | VoidCallback? | final |
| preferredSize | The size this widget would prefer if it were otherwise unconstrained. | Size | no setter override |
| rounded | Sets rounded or sharp border of the containing box and the icon style. | bool? | final inherited |
| runtimeType | A representation of the runtime type of the object. | Type | no setter inherited |
| searchBackSemanticLabel | The semantic label for the back icon when search is open. | String? | final |
| searchController | Used to control the search textfield and states. | ZetaSearchController? | final |
| searchHintText | Label used as hint text. If null, displays 'Search'. | String? | final |
| searchSemanticLabel | The semantic label for the search icon. | String? | final |
| shrinks | If ZetaTopAppBarType.extend shrinks. Does not affect other types of app bar. | bool | final |
| title | Title of the app bar. | Widget? | final |
| titleSpacing | The spacing around title content on the horizontal axis. | double? | final |
| titleTextStyle | AppBar titleTextStyle | TextStyle? | final |
| type | Defines the styles of the app bar. | ZetaTopAppBarType | final |
Methods
| Name | Description | Type | Features |
|---|---|---|---|
| createElement() | Creates a StatefulElement to manage this widget's location in the tree. | StatefulElement | inherited |
| createState() | Creates the mutable state for this widget at a given location in the tree. | State<ZetaTopAppBar> | override |
| debugDescribeChildren() | Returns a list of DiagnosticsNode objects describing this node's children. | List<DiagnosticsNode> | inherited |
| debugFillProperties(DiagnosticPropertiesBuilder properties) | Add additional properties associated with the node. | void | override |
| noSuchMethod(Invocation invocation) | Invoked when a nonexistent method or property is accessed. | dynamic | inherited |
| paddingAll(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| paddingBottom(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| paddingEnd(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| paddingHorizontal(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| paddingStart(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| paddingTop(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| paddingVertical(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) | Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep. | DiagnosticsNode | inherited |
| toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) | A string representation of this object. | String | inherited |
| toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) | Returns a string representation of this node and its descendants. | String | inherited |
| toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) | Returns a one-line detailed description of the object. | String | inherited |
| toStringShort() | A short, textual description of this widget. | String | inherited |
Figma
https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=24183-7228