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"),
  ],
)


## Full-Page Layouts & Slivers (v0.2.4+)

Fluxy introduced major enhancements for scrollable layouts, solving the classic "RenderBox vs RenderSliver" problem once and for all.

### `Fx.scrollCenter()`

A new primitive that simplifies "centered scrollable content" common in login screens and detail pages. It automatically handles `SingleChildScrollView` + `Center` + `ConstrainedBox` boilerplate correctly.

```dart
Fx.scrollCenter(
  padding: 24,
  child: Fx.col(gap: 16).children([
    Fx.text("Sign In").h3(),
    Fx.input(placeholder: "Email"),
    Fx.button("Login").fullWidth(),
  ]),
)

Why use this?

Prevents Overflow: Automatically scrolls on small screens.
Centers Content: Uses minHeight: constraints.maxHeight to ensure content is centered on large screens.
Keyboard Aware: Built-in safe area handling.

Sliver Awareness

The Fx() widget is now "Sliver-Aware". You can return a Sliver directly from its builder without crashing.

CustomScrollView(
  slivers: [
    SliverAppBar(title: Text("Sliver App Bar")),
    
    // Fx() detects it's returning a Sliver and bypasses Box constraints
    Fx(() => SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => Fx.text("Item $index").p(16),
        childCount: items.value.length,
      ),
    )),
  ],
)

Layout Crash Prevention

Fluxy includes a semantic error mapping system for common layout mistakes. If you use .hFull() inside a scroll view (which causes infinite height errors), Fluxy will catch the Flutter error and suggest the correct fix:

Fluxy Layout Alert: Infinite height detected. Did you use .hFull() inside a FxScroll? Use .h(minHeight) or Fx.scrollCenter() instead.


## 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.

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

Safe Area Management

Fluxy provides chainable modifiers to handle notches and safe areas without nesting SafeArea widgets manually.

.safe(): Default safe area (top and bottom).
.safeArea(): Full control over all sides.

Fx.col().children([
  Fx.text("Header"),
  Fx.text("Content"),
])
.bg(Colors.white)
.safe() // Automatically wraps in SafeArea

Advanced Control

Fx.box()
  .safeArea(
    top: true, 
    bottom: false, 
    minimum: EdgeInsets.all(16)
  )

Layout & Spacing

On this page