Design System & Tokens

Fluxy encourages a consistent design language through the use of Design Tokens. These tokens ensure that spacing, radius, typography, and shadows remain uniform across your entire application.

FxTokens

FxTokens is your global entry point for the design system. It follows a standard naming convention (xs, sm, md, lg, xl, xxl).

Spacing & Radius

Access predefined sizes for scales and corners.

Fx.box()
  .p(FxTokens.space.md)      // Standard 16dp spacing
  .rounded(FxTokens.radius.lg) // Large rounded corners

Shadows

Standardized shadow depths for elevating UI elements.

Fx.box()
  .shadow.md // Medium shadow proxy getter

Modern Color API

In Fluxy v0.1.1, all color transparency should use the modern withValues(alpha: 0.x) API instead of the deprecated withOpacity.

// Preferred
Colors.blue.withValues(alpha: 0.8)

// Avoid (Deprecated)
Colors.blue.withOpacity(0.8)

Responsive Styling

Fluxy handles responsiveness both through the DSL and the FxStyle helper.

Fx.box()
  .width(sm: 100, md: 200, lg: 300) // Responsive widths
  ;

// Or manual checks
if (FxStyle.media(context).isMobile) {
  // Mobile specific logic
}

Visual FX & Filters (New in 0.1.7)

Fluxy 0.1.7 introduces high-performance native modifiers for manipulating the visual state of any widget.

• .blur(double): Applies a Gaussian blur.
• .grayscale(): Desaturates the widget.
• .circle(): Clips the widget into a perfect circle.

Fx.image("https://...").blur(5).grayscale();
Fx.avatar(image: "...").circle();

Chainable Transitions

The .transition(Duration) modifier enables automatic interpolation of style changes. When state-driven style changes occur (e.g., background color shift), they will animate smoothly.

final isExpanded = flux(false);

Fx.box()
  .bg(isExpanded.value ? Colors.blue : Colors.grey)
  .width(isExpanded.value ? 200 : 100)
  .transition(300.ms)
  .onTap(() => isExpanded.toggle());

Contrast Shortcuts

Quickly apply high-visibility typography settings with semantic shortcuts:

• .whiteText(): Sets text color to white with appropriate contrast settings.
• .blackText(): Sets text color to black with appropriate contrast settings.

Fx.text("High Contrast").whiteText();

theme Management

FxTheme provides a zero-boilerplate way to manage your app's theme.

// Toggle between light and dark mode
Fx.toggleTheme(); 

// Check current theme
bool isDark = FxTheme.isDark;

// Access theme colors directly
Color bg = FxTheme.colorScheme.background;