Fifty UI #

FDL-styled Flutter component library implementing the Fifty Design Language v2. Part of Fifty Flutter Kit.

Gallery	Buttons	Inputs	Display

Features #

• Buttons - Primary, secondary, outline, ghost, and danger variants with glitch and loading states
• Inputs - Text fields, sliders, switches, dropdowns, checkboxes, and radio controls with FDL terminal styling
• Controls - Segmented control and nav pill for selection and filtering patterns
• Display - Stat cards, list tiles, badges, chips, avatars, progress bars, data slates, and loading indicators
• Feedback - Snackbar toasts, modal dialogs, and hover tooltips with kinetic animations
• Layout - Card containers with halftone texture, scanline effects, and bento-style hover states
• Navigation - Floating glassmorphism nav bar with Dynamic Island pill style
• Effects - KineticEffect, GlitchEffect, GlowContainer, and HalftoneOverlay as composable primitives
• Dark-first - Optimized for OLED displays with voidBlack backgrounds and crimson glow focus states
• WCAG 2.1 AA - Accessible contrast ratios, reduced motion support, required tooltips on icon buttons

Installation #

Add to your pubspec.yaml:

dependencies:
  fifty_ui:
    path: ../fifty_ui
  fifty_theme:
    path: ../fifty_theme
  fifty_tokens:
    path: ../fifty_tokens

Git Dependency #

dependencies:
  fifty_ui:
    git:
      url: https://github.com/fiftynotai/fifty_flutter_kit.git
      path: packages/fifty_ui
  fifty_theme:
    git:
      url: https://github.com/fiftynotai/fifty_flutter_kit.git
      path: packages/fifty_theme
  fifty_tokens:
    git:
      url: https://github.com/fiftynotai/fifty_flutter_kit.git
      path: packages/fifty_tokens

Quick Start #

import 'package:fifty_theme/fifty_theme.dart';
import 'package:fifty_ui/fifty_ui.dart';

void main() {
  runApp(
    MaterialApp(
      theme: FiftyTheme.dark(),
      home: MyApp(),
    ),
  );
}

// Use components directly
FiftyButton(
  label: 'DEPLOY',
  onPressed: () => handleDeploy(),
  variant: FiftyButtonVariant.primary,
  icon: Icons.rocket_launch,
  isGlitch: true,
  shape: FiftyButtonShape.sharp,
)

Architecture #

fifty_ui
├── buttons/
│   ├── FiftyButton          — Primary action button (5 variants)
│   ├── FiftyIconButton      — Circular icon button with tooltip
│   └── FiftyLabeledIconButton — Icon button with inline label
├── inputs/
│   ├── FiftyTextField       — Terminal command-line text input
│   ├── FiftySwitch          — Kinetic toggle with snap animation
│   ├── FiftySlider          — Brutalist range selector (square thumb)
│   ├── FiftyDropdown        — Terminal-styled dropdown selector
│   ├── FiftyCheckbox        — Multi-select boolean control
│   ├── FiftyRadio           — Single-select option control
│   └── FiftyRadioCard       — Card-style radio selection
├── controls/
│   ├── FiftySegmentedControl — Pill-style segmented control
│   └── FiftyNavPill         — Navigation pill indicator
├── containers/
│   └── FiftyCard            — Bento-style container with hover effects
├── display/
│   ├── FiftyStatCard        — KPI metric card with trend indicators
│   ├── FiftyListTile        — Transaction and settings list item
│   ├── FiftyProgressCard    — Goal progress card with gradient fill
│   ├── FiftyBadge           — Status indicator pill with glow
│   ├── FiftyChip            — Tag/label with optional delete
│   ├── FiftyDivider         — Themed horizontal or vertical divider
│   ├── FiftyDataSlate       — Terminal key-value display panel
│   ├── FiftyAvatar          — Circular avatar with fallback initials
│   ├── FiftyProgressBar     — Linear progress with crimson fill
│   ├── FiftyLoadingIndicator — Text-based loading (no spinners)
│   ├── FiftyInfoRow         — Labeled info display row
│   ├── FiftySectionHeader   — Section heading with optional action
│   ├── FiftySettingsRow     — Settings list row with value display
│   └── FiftyStatusIndicator — Dot-based status icon
├── feedback/
│   ├── FiftySnackbar        — Toast notification with variants
│   ├── FiftyDialog          — Modal dialog with animated border glow
│   └── FiftyTooltip         — Hover-triggered tooltip wrapper
├── organisms/
│   ├── FiftyHero            — Dramatic headline with Manrope font
│   └── FiftyNavBar          — Floating glassmorphism nav bar
├── molecules/
│   └── FiftyCodeBlock       — Terminal code display with syntax highlight
└── utils/
    ├── KineticEffect        — Hover/press scale animation wrapper
    ├── GlitchEffect         — RGB chromatic aberration effect
    ├── GlowContainer        — Reusable glow animation wrapper
    ├── HalftonePainter      — CustomPainter for halftone dot patterns
    ├── HalftoneOverlay      — Widget wrapper for halftone textures
    └── FiftyCursor          — Custom cursor styling utilities

Core Components #

API Reference #

Buttons #

FiftyButton Properties:

Inputs #

FiftyTextField Properties:

FiftySwitch Sizes:

FiftySlider Properties:

FiftyDropdown Properties:

Controls #

Containers #

FiftyCard Properties:

Display #

FiftyStatCard Properties:

FiftyListTile Properties:

FiftyLoadingIndicator Styles:

Feedback #

Navigation #

Effects and Utils #

Usage Patterns #

Button Variants #

// Primary with glitch effect
FiftyButton(
  label: 'DEPLOY',
  onPressed: () => handleDeploy(),
  variant: FiftyButtonVariant.primary,
  isGlitch: true,
  shape: FiftyButtonShape.sharp,
)

// Secondary (slate-grey filled)
FiftyButton(
  label: 'DOWNLOAD',
  onPressed: () => handleDownload(),
  variant: FiftyButtonVariant.secondary,
  icon: Icons.download,
)

// Outline (burgundy border)
FiftyButton(
  label: 'LOG IN',
  onPressed: () => handleLogin(),
  variant: FiftyButtonVariant.outline,
)

// With trailing icon
FiftyButton(
  label: 'GET STARTED',
  onPressed: () => handleStart(),
  variant: FiftyButtonVariant.primary,
  trailingIcon: Icons.arrow_forward,
)

// Loading state (animated dots, not spinner)
FiftyButton(
  label: 'PROCESSING',
  onPressed: null,
  loading: true,
)

Terminal Input Styles #

// Standard with full border
FiftyTextField(
  controller: _emailController,
  label: 'Email',
  hint: 'Enter your email',
  prefix: Icon(Icons.email),
)

// Rounded/pill shape (for search inputs)
FiftyTextField(
  controller: _searchController,
  hint: 'Search...',
  prefixIcon: Icons.search,
  shape: FiftyTextFieldShape.rounded,
)

// Terminal style (bottom border + chevron prefix)
FiftyTextField(
  controller: _commandController,
  borderStyle: FiftyBorderStyle.bottom,
  prefixStyle: FiftyPrefixStyle.chevron,
  cursorStyle: FiftyCursorStyle.block,
  hint: 'Enter command',
)

// Comment prefix style
FiftyTextField(
  controller: _noteController,
  prefixStyle: FiftyPrefixStyle.comment, // Shows "//"
)

Radio Card Selection #

Row(
  children: [
    Expanded(
      child: FiftyRadioCard<ThemeMode>(
        value: ThemeMode.light,
        groupValue: _themeMode,
        onChanged: (v) => setState(() => _themeMode = v),
        icon: Icons.light_mode,
        label: 'Light',
      ),
    ),
    SizedBox(width: FiftySpacing.md),
    Expanded(
      child: FiftyRadioCard<ThemeMode>(
        value: ThemeMode.dark,
        groupValue: _themeMode,
        onChanged: (v) => setState(() => _themeMode = v),
        icon: Icons.dark_mode,
        label: 'Dark',
      ),
    ),
  ],
)

Slider with Custom Formatter #

// Discrete divisions with custom formatter
FiftySlider(
  value: _level,
  onChanged: (value) => setState(() => _level = value),
  min: 1,
  max: 10,
  divisions: 9,
  showLabel: true,
  labelBuilder: (value) => 'Level ${value.round()}',
)

Dropdown with Icons #

FiftyDropdown<String>(
  value: _status,
  onChanged: (value) => setState(() => _status = value),
  items: [
    FiftyDropdownItem(value: 'active', label: 'Active', icon: Icons.check_circle),
    FiftyDropdownItem(value: 'paused', label: 'Paused', icon: Icons.pause_circle),
    FiftyDropdownItem(value: 'stopped', label: 'Stopped', icon: Icons.stop_circle),
  ],
)

KPI Dashboard with Stat Cards #

FiftyStatCard(
  label: 'Total Views',
  value: '45.2k',
  icon: Icons.visibility,
  trend: FiftyStatTrend.up,
  trendValue: '12%',
)

// Highlight variant (primary background)
FiftyStatCard(
  label: 'Revenue',
  value: '\$12.5k',
  icon: Icons.account_balance_wallet,
  highlight: true,
)

Transaction List Item #

FiftyListTile(
  leadingIcon: Icons.subscriptions,
  leadingIconColor: Colors.blue,
  leadingIconBackgroundColor: Colors.blue.withOpacity(0.1),
  title: 'Subscription',
  subtitle: 'Adobe Creative Cloud',
  trailingText: '-\$54.00',
  trailingSubtext: 'Today',
  onTap: () => navigateToDetail(),
)

Progress Card with Custom Gradient #

FiftyProgressCard(
  title: 'Storage Used',
  progress: 0.82,
  icon: Icons.storage,
  progressGradient: LinearGradient(
    colors: [FiftyColors.hunterGreen, FiftyColors.slateGrey],
  ),
)

Badges #

FiftyBadge(label: 'LIVE', variant: FiftyBadgeVariant.success, showGlow: true)

// Factory constructors
FiftyBadge.tech('FLUTTER')  // HyperChrome border, no glow
FiftyBadge.status('ONLINE') // Success green with glow
FiftyBadge.ai('IGRIS')      // IgrisGreen with glow

Sequence Loading Indicator #

FiftyLoadingIndicator(
  style: FiftyLoadingStyle.sequence,
  sequences: [
    '> INITIALIZING...',
    '> LOADING ASSETS...',
    '> ESTABLISHING LINK...',
    '> COMPILING...',
  ],
)

Modal Dialog #

showFiftyDialog(
  context: context,
  builder: (context) => FiftyDialog(
    title: 'CONFIRM',
    content: Text('Proceed with action?'),
    actions: [
      FiftyButton(
        label: 'CANCEL',
        variant: FiftyButtonVariant.ghost,
        onPressed: () => Navigator.pop(context),
      ),
      FiftyButton(
        label: 'CONFIRM',
        onPressed: () => handleConfirm(context),
      ),
    ],
  ),
);

Floating Navigation Bar #

FiftyNavBar(
  items: [
    FiftyNavItem(label: 'Home', icon: Icons.home),
    FiftyNavItem(label: 'Search', icon: Icons.search),
    FiftyNavItem(label: 'Profile', icon: Icons.person),
  ],
  selectedIndex: _currentIndex,
  onItemSelected: (index) => setState(() => _currentIndex = index),
  style: FiftyNavBarStyle.pill,
)

Headline Typography #

FiftyHero(
  text: 'Welcome to Fifty',
  size: FiftyHeroSize.display,
  glitchOnMount: true,
  gradient: LinearGradient(
    colors: [FiftyColors.crimsonPulse, FiftyColors.terminalWhite],
  ),
)

// Hero section with subtitle
FiftyHeroSection(
  title: 'The Future of AI',
  subtitle: 'Powered by Fifty.ai',
  glitchOnMount: true,
)

Code Block #

FiftyCodeBlock(
  code: '''
void main() {
  print('Hello, Fifty!');
}
''',
  language: 'dart',
  showLineNumbers: true,
  copyButton: true,
)

Composable Effects #

// Kinetic hover/press
KineticEffect(
  onTap: () => handleTap(),
  hoverScale: 1.02,
  pressScale: 0.95,
  child: MyCard(),
)

// RGB glitch on hover
GlitchEffect(
  triggerOnHover: true,
  intensity: 0.8,
  offset: 3.0,
  child: Text('GLITCH'),
)

Theme Access Pattern #

All components access theme via FiftyThemeExtension:

final theme = Theme.of(context);
final fifty = theme.extension<FiftyThemeExtension>()!;

// Access FDL tokens
fifty.focusGlow      // Crimson box shadow
fifty.fast           // 150ms duration
fifty.compiling      // 300ms duration
fifty.standardCurve  // easeOutExpo
fifty.success        // Success green
fifty.igrisGreen     // AI indicator green

Platform Support #

All hover-dependent features (KineticEffect, GlitchEffect, scanline on FiftyCard) activate on desktop and web platforms where mouse input is available.

Fifty Design Language Integration #

This package is part of Fifty Flutter Kit:

• FDL v2 - Implements the full design language: burgundy primary palette, mode-aware colors, Manrope typography, fast motion (150ms / 300ms FDL timing tokens), and refined feedback (focus glow states, scanlines, RGB glitch effects)
• fifty_tokens dependency - All spacing, color, radius, and duration values are sourced from fifty_tokens for consistency across the kit
• fifty_theme dependency - Components read FiftyThemeExtension from the widget tree for focus glow, animation curves, and semantic colors
• Dark-first with light mode - All components respond to ThemeMode automatically; dark mode uses voidBlack backgrounds, light mode adapts contrast appropriately
• No spinners - Loading states use text-based animations (animated dots, pulse, sequence) per FDL specification

Version #

Current: 0.6.0

License #

MIT License - see LICENSE for details.

Part of Fifty Flutter Kit.