Responsive Design

Fluxy v0.1.6 introduces Fx.layout() as the standard way to build truly adaptive applications.

Fx.layout

The Fx.layout builder allows you to specify different widgets for mobile, tablet, and desktop breakpoints.

Fx.layout(
  mobile: (context) => Fx.col(
    children: [
      Fx.text("Mobile Header").font.lg.bold,
      MainContent().p(16),
    ],
  ),
  tablet: (context) => Fx.row(
    children: [
      Sidebar().w(250),
      MainContent().flex(1),
    ],
  ),
  desktop: (context) => Fx.row(
    children: [
      Sidebar().w(300),
      MainContent().flex(1),
      StatsPanel().w(300),
    ],
  ),
)

Breakpoints

Fluxy uses the FxBreakpoint system to handle screen size transitions. These breakpoints are globally configurable via FluxyTheme.

• xs (Extra Small): Below 600px (Phones)
• sm (Small): 600px - 900px (Tablets / Large Phones)
• md (Medium): 900px - 1200px (Laptops / Small Desktops)
• lg (Large): 1200px+ (Large Desktops)

Custom Configuration

You can customize breakpoints during initialization:

FluxyTheme(
  breakpoints: FxBreakpoints(
    xs: 500,
    sm: 800,
    md: 1100,
  ),
  child: MyApp(),
)

Fx.on Utility

The Fx.on utility is a cleaner, functional alternative to ternary operators or manual screen-size checks. It allows you to define values based on the current device category.

final padding = Fx.on(context, 
  mobile: 12.0, 
  tablet: 24.0, 
  desktop: 40.0
);

final columns = Fx.on(context, 
  mobile: 1, 
  desktop: 4
);

Advanced Usage: Fx.responsiveValue

For more granular control over standard breakpoints, use Fx.responsiveValue:

final width = Fx.responsiveValue(context, 
  xs: 300.0, 
  sm: 500.0, 
  md: 800.0, 
  lg: 1200.0
);

Responsive Utilities

Helper methods like context.isMobile, context.isTablet, and context.isDesktop are available for quick conditional logic.

if (context.isMobile) {
  // Show bottom sheet
} else {
  // Show dialog
}