A quick mapping guide for developers moving from standard Flutter syntax to Fluxy's atomic DSL.

Flutter to Fluxy Dictionary

If you are coming from standard Flutter, you might be looking for familiar widgets like Container, Column, or Padding. Fluxy provides semantic shorthands for these to reduce boilerplate and improve readability.

Use this dictionary to find the Fluxy equivalent of common Flutter components and jump to their In-depth Documentation.

1. High-Level Shell & App Architecture

Fluxy defines the entire application skeleton with high-level builders that replace the verbose boilerplate of MaterialApp and Scaffold.

Flutter Component	Fluxy Equivalent	Advantage	Details
`MaterialApp`	`FluxyApp`	Built-in reactive theme matching, router integration, and global error handling.	View Docs
`Scaffold`	`Fx.scaffold()`	Standard screen shell with pre-styled defaults and notch awareness.	View Docs
`AppBar`	`Fx.appBar()`	Clean, declarative header with industrial styling and action registry.	View Docs
`BottomNavigationBar`	`Fx.bottomNav()`	Premium pill-style animated navigation. Context-free state binding.	View Docs
`Drawer`	`Fx.sidebar()` / `.drawer()`	Automatically switches between mobile Drawer and desktop Sidebar.	View Docs
Web Main Container	`Fx.page()`	Scaffolding with a centered container perfect for web splash/auth pages.	View Docs

2. Core Layout & UI

Flutter Widget	Fluxy Syntax	Why use Fluxy?	Details
`Container`	`Fx.box()`	Atomic chaining for colors, borders, and shadows without `BoxDecoration`.	View Docs
`Padding`	`.p(16)`	Direct modifier on any widget. No more nesting hell.	View Docs
`Column`	`Fx.col()`	Integrated `gap` property and intuitive alignment modifiers.	View Docs
`Row`	`Fx.row()`	Integrated `gap` and standard flex behavior.	View Docs
`Stack`	`Fx.stack()`	Cleaner layering with automated alignment helpers.	View Docs
`SizedBox`	`Fx.gap(16)`	Use `Fx.gap` for spacing and `.wh(w, h)` for fixed dimensions.	View Docs
`Center`	`.center()` / `Fx.center()`	A simple modifier available on all `Fx` components.	View Docs
`Expanded`	`.expand()` / `Fx.expand()`	Chainable modifier to fill available space in flex layouts.	View Docs
`Opacity`	`.opacity(0.5)`	Smooth, chainable visual modifier.	View Docs
`SafeArea`	`Fx.safe()` / `.safe()`	Handles notches and system bars with one call.	View Docs
`InkWell` / `GestureDetector`	`.onTap(() => ...)`	Add interactivity to any widget without wrapping.	View Docs
`Hero`	`Fx.hero()`	Standard Hero transitions with simplified tagging.	View Docs

3. Text & Typography

Flutter Style	Fluxy Modifier	Description	Details
`TextStyle(fontWeight: FontWeight.bold)`	`.bold()`	Quick bold toggle.	View Docs
`TextStyle(fontSize: 24)`	`.font(24)` / `.h1()`	Size tokens or direct values.	View Docs
`TextStyle(color: Colors.grey)`	`.muted()` / `.color()`	Automatic semantic coloring.	View Docs
`TextAlign.center`	`.alignCenter()`	Text alignment modifier.	View Docs
`maxLines: 2`	`.maxLines(2)`	Direct overflow control.	View Docs

4. Lists, Grids & Scrolling

Flutter Widget	Fluxy Syntax	Advantage	Details
`SingleChildScrollView`	`Fx.scroll()`	Simplified scroll container with better defaults.	View Docs
`ListView.builder`	`Fx.list()`	Automated virtualization and reactive item binding.	View Docs
`GridView`	`Fx.grid()`	Responsive layouts (1, 2, 4 cols) in one line.	View Docs
`RefreshIndicator`	`Fx.refresh()`	Premium pull-to-refresh with industrial styling.	View Docs
`CustomScrollView`	`Fx.viewport()`	Atomic viewport management using slivers.	View Docs
`SliverToBoxAdapter`	`Fx.sliver()`	Automatically converts any widget into a sliver.	View Docs
`Wrap`	`Fx.wrap()`	Semantic wrapping for chips and tags with gaps.	View Docs

5. State & Logic

Flutter / Provider Concept	Fluxy Equivalent	Description	Details
`setState(() => ...)`	`.value = ...`	Updating a signal automatically triggers local UI refresh.	View Docs
`ValueNotifier`	`flux(initialValue)`	The core reactive primitive of Fluxy.	View Docs
`Provider.of<T>(context)`	`Fluxy.find<T>()`	Global or scoped dependency injection.	View Docs
`FutureBuilder`	`fluxAsync(() => ...)`	Handling async data with elegant loading/error states.	View Docs
`Navigator.push`	`Fx.to(page)`	Type-safe, boilerplate-free navigation.	View Docs
`undo / redo`	`fluxHistory()`	State collection with built-in time travel.	View Docs

6. Feedback & Hardening

Flutter Component	Fluxy Syntax	Description	Details
`ScaffoldMessenger (SnackBar)`	`Fx.toast`	`Fx.toast.success("Done!")` from anywhere.	View Docs
`showDialog`	`Fx.dialog()`	Semantic, styled overlay boxes.	View Docs
`CircularProgressIndicator`	`Fx.loader()`	High-performance industrial loading animations.	View Docs
`Shimmer` (v3 plugin)	`Fx.shimmer()`	Native-backed kinetic loading skeletons.	View Docs
`Error Boundary`	`FluxyErrorBoundary`	Stability Kernel protection for widget crashes.	View Docs
`Feature Toggles`	`Fx.feature()`	Remotely enable/disable UI sections.	View Docs

7. Advanced Layout Shelfs

Fluxy provides high-level "Shelfs" that replace 100s of lines of boilerplate for common app architectures.

Standard Flutter	Fluxy Shelf	Purpose	Details
Manual Sidebar + Appbar	`Fx.dashboard()`	Complete Admin shell with mobile/desktop parity.	View Docs
Custom Nav Bar Row	`Fx.navbar()`	Type-safe navigation header with action registry.	View Docs
Vertical List + Header	`Fx.sidebar()`	Industrial-grade sidebar with auto-scrolling items.	View Docs
Responsive Value Logic	`Fx.on(context)`	Clean `mobile: child, desktop: child` switcher.	View Docs

8. Common Components & Forms

Flutter Widget	Fluxy Syntax	Advantage	Details
`ElevatedButton`	`Fx.button().primary()`	Pre-styled, chainable buttons with loading states.	View Docs
`TextButton`	`Fx.button().ghost()`	Clean text buttons without elevation.	View Docs
`TextField`	`Fx.input()` / `Fx.field()`	Bound directly to reactives, integrated validation.	View Docs
`DropdownButton`	`Fx.dropdown()`	Fully styled dropdown that just requires a `Signal`.	View Docs
`Image.network`	`Fx.img()`	Automatic caching, seamless loading/error states, and shapes.	View Docs
`CircleAvatar`	`Fx.avatar()`	Instant sizing, fallback initials, and image support.	View Docs
`DataTable`	`Fx.table()`	Boilerplate-free, responsive row handling.	View Docs
`Badge`	`Fx.badge()`	Perfect industrial badges for status indicators.	View Docs

The Power of Chaining

In standard Flutter, you might write:

Padding(
  padding: EdgeInsets.all(8.0),
  child: Container(
    width: 100,
    height: 100,
    decoration: BoxDecoration(
      color: Colors.blue,
      borderRadius: BorderRadius.circular(12),
    ),
    child: Center(
      child: Text("Fluxy"),
    ),
  ),
)

In Fluxy, you just type what you mean:

Fx.text("Fluxy")
  .center()
  .box
  .wh(100, 100)
  .bg(Colors.blue)
  .rounded(12)
  .p(8)

Fluxy's Semantic Parser translates these chains into an optimized, flat Flutter widget tree, giving you better performance and much cleaner code.

Flutter to Fluxy Dictionary

On this page