Advanced Grids

Fluxy v0.1.6 introduces a comprehensive Grid engine that simplifies complex grid layouts.

Standard Grid

A fixed-column grid is perfect for known constraints.

Fx.grid(
  columns: 2,
  gap: 16,
  children: [
    ProductCard("Item 1"),
    ProductCard("Item 2"),
  ],
);

Fx.grid.auto() automatically calculates columns based on available width, perfect for responsive lists that adapt to any screen size.

Fx.grid.auto(
  minItemWidth: 160,
  gap: 16,
  children: products.map((p) => ProductCard(p)).toList(),
);

Fx.grid.responsive() allows you to define different column counts for each breakpoint.

Fx.grid.responsive(
  xs: 1, // Mobile
  sm: 2, // Large Mobile
  md: 3, // Tablet
  lg: 4, // Desktop
  gap: 16,
  children: galleryItems,
);

Common grid patterns are baked in as presets:

Ideal for e-commerce or content listings.

Fx.grid.cards(
  items: products,
  builder: (product) => ProductCard(product),
)

Optimized for images and media.

Fx.grid.gallery(
  items: images,
  builder: (img) => Fx.image(img).cover(),
)

Designed for admin panels and data visualization widgets.

Fx.grid.dashboard(
  children: [
    StatsCard(),
    RevenueChart(),
    RecentActivity(),
  ],
)