Layout & Alignment

Declarative. Explicit. Zero Math.

Fluxy's layout system eliminates the need for manual Spacer or SizedBox management by treating Spacing as a property of the container.

Fx.row & Fx.col (Flexbox Mastery)

Distribute space and align items with named semantic parameters.

Comparison

Standard Flutter (Manual Spacing)

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Icon(Icons.star),
    SizedBox(width: 8),
    Text("Rating"),
    SizedBox(width: 8),
    Icon(Icons.chevron_right),
  ],
)

Fluxy DSL (Intelligent Gap)

Fx.row(
  justify: MainAxisAlignment.spaceBetween,
  gap: 8,
  children: [
    Icon(Icons.star),
    Fx.text("Rating"),
    Icon(Icons.chevron_right),
  ],
)

The Stability-First Default (MainAxisSize.min)

One of the most significant differences between Fluxy and standard Flutter is the default behavior of Flex containers.

• Standard Flutter: Row and Column default to MainAxisSize.max (occupying all available space).
• Fluxy DSL: Fx.row and Fx.col default to MainAxisSize.min (occupying only as much space as their children need).

Why this matters for Alignment

Because Fluxy containers default to min, using justify: MainAxisAlignment.spaceBetween will appear to "not work" out of the box. Since the row is only as wide as its children, there is no "leftover space" to distribute between them.

The Fix: To use justified spacing (like pinning elements to the left and right edges), you must explicitly tell the container to take up all available space using size: MainAxisSize.max.

Fx.row(
  justify: MainAxisAlignment.spaceBetween,
  size: MainAxisSize.max, // <--- Required for space distribution
  children: [ 
    Fx.text("Left"),
    Fx.text("Right"),
  ],
)

Philosophy: Why the change?

Fluxy prioritizes Layout Stability. Defaulting to min prevents "infinite size" crashes when flexible containers are nested inside scrollable viewports. It forces you to be intentional about expansion, resulting in more robust and predictable UIs.

Fx.grid (The Layout Workhorse)

The Grid API handles all the aspect ratio and column math for you.

Comparison

Standard Flutter

GridView.count(
  crossAxisCount: 2,
  mainAxisSpacing: 16,
  crossAxisSpacing: 16,
  childAspectRatio: 0.8,
  children: [ ... ],
)

Fluxy DSL

Fx.grid(
  columns: 2,
  gap: 16,
  childAspectRatio: 0.8,
  children: [ ... ],
)

Fx.stack (Overlay Layout)

Stacks widgets on top of each other with simplified alignment and positioning.

Comparison

Standard Flutter

Stack(
  alignment: Alignment.center,
  children: [
    Container(width: 200, height: 200, color: Colors.blue),
    Positioned(
      bottom: 10,
      right: 10,
      child: Icon(Icons.star),
    ),
  ],
)

Fluxy DSL

Fx.stack(
  alignment: Alignment.center,
  children: [
    Fx.box().size(200, 200).bg(Colors.blue),
    Icon(Icons.star).align(bottom: 10, right: 10),
  ],
)

Alignment Modifiers

Fluxy provides chainable alignment modifiers that can be applied to any widget. This eliminates the need to wrap widgets in Center or Align manually.

1. .center()

Centers the widget within its parent.

Fx.text("Centered Content").center()

2. .align()

Aligns the widget to a specific position or coordinate.

// Semantic alignment
Fx.icon(Icons.close).align(Alignment.topRight)

// Explicit offset alignment
Fx.box().wh(40, 40).align(top: 10, right: 10)

3. .expand()

A common alignment pattern where the widget takes up all available space.

Fx.row().children([
  Fx.text("Label"),
  Fx.input().expand(), // Fills the rest of the row
])

Architectural Note: Layout Intelligence

Fluxy's Semantic Parser translates these modifiers into the correct Flutter widget tree (e.g., wrapping in Align or Positioned as needed) while ensuring that ParentData (like Stack or ListView context) is preserved correctly.