garnish_ui library

Garnish UI - A premium, brand-agnostic Flutter UI component library.

This library provides a complete set of customizable, accessible UI components for Flutter applications. Unlike Material Design or Cupertino widgets, Garnish UI is designed to be fully themeable and brand-agnostic.

Getting Started

Wrap your app with GarnishApp:

import 'package:garnish_ui/garnish_ui.dart';

void main() {
  runApp(
    GarnishApp(
      theme: GarnishTheme.light(),
      darkTheme: GarnishTheme.dark(),
      child: MyApp(),
    ),
  );
}

Use components:

GarnishButton(
  onPressed: () => print('Pressed!'),
  variant: GarnishButtonVariant.primary,
  child: Text('Click me'),
)

Component Categories

Buttons: GarnishButton, GarnishIconButton
Inputs: GarnishTextField, GarnishTextArea, GarnishCheckbox, etc.
Cards: GarnishCard
Dialogs: GarnishDialog, GarnishBottomSheet, GarnishSnackbar
Navigation: GarnishNavBar, GarnishBreadcrumb, GarnishBottomNav

Theming

Create custom themes using GarnishTheme and GarnishThemeData:

final myTheme = GarnishTheme.light().copyWith(
  colors: GarnishColors.light().copyWith(
    primary: Color(0xFF6366F1),
  ),
);

Classes

