Fx.dashboard

Fx.dashboard is a high-level layout orchestrator. It manages the responsive distribution of your screen space, automatically handling transitions between mobile and desktop viewport configurations.

Usage

Fx.dashboard(
  body: MainContent(),
  navbar: MyNavbar(),
)

Features

Responsive Transitions

Automatically adapts the layout for different screen sizes:

• Mobile: Wraps the body in a clean viewport.
• Desktop: Distributes content in a structured grid or row layout.

Stacking Context

Operates as a high-level stacking context, ensuring that modals and overlays triggered from within the dashboard appear correctly above all other content.

The Master Dashboard Implementation

A complete industrial-grade administration shell using Fluxy's standalone components.

class IndustrialAdminPanel extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Fx.dashboard(
      // 1. Navigation Header
      navbar: Fx.navbar(
        logo: Fx.text("Fluxy Console").bold(),
        actions: [
          Fx.badge(label: "3", child: Icon(Icons.notifications_none)),
          Fx.button("DEPLOY").primary.sizeSm(),
        ],
      ),

      // 2. Body Workspace
      body: Fx.page(
        child: Fx.col(
          gap: 24,
          children: [
            _buildMetricsOverview(),
            Fx.text("Recent System Logs").font.md().bold(),
            _buildAuditTable(),
          ],
        ),
      ),
    );
  }
}

By using Fx.dashboard, you offload the complex orchestration of responsive viewports to the Fluxy kernel, allowing you to use standalone components like FxSidebar or FxBottomBar for highly customized navigation layouts.