Layout & Spacing

Fluxy v0.1.5 introduces a Next-Gen Layout System designed to be declarative, explicit, and boilerplate-free.

While previous versions relied on chaining modifiers (like .start().center()), the new system promotes using named parameters directly in Fx.row, Fx.col, and Fx.stack for clarity and standard Flutter control.

Flex Layouts (`Fx.row` & `Fx.col`)

The new API exposes strict justify, items, and gap parameters, mirroring CSS Flexbox and Flutter's Main/Cross axis alignment but with cleaner syntax.

`Fx.row`

Fx.row(
  justify: MainAxisAlignment.spaceBetween,
  items: CrossAxisAlignment.center,
  gap: 16, // Built-in gap support
  children: [
    Fx.text("Left"),
    Fx.text("Right"),
  ],
)

`Fx.col`

Fx.col(
  justify: MainAxisAlignment.center,
  items: CrossAxisAlignment.stretch,
  gap: 8,
  children: [
    Fx.button("Login").fullWidth(),
    Fx.button("Register").outline().fullWidth(),
  ],
)

Staggered Animations (New in 0.1.7)

You can now animate the entrance of children in a Fx.row or Fx.col with a single modifier:

Fx.col(gap: 12)
  .children([...])
  .stagger(100.ms) // Intervals of 100ms

Layout Intelligence

Refined .expanded(), .flex(), and .shrink() now automatically handle Structural Recursion. These modifiers "peer through" layout containers to ensure the correct ParentData is applied to the target widget, preventing common Flutter layout errors.

Fx.row().children([
  Fx.text("Fixed Width"),
  Fx.box().expanded(), // Safely takes remaining space
]);

Deprecation Notice

Deprecated: Chained flex modifiers (e.g., Fx.row().between().center()) are deprecated in v0.1.5. Please migrate to the declarative syntax above for better readability and tool support.

Stack Layout (`Fx.stack`)

Fx.stack now provides first-class support for alignment and fit, allowing you to overlay widgets with precision.

Fx.stack(
  alignment: Alignment.center,
  fit: StackFit.loose,
  children: [
    Fx.image("background.jpg").cover(),
    Fx.text("Overlay Text").white.bold,
  ],
)

Intelligent Spacing (New in 0.1.6)

While flex gap is powerful, sometimes you need specific spacing between individual children. Fluxy v0.1.6 introduces Intelligent Gap widgets.

Fx.gap(size): Spacing that automatically detects if it's in a Row or Column.
Fx.hgap(size): Explicit horizontal spacing (SizedBox(width: size)).
Fx.vgap(size): Explicit vertical spacing (SizedBox(height: size)).

Fx.row(
  children: [
    Fx.text("Item 1"),
    Fx.gap(16), // Intelligent Gap
    Fx.text("Item 2"),
    Fx.hgap(8), // Explicit Horizontal
    Fx.text("Item 3"),
  ],
)

Spacing Utilities

Fluxy continues to support its robust spacing modifiers on all widgets.

.p(16) / .padding(16): All-around padding.
.px(12) / .py(8): Horizontal / Vertical padding.
.m(16): Margin.
.gap(10): Works on any flex container.

Fx.container()
  .p(16)
  .m(8)
  .bg(Colors.blue)

Layout & Spacing

On this page