zeta_components library
Zeta Flutter components.
See Figma.
Classes
- ZetaAccordion
- 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.
- ZetaAssistChip
- Leading widget should typically be an icon.
- ZetaAvatar
- An avatar is a visual representation of a user or entity.
- ZetaAvatarBadge
- Badge component used with ZetaAvatar as either ZetaAvatar.upperBadge or ZetaAvatar.lowerBadge.
- ZetaAvatarRail
- A stateless widget that represents an avatar rail in the Zeta application.
- ZetaBottomSheet
- Bottom sheets are surfaces containing supplementary content that are anchored to the bottom of the screen.
- ZetaBreadcrumb
- The breadcrumb is a secondary navigation pattern that helps a user understand the hierarchy among levels and navigate back through them.
- ZetaBreadcrumbItem
- Class for untruncated ZetaBreadcrumbItem.
- ZetaButton
- Zeta Button
- ZetaButtonGroup
- Zeta Button Group
-
ZetaButtonSegment<
T> - Data describing a segment of a ZetaSegmentedControl.
- ZetaChatItem
- Chat item widget that can be dragged to reveal contextual actions.
- ZetaCheckbox
- 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.
- ZetaCommsButton
- Comms button component. This component is used to display a button for communication action. Answer, reject, mute, hold, speaker, etc.
- ZetaContactItem
- A single row that contains avatar, title and subtitle.
- ZetaDateInput
- A form field used to input dates.
- ZetaDialog
- The Zeta Dialog component.
- ZetaDialPad
- 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> - Class for ZetaDropdown
-
ZetaDropdownItem<
T> - An item used in a ZetaDropdown or a ZetaSelectInput.
- ZetaDropdownListItem
- An expandable list item containing other ZetaListItems within it.
-
ZetaDropDownState<
T> - The state for a ZetaDropdown.
- ZetaFAB
- Zeta Floating Action Button Component.
- ZetaFilterChip
- Filter chips have 2 togglable states, representing selected and not selected.
- ZetaFilterSelection
- Component ZetaFilterSelection
- ZetaGlobalHeader
- Global header component This component should not be used as an appbar in a scaffold. It can be used in custom scroll views and columns.
- ZetaGlobalHeaderItem
- Tab item to be used in ZetaGlobalHeader.
- ZetaGroupButton
- Group Button item.
- ZetaIcon
- Custom wrapper for Icon that applies the Zeta icon family.
- ZetaIconButton
- Component ZetaIconButton
- ZetaIndicator
- Indicators are used to show the status of a user or any messages/notifications they might have.
- ZetaInPageBanner
- 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
- Zeta Input Chip typically is used to associate some content or action with a user.
- ZetaLabel
- Text badges notify users of line items that need attention.
- ZetaList
- Used to apply dividers to a group of ZetaListItems.
- ZetaListItem
- A single row that typically contains some text as well as a leading or trailing widgets.
- ZetaMenuItem
- Menu Item component, typically used as body of ZetaBottomSheet.
- Navigation Bars (Bottom navigation) allow movement between primary destinations in an app.
- An item to be used in a ZetaNavigationBar.
- 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.
- Represents an item in the ZetaNavigationRail.
- ZetaNotificationBadge
- Badge item for notification list items. Can be an avatar, icon or image
- ZetaNotificationListItem
- Notification list items are used in notification lists.
- ZetaPagination
- Pagination is used to switch between pages.
- ZetaPasswordInput
- Zeta Password Input
- ZetaPhoneInput
- ZetaPhoneInput allows entering phone numbers.
- ZetaPriorityPill
- This badge is used to indicate the order of importance.
- ZetaProgressBar
- Progress indicators express an unspecified wait time or display the length of a process.
- ZetaProgressCircle
- Progress indicators express an unspecified wait time or display the length of a process.
-
ZetaRadio<
T> - 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.
- ZetaRangeSelector
- The ZetaRangeSelector is a customizable range selector widget that allows users to select a range of values within a specified minimum and maximum range. It provides a visual representation of the selected range and allows for precise adjustments through both dragging and direct input.
- ZetaScreenHeaderBar
- A screen header bar that contains a back button, title and an optional action button.
- ZetaSearchBar
- ZetaSearchBar provides input field for searching.
- ZetaSearchController
- A controller used to control the search field in the app bar.
-
ZetaSegmentedControl<
T> - 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> - Class for ZetaSelectInput.
- ZetaSlidableAction
- Slidable action widget for ZetaChatItem.
- ZetaSlider
- Slider component with customized styling.
- ZetaSnackBar
- A lightweight message with an optional action which briefly displays at the bottom of the screen.
- ZetaStatusChip
- The ZetaStatusChip is a chip that displays a status/label. It can be dragged around the screen and placed in new locations using DragTarget.
- ZetaStatusLabel
- 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
- 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
- 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
- Zeta Switch.
- ZetaSystemBanner
- 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.
- ZetaTab
- Defines how the bounds of the selected tab indicator are computed. Intended to be used with ZetaTabBar.
- ZetaTabBar
- A Zeta Design primary tab bar.
- ZetaTag
- 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
- Text inputs allow the user to enter text.
- ZetaTimeInput
- A form field used to input time.
- ZetaTooltip
- Tooltips display informative text when users hover over, focus on, or tap an element.
- ZetaTopAppBar
- Top app bars provide content and actions related to the current screen.
Enums
- ZetaAvatarBadgeType
- Enum of types for ZetaAvatarBadge
- ZetaAvatarSize
- ZetaAvatar size
- ZetaButtonType
- Shared enum for type of buttons.
- ZetaCircleSizes
- Sizes for ZetaProgressCircle
- ZetaCommsButtonType
- Enum for the type of comms button.
- ZetaDialogHeaderAlignment
- ZetaDialogHeaderAlignment
- ZetaFabSize
- Defines the size of the floating action button
- ZetaFabType
- Color type for ZetaFAB.
- 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.
- ZetaSwitchType
- Variants of ZetaSwitch.
- ZetaSystemBannerStatus
- ZetaSystemBanner type
- ZetaTagDirection
- Tag Direction options for ZetaTag.
- ZetaTooltipArrowDirection
- The direction of ZetaTooltip's arrow
- ZetaTopAppBarType
- Defines the style of the app bar.
Extensions
- IconExtensions on IconData
- Custom extension for IconData that applies the Zeta icon family.
Functions
-
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, }) → Future< bool?> - Function to show a Zeta dialog.