FxLayout
A semantic layout builder for creating responsive designs.
FxLayout
FxLayout simplifies building responsive user interfaces by providing semantic targeting for common layout breakpoints.
Usage
FxLayout(
mobile: (context) => MobileLayout(),
tablet: (context) => TabletLayout(),
desktop: (context) => DesktopLayout(),
)Features
Breakpoints
Fluxy uses standard breakpoints for responsive designs:
mobile: < 600pxtablet: 600px - 1024pxdesktop: > 1024px
Fallback Logic
If you omit tablet, it will fall back to mobile on smaller tablets and desktop on larger tablets (or vice versa, depending on internal logic). Generally, mobile is the default fallback if others are missing.
API Reference
| Name | Type | Default | Description |
|---|---|---|---|
mobile | WidgetBuilder | required | Layout for screens < 600px. |
tablet | WidgetBuilder? | null | Layout for screens 600px - 1024px. |
desktop | WidgetBuilder? | null | Layout for screens > 1024px. |
builder | Widget Function(context, constraints)? | null | Custom constraint-based builder. |
Constraint-Based Layouts
You can also use the generic builder property for custom logic that goes beyond standard breakpoints.
FxLayout(
builder: (context, constraints) {
if (constraints.maxWidth > 1200) {
return UltraWideLayout();
}
return StandardLayout();
},
)The Master Responsive Implementation
In a professional application, you need to adapt your UI strategy based on available space. Here is a complex "Dashboard Shell" demonstrating Fluxy's responsive layout engine.
class DashboardShell extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Fx.layout(
// 1. Mobile Strategy: Stacked layout with bottom navigation
mobile: (context) => Fx.col(
children: [
HeaderWidget(),
Fx.box().h(10),
StatsGrid(columns: 1),
RecentActivityList(),
Spacer(),
MobileBottomBar(),
],
).p(16),
// 2. Tablet Strategy: Side-by-side grid with larger margins
tablet: (context) => Fx.row(
children: [
NavigationRail(),
Fx.col(
children: [
HeaderWidget(),
StatsGrid(columns: 2),
RecentActivityList(),
],
).expand().p(24),
],
),
// 3. Desktop Strategy: Full sidebar with multi-column stats
desktop: (context) => Fx.row(
children: [
DesktopSidebar(),
Fx.col(
children: [
HeaderWidget(),
Fx.row(
gap: 20,
children: [
StatsGrid(columns: 4).expand(flex: 2),
NotificationsPanel().expand(),
],
),
RecentActivityList(),
],
).expand().p(32),
],
),
);
}
}Fluxy's Fx.layout automatically listens to device orientation and size changes, triggering atomic rebuilds only where necessary.
Advanced Scrolling
Fluxy provides industrial-grade scrolling primitives that solve common RenderBox vs RenderSliver conflicts and boilerplate.
Fx.refresh
A premium pull-to-refresh wrapper that integrated with platform-specific haptics and styling.
Fx.refresh(
onRefresh: () async => await controller.sync(),
child: Fx.list(children: items),
)Fx.viewport & Fx.sliver
Fx.viewport provides an atomic CustomScrollView implementation. Fx.sliver is an intelligent wrapper that automatically converts any standard widget into a SliverToBoxAdapter if it's placed inside a viewport, preventing the classic "Sliver expected" crash.
Fx.viewport(
slivers: [
Fx.sliver(HeaderWidget()), // Auto-wraps in SliverToBoxAdapter
SliverList(delegate: ...),
],
)Fx.scrollCenter
Simplifies the "Centered Form" pattern common in login screens. It handles the SingleChildScrollView + Center + ConstrainedBox boilerplate correctly, ensuring content is centered on large screens and scrollable on small ones.
Fx.scrollCenter(
child: LoginForm(),
)