Advanced Shells

The Architecture of Enterprise Apps.

Building professional dashboards and multi-level navigation is complex. Fluxy provides high-level Semantic Shells that handle the heavy lifting of layout distribution and route placement.

Fx.dashboard (The Dashboard Shell)

Automatically handles Sidebar, Top Navbar, and a scrolling Content Area with perfect responsive transitions.

Comparison

Standard Flutter (Manual Layout)

Row(
  children: [
    Sidebar(),
    Expanded(
      child: Column(
        children: [
          Navbar(),
          Expanded(child: Content()),
        ],
      ),
    ),
  ],
)

Fluxy DSL (Architectural)

Fx.dashboard(
  sidebar: MySidebar(),
  navbar: MyNavbar(),
  body: MainContent(),
  sidebarWidth: 280,
)

Fx.avatar & Fx.badge (Micro-Components)

Consistency is key for professional apps. These atoms follow the global design system.

Comparison

Standard Flutter

CircleAvatar(
  backgroundImage: NetworkImage(url),
  radius: 24,
)

Fluxy DSL

Fx.avatar(image: url, size: FxAvatarSize.lg)
  .shadow.sm
  .onTap(() => profile())

Smart Navigation (Fx.to)

Fluxy includes a global routing proxy that removes the need for Navigator.of(context) everywhere.

// Standard
Navigator.pushNamed(context, '/settings');

// Fluxy (Context-less)
Fx.to('/settings');
Fx.back();

Common "Gotchas" & Solutions