Layout & Alignment
Declarative, explicit, and zero-math layout system.
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),
],
)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),
],
)Layout Intelligence (Structural Recursion)
Fluxy handles ParentData automatically, preventing common layout crashes.
⚡ Comparison
Standard Flutter (Explicit Wrapping)
Row(
children: [
Text("Title"),
Expanded(
child: Container(color: Colors.red),
),
],
)Fluxy DSL (Late Binding)
Fx.row().children([
Fx.text("Title"),
Fx.box().bg(Colors.red).expanded(),
])