Atomic Styling DSL

Fluxy provides a powerful Atomic Styling DSL (Domain-Specific Language) via the Fx namespace and widget extensions. This allows you to build complex UI hierarchies using chainable modifiers, drastically reducing nesting and boilerplate.

Syntax: Chainable Modifiers

Every Fluxy widget (accessible via Fx) and even standard Flutter widgets (via FluxyWidgetExtension) can be styled using chainable methods.

Fx.box()
  .p(16)            // Shorthand for padding
  .bg(Colors.blue)  // Background color
  .rounded(12)      // Border radius
  .shadowXL()       // Large shadow token
  ;

Buttonizers (New in 0.1.7)

Fluxy 0.1.7 introduces Buttonizers, which allow you to turn any String or Widget into a functional button with a single method call:

• Strings: "Save".primaryBtn() creates a primary action button.
• Widgets: myIcon.btn() creates an unstyled interactive button.

"Confirm".primaryBtn(onTap: () => doConfirm())
"Cancel".outlineBtn(onTap: () => doCancel())
myImage.btn(onTap: () => showPreview())

Proxy-based DSL (New in 0.1.6)

Fluxy v0.1.6 continues to refine the Proxy-based DSL, allowing you to access style properties as fields rather than methods.

Fx.text("Hello Fluxy")
  .font.lg.bold      // Property Proxies are now getters
  .color(Colors.blue) // Use color method
  .shadow.md          // Shadow proxy getter
  .mt(8);

Why use Proxy DSL?

1. Readability: It reads more like a declaration than a series of function calls.
2. Type Safety: Proxies are specifically mapped to framework tokens, ensuring you use valid colors and weights.
3. Speed: Autocomplete works seamlessly with proxy getters.

Shorthand Pairs

Fluxy uses intuitive shorthand pairs for common layout properties:

Padding & Margin

Fluxy is designed to be flexible. You can use full descriptive names or rapid-fire shorthands interchangeably:

• Padding: .padding(), .p(), or .pad()
• Horizontal/Vertical: .px(), .py(), .paddingX(), .paddingY()
• Directional: .pt() (top), .pb() (bottom), .pl() (left), .pr() (right)
• Margin: .margin(), .m(), .mt(), .mb(), .ml(), .mr()

Size Aliases

• Dimensions: .w() or .width(), .h() or .height()
• Bulk: .size(w, h), .square(size)
• Full Scale: .fullWidth(), .fullHeight(), or shorthands .wFull(), .hFull()

Styling & Colors

• Background: .bg(color) or .background(color)
• Radius: .rounded(radius) or .radius(radius)
• Shadows: .shadow(token) or quick presets like .shadowXL()
• Modern Colors: Always use .withValues(alpha: 0.x) for transparency (modern API).

Fx.box()
  .square(100)
  .bg(Colors.red.withValues(alpha: 0.5))
  .rounded(FxTokens.radius.md)
  ;

Interactions & Animations

Fluxy makes it easy to add dynamic interactions and smooth transitions directly in the style chain:

• .onHover( (s) => s.scale(1.1) ): Apply styles when the mouse hovers over the widget.
• .onPressed( (s) => s.op(0.8) ): Apply styles when the widget is pressed.
• Animations: Use .animate() to implicitly animate any style changes.
• Enhanced Motion (New in 0.1.7): FxMotion now supports .loop(), .repeat(), and .reverse() for creating attention-grabbing effects like pulse or bounce.

Fx.box()
  .square(100)
  .bg(Colors.blue)
  .animate(duration: 500.ms, curve: Curves.easeOut)
  .onHover((s) => s.bg(Colors.blueAccent).scale(1.1))
  ;

// Pulse Effect
Fx.text("Flash Sale!")
  .bold
  .scale(1.2)
  .animate(duration: 800.ms)
  .loop() // Repeats forever
  ;

Conditional Rendering

Declarative Conditionals (New in 0.1.6)

Fluxy v0.1.6 introduces Fx.cond(), a cleaner alternative to ternary operators for conditional UI.

Fx.cond(
  isLoading,
  Fx.text("Processing..."),
  Fx.button("Submit"),
)

Visibility Modifiers

You can also toggle visibility on any widget using the .show() and .hide() modifiers.

Fx.text("Conditional Text")
  .show(isLogged.value)
  ;

Duration Extensions

Fluxy provide human-readable extensions for int and double to define Duration objects effortlessly.

• 500.ms -> Duration(milliseconds: 500)
• 2.sec -> Duration(seconds: 2)

Fx.text("Fade In")
  .animate(
    duration: 500.ms,
    delay: 1.sec,
  )
  ;

Layouts & Spacing

New in v0.1.5: Fluxy now relies on a declarative layout system (Fx.row, Fx.col, Fx.stack) with named parameters. The old modifier-based layout system is deprecated.

Please refer to the dedicated Layout & Spacing guide for the new API.

Context Extensions

Fluxy v0.1.6 extends BuildContext with helpful properties to reduce boilerplate when accessing theme and screen information.

• context.theme: Access the current ThemeData.
• context.colors: Shortcut to Theme.of(context).colorScheme.
• context.isDark: Boolean check for dark mode.
• context.screenSize: Access MediaQuery.of(context).size.

Fx.box()
  .bg(context.colors.primary)
  .w(context.screenSize.width * 0.8)
  .child(
    Fx.text(context.isDark ? "Dark Side" : "Light Side")
  )
  ;