Top App Bar
Top app bars provide content and actions related to the current screen.
Figma Link
https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=24183-7228
- Web Components
- Flutter
Demo
zeta-web v0.12.1
Web Components
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
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 |