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.
- ZetaAccordionItem
- A single item within a ZetaAccordion.
- ZetaAssistChip
- Chips that are clickable, selectable and draggable.
- ZetaAudioVisualizer
- Audio Visualizer used within the ZetaVoiceMemo component.
- 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 rail containing 0 or more Avatars that can be scrolled horizontally.
- ZetaBaseCard
- Base Card component, used to construct ZetaCardContainer and ZetaCollapsibleCardContainer.
- 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
- Buttons are used to trigger actions.
- ZetaButtonGroup
- Button groups are used to group related buttons together. They can be used to create a toolbar or a set of related actions.
-
ZetaButtonSegment<
T> - Data describing a segment of a ZetaSegmentedControl.
- ZetaCardContainer
- A card component with a header and optional content.
- ZetaCardHeader
- Card Header for the ZetaCardContainer and ZetaCollapsibleCardContainer.
- ZetaChatItem
- The chat list items and chat lists are used in communication feeds and contact lists.
- 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.
- ZetaCollapsibleCardContainer
- A collapsible card component with a header and optional content.
- ZetaCommsButton
- Round buttons used for communication actions like call, video, mute, etc.
- ZetaContactItem
- A single row that contains avatar, title and subtitle.
- ZetaDateInput
- A text input field for entering dates.
- ZetaDialog
- A popup dialog used to convey a message to the user.
- 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> - Dropdown menus allow users to select an option from a list that appears when the menu is clicked or tapped.
-
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.
- ZetaEmptyState
- Empty states are used to convey there is no data is available for display. Types include No results, First use, No Data, User Cleared.
- ZetaFAB
- Floating Action Buttons are used to trigger the primary action on a screen. They are circular buttons that float above the content.
- ZetaFilterChip
- Chips that are used to filter content, that are clickable, selectable and draggable. They have a default and active state.
- ZetaFilterSelection
- A bar containing Filter Chips.
- 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; automatically applying the correct font family based on the rounded property.
- ZetaIconButton
- Icon buttons are used to trigger actions with an icon.
- 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
- A chip used to show input data, typically 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
- An item in a list comprised of a single row, typically containing some text as well as 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
- Buttons or a dropdown for navigating between pages.
- ZetaPasswordInput
- A text input field for entering passwords.
- ZetaPhoneInput
- A text input field for 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
- Used for selecting values in a numerical range.
- ZetaScreenHeaderBar
- A header bar for screens, typically containing the title and actions.
- ZetaSearchBar
- A text input field for entering search queries.
- 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> - A text input field for selecting from a list of options.
- ZetaSlidableAction
- Slidable action widget for ZetaChatItem.
- ZetaSlider
- Sliders allow users to make selections from a range of values.
- ZetaSnackBar
- Snackbars provide brief messages about app processes at the bottom of the screen.
- ZetaStatusChip
- A chip that looks like a label.
- 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
- Steppers convey progress through numbered steps.
- 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
- Switches toggle the state of a single item ON or OFF.
- 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
- Tabs are used to show different views or sections of content within the same context.
- ZetaTabBar
- Tabs are used to show different views or sections of content within the same context.
- 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
- A text input field for entering text.
- ZetaTileButton
- A large, tappable button with an icon stacked above a label. Ideal for grid layouts, dashboards, or mobile interfaces where quick, visually distinct actions are needed.
- ZetaTimeInput
- A text input field for entering times.
- 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.
- ZetaVoiceMemo
- A slide-up sheet that appears when recording a voice message in chat. It shows the recording time, waveform, and buttons to stop, send, or cancel the memo.
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
- ZetaDropdownMenuPosition
- Enum possible menu positions
- 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.
- ZetaPriorityPillStatus
- 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.
Typedefs
- ZetaPriorityPillType = ZetaPriorityPillStatus
- The type of ZetaPriorityPill; determines the default ZetaPriorityPill.customColor, ZetaPriorityPill.index and ZetaPriorityPill.label.