ZetaGlobalHeader class

The Header is the topmost, persistent navigation bar across the application. It contains global actions and utilities such as the product logo, primary navigation, search, and user profile access. It anchors the user in the application and remains consistent across all views.

Can have a maximum of 6 nav items and 6 action items.

This component is permanently set to dark mode.

Search bar (when set to true) will be hidden when there are 6 nav and action items, on a screen size of 1440px or less.

  • Users can input their own avatar widget, otherwise it will default to a ZetaAvatar.
  • Users can input their own leading widget, otherwise it will default to a ZetaIconButton with a hamburger menu icon.
  • Users can input their own nav items and action items, otherwise they will be empty.

It is recommended to use ZetaButton or ZetaDropdown widgets for nav items, and ZetaIconButton for action items.

Due to the lack of concrete designs for responsiveness, the current implementation has multiple known issues:

  • On most screen sizes, something will overflow.
  • The search bar will disappear when there are 6 nav and action items, on a screen size of 1440px or less.
  • Many screen sizes will face issues trying to display up to 6 nav and action items.

These issues will be addressed in future iterations of this component - we welcome feedback and contributions!

Figma: https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS-Zeta---Components?node-id=1120-26358&p=f&m=dev

Inheritance
Available extensions

Constructors

ZetaGlobalHeader.new({Key? key, bool? rounded, required String platformName, List<Widget> navItems = const [], Widget? searchBar, List<Widget> actionItems = const [], String? userName, VoidCallback? onHamburgerMenuPressed, VoidCallback? onAvatarButtonPressed, VoidCallback? onAppsButtonPressed, Widget? avatar, Widget? leading, Widget? trailing, String? trailingSemanticLabel = 'App switcher button', String? leadingSemanticLabel = 'Hamburger menu button', String? logoSemanticLabel = 'Zebra logo', String? avatarSemanticLabel = 'User avatar button'})
Constructs ZetaGlobalHeader
const

Properties

actionItems List<Widget>
Action buttons to display in the header.
final
avatar Widget?
Avatar widget. Recommended to use ZetaAvatar widget.
final
avatarSemanticLabel String?
Semantic label for the avatar button.
final
hashCode int
The hash code for this object.
no setterinherited
key Key?
Controls how one widget replaces another widget in the tree.
finalinherited
leading Widget?
Leftmost widget. Recommended to use ZetaIconButton widget.
final
leadingSemanticLabel String?
Semantic label for the hamburger menu button.
final
(Optional) Logo widget. If null, Zebra logo will be used.
final
logoSemanticLabel String?
Semantic label for the Zebra logo.
final
Menu items to display in the header.
final
onAppsButtonPressed VoidCallback?
Callback when apps button is pressed.
final
onAvatarButtonPressed VoidCallback?
Callback when avatar button is pressed.
final
onHamburgerMenuPressed VoidCallback?
Callback when hamburger menu is pressed.
final
platformName String
Header platformName in top left of header.
final
rounded bool?
Sets rounded or sharp border of the containing box and the icon style.
finalinherited
runtimeType Type
A representation of the runtime type of the object.
no setterinherited
(Optional) Search bar widget. If null, a default ZetaSearchBar will be displayed.
final
trailing Widget?
Trailing widget. If not provided, the app switcher button will be displayed.
final
trailingSemanticLabel String?
Semantic label for the trailing app switcher button.
final
userName String?
Set the name of the user.
final

Methods

build(BuildContext _) Widget
Describes the part of the user interface represented by this widget.
override
createElement() StatelessElement
Creates a StatelessElement to manage this widget's location in the tree.
inherited
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
paddingAll(double space) Widget

Available on Widget, provided by the SpacingWidget extension

Equal padding on all sides.
paddingBottom(double space) Widget

Available on Widget, provided by the SpacingWidget extension

Padding on bottom only.
paddingEnd(double space) Widget

Available on Widget, provided by the SpacingWidget extension

Padding on start edge only. Is affected by whether the device is LTR or RTL:
paddingHorizontal(double space) Widget

Available on Widget, provided by the SpacingWidget extension

Equal padding on start and end.
paddingStart(double space) Widget

Available on Widget, provided by the SpacingWidget extension

Padding on start edge only. Is affected by whether the device is LTR or RTL:
paddingTop(double space) Widget

Available on Widget, provided by the SpacingWidget extension

Padding on top only.
paddingVertical(double space) Widget

Available on Widget, provided by the SpacingWidget extension

Equal padding on top and bottom.
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