GarnishAccordion: A customizable accordion/expansion panel for Garnish UI.
GarnishAccordionItem: Represents an item in a GarnishAccordion.
GarnishAccordionStyle: Style configuration for GarnishAccordion.
GarnishAlert: A customizable alert/notification component for Garnish UI.
GarnishAnimated: A widget that applies GarnishAnimation to its child.
GarnishAnimation: The core animation system for Garnish UI.
GarnishAnimationConfig: Configuration options for specific animation types.
GarnishAnimationController: Controller for advanced animation control (play, reverse, reset).
GarnishApp: The root widget for a Garnish UI application.
GarnishAvatar: A customizable avatar widget for Garnish UI.
GarnishAvatarBadge: A status badge for avatars.
GarnishAvatarGroup: A group of overlapping avatars.
GarnishBadge: A customizable badge/chip component for Garnish UI.
GarnishBottomNav: A customizable bottom navigation bar for Garnish UI.
GarnishBottomNavItem: Represents an item in a GarnishBottomNav.
GarnishBottomNavStyle: Style configuration for GarnishBottomNav.
GarnishBottomSheet: A bottom sheet widget for Garnish UI.
GarnishBottomSheetContainer: Container for showing Garnish bottom sheets.
GarnishBreadcrumb: A customizable breadcrumb navigation component for Garnish UI.
GarnishBreadcrumbItem: Represents a single item in a GarnishBreadcrumb.
GarnishBreadcrumbStyle: Style configuration for GarnishBreadcrumb.
GarnishButton: A customizable button widget for Garnish UI.
GarnishButtonDefaults: Provides default button styles based on variant, size, and theme.
GarnishButtonStyle: Defines the visual properties for GarnishButton components.
GarnishCard: A customizable card container for Garnish UI.
GarnishCardDefaults: Provides default card styles based on variant and theme.
GarnishCardStyle: Defines the visual properties for GarnishCard components.
GarnishCarousel: A customizable carousel/slider component for Garnish UI.
GarnishCarouselStyle: Style configuration for GarnishCarousel.
GarnishChartStyle: Defines the visual properties for chart components (Graph, PieChart).
GarnishCheckbox: A customizable checkbox widget for Garnish UI.
GarnishColors: Defines the color palette for Garnish UI components.
GarnishColorUtils: High-performance color utilities with LRU caching.
GarnishComputedValue<T>: A computed value that combines multiple ValueListenables.
GarnishController<T>: Base controller class for Garnish UI components.
GarnishCurves: Defines animation curves for Garnish UI components.
GarnishDatePicker: A customizable date picker for Garnish UI.
GarnishDatePickerStyle: Style configuration for GarnishDatePicker.
GarnishDialog: A customizable dialog overlay for Garnish UI.
GarnishDialogContainer: A container widget that displays dialogs using an overlay.
GarnishDialogDefaults: Provides default dialog styles based on size and theme.
GarnishDialogStyle: Defines the visual properties for GarnishDialog components.
GarnishDivider: A divider component for separating content.
GarnishDrawer: A customizable drawer navigation for Garnish UI.
GarnishDrawerItem: Represents an item in a GarnishDrawer.
GarnishDurations: Defines animation durations for Garnish UI components.
GarnishEmptyState: A customizable empty state component for Garnish UI.
GarnishFieldController<T>: Controller for a single form field.
GarnishFormController: A form state manager that works with any state management solution.
GarnishFormProvider: A widget that provides form state to its descendants.
GarnishGap: A const gap widget for consistent spacing.
GarnishGraph: A customizable line or bar graph for Garnish UI.
GarnishGraphPoint: A single data point for GarnishGraph.
GarnishHGap: Horizontal gap widget for use in Row and horizontal layouts.
GarnishIconButton: An icon-only button widget for Garnish UI.
GarnishListTile: A customizable list tile for Garnish UI.
GarnishListTileStyle: Style configuration for GarnishListTile.
GarnishLoadingController: Controller for loading state management.
GarnishMultiSelectionController<T>: Controller for multi-selection components.
GarnishMultiValueBuilder: A builder that reacts to multiple Listenables.
GarnishNavBar: A customizable navigation bar for Garnish UI.
GarnishNavBarDefaults: Provides default nav bar styles based on variant and theme.
GarnishNavBarStyle: Defines the visual properties for GarnishNavBar components.
GarnishNumberController: Controller for numeric value components (Slider).
GarnishPieChart: A customizable pie chart for Garnish UI.
GarnishPieSlice: A single slice of a GarnishPieChart.
GarnishProgress: A customizable progress indicator for Garnish UI.
GarnishRadii: Defines the border radius values for Garnish UI components.
GarnishRadio<T>: A customizable radio button widget for Garnish UI.
GarnishRadioGroup<T>: A group of radio buttons for selecting a single value.
GarnishRangeSlider: A range slider for selecting a range of values.
GarnishResponsiveBuilder: A widget that builds different layouts based on screen size.
GarnishSelect<T>: A customizable dropdown select widget for Garnish UI.
GarnishSelectionController<T>: Controller for selection components (Select, Radio group).
GarnishSelectOption<T>: An option for GarnishSelect.
GarnishShadows: Defines shadow styles for Garnish UI components.
GarnishSkeleton: A skeleton/shimmer loader for placeholder content.
GarnishSkeletonLoader: A placeholder skeleton for loading states.
GarnishSlider: A customizable slider widget for Garnish UI.
GarnishSnackbar: A temporary notification widget for Garnish UI.
GarnishSnackbarContainer: Container for showing Garnish snackbars.
GarnishSpacing: Defines the spacing scale for Garnish UI components.
GarnishStyledAccordion: An accordion/expandable section that adapts its appearance based on the style category.
GarnishStyledAlert: An alert/notification box that adapts its appearance based on the style category.
GarnishStyledAvatar: An avatar that adapts its appearance based on the style category.
GarnishStyledBadge: A badge that adapts its appearance based on the style category.
GarnishStyledButton: A button that adapts its appearance based on the style category.
GarnishStyledCard: A card that adapts its appearance based on the style category.
GarnishStyledCheckbox: A checkbox that adapts its appearance based on the style category.
GarnishStyledContainer: A container that adapts its appearance based on the style category.
GarnishStyledDivider: A divider that adapts its appearance based on the style category.
GarnishStyledGraph: A graph (line/bar) that adapts its appearance based on the style category.
GarnishStyledIconButton: An icon button that adapts its appearance based on the style category.
GarnishStyledInput: An input field that adapts its appearance based on the style category.
GarnishStyledPieChart: A pie chart that adapts its appearance based on the style category.
GarnishStyledProgress: A progress indicator that adapts its appearance based on the style category.
GarnishStyledRadio<T>: A radio button that adapts its appearance based on the style category.
GarnishStyledSlider: A slider that adapts its appearance based on the style category.
GarnishStyledSwitch: A switch that adapts its appearance based on the style category.
GarnishStyledTextArea: A text area that adapts its appearance based on the style category.
GarnishStyledTooltip: A tooltip that adapts its appearance based on the style category.
GarnishStylePresets: Style presets for each category.
GarnishSwitch: A customizable toggle switch widget for Garnish UI.
GarnishTab: Represents a single tab in a GarnishTabBar.
GarnishTabBar: A customizable tab bar for Garnish UI.
GarnishTabBarDefaults: Provides default tab bar styles.
GarnishTabBarStyle: Defines the visual properties for GarnishTabBar components.
GarnishTable<T>: A customizable data table for Garnish UI.
GarnishTableColumn<T>: Definition of a table column.
GarnishTableStyle: Style configuration for GarnishTable.
GarnishTextArea: A multi-line text input widget for Garnish UI.
GarnishTextController: Controller for text input components.
GarnishTextField: A customizable text input field for Garnish UI.
GarnishTextFieldDefaults: Provides default text field styles based on variant, size, and theme.
GarnishTextFieldStyle: Defines the visual properties for GarnishTextField components.
GarnishTheme: Provides static methods to create themed GarnishThemeData instances.
GarnishThemeData: Defines the visual properties for Garnish UI components.
GarnishThemeProvider: Provides a GarnishThemeData to descendant widgets.
GarnishTimePicker: A customizable time picker for Garnish UI.
GarnishTimePickerStyle: Style configuration for GarnishTimePicker.
GarnishToggleController: Controller for boolean toggle components (Checkbox, Switch).
GarnishTooltip: A customizable tooltip widget for Garnish UI.
GarnishTristateController: Controller for tristate checkbox (checked, unchecked, indeterminate).
GarnishTypography: Defines the typography styles for Garnish UI components.
GarnishValidators: Common validators for form fields.
GarnishValueBuilder<T>: A builder that reacts to any ValueListenable.
GarnishValueSelector<T, S>: A selector that extracts a specific value from a ValueListenable.
GarnishVGap: Vertical gap widget for use in Column and vertical layouts.
InteractionBuilder: A widget that efficiently rebuilds when interaction state changes.
InteractionState: A high-performance interaction state tracker.
KAvatarColors: Default palette for avatar initials (by name hash).
KAvatarSizes: Avatar size constants.
KBadgeDotSizes: Badge dot size constants (for GarnishBadgeSize).
KBreakpoints: Responsive breakpoint constants.
KButtonSizes: Button size constants.
KChart: Chart layout and styling constants (Graph, PieChart).
KChartColors: Default palette for pie chart slices (when slice color is null).
KColors: Common color constants used across components.
KControlSizes: Checkbox and radio size constants.
KCurves: Compile-time animation curve constants.
KDialog: Dialog default dimensions.
KDurations: Core constants for Garnish UI components.
KElevation: Elevation/shadow level constants.
KIconSizes: Icon size constants.
KOpacity: Generic opacity constants for overlays, dividers, and text.
KProgress: Progress indicator default dimensions.
KRadii: Compile-time border radius constants.
KSpacing: Compile-time spacing constants (in logical pixels).
KStroke: Border/stroke width constants.
KSwitchSizes: Switch size constants.
KTooltip: Tooltip layout constants.
ResponsiveValue<T>: A responsive value that changes based on screen size.
TimeOfDay: Represents a time of day.

Enums

DayPeriod: Day period (AM/PM).
GarnishAlertSeverity: Alert severity levels.
GarnishAlertVariant: Alert visual variants.
GarnishAnimationType: Types of preset animations available in Garnish UI.
GarnishAvatarShape: The shape of a GarnishAvatar.
GarnishAvatarSize: The size of a GarnishAvatar.
GarnishBadgeSize: Badge/Chip sizes available in Garnish UI.
GarnishBadgeVariant: Badge/Chip variants available in Garnish UI.
GarnishBottomSheetSize: The size/height of a GarnishBottomSheet.
GarnishButtonSize: The size of a GarnishButton.
GarnishButtonVariant: The visual variant of a GarnishButton.
GarnishCardVariant: The visual variant of a GarnishCard.
GarnishCheckboxSize: The size of a GarnishCheckbox.
GarnishDialogSize: The size variant of a GarnishDialog.
GarnishGraphVariant: Graph display variant: line chart or bar chart.
GarnishIconButtonSize: The size of a GarnishIconButton.
GarnishIconButtonVariant: The visual variant of a GarnishIconButton.
GarnishNavBarVariant: The visual variant of a GarnishNavBar.
GarnishProgressVariant: Progress indicator variants available in Garnish UI.
GarnishRadioSize: The size of a GarnishRadio.
GarnishSnackbarPosition: The position of a GarnishSnackbar.
GarnishSnackbarVariant: The visual variant of a GarnishSnackbar.
GarnishStyleCategory: Visual style categories for Garnish UI components.
GarnishStyledAlertType: Alert types for GarnishStyledAlert.
GarnishSwitchSize: The size of a GarnishSwitch.
GarnishTextFieldSize: The size of a GarnishTextField.
GarnishTextFieldVariant: The visual variant of a GarnishTextField.
GarnishTimeFormat: Time format options.
GarnishTooltipPosition: The position of a GarnishTooltip.
ThemeMode: Enum to control which theme is used.

Mixins

GarnishInteractionMixin<T extends StatefulWidget>: Mixin that provides optimized interaction state handling.

Extensions

GarnishAnimationExtension on Widget: Extension to easily wrap any widget with Garnish animation.
GarnishResponsive on BuildContext: Extension on BuildContext for responsive utilities.
GarnishStyleCategoryExtension on GarnishStyleCategory: Extension to apply style categories to decorations.
GarnishValueNotifierExtensions on ValueNotifier<T>: Extension methods for working with ValueNotifier.
StreamToValueListenable on Stream<T>: Extension to create a ValueListenable from a stream.

Functions

lerpDouble(double a, double b, double t) → double?: Linear interpolation between two doubles.
showGarnishDialog<T>({required BuildContext context, required WidgetBuilder builder, bool barrierDismissible = true, GarnishDialogStyle? style}) → Future<T?>: Shows a GarnishDialog as a modal overlay.

Typedefs

GarnishChip = GarnishBadge: Alias for GarnishBadge for semantic clarity when used as a chip.
GarnishValidator<T> = String? Function(T value): A validation function that returns an error message or null.

Exceptions / Errors

GarnishFormValidationException: Exception thrown when form validation fails.

garnish_ui library

Getting Started

Component Categories

Theming

Classes

Enums

Mixins

Extensions

Functions

Typedefs

Exceptions / Errors

garnish_ui package

garnish_ui library