garnish_ui 0.5.3

A premium, brand-agnostic Flutter UI component library with built-in animations, 5 visual style categories, fully customizable theming, and 40+ accessible components.

Garnish UI

A premium, brand-agnostic Flutter UI component library with built-in animations and 5 visual style categories.

What Makes Garnish UI Unique?

Every component can be animated with one line of code.

GarnishButton(
  animation: GarnishAnimation.fadeSlideUp(),  // That's it!
  onPressed: () {},
  child: Text('Animated Button'),
)

5 Visual Style Categories — Minimal, Material, Neumorphism, Glassmorphism, Brutalism

Features

• Built-in Animation System — 10 preset animations, fully customizable
• 5 Style Categories — Apply different visual styles globally or per-component
• Fully Customizable Theming — Complete control over colors, typography, spacing
• Dark Mode Ready — First-class dark theme support
• No Material Dependencies — Clean separation from Material Design
• Accessibility First — Built with screen readers and keyboard navigation in mind
• 40+ Production-Ready Components — Comprehensive component library

Installation

Add garnish_ui to your pubspec.yaml:

dependencies:
  garnish_ui: ^0.5.2

Then run:

flutter pub get

Quick Start

1. Wrap your app with GarnishApp

import 'package:garnish_ui/garnish_ui.dart';

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

2. Use components

GarnishButton(
  onPressed: () {},
  variant: GarnishButtonVariant.primary,
  size: GarnishButtonSize.medium,
  animation: GarnishAnimation.scale(),
  child: Text('Get Started'),
)

Components

Buttons

Component	Description
GarnishButton	Primary action button with multiple variants (primary, secondary, outlined, ghost, destructive)
GarnishIconButton	Icon-only button for toolbars and compact UIs

Inputs & Controls

Component	Description
GarnishTextField	Text input with validation, icons, and states
GarnishTextArea	Multi-line text input with auto-resize
GarnishCheckbox	Toggle selection control
GarnishRadio	Radio button for single selection
GarnishSwitch	Toggle switch with labels
GarnishSelect	Dropdown selection with search
GarnishSlider	Range slider with custom marks
GarnishDatePicker	Calendar date selection
GarnishTimePicker	Time selection (12/24 hour format)

Layout & Structure

Component	Description
GarnishCard	Container with elevation and variants
GarnishAccordion	Collapsible content sections
GarnishCarousel	Horizontal slider with auto-play
GarnishStyledContainer	Multi-style container supporting all 5 style categories

Data Display

Component	Description
GarnishAvatar	User profile pictures with initials fallback
GarnishTooltip	Contextual hover information
GarnishBadge	Status indicators, tags, and notification dots
GarnishProgress	Linear and circular progress indicators
GarnishListTile	Consistent list items with leading/trailing
GarnishTable	Data table with sorting and selection
GarnishDivider	Content separators (horizontal/vertical)
GarnishGraph	Line and bar charts with style categories
GarnishPieChart	Pie and donut charts with style categories

Feedback & Overlays

Component	Description
GarnishDialog	Modal dialog overlay
GarnishBottomSheet	Bottom slide-up panel
GarnishSnackbar	Temporary notification toast
GarnishAlert	Contextual feedback (info, success, warning, error)
GarnishEmptyState	Placeholder for empty data states
GarnishSkeleton	Shimmer loading placeholders

Navigation

Component	Description
GarnishNavBar	Top navigation bar with tabs
GarnishBreadcrumb	Hierarchical navigation trail
GarnishBottomNav	Mobile bottom navigation with badges

Core Utilities (state-agnostic)

Utility	Description
GarnishApp	Root widget providing theme and dark mode (wrap your app)
GarnishFormController	Form state, validation, and submission without a specific state library
GarnishValueBuilder	React to any ValueListenable (works with Provider, Riverpod, Bloc, etc.)
GarnishResponsiveBuilder	Build different layouts for mobile, tablet, desktop
GarnishValidators	Built-in validators (required, email, minLength, etc.) for forms

Style Categories

Apply different visual aesthetics to your components:

GarnishStyledContainer(
  styleCategory: GarnishStyleCategory.glassmorphism,
  child: Text('Frosted Glass Effect'),
)

Minimal

Clean and flat with focus on typography and spacing.

Material

Subtle elevation and depth with clear hierarchy.

Neumorphism

Soft shadows creating a tactile, extruded feel.

Glassmorphism

Frosted glass effect with blur and transparency.

Brutalism

Bold borders and raw, unpolished aesthetic.

Animation System

Preset Animations

GarnishAnimation.fadeIn()         // Simple opacity fade
GarnishAnimation.fadeSlideUp()    // Slide up with fade
GarnishAnimation.fadeSlideDown()  // Slide down with fade
GarnishAnimation.fadeSlideLeft()  // Slide left with fade
GarnishAnimation.fadeSlideRight() // Slide right with fade
GarnishAnimation.scale()          // Grow from center
GarnishAnimation.bounce()         // Elastic scale effect
GarnishAnimation.pulse()          // Breathing/pulse effect
GarnishAnimation.shake()          // Error/attention wiggle
GarnishAnimation.flip()           // 3D rotation flip

Customization

GarnishAnimation.fadeSlideUp(
  duration: Duration(milliseconds: 400),
  curve: Curves.easeOutCubic,
  delay: Duration(milliseconds: 100),
)

Staggered Lists

Column(
  children: items.asMap().entries.map((entry) {
    return GarnishCard(
      animation: GarnishAnimation.fadeSlideUp().staggered(entry.key),
      child: Text(entry.value),
    );
  }).toList(),
)

Triggering Animations

Create the animation, pass it to any component, then call trigger() to replay.

// 1. Create the animation
final shake = GarnishAnimation.shake(animateOnMount: false);

// 2. Use it on any component
GarnishTextField(
  label: 'Email',
  animation: shake,
)

// 3. Trigger it anytime
shake.trigger();

Same animation on multiple widgets:

final errorShake = GarnishAnimation.shake(animateOnMount: false);

GarnishTextField(label: 'Email', animation: errorShake)
GarnishTextField(label: 'Password', animation: errorShake)

// Trigger all at once
errorShake.trigger();

Theming

Create custom themes by extending GarnishThemeData:

final myTheme = GarnishTheme.light().copyWith(
  colors: GarnishColors(
    primary: Color(0xFF6366F1),
    secondary: Color(0xFF8B5CF6),
    surface: Color(0xFFFFFFFF),
    background: Color(0xFFF8FAFC),
    error: Color(0xFFEF4444),
    success: Color(0xFF22C55E),
    warning: Color(0xFFF59E0B),
    info: Color(0xFF3B82F6),
    onPrimary: Color(0xFFFFFFFF),
    onSecondary: Color(0xFFFFFFFF),
    onSurface: Color(0xFF1E293B),
    onBackground: Color(0xFF334155),
    onError: Color(0xFFFFFFFF),
  ),
  typography: GarnishTypography.defaultTypography,
);

Accessibility

Garnish UI is built with accessibility in mind:

• Semantics — Components expose appropriate labels and roles for screen readers.
• Focus — Buttons, inputs, and interactive elements support keyboard navigation and visible focus.
• Contrast — Themes support light and dark mode with readable contrast.
• Customizable — Pass semanticLabel on buttons, cards, and dialogs to describe actions.

Requirements

• Flutter SDK: >=3.10.0
• Dart SDK: >=3.0.0

Documentation

• Live Documentation - Interactive docs with live component previews
• API Reference - Auto-generated API docs
• Example App - Working example demonstrating all features

License

MIT License - see LICENSE for details.