Professional Workflow

Build Production UI in Record Time.

Following a standardized order of operations ensures your Fluxy app remains maintainable, performant, and premium.

Step 1: Define Reactive State (Logic First)

Start by defining your Signals. This decouples your business logic from the UI.

final count = flux(0);
final isLoading = flux(false);

Use Fx.page or Fx.dashboard to define the high-level layout of your screen.

Fx.dashboard(
  sidebar: MySidebar(),
  body: MainContent(),
)

Build your UI using the Fluxy DSL. Focus on Atomic Styling rather than nesting.

Fx.col().children([
  Fx.text("Profile").font.xl().bold(),
  "Edit".primaryBtn(onTap: () => edit()),
])

Apply responsive modifiers where the layout needs to adapt to larger screens.

Fx.box()
  .wFull() // Mobile Default
  .width(md: 400, lg: 600) // Tablet & Desktop adaptations

Feature	Standard Flutter Workflow	Fluxy Professional Workflow
State Sync	`setState`, `Provider`, or `Bloc` boilerplate.	`Signal`-based atomic reactivity.
UI Updates	Rebuilding entire trees.	Fine-grained `Fx(() => widget)` updates.
Styling	Thousands of lines in a `ThemeData`.	Localized, chainable Atomic tokens.
Refactoring	Painful widget wrapping/unwrapping.	Moving modifiers up or down the chain.

By following this order, you ensure that every screen is: