The foundational layout primitive of Fluxy, offering a high-performance alternative to Container with fluent modifiers and atomic styling.

FxBox

FxBox is the most important component in Fluxy. It combines DecoratedBox, Padding, SizedBox, Opacity, and Transform into a single, high-performance widget.

Instead of nesting multiple widgets, you use chainable modifiers to build complex UI.

Usage

Fx.box(
  child: Fx.text("Hello Fluxy"),
)
.bg(Colors.blue)
.rounded(12)
.p(20)
.shadowMd()

Core Modifiers

FxBox supports the full suite of Fluxy atomic modifiers.

Category	Modifiers
Spacing	`.p(double)`, `.px()`, `.py()`, `.pt()`, `.m()`, `.gap(double)`
Dimensions	`.w(double)`, `.h()`, `.square(double)`, `.expanded()`, `.flex()`
Styling	`.bg(Color)`, `.rounded(double)`, `.border(double, Color)`, `.blur(double)`
Visuals	`.opacity(double)`, `.shadowSm()`, `.shadowMd()`, `.shadowLg()`
Motion	`.animate()`, `.fadeIn()`, `.slideUp()`

The Power of Composition

Unlike standard Flutter widgets, FxBox properties are inherited and merged. This prevents depth-heavy widget trees.

// [WRONG] Deeply nested Flutter code
Container(
  padding: EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(10),
    boxShadow: [BoxShadow(...)],
  ),
  child: Center(
    child: Text("Hello"),
  ),
)

// [RIGHT] Flat Fluxy code
Fx.box(child: Fx.text("Hello"))
  .p(20)
  .bg(Colors.white)
  .rounded(10)
  .shadowMd()
  .center()

Layout Primitives

Fluxy provides semantic helpers built on FxBox for common layout patterns.

1. Circles & Avatars

Fx.box()
  .square(60)
  .bg(Colors.amber)
  .circle() // Shorthand for full rounding

2. Glassmorphism

Fx.box(child: myContent)
  .bg(Colors.white.withOpacity(0.1))
  .blur(10) // High-performance native blur
  .border(1, Colors.white24)
  .rounded(20)

API Reference

Properties

Name	Type	Default	Description
`child`	`Widget?`	`null`	The widget contained within the box.
`style`	`FxStyle?`	`null`	An initial style object to apply.
`responsive`	`FxResponsive?`	`null`	Breakpoint-specific style overrides.
`className`	`String?`	`null`	A hook for global stylesheet integration.

The Master Box Implementation

Building a premium, interactive feature card from scratch using strictly FxBox and modifiers.

class FeatureCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final isHovered = flux(false);

    return Fx(() => Fx.box(
      child: Fx.col(
        cross: CrossAxisAlignment.start,
        children: [
          // Icon Container
          Fx.box(child: Icon(Icons.rocket_launch, color: Colors.white))
            .circle()
            .bg(isHovered.value ? Colors.blue : Colors.slate800)
            .size(48)
            .center()
            .animate(duration: 300.ms),

          Fx.gap(16),

          // Typography
          Fx.text("Cloud Infrastructure")
            .font.lg().bold()
            .color(isHovered.value ? Colors.blue : Colors.black),
          
          Fx.text("Scalable, distributed compute for industrial workloads.")
            .muted()
            .mt(4),
          
          Fx.gap(20),
          
          // Action link
          Fx.row(
            children: [
              Fx.text("Deploy Now").font.sm().bold().color(Colors.blue),
              Icon(Icons.arrow_forward_rounded, size: 16, color: Colors.blue).ml(4),
            ],
          ),
        ],
      )
    )
    .p(24)
    .rounded(24)
    .bg(Colors.white)
    .border(1, isHovered.value ? Colors.blue.withOpacity(0.3) : Colors.slate200)
    .shadow(isHovered.value ? FxShadow.lg : FxShadow.none)
    .animate(duration: 400.ms)
    .onHover((hovering) => isHovered.value = hovering)
    .onTap(() => print("Card Tapped"))
    .w(300)
    );
  }
}

By using FxBox, you maintain a flat widget tree, which improves rendering performance and significantly reduces code complexity.

FxBox

On this page