verdify_ui

The Verdify Flutter design system: 36 token-driven widgets built on Material 3, with light and dark themes and a WCAG 2.2 AA baseline. Every color, radius, spacing, and type value comes from @verdify/tokens — not from Material's default ColorScheme — so a Flutter surface matches the web @verdify/ui library pixel for pixel.

Highlights

36 components across the full Verdify set — primitives (Button, Badge, Avatar, Spinner, Separator…), forms (TextField, Textarea, Checkbox, Radio, Switch, Select…), feedback & overlays (Alert, Toast, Tooltip, Dialog, Sheet, Popover, Menu…), navigation (Tabs, Breadcrumb, Pagination, Sidebar, CommandPalette…), data (Table, DataGrid, Accordion, Card, Progress, Skeleton…), and the identity/trust family (VerifiedBadge, AgentBadge, TrustScore, CredentialCard, IdentityChip, ConsentToggle).
Light + dark themes that follow OS brightness — the dark family is Verdify's night/Obsidian palette, derived from the same tokens via a component-tier flip.
Token-bound, zero raw colors — a build gate forbids hard-coded color literals; all visual values resolve through a generated VerdifyTheme ThemeExtension.
Accessibility first — 44 px tap-target floors, a two-tone band-invariant focus ring, live-region announcements, roving focus, and AA-contrast checks baked into the test suite.

Install

flutter pub add verdify_ui

import 'package:verdify_ui/verdify_ui.dart';

Theming

The themes are generated from @verdify/tokens. Wire both into MaterialApp and let the OS pick:

MaterialApp(
  theme: verdifyLightTheme(),
  darkTheme: verdifyDarkTheme(),
  themeMode: ThemeMode.system,
  home: const MyPage(),
)

Each theme assembles a Material 3 ColorScheme (backing unthemed Material surfaces only) plus the VerdifyTheme extension carrying every alias-tier brand value the widgets bind to. VerdifyTheme lives in a generated file (lib/src/theme/verdify_theme.g.dart); regenerate it after updating tokens with pnpm -C ../tokens build. The flutter-token-drift gate verifies parity between the token source and the generated file automatically.

Usage

// Button — four variants map to the action-* alias tokens; enforces a 44 px tap
// floor, a brand focus ring, and a loading state.
VerdifyButton(
  variant: VerdifyButtonVariant.primary, // or secondary / ghost / destructive
  onPressed: () {},
  child: const Text('Continue'),
)

// Text field — Material-wrapped, themed by Verdify tokens. The label is the
// accessible name (never a placeholder).
VerdifyTextField(label: 'Email', errorText: formError)

// Dialog — modal overlay with focus trap, Esc/scrim dismiss, and return-focus.
await showVerdifyDialog<void>(
  context: context,
  title: 'Confirm',
  content: const Text('Proceed?'),
);

See example/ for a gallery exercising every component.

Foundation layer

Flutter has no Radix, so the package ships a small behavior layer under lib/src/foundation/ that the widgets compose: roving focus (VerdifyRovingGroup), anchored overlays with auto-flip (VerdifyAnchoredOverlay), type-ahead, live regions (announceToAssistiveTechnology, VerdifyLiveRegion), reduced-motion-guarded fade-in, and the shared two-tone focus ring (verdifyFocusRing).

Verify gate

Mirrors the web pnpm verify. From packages/ui_flutter:

./tool/verify.sh

Stages: dart format (excluding generated *.g.dart) · flutter-token-binding (no raw color literals) · flutter analyze --fatal-warnings · flutter test (component, a11y, and golden suites, light + dark).