fifty_ui library

FDL v2 styled Flutter components for the fifty.dev ecosystem.

This package provides a comprehensive set of widgets that follow the Fifty Design Language v2 specification, built on top of fifty_tokens and fifty_theme.

All components feature:

  • Burgundy primary color (FDL v2 brand)
  • Mode-aware colors (dark and light mode support)
  • Motion animations using FDL timing tokens
  • WCAG 2.1 AA compliant accessibility
  • Manrope font family

Getting Started

  1. Add the package to your pubspec.yaml:
dependencies:
  fifty_ui:
    path: ../fifty_ui
  fifty_theme:
    path: ../fifty_theme
  1. Wrap your app with the Fifty theme:
import 'package:fifty_theme/fifty_theme.dart';
import 'package:fifty_ui/fifty_ui.dart';

MaterialApp(
  theme: FiftyTheme.dark(),
  home: MyApp(),
);
  1. Use the components:
FiftyButton(
  label: 'DEPLOY',
  onPressed: () => handleDeploy(),
  variant: FiftyButtonVariant.primary,
)

Components

Buttons

Inputs

Controls

Containers

  • FiftyCard - Card container with xxl/xxxl radius and md shadow

Display

Feedback

Organisms

  • FiftyNavBar - Floating navigation bar with glassmorphism
  • FiftyHero - Dramatic headline text with Manrope font

Molecules

Utils

Classes

FiftyAvatar
A circular avatar with FDL v2 styling.
FiftyBadge
A small status indicator badge with FDL v2 styling.
FiftyButton
A styled button following the Fifty Design Language v2.
FiftyCard
A card container with FDL v2 styling.
FiftyCheckbox
A checkbox control following FDL v2 styling.
FiftyChip
A chip/tag component with FDL v2 styling.
FiftyCodeBlock
A terminal-style code display component with FDL v2 styling.
FiftyCursor
FiftyCursor
FiftyDataSlate
A terminal-style key-value display panel with FDL v2 styling.
FiftyDialog
A modal dialog with FDL v2 styling.
FiftyDivider
A themed divider following FDL v2 styling.
FiftyDropdown<T>
A styled dropdown selector following FDL v2 design principles.
FiftyDropdownItem<T>
A dropdown menu item for FiftyDropdown.
FiftyHero
Dramatic headline text with Manrope font.
FiftyHeroSection
A hero section with title and optional subtitle.
FiftyIconButton
A circular icon button with FDL v2 styling.
FiftyInfoRow
FiftyInfoRow
FiftyLabeledIconButton
FiftyLabeledIconButton
FiftyListTile
A list tile component for displaying items with icon, title, and trailing content.
FiftyLoadingIndicator
FDL-compliant loading indicator using text sequences.
FiftyNavBar
A floating "Dynamic Island" style navigation bar with FDL v2 styling.
FiftyNavItem
An item in FiftyNavBar.
FiftyNavPill
FiftyNavPill
FiftyNavPillBar
FiftyNavPillBar
FiftyNavPillItem
Data class for navigation pill items.
FiftyProgressBar
A linear progress bar with FDL v2 styling.
FiftyProgressCard
A progress card for displaying metrics with a progress bar.
FiftyRadio<T>
A radio button control following FDL v2 styling.
FiftyRadioCard<T>
A card-style radio button control following FDL v2 styling.
FiftySectionHeader
FiftySectionHeader
FiftySegment<T>
A segment option for FiftySegmentedControl.
FiftySegmentedControl<T>
A segmented control following FDL v2 styling.
FiftySettingsRow
FiftySettingsRow
FiftySlider
A styled slider following FDL v2 design principles.
FiftySnackbar
A themed snackbar with FDL v2 styling.
FiftyStatCard
A metric/stat card for displaying KPIs with trend indicators.
FiftyStatusIndicator
FiftyStatusIndicator
FiftySwitch
A kinetic toggle switch following FDL v2 styling.
FiftyTextField
A text field with FDL v2 styling.
FiftyTooltip
A wrapper widget that adds a FDL v2 styled tooltip on hover.
GlitchEffect
RGB chromatic aberration (glitch) effect.
GlowContainer
A reusable container that handles focus/hover glow animation.
HalftoneOverlay
A widget that displays a halftone texture overlay.
HalftonePainter
A CustomPainter that draws a halftone dot pattern.
KineticEffect
A reusable hover/press animation wrapper that provides kinetic feedback.

Enums

FiftyBadgeVariant
Badge variants for different semantic meanings.
FiftyBorderStyle
Border style options for FiftyTextField.
FiftyButtonSize
Button sizes for different contexts.
FiftyButtonVariant
Button variants following the Fifty Design Language v2.
FiftyCardSize
Card size variants for FiftyCard.
FiftyChipVariant
Chip variants for different semantic meanings.
FiftyCursorStyle
Cursor style options for FiftyTextField.
FiftyHeroSize
Hero text size variants.
FiftyIconButtonSize
Icon button sizes.
FiftyIconButtonVariant
Icon button variants following FDL v2.
FiftyLabeledIconButtonSize
Size variants for FiftyLabeledIconButton.
FiftyLabeledIconButtonStyle
Style variants for FiftyLabeledIconButton.
FiftyLoadingSize
Loading indicator sizes.
FiftyLoadingStyle
Loading indicator styles following FDL.
FiftyNavBarStyle
Navigation bar style variants.
FiftyPrefixStyle
Prefix style options for FiftyTextField.
FiftySectionHeaderSize
Size variants for the section header.
FiftySegmentedControlVariant
Visual variants for FiftySegmentedControl.
FiftySnackbarVariant
Snackbar variants for different message types.
FiftyStatTrend
Trend direction for stat cards.
FiftyStatusSize
Size variants for the status indicator.
FiftyStatusState
Status states for the indicator.
FiftySwitchSize
Size variants for FiftySwitch.
FiftyTextFieldShape
Shape options for FiftyTextField.

Functions

showFiftyDialog<T>({required BuildContext context, required WidgetBuilder builder, bool barrierDismissible = true}) → Future<T?>
Helper function to show a FiftyDialog with proper animation.