zeta_flutter library

Zebra Design System (Zeta) - Flutter Component Library

Classes

Nothing Utils
A convenient widget that renders nothing.
PhoneNumber
A phone number.
PlatformIs
A universal platform checker.
Zeta Utils
An InheritedWidget that provides access to Zeta theme settings.
ZetaAccordion Components
The accordion is a control element comprising a vertically stacked list of items, such as labels or thumbnails. Each item can be "expanded" or "collapsed" to reveal the content associated with that item. There can be zero expanded items, exactly one, or more than one item expanded at a time, depending on the configuration.
ZetaAnimationLength Theme
Tokenised durations used for animations
ZetaAssistChip Components
Leading widget should typically be an icon.
ZetaAvatar Components
An avatar is a visual representation of a user or entity.
ZetaAvatarBadge
Badge component used with ZetaAvatar as either ZetaAvatar.upperBadge or ZetaAvatar.lowerBadge.
ZetaBanner Components
A banner displays an important, succinct message, and provides action for users to address. It draws the attention to the message by displaying it at the top in various colors.
ZetaBorders
Temporary class to hold border values.
ZetaBottomSheet Components
Bottom sheets are surfaces containing supplementary content that are anchored to the bottom of the screen.
ZetaBreadCrumb
Class for untruncated ZetaBreadCrumb.
ZetaBreadCrumbs Components
The breadcrumb is a secondary navigation pattern that helps a user understand the hierarchy among levels and navigate back through them.
ZetaButton Components
Zeta Button
ZetaButtonGroup Components
Zeta Button Group
ZetaButtonSegment<T>
Data describing a segment of a ZetaSegmentedControl.
ZetaChatItem Components
Chat item widget that can be dragged to reveal contextual actions.
ZetaCheckbox Components
Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.
ZetaCheckboxFormFieldState
FormFieldState for ZetaCheckbox.
ZetaChip
This covers the broad functionality of ZetaAssistChip, ZetaFilterChip and ZetaInputChip.
ZetaColorBase Theme
Default set of Zeta Colors that can be used to make a ZetaColors instance.
ZetaColors Theme
A customizable, token-based color palette, adapting Zeta colors to Flutter's colorScheme.
ZetaColorScheme Theme
Easily craft stunning Flutter themes using pre-set color patterns or your own choices.
ZetaColorSwatch Theme
A swatch of colors with values from 10 (light) to 100 (dark).
ZetaCommsButton Components
Comms button component. This component is used to display a button for communication action. Answer, reject, mute, hold, speaker, etc.
ZetaContactItem Components
A single row that contains avatar, title and subtitle.
ZetaDateInput Components
A form field used to input dates.
ZetaDebounce Utils
Debounce utility
ZetaDialPad Components
Dial pad gives the user the ability to dial a number and start a call. It also has a quick dial security action and a delete entry action.
ZetaDialPadButton
Individual button for ZetaDialPad.
ZetaDropdown<T> Components
Class for ZetaDropdown
ZetaDropdownItem<T> Components
An item used in a ZetaDropdown or a ZetaSelectInput.
ZetaDropdownListItem Components
An expandable list item containing other ZetaListItems within it.
ZetaDropDownState<T>
The state for a ZetaDropdown
ZetaFAB Components
Zeta Floating Action Button Component.
ZetaFilterChip Components
Filter chips have 2 togglable states, representing selected and not selected.
ZetaFilterSelection Components
Component ZetaFilterSelection
ZetaGlobalHeader Components
Global header component
ZetaGlobalHeaderItem Components
Tab item to be used in ZetaGlobalHeader.
ZetaGroupButton
Group Button item
ZetaIcon Components
Custom wrapper for Icon that applies the Zeta icon family.
ZetaIconButton Components
Component ZetaIconButton
ZetaIcons Assets
Zeta Icons. Full list of icons can be found at Zeta Icons.
ZetaIndicator Components
Indicators are used to show the status of a user or any messages/notifications they might have.
ZetaInPageBanner Components
In page banners display an important, succinct message, and may provide actions for users to address. Banners should be displayed at the top of the screen,below a top app bar. Only one banner should be shown at a time.
ZetaInputChip Components
Zeta Input Chip typically is used to associate some content or action with a user.
ZetaLabel Components
Text badges notify users of line items that need attention.
ZetaList Components
Used to apply dividers to a group of ZetaListItems.
ZetaListItem Components
A single row that typically contains some text as well as a leading or trailing widgets.
ZetaMenuItem Components
Menu Item component, typically used as body of ZetaBottomSheet.
ZetaNavigationBar Components
Navigation Bars (Bottom navigation) allow movement between primary destinations in an app.
ZetaNavigationBarItem
An item to be used in a ZetaNavigationBar.
ZetaNavigationRail Components
This widget provides a navigation rail for navigating between different sections of an app. It is designed to be used as a side navigation menu and can be customized with different icons and labels for each navigation item. Should be used with ZetaNavigationRailItem.
ZetaNavigationRailItem
Represents an item in the ZetaNavigationRail.
ZetaNotificationBadge
Badge item for notification list items. Can be an avatar, icon or image
ZetaNotificationListItem Components
Notification list items are used in notification lists.
ZetaPagination Components
Pagination is used to switch between pages.
ZetaPasswordInput Components
Zeta Password Input
ZetaPhoneInput Components
ZetaPhoneInput allows entering phone numbers.
ZetaPrimitives
Interface used for zeta color primitives
ZetaPrimitivesDark
Dark primitives
ZetaPrimitivesLight
Light primitives
ZetaPriorityPill Components
This badge is used to indicate the order of importance.
ZetaProgressBar Components
Progress indicators express an unspecified wait time or display the length of a process.
ZetaProgressCircle Components
Progress indicators express an unspecified wait time or display the length of a process.
ZetaProvider Utils
A widget that provides Zeta theming and contrast data down the widget tree.
ZetaProviderState Utils
The state associated with ZetaProvider.
ZetaPureColorSwatch
A swatch of colors with values 0 (light), 500 (medium) and 1000(dark).
ZetaRadiiAA
The semantic radii for AA
ZetaRadiiAAA
The semantic radii for AAA
ZetaRadiiSemantics
Semantic tokens for Radii.
ZetaRadio<T> Components
Radio buttons are used for mutually exclusive choices, not for multiple choices. Only one radio button can be selected at a time. When a user chooses a new item, the previous choice is automatically deselected.
ZetaRadius Theme
Semantic zeta radii.
ZetaRadiusBase Theme
Tokens that are used for Border Radius
ZetaRoundedScope Utils
Sets a default rounded value for all of its Zeta children.
ZetaScreenHeaderBar Components
ZetaScreenHeaderBar
ZetaSearchBar Components
ZetaSearchBar provides input field for searching.
ZetaSearchController
A controller used to control the search field in the app bar.
ZetaSegmentedControl<T> Components
A segmented control is a linear set of two or more segments, each of which functions as a mutually exclusive button. Like buttons, segments can contain text or images. Segmented controls are often used to display different views.
ZetaSelectInput<T> Components
Class for ZetaSelectInput.
ZetaSemanticColors
Semantic tokens for Colors.
ZetaSemanticColorsAA
The semantic colors for AA
ZetaSemanticColorsAAA
The semantic colors for AAA
ZetaSemantics
The semantic tokens for Zeta
ZetaSemanticsAA
The semantic tokens for AA
ZetaSemanticsAAA
The semantic tokens for AAA
ZetaSlidableAction
Slidable action widget for ZetaChatItem.
ZetaSlider Components
Slider component with customized styling.
ZetaSnackBar Components
A lightweight message with an optional action which briefly displays at the bottom of the screen.
ZetaSpacing Theme
Tokens that are used for spacing.
ZetaSpacingAA
The semantic sizes for AA
ZetaSpacingAAA
The semantic sizes for AAA
ZetaSpacingBase Theme
Tokens that are used for Spacing
ZetaSpacingSemantics
Semantic tokens for Size.
ZetaStatefulWidget Utils
Zeta Extension of StatefulWidget which adds rounded super parameter. Always use context.rounded to ensure correct value for rounded is used.
ZetaStatelessWidget Utils
Zeta Extension of StatelessWidget which adds rounded super parameter. Always use context.rounded to ensure correct value for rounded is used.
ZetaStatusLabel Components
To help some information, labels, or errors stand out, we present them with badges. They can look like buttons, but users can’t select them. They just guide users to things they should pay attention to.
ZetaStep
Zeta step used in ZetaStepper. The step can have a title and subtitle, an icon within its circle, some content and a state that governs its styling.
ZetaStepper Components
Zeta stepper widget that displays progress through a sequence of steps. Steppers are particularly useful in the case of forms where one step requires the completion of another one, or where multiple steps need to be completed in order to submit the whole form.
ZetaStepperInput Components
A stepper input, also called numeric stepper, is a common UI element that allows users to input a number or value simply by clicking the plus and minus buttons.
ZetaSwitch Components
Zeta Switch.
ZetaTab Components
Defines how the bounds of the selected tab indicator are computed. Intended to be used with ZetaTabBar.
ZetaTabBar Components
A Zeta Design primary tab bar.
ZetaTag Components
Tags are used to draw attention to a specific area or information. The arrow shape helps direct the users attention to the desired place.
ZetaTextInput Components
Text inputs allow the user to enter text.
ZetaTextStyles Theme
Typography in Zeta style.
ZetaThemeData Theme
A representation of the Zeta theme data.
ZetaThemeService Theme
ZetaThemeService is an abstract class. It provides the structure for loading and saving themes in Zeta application.
ZetaTimeInput Components
A form field used to input time.
ZetaTooltip Components
Tooltips display informative text when users hover over, focus on, or tap an element.
ZetaTopAppBar Components
Top app bars provide content and actions related to the current screen.

Enums

DeviceType
Enum to define device types.
ZetaAvatarBadgeType
Enum of types for ZetaAvatarBadge
ZetaAvatarSize
ZetaAvatar size
ZetaBannerStatus
ZetaBanner type
ZetaButtonType
Shared enum for type of buttons.
ZetaCircleSizes
Sizes for ZetaProgressCircle
ZetaCommsButtonType
Enum for the type of comms button.
ZetaContrast
ZetaAccessibilityStandard is an enumeration that defines the Web Content Accessibility Guidelines (WCAG) 2.1. It includes two levels of conformance: AA (minimum) and AAA (enhanced).
ZetaDialogHeaderAlignment
ZetaDialogHeaderAlignment
ZetaDropdownMenuType
Sets the type of a ZetaDropdown
ZetaDropdownSize
Used to set the size of a ZetaDropdown
ZetaFabSize
Defines the size of the floating action button
ZetaFabType
Color type for ZetaFAB.
ZetaFormFieldRequirement
The requirement options for a Form Field.
ZetaIndicatorType
ZetaIndicator type.
ZetaMenuItemType
The type of the ZetaMenuItem
ZetaPaginationType
The type of a ZetaPagination
ZetaPriorityPillSize
The size of ZetaPriorityPill.
ZetaPriorityPillType
The type of ZetaPriorityPill; determines the default ZetaPriorityPill.customColor, ZetaPriorityPill.index and ZetaPriorityPill.label.
ZetaProgressBarType
Enum for types of progress bar.
ZetaSnackBarType
Type used to define contextual SnackBar. The type defines the styles, icons and behavior.
ZetaStepperInputSize
Sizes for ZetaStepperInput
ZetaStepperType
Defines the ZetaStepper's main axis.
ZetaStepType
The type of a ZetaStep which is used to control the style of the circle and text.
ZetaSwitchType
Variants of ZetaSwitch.
ZetaTagDirection
Tag Direction options for ZetaTag.
ZetaTooltipArrowDirection
The direction of ZetaTooltip's arrow
ZetaTopAppBarType
Defines the style of the app bar.
ZetaWidgetBorder
Border options for ZetaButton.
ZetaWidgetSize
Size options for ZetaIndicator, ZetaButton, ZetaPasswordInput.
ZetaWidgetStatus
Status options for ZetaLabel, ZetaStatusLabel, ZetaInPageBanner.

Extensions

AccessibilityIndices on ZetaContrast
Extension on ZetaContrast to provide color indices for certain accessibility scenarios
BorderFunctions on ZetaWidgetBorder
Border utility functions
BreakpointFull on BuildContext
Utils to determine the DeviceType from the current context.
BreakpointLocal on BoxConstraints
Utils to determine the DeviceType from some box constraints.
ButtonFunctions on ZetaButtonType
Button utility functions for styling
ColorSwatches on ZetaWidgetStatus
Extensions on ZetaWidgetStatus.
IconExtensions on IconData
Custom extension for IconData that applies the Zeta icon family.
ListDivider on Iterable<Widget>
Extension to add dividers to any view that can take an iterable.
NumExtensions on num?
Extensions on num.
Rounded on BuildContext
Extension used on BuildContext to get rounded.
SpacingWidget on Widget
Extension to add spacing to any Widget.
StringExtensions on String?
Extensions on String.
ZetaColorExtensions on Color
Extensions on Color to brighten, lighten, darken and blend colors and can get a shade for gradients.
ZetaColorGetters on ColorScheme
Custom extension on ColorScheme which makes ZetaColors available through theme context.

Constants

icons → const Map<String, IconData>
List of all icons.
kZetaFontFamily → const String
Default font family for Zeta System.
kZetaIconSize → const double
Default icon size for Zeta System.
kZetaSwatchPrimaryIndex → const int
Primary color shade index for ZetaColorSwatch.
kZetaSwatchTargetContrasts → const Map<int, double>
Target contrast values for different color shades of ZetaColorSwatch.
zetaIconsVersion → const String
Current version of Zeta Icons
zetaTextTheme → const TextTheme Theme
ZetaTextStyles combined into a TextTheme. {@category Theme}

Properties

allPrimitives ↔ Map<String, Type>
All primitives
getter/setter pair

Functions

buttonStyle(BuildContext context, ZetaWidgetBorder borderType, ZetaButtonType type, Color? backgroundColor) → ButtonStyle
Shared buttonStyle for buttons and icon buttons
generateZetaTheme({required Brightness brightness, required ColorScheme colorScheme, ThemeData? existingTheme, String? fontFamily, ZetaThemeData? zetaThemeData}) → ThemeData
Creates a variant of ThemeData with added Zeta styles.
showZetaBottomSheet<T>({required BuildContext context, String? title, Widget? body, bool centerTitle = true, bool isDismissible = true, bool enableDrag = true}) → Future<T?>
Function to show ZetaBottomSheet.
showZetaDialog(BuildContext context, {ZetaDialogHeaderAlignment headerAlignment = ZetaDialogHeaderAlignment.center, Widget? icon, String? title, required String message, String? primaryButtonLabel, VoidCallback? onPrimaryButtonPressed, String? secondaryButtonLabel, VoidCallback? onSecondaryButtonPressed, String? tertiaryButtonLabel, VoidCallback? onTertiaryButtonPressed, bool? rounded, bool barrierDismissible = true, bool useRootNavigator = true}) → Future<bool?>
Function to show a Zeta dialog.

Typedefs

AppBarSearchController = ZetaSearchController
A controller used to control the search field in the app bar.
Class for _BreadCrumbsTruncated
CirclePainter = _CirclePainter
Class definition for CirclePainter
SliderThumb = _SliderThumb
Custom slider thumb component
ZetaAppBuilder = Widget Function(BuildContext context, ZetaThemeData themeData, ThemeMode themeMode)
A typedef for the ZetaAppBuilder function which passes BuildContext, ZetaThemeData, and ThemeMode and returns a Widget.
ZetaBadge = ZetaLabel
Zeta Badge.
ZetaBaseAppBuilder = Widget Function(BuildContext context, ThemeData light, ThemeData dark, ThemeMode themeMode)
A typedef for the ZetaAppBuilder function which passes BuildContext, light ThemeData, dark ThemeData and ThemeMode and returns a Widget.
ZetaColorSemantics = ZetaSemanticColors
Zeta Semantic colors object.
ZetaProgressCircleState = _ZetaProgressCircleState
Class definition for _ZetaProgressCircleState
ZetaSystemBanner = ZetaBanner
Zeta Banner. Extends MaterialBanner.
ZetaSystemBannerStatus = ZetaBannerStatus
ZetaBanner type.