Fluxy

https://getfluxy.vercel.app/docs
Admin
Fluxy is a production-grade Full-Stack Flutter SDK that unifies state management, atomic styling,...
Tokens:124,641
Snippets:1,171
Trust Score:7.8
Update:6 months ago
Show doc for...
Tokens:
Raw
### FxBadge Master Implementation Example

Source: https://getfluxy.vercel.app/docs/components/badge

An example demonstrating a master badge implementation for a notification center item.

```APIDOC
## The Master Badge Implementation
A professional notification center item with animated counts and conditional visibility.
```dart
class NotificationIcon extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final unreadCount = flux(12);

    return Fx.button("").none.onTap(() => unreadCount.value = 0).child(
      Fx(() => Fx.badge(
        show: unreadCount.value > 0,
        label: unreadCount.value > 99 ? "99+" : unreadCount.value.toString(),
        color: Colors.deepOrange,
        style: FxStyle(
          border: Border.all(color: Colors.white, width: 2), // Ring effect
          shadowMd: true,
        ),
        child: Fx.box(
          child: Icon(Icons.mail_rounded, color: Colors.slate700, size: 28),
        )
        .bg(Colors.slate100)
        .p(12)
        .circle(),
      ))
      .animate(
        // The badge itself can be animated when the count changes
        scale: unreadCount.value > 0 ? 1.0 : 0.0,
        duration: 300.ms,
      )),
    );
  }
}
```

By leveraging `FxBadge`, you avoid the "Stack Drift" common in standard Flutter applications, ensuring your notifications are always exactly where they should be.
```

--------------------------------

### Profile Ribbon Example

Source: https://getfluxy.vercel.app/docs/components/avatar

An example of a responsive 'Profile Ribbon' component using FxAvatar and other Fluxy components.

```APIDOC
## Profile Ribbon Example

### Description
This example demonstrates a responsive 'Profile Ribbon' component, showcasing the integration of `FxAvatar` within a complex UI structure.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```dart
class ProfileRibbon extends StatelessWidget {
  final User user;
  
  ProfileRibbon({required this.user});

  @override
  Widget build(BuildContext context) {
    return Fx.row(
      gap: 16,
      children: [
        // 1. Dynamic Avatar with reactive state
        Fx.avatar(
          image: user.photoUrl,
          fallback: user.fullName,
          size: FxAvatarSize.lg,
          shape: FxAvatarShape.circle,
        )
        .border(2, Fx.primary) // Adding brand ring
        .p(2) // Spacing between ring and image
        .shadow.sm(),

        // 2. Info Cluster
        Fx.col(
          cross: CrossAxisAlignment.start,
          children: [
            Fx.text(user.fullName).font.lg().font.bold(),
            Fx.text(user.email).font.sm().color(FxTokens.colors.muted),
          ],
        ),
        
        Spacer(),
        
        // 3. Online Indicator
        Fx.box()
          .w(12).h(12)
          .bg(user.isOnline ? Colors.green : Colors.grey)
          .rounded.full()
      ],
    )
    .p(16)
    .bg(FxTokens.colors.card)
    .rounded(12)
    .shadow.md();
  }
}
```

### Response
#### Success Response (200)
N/A (Component Usage)

#### Response Example
N/A (Component Usage)
```

--------------------------------

### Master Input Implementation Example

Source: https://getfluxy.vercel.app/docs/forms/input

A practical example demonstrating a professional login form using FxInput, FxPassword, and FxButton with reactive validation and styling.

```APIDOC
## The Master Input Implementation

A professional login form slice with reactive validation, animated visibility toggles, and industrial styling.

### Code Example
```dart
class LoginCredentials extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 1. Define Reactive Fields with Validation
    final email = fluxField("").required("Email is mandatory").email("Invalid format");
    final password = fluxField("").required().min(8, "Minimum 8 characters");

    return Fx.col(
      gap: 16,
      children: [
        // 2. Styled Email Input
        Fx.input(
          signal: email,
          placeholder: "work@company.com",
          label: "Email Address",
          prefixIcon: Icon(Icons.email_outlined, size: 20),
          style: FxStyle(
            bg: Colors.slate50,
            rounded: 12,
            border: Border.all(color: Colors.slate200),
          ),
        ),

        // 3. Password Input with Built-in Toggle
        Fx.password(
          signal: password,
          placeholder: "Enter secret key",
          label: "Password",
          prefixIcon: Icon(Icons.lock_outline, size: 20),
          style: FxStyle(
            bg: Colors.slate50,
            rounded: 12,
            border: Border.all(color: Colors.slate200),
          ),
        ),

        Fx.gap(8),

        // 4. Reactive Submit Button
        Fx.button("AUTHENTICATE")
          .primary
          .fullWidth()
          .sizeLg()
          .onTap(() async {
            // Trigger framework-wide validation
            if (email.validate() && password.validate()) {
              Fx.toast.info("Validating with Kernel...");
              await Future.delayed(2.seconds);
              Fx.toast.success("Identity Verified");
            }
          }),
      ],
    ).p(24).bg(Colors.white).rounded(24).shadowMd();
  }
}
```

### Explanation
This example showcases:
- Defining reactive `FluxField`s with validation rules (`required`, `email`, `min`).
- Using `Fx.input` for the email field with custom styling.
- Using `Fx.password` for the password field, which includes a built-in visibility toggle.
- Integrating a reactive `Fx.button` that triggers validation upon tapping.
- Utilizing `Fx.toast` for user feedback during the authentication process.
- Demonstrating Fluxy's styling system (`FxStyle`) for visual customization.
```

--------------------------------

### Fluxy Presence Plugin - Usage Examples

Source: https://getfluxy.vercel.app/docs/plugins/presence

Examples demonstrating how to initialize and use the Fluxy Presence plugin for monitoring online users and typing indicators.

```APIDOC
## Usage

### 1. Initialize

Presence typically requires an active real-time connection.
```dart
final presence = Fluxy.register(FluxyPresencePlugin());
```

### 2. Monitor Online Users

The `users` signal is an `ObservableList` of `FluxyUserPresence` objects.
```dart
Fx(() {
  return Fx.row([
    Fx.text('Who is here?').font.bold(),
    ...presence.users.value.map((user) => 
      Fx.avatar(user.avatar).tooltip(user.name)
    )
  ]);
});
```

### 3. Typing Indicators

Broadcast your own typing status and listen for others.
```dart
// Local user typing
Fx.input(
  signal: chatMessage,
  onChanged: (val) => presence.setTyping(val.isNotEmpty),
);

// Global typing status
Fx(() {
  if (presence.typingUsers.value.isNotEmpty) {
    return Fx.text('Someone is typing...').italic().muted();
  }
  return const SizedBox.shrink();
});
```
```

--------------------------------

### Fluxy Geo Plugin Usage Examples

Source: https://getfluxy.vercel.app/docs/plugins/geo

Examples demonstrating how to initialize, use geofencing, connect to the UI, and calculate distances with the Fluxy Geo plugin.

```APIDOC
### Usage Examples

#### 1. Initialize

The plugin handles all permission requests automatically when you start tracking.
```dart
final geo = Fluxy.register(FluxyGeoPlugin());

// Start tracking with high accuracy
await geo.startTracking();
```

#### 2. Geofencing

You can define multiple geofences. The `activeGeofences` signal will update automatically as the user moves.
```dart
// Add a 500m geofence around a warehouse
geo.addGeofence('warehouse_a', 40.7128, -74.0060, 500.0);

// Use in UI or Logic
Fx(() {
  final isAtWarehouse = geo.activeGeofences.value.contains('warehouse_a');
  return Fx.text(isAtWarehouse ? 'Welcome to Warehouse A' : 'Tracking Status...');
});
```

#### 3. Connect to UI

Use the signals in your view layer to update maps, labels, or indicators in real-time.
```dart
Fx(() {
  if (!geo.isTracking.value) return Fx.text('Tracking Offline');
  
  return Fx.col([
    Fx.text('Current Speed: ${geo.speed.value.toStringAsFixed(1)} m/s').font.bold(),
    Fx.text('Active Zones: ${geo.activeGeofences.value.length}'),
    Fx.text('Position: ${geo.latitude.value}, ${geo.longitude.value}').muted(),
  ]);
});
```

#### 4. Geofencing/Distances

Check how far the user is from a target location in a `fluxComputed`.
```dart
final destination = LatLng(40.7128, -74.0060); // NYC

final distanceSignal = fluxComputed(() {
  return geo.distanceBetween(
    geo.latitude.value, 
    geo.longitude.value, 
    destination.latitude,
    destination.longitude
  );
});

Fx(() {
  return Fx.text('Distance: ${distanceSignal.value.toInt()} meters');
});
```
```

--------------------------------

### Full Example: Game Controller Checkpoint System

Source: https://getfluxy.vercel.app/docs/production/devtools

A comprehensive example demonstrating how to implement a checkpoint system using Fluxy DevTools. It includes defining state with labels, using Flux collections, capturing snapshots programmatically, and restoring them to revert the application state.

```dart
class GameController {
  // Requirement 1: Use Labels
  final score = flux(0, label: 'game_score');
  final playerName = flux('Guest', label: 'player_name');
  
  // Requirement 2: Use Flux Collections for deep data
  final inventory = flux<List<String>>(['Sword'], label: 'player_items');
}

class GameScreen extends StatelessWidget {
  final state = GameController();
  
  // Local variable to hold the snapshot in memory
  Map<String, dynamic>? _lastCheckpoint;

  @override
  Widget build(BuildContext context) {
    return Fx.col(
      children: [
        // 1. Reactive UI
        Fx(() => Fx.text("Score: ${state.score.value}")),
        
        // 2. Control Buttons
        Fx.row(
          children: [
            Fx.primaryButton('Create Checkpoint', onTap: () {
              // CAPTURE: Freeze everyone (score, name, inventory)
              _lastCheckpoint = FluxRegistry.captureSnapshot();
              Fx.toast.success("Checkpoint Created!");
            }),

            Fx.outlineButton('Load Checkpoint', onTap: () {
               if (_lastCheckpoint != null) {
                 // RESTORE: App jumps back in time instantly
                 FluxRegistry.restoreSnapshot(_lastCheckpoint!);
                 Fx.toast.info("Restored to Checkpoint");
               }
            }),
          ]
        ),
      ]
    );
  }
}
```

--------------------------------

### Master Control Implementation Example

Source: https://getfluxy.vercel.app/docs/forms/checkbox-switcher

Demonstrates a professional settings panel using FxCheckbox and FxSwitcher components with reactive logic and conditional rendering.

```APIDOC
## The Master Control Implementation
A professional settings panel demonstrating reactive switches and conditional logic.

### Description
This example showcases how to integrate `FxCheckbox` and `FxSwitcher` within a complex UI, managing multiple boolean states and their interdependencies.

### Code Example
```dart
class SettingsGroup extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final notifications = flux(true);
    final soundEffects = flux(false);
    final developerMode = flux(false);

    return Fx.box(
      child: Fx.col(
        gap: 16,
        children: [
          // 1. Primary Toggle
          Fx.row(
            main: MainAxisAlignment.spaceBetween,
            children: [
              Fx.col(
                cross: CrossAxisAlignment.start,
                children: [
                  Fx.text("Push Notifications").font.md().bold(),
                  Fx.text("Receive real-time system alerts").font.xs().muted(),
                ],
              ),
              Fx.switcher(signal: notifications, activeColor: Colors.blue),
            ],
          ),

          const Divider(),

          // 2. Conditional Control
          Fx(() => Fx.row(
            main: MainAxisAlignment.spaceBetween,
            children: [
              Fx.text("Sound Effects").muted(!notifications.value),
              Fx.switcher(
                signal: soundEffects, 
                activeColor: Colors.blue,
                enabled: notifications.value, // Integrated disabled state
              ),
            ],
          )),

          const Divider(),

          // 3. Checkbox Option
          Fx.row(
            children: [
              Fx.checkbox(signal: developerMode),
              Fx.text("Enable Kernel Debug Mode").font.sm().ml(12),
            ],
          ).onTap(() => developerMode.toggle()), // Easy toggle API
          
          Fx(() => developerMode.value 
            ? Fx.text("WARNING: Debug mode exposes internal registers.").danger().font.xs().mt(8)
            : const SizedBox.shrink()
          ),
        ],
      )
    )
    .p(24)
    .bg(Colors.white)
    .rounded(16)
    .border(1, Colors.slate100);
  }
}
```

### Key Features Demonstrated
- **Reactive Toggles**: `FxSwitcher` controls enable/disable other UI elements based on their state.
- **Conditional Rendering**: `Fx(() => ...)` is used to conditionally display warnings based on `developerMode` state.
- **State Synchronization**: All state changes are managed reactively through `flux` signals.
```

--------------------------------

### Implement Master Environment Logic with Telemetry

Source: https://getfluxy.vercel.app/docs/plugins/device

Provides a complex example of a `TelemetryController` demonstrating best practices for environment awareness, including logging app start events and adapting UI based on platform.

```dart
class TelemetryController extends FluxController {
  
  void logAppStart() {
    final deviceMeta = Fx.device.meta.value;
    final version = Fx.device.appVersion.value;
    
    // 1. Create a semantic payload for analytics
    final payload = {
      'event': 'app_opened',
      'version': version,
      'platform': deviceMeta['platform'],
      'model': deviceMeta['model'],
      'os_info': deviceMeta['os'] ?? deviceMeta['sdk'],
      'is_physical': Fx.device.isPhysical,
    };
    
    // 2. Transmit to analytics layer
    Fx.platform.analytics.logEvent('telemetry_init', payload);
  }

  // Example of platform-specific UI logic
  Widget buildPlatformTag() {
    return Fx(() {
      final platform = Fx.device.meta.value['platform'] ?? 'unknown';
      
      return Fx.row(
        children: [
          Icon(platform == 'ios' ? Icons.apple : Icons.android),
          Fx.text("Verified Build: v${Fx.device.appVersion.value}").ml(8),
        ],
      ).p(8).bg(Fx.primary.withOpacity(0.1)).rounded(8);
    });
  }
}
```

--------------------------------

### Minimal Fluxy App Setup (main.dart)

Source: https://getfluxy.vercel.app/docs/quick-start

A basic Flutter application setup using Fluxy v1.2.0 with a modular architecture. It initializes the Fluxy engine, auto-registers modules, and defines a simple UI with routing.

```dart
import 'package:flutter/material.dart';
import 'package:fluxy/fluxy.dart';

// Import specific modules if needed
import 'package:fluxy_auth/fluxy_auth.dart';
import 'package:fluxy_storage/fluxy_storage.dart';

void main() async {
  // 1. Setup core engine
  await Fluxy.init();
  
  // 2. Auto-register all installed modules
  Fluxy.autoRegister();
  
  runApp(
    FluxyApp(
      title: "Hello Fluxy v1.2.0",
      initialRoute: FxRoute(
        path: "/",
        builder: (context, args) => Fx.center(
          child: Fx.col([
            Fx.text("Hello Fluxy v1.2.0!")
              .font.xxl()
              .font.bold()
              .color(Fx.primary)
              .center(),
            Fx.text("Modular Architecture")
              .font.lg()
              .color(FxTokens.colors.muted)
              .center(),
            Fx.button("Get Started")
              .primary
              .onTap(() => print("Button clicked!"))
              .center()
              .mt(4),
          ]).gap(2),
        ),
      ),
    ),
  );
}
```

--------------------------------

### Setup Workspace and Monorepo Environment

Source: https://getfluxy.vercel.app/docs/installation

Commands to activate Melos and bootstrap a modular Fluxy workspace for managing multiple local packages.

```bash
dart pub global activate melos
fluxy melos bootstrap
fluxy melos run analyze
fluxy melos run test
```

--------------------------------

### Install Fluxy Camera Module via CLI

Source: https://getfluxy.vercel.app/docs/plugins/camera

Installs the camera module using the Fluxy CLI to maintain architectural integrity. This is the first step in integrating camera functionality.

```bash
fluxy module add camera
```

--------------------------------

### FxText Implementation: Article Header Example

Source: https://getfluxy.vercel.app/docs/components/text

A complete example of creating an article header using FxText and other Fluxy layout components, showcasing orchestrated typography and semantic spacing.

```dart
class ArticleHeader extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Fx.col(
      cross: CrossAxisAlignment.start,
      children: [
        // Category Label
        Fx.row(
          children: [
            Fx.box().size(8, 8).bg(Colors.blue).circle(),
            Fx.text("ENGINEERING REPORT")
              .font.xs()
              .semiBold()
              .letterSpacing(2)
              .color(Colors.blue)
              .ml(8),
          ],
        ),
        
        Fx.gap(12), 
        
        // Main Headline
        Fx.text("Scaling Fluxy Connectivity to 10k Concurrent Sockets")
          .font.xl4()
          .bold()
          .lineHeight(1.2),
          
        Fx.gap(8), 
        
        // Sub-headline (Muted)
        Fx.text("An in-depth analysis of how the Managed Runtime handles massive real-time data ingestion without frame drops.")
          .font.md()
          .muted()
          .lineHeight(1.5),
          
        Fx.gap(24), 
        
        // Author Attribution
        Fx.row(
          children: [
            Fx.avatar(url: "https://api.dicebear.com/7.x/avataaars/svg?seed=Fluxy"),
            Fx.col(
              children: [
                Fx.text("Sarah Jenkins").font.sm().bold(),
                Fx.text("Principal Framework Architect").font.xs().muted(),
              ],
            ).ml(12),
          ],
        ),
      ],
    ).p(32).bg(Colors.slate50);
  }
}
```

--------------------------------

### Permissions Module Installation

Source: https://getfluxy.vercel.app/docs/plugins/permissions

Instructions on how to add the permissions module using the Fluxy CLI.

```APIDOC
## Installation (via CLI)

Add the permissions module using the Fluxy CLI to maintain architectural integrity.

```
fluxy module add permissions
```
```

--------------------------------

### Install Fluxy Haptics Module

Source: https://getfluxy.vercel.app/docs/plugins/haptics

Use the Fluxy CLI to add the haptics module to your project, ensuring architectural integrity.

```shell
fluxy module add haptics
```

--------------------------------

### Implement Basic FxSidebar Navigation

Source: https://getfluxy.vercel.app/docs/components/sidebar

Demonstrates the minimal setup for an FxSidebar, including defining navigation items, handling tap events, and adding header/footer widgets.

```dart
FxSidebar(
  currentIndex: _index.value,
  onTap: (i) => _index.value = i,
  header: Fx.text("Admin Panel").bold().p(24),
  items: const [
    FxSidebarItem(icon: Icons.dashboard, label: "Dashboard"),
    FxSidebarItem(icon: Icons.analytics, label: "Analytics"),
    FxSidebarItem(icon: Icons.settings, label: "Settings"),
  ],
  footer: Fx.text("v2.0.0").muted().p(16),
)
```

--------------------------------

### Fluxy Internationalization Setup

Source: https://getfluxy.vercel.app/docs/ecosystem/i18n

Initialize Fluxy's i18n module by loading a map of translations keyed by language codes.

```APIDOC
## Basic Setup

Initialize your translations by loading a map into the `FluxyI18n` engine. Each top-level key should be a language code (e.g., 'en', 'es').

```dart
void main() {
  FluxyI18n.load({
    'en': {
      'hello': 'Hello World',
      'welcome': 'Welcome, {name}!',
      'items': {
        'zero': 'No items',
        'one': 'One item',
        'other': '{n} items',
      },
    },
    'es': {
      'hello': 'Hola Mundo',
      'welcome': '¡Bienvenido, {name}!',
    }
  });
  
  runApp(FluxyRoot(child: MyApp()));
}
```
```

--------------------------------

### Using Fluxy Modular Features

Source: https://getfluxy.vercel.app/docs/quick-start

Demonstrates how to access and use features from installed Fluxy modules, such as authentication, storage, and camera, through the `Fx.platform` interface.

```dart
// Using authentication module
Future<void> login() async {
  final auth = Fx.platform.auth;
  final result = await auth.signIn(email: 'user@example.com', password: 'password');
  if (result.success) {
    print('Logged in successfully!');
  }
}

// Using storage module
Future<void> saveData() async {
  final storage = Fx.platform.storage;
  await storage.set('user_preference', 'dark_mode');
  final preference = await storage.get('user_preference');
  print('Preference: $preference');
}

// Using camera module
Future<void> takePhoto() async {
  final camera = Fx.platform.camera;
  final image = await camera.capture();
  print('Photo captured: ${image.path}');
}
```

--------------------------------

### Master Badge Implementation

Source: https://getfluxy.vercel.app/docs/components/badge

A complete example of a notification center item featuring conditional visibility, animated scaling, and border styling.

```dart
class NotificationIcon extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final unreadCount = flux(12);
    return Fx.button("").none.onTap(() => unreadCount.value = 0).child(
      Fx(() => Fx.badge(
        show: unreadCount.value > 0,
        label: unreadCount.value > 99 ? "99+" : unreadCount.value.toString(),
        color: Colors.deepOrange,
        style: FxStyle(
          border: Border.all(color: Colors.white, width: 2),
          shadowMd: true,
        ),
        child: Fx.box(
          child: Icon(Icons.mail_rounded, color: Colors.slate700, size: 28),
        )
        .bg(Colors.slate100)
        .p(12)
        .circle(),
      )
      .animate(
        scale: unreadCount.value > 0 ? 1.0 : 0.0,
        duration: 300.ms,
      )),
    );
  }
}
```

--------------------------------

### Financial Dashboard with FxChart

Source: https://getfluxy.vercel.app/docs/components/chart

An example implementation of a real-time financial monitoring chart using FxChart, demonstrating dynamic data updates and custom styling.

```APIDOC
## Financial Dashboard with FxChart

### Description
This example showcases a `FinancialDashboard` widget that utilizes `FxChart` to display real-time revenue data. It includes features like dynamic updates, custom tooltips, and interactive buttons for simulation and reset.

### Method
N/A (UI Component)

### Endpoint
N/A (UI Component)

### Parameters
N/A

### Request Example
```dart
class FinancialDashboard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Dynamic data signal
    final revenue = flux<List<FxChartPoint>>([
      FxChartPoint(label: "JAN", value: 3400),
      FxChartPoint(label: "FEB", value: 4200),
      FxChartPoint(label: "MAR", value: 3800),
      FxChartPoint(label: "APR", value: 5100),
      FxChartPoint(label: "MAY", value: 4900),
      FxChartPoint(label: "JUN", value: 6200),
    ]);

    return Fx.box(
      child: Fx.col(
        cross: CrossAxisAlignment.start,
        children: [
          Fx.text("Monthly Revenue").font.lg().bold(),
          Fx.text("Fiscal Year 2026 Analysis").muted().font.xs().mb(24),
          
          // The Chart Widget
          Fx.chart(
            data: revenue,
            type: FxChartType.line,
            height: 300,
            style: FxStyle(
              color: Colors.blue.shade600,
              strokeWidth: 4,
              showDots: true,
              shadowSm: true, // Adds depth to the line
            ),
          ),
          
          Fx.gap(24),
          
          // Action Controls
          Fx.row(
            gap: 12,
            children: [
              Fx.button("SIMULATE GROWTH").primary.onTap(() {
                final lastVal = revenue.value.last.value;
                revenue.value = [
                  ...revenue.value,
                  FxChartPoint(label: "NEW", value: lastVal + 500),
                ];
              }).expanded(),
              Fx.button("RESET").outline.onTap(() {
                revenue.value = revenue.value.take(6).toList();
              }).expanded(),
            ],
          ),
        ],
      )
    )
    .p(32)
    .bg(Colors.white)
    .rounded(24)
    .shadowLg();
  }
}
```

### Response
#### Success Response (200)
N/A (UI Component)

#### Response Example
N/A
```

--------------------------------

### Install Fluxy Sync Plugin

Source: https://getfluxy.vercel.app/docs/plugins/sync

Demonstrates how to add the fluxy_sync plugin dependency to your project's pubspec.yaml file or use the Fluxy CLI to add the module.

```yaml
dependencies:
  fluxy_sync: ^1.0.0
```

```bash
fluxy module add sync
```

--------------------------------

### Profile Ribbon Implementation with FxAvatar

Source: https://getfluxy.vercel.app/docs/components/avatar

An example of a responsive 'Profile Ribbon' component using FxAvatar, Fx.row, Fx.col, and other Fluxy components to display user information.

```dart
class ProfileRibbon extends StatelessWidget {
  final User user;
  
  ProfileRibbon({required this.user});

  @override
  Widget build(BuildContext context) {
    return Fx.row(
      gap: 16,
      children: [
        // 1. Dynamic Avatar with reactive state
        Fx.avatar(
          image: user.photoUrl,
          fallback: user.fullName,
          size: FxAvatarSize.lg,
          shape: FxAvatarShape.circle,
        )
        .border(2, Fx.primary) // Adding brand ring
        .p(2) // Spacing between ring and image
        .shadow.sm(),

        // 2. Info Cluster
        Fx.col(
          cross: CrossAxisAlignment.start,
          children: [
            Fx.text(user.fullName).font.lg().font.bold(),
            Fx.text(user.email).font.sm().color(FxTokens.colors.muted),
          ],
        ),
        
        Spacer(),
        
        // 3. Online Indicator
        Fx.box()
          .w(12).h(12)
          .bg(user.isOnline ? Colors.green : Colors.grey)
          .rounded.full()
      ],
    )
    .p(16)
    .bg(FxTokens.colors.card)
    .rounded(12)
    .shadow.md();
  }
}
```

--------------------------------

### Fluxy Context-Free Logic Example

Source: https://getfluxy.vercel.app/docs/building-with-ai

Shows how Fluxy enables context-free logic for state management and UI feedback, simplifying AI code generation by removing the need for BuildContext.

```dart
Fluxy.to('/home')
Fx.toast.success('Operation completed')
```

--------------------------------

### Initialize Fluxy Geo Plugin

Source: https://getfluxy.vercel.app/docs/plugins/geo

Demonstrates how to initialize the Fluxy Geo plugin and start location tracking with high accuracy. The plugin handles permission requests automatically.

```dart
final geo = Fluxy.register(FluxyGeoPlugin());

// Start tracking with high accuracy
await geo.startTracking();
```

--------------------------------

### Fluxy Storage Boot Sequence

Source: https://getfluxy.vercel.app/docs/plugins/storage

Configuring the application main entry point to initialize the Fluxy framework and register the storage plugin.

```dart
import 'package:fluxy/fluxy.dart';
import 'core/registry/fluxy_registry.dart'; 

void main() async {
  await Fluxy.init();
  Fluxy.registerRegistry(() => registerFluxyPlugins()); 
  Fluxy.autoRegister();
  runApp(MyApp());
}
```

--------------------------------

### Install Fluxy CLI

Source: https://getfluxy.vercel.app/docs/fundamentals/cli

Installs the Fluxy CLI globally using the Dart package manager. This command is essential for accessing all Fluxy CLI functionalities.

```bash
dart pub global activate fluxy
```

--------------------------------

### Initialize Reactive Lists

Source: https://getfluxy.vercel.app/docs/fundamentals/advanced-control

Demonstrates how to create reactive lists using the .obs extension or the fluxList constructor, which automatically trigger UI updates when modified.

```dart
// Way 1: Extension (Preferred)
final items = ['A', 'B'].obs;

// Way 2: Constructor
final tasks = fluxList<String>(['Task 1']);

// Usage in UI
Fx(() => Fx.col(
  children: items.map((i) => Fx.text(i)).toList(),
))
```

--------------------------------

### Configure Fluxy Boot Sequence

Source: https://getfluxy.vercel.app/docs/plugins/biometrics

Initialize the Fluxy framework and register plugins in the main entry point to enable biometric hardware handlers.

```dart
import 'package:fluxy/fluxy.dart';
import 'core/registry/fluxy_registry.dart'; 

void main() async {
  await Fluxy.init();
  Fluxy.registerRegistry(() => registerFluxyPlugins()); 
  Fluxy.autoRegister(); // Boots biometric hardware handlers
  runApp(MyApp());
}
```

--------------------------------

### Fluxy OTA Remote Kill-Switch Manifest Example

Source: https://getfluxy.vercel.app/docs/plugins/ota

An example JSON manifest used by the Fluxy OTA engine to remotely disable specific platform modules, acting as a kill-switch to prevent production crashes.

```json
{
  "version": 5,
  "disabled_plugins": ["fluxy_biometric"],
  "assets": { ... }
}
```

--------------------------------

### Fluxy App Entry Point (main.dart)

Source: https://getfluxy.vercel.app/docs/tutorial

Sets up the main entry point for a Fluxy application. It initializes the Fluxy engine, configures the app's theme, and defines the initial route for the Task Manager.

```dart
import 'package:flutter/material.dart';
import 'package:fluxy/fluxy.dart';

import 'features/tasks/tasks.view.dart';

void main() async {
  // Initialize the Fluxy Engine (Routing, DI, State)
  await Fluxy.init();
  
  runApp(
    FluxyApp(
      title: "Task Manager",
      // Set the default theme to our custom styling engine
      theme: FxTheme.light(),
      initialRoute: FxRoute(
        path: "/",
        builder: (context, args) => TasksView(),
      ),
    ),
  );
}
```

--------------------------------

### Fluxy Master OTA Implementation - Boot Controller

Source: https://getfluxy.vercel.app/docs/plugins/ota

A complex 'Boot Loader' example using Fluxy's OTA orchestration for dynamic feature targeting and asset management. It demonstrates triggering OTA updates, retrieving remote configurations, and handling emergency logouts.

```dart
class AppBootController extends FluxController {
  final isSyncing = flux(false);
  final updateStatus = flux('Initializing...');

  @override
  void onInit() async {
    super.onInit();
    await _performRemoteSync();
  }

  Future<void> _performRemoteSync() async {
    isSyncing.value = true;
    updateStatus.value = 'Checking for architectural updates...';

    try {
      // 1. Trigger the OTA update cycle
      // This automatically handles versioning and asset caching
      await Fx.platform.ota.update("https://api.fluxy.io/v1/manifest");
      
      // 2. Retrieve dynamic configuration for the current session
      final remoteConfig = await Fx.platform.ota.getJson("session_config.json");
      
      if (remoteConfig != null && remoteConfig['force_logout'] == true) {
        // Handle emergency remote logout
        await Fx.platform.auth.signOut();
        Fx.toNamed('/login');
      }

      updateStatus.value = 'Environment Ready';
    } catch (e) {
      updateStatus.value = 'Local Mode (Sync Failed)';
      Fx.log.fatal("OTA Sync interrupted", error: e);
    } finally {
      isSyncing.value = false;
    }
  }

  // Example of using OTA assets in UI
  Widget buildSeasonalBanner() {
    return FutureBuilder<Map<String, dynamic>?>(
      future: Fx.platform.ota.getJson("banner_v1.json"),
      builder: (context, snapshot) {
        if (!snapshot.hasData) return const SizedBox.shrink();
        
        final data = snapshot.data!;
        return Fx.box()
          .bg(Fx.hex(data['color']))
          .p(16)
          .child(Fx.text(data['text']).font.white());
      },
    );
  }
}
```

--------------------------------

### Configure Fluxy Boot Sequence for Notifications

Source: https://getfluxy.vercel.app/docs/plugins/notifications

Sets up the main application file to initialize Fluxy and register notification listeners and channels. Requires the Fluxy SDK.

```dart
import 'package:fluxy/fluxy.dart';
import 'core/registry/fluxy_registry.dart'; 

void main() async {
  await Fluxy.init();
  Fluxy.registerRegistry(() => registerFluxyPlugins()); 
  Fluxy.autoRegister(); // Boots notification listeners and channels
  runApp(MyApp());
}
```

--------------------------------

### Connectivity Module Installation

Source: https://getfluxy.vercel.app/docs/plugins/connectivity

Instructions on how to add the connectivity module to your Fluxy project.

```APIDOC
## Install Connectivity Module

### Description
Add the connectivity module to your project using the Fluxy CLI.

### Command
```bash
fluxy module add connectivity
```
```

--------------------------------

### Fluxy Professional Logging Example (Dart)

Source: https://getfluxy.vercel.app/docs/fundamentals/state-management

Shows examples of Fluxy's professional logging output for state operations. The logs indicate when a Flux object is created, updated, or when automatic repairs are applied due to circular dependencies. The code demonstrates updating a `count` variable and the expected log messages.

```dart
// Logs will show:
// [DATA] [AUDIT] Flux created: count
// [DATA] [AUDIT] Flux updated: count = 5
// [DATA] [REPAIR] Auto-repair applied to circular dependency

final count = flux(0);
count.value = 5; // [DATA] [AUDIT] Flux updated: count = 5
```

--------------------------------

### Create Utility Components

Source: https://getfluxy.vercel.app/docs/components/advanced

Demonstrates the implementation of loading skeleton states using FxShimmer and user avatars with fallback support using FxAvatar.

```dart
Fx.shimmer(
  child: Fx.box().w(200).h(20).bg(Colors.grey[300]),
);

Fx.avatar(
  url: 'https://example.com/user.jpg',
  placeholder: 'JD',
  size: 48,
)
```

--------------------------------

### Fluxy Initialization and Configuration

Source: https://getfluxy.vercel.app/docs/fundamentals/fluxy-core

Methods for initializing the framework, registering plugins, and enabling debugging modes.

```APIDOC
## Initialization and Configuration

### Description
Methods to boot the framework, register plugins, and enable development tools.

### Methods
- **Fluxy.init()**: Boots dependency injection, storage, and plugin systems.
- **Fluxy.register(plugin)**: Registers a plugin before initialization.
- **Fluxy.setStrictMode(bool)**: Enables layout error detection.
- **Fluxy.debug(Widget)**: Wraps the root widget to enable visual inspector overlay.

### Usage Example
```dart
void main() async {
  Fluxy.register(MyAnalyticsPlugin());
  await Fluxy.init();
  runApp(Fluxy.debug(child: MyApp()));
}
```
```

--------------------------------

### GET /observability/stats

Source: https://getfluxy.vercel.app/docs/production/hardening

Retrieves performance metrics and signal update statistics for debugging and optimization.

```APIDOC
## GET /observability/stats

### Description
Fetches current signal and rebuild statistics to identify performance bottlenecks.

### Method
GET

### Endpoint
/observability/stats

### Response
#### Success Response (200)
- **signalLeaderboard** (object) - Stats on which signals are updating most frequently.
- **rebuildStats** (object) - Stats on widget rebuild performance.

### Response Example
{
  "signalLeaderboard": { "user_profile_signal": 150 },
  "rebuildStats": { "DashboardView": 5 }
}
```

--------------------------------

### Basic FxGrid Usage

Source: https://getfluxy.vercel.app/docs/components/grid

Demonstrates how to implement a responsive grid using FxGrid with custom gap settings and responsive breakpoints for different screen sizes.

```dart
FxGrid(
  gap: 16,
  children: items.map((i) => Card(i)).toList(),
  style: FxStyle(gridCols: 1), // Default: 1 Col (Mobile)
  responsive: FxResponsiveStyle(
    md: FxStyle(gridCols: 2),  // Tablet: 2 Cols
    lg: FxStyle(gridCols: 4),  // Desktop: 4 Cols
  ),
);
```

--------------------------------

### Fluxy Batch Updates Example (Dart)

Source: https://getfluxy.vercel.app/docs/fundamentals/state-management

Illustrates Fluxy's automatic batching of multiple state updates. When several state variables are modified in quick succession, Fluxy groups these updates into a single rebuild cycle, improving performance by reducing unnecessary UI re-renders. The example shows updating `count`, `name`, and `isLoading`.

```dart
// These updates are batched into a single rebuild
count.value = 1;
name.value = "John";
isLoading.value = false;
```

--------------------------------

### Initialize Fluxy Project

Source: https://getfluxy.vercel.app/docs/quick-start

Creates a new Fluxy project with the official 'core/features' architecture. This command sets up the basic project structure.

```bash
fluxy init my_awesome_app
```

--------------------------------

### Fluxy Storage Installation

Source: https://getfluxy.vercel.app/docs/plugins/storage

The command to add the storage module to your project using the Fluxy CLI.

```bash
fluxy module add storage
```

--------------------------------

### Defining a FluxRepository

Source: https://getfluxy.vercel.app/docs/fundamentals/state-management

Example of the FluxRepository pattern for handling data orchestration, including persistent state management.

```dart
class AuthRepository extends FluxRepository {
  late final session = flux<dynamic>(null, key: 'user_session', persist: true);

  Future<void> login(String email, String password) async {
    final data = await Fx.http.post('/auth/login', body: {'email': email, 'password': password});
    session.value = data;
  }
}
```

--------------------------------

### Configure Fluxy Boot Sequence

Source: https://getfluxy.vercel.app/docs/plugins/analytics

Initialize the Fluxy framework and register plugins in your main.dart file to enable the analytics dispatcher.

```dart
import 'package:fluxy/fluxy.dart';
import 'core/registry/fluxy_registry.dart'; 

void main() async {
  await Fluxy.init();
  Fluxy.registerRegistry(() => registerFluxyPlugins()); 
  Fluxy.autoRegister(); // Boots analytics dispatcher
  runApp(MyApp());
}
```

--------------------------------

### Integrating Haptic Feedback

Source: https://getfluxy.vercel.app/docs/components/bottom-bar

Example of how to trigger haptic feedback within the onTap callback to enhance user interaction.

```dart
onTap: (index) {
  Fx.haptic?.medium(); 
  activeTab.value = index;
}
```

--------------------------------

### Initialize and Manage Fluxy Projects and Modules

Source: https://getfluxy.vercel.app/docs/installation

CLI commands for initializing a new Fluxy project and adding specific platform modules to an existing application.

```bash
fluxy init my_awesome_app
fluxy module add auth
fluxy module add storage
```

--------------------------------

### FxGrid Specialized Presets

Source: https://getfluxy.vercel.app/docs/components/grid

Examples of using optimized presets for specific content types, including cards and image galleries.

```dart
// Cards Grid
Fx.grid.cards(
  items: products,
  builder: (product) => ProductCard(product),
);

// Gallery Grid
Fx.grid.gallery(
  items: images,
  builder: (img) => Fx.image(img).cover(),
);
```

--------------------------------

### Build Master Product View Shell

Source: https://getfluxy.vercel.app/docs/components/shell

A comprehensive example demonstrating the integration of Fx.page, Fx.appBar, and custom UI elements. This implementation features a sticky header, responsive content grid, and a floating call-to-action button with animation.

```dart
class ProductPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Fx.page(
      maxWidth: 1200,
      appBar: Fx.appBar(
        titleWidget: Fx.row(
          gap: 12,
          children: [
            Fx.icon(Icons.shopping_cart_outlined),
            Fx.text("Industrial Store").bold(),
          ],
        ),
        actions: [
          Fx.avatar(fallback: "JD").onTap(() => Fx.to('/profile')),
        ],
      ),
      child: Fx.col(
        gap: 24,
        children: [
          Fx.img("product_hero.jpg").h(400).cover().rounded(24),
          Fx.text("Fluxy SDK Enterprise").h1(),
          Fx.text("The complete observability and performance shield.").muted(),
          ProductSpecsGrid(),
        ],
      ).p(32),
      floatingActionButton: Fx.button("BUY NOW")
        .primary()
        .shadowXL()
        .animate(scale: 1.1, duration: 300.ms)
        .loop(reverse: true),
    );
  }
}
```

--------------------------------

### Opening Permission Settings

Source: https://getfluxy.vercel.app/docs/plugins/permissions

Demonstrates how to open the device's native settings for permissions.

```APIDOC
## Best Practices - Handle "Permanently Denied"

Use `openSettings()` to guide users if they have denied multiple times.

```dart
await Fx.platform.permissions.openSettings()
```
```

--------------------------------

### Install Fluxy Presence Plugin

Source: https://getfluxy.vercel.app/docs/plugins/presence

Methods to add the presence plugin to a Fluxy project via pubspec.yaml or the Fluxy CLI.

```yaml
dependencies:
  fluxy_presence: ^1.0.0
```

```bash
fluxy module add presence
```

--------------------------------

### Registering and Retrieving Dependencies

Source: https://getfluxy.vercel.app/docs/fundamentals/state-management

Demonstrates how to register services with specific scopes (app, route, factory) and retrieve them using standard or shorthand methods.

```dart
// Register services with specific scopes
FluxyDI.put(AuthController(), scope: FxScope.app);
FluxyDI.put(ProfileController(), scope: FxScope.route);

// Lazy loading (instance created only when first used)
FluxyDI.lazyPut(() => ExpensiveController());

// Standard retrieval
final auth = FluxyDI.find<AuthController>();

// Using shorthands
final profile = use<ProfileController>();
```

--------------------------------

### Install Fluxy Biometric Module

Source: https://getfluxy.vercel.app/docs/plugins/biometrics

Use the Fluxy CLI to add the biometric module to your project, ensuring architectural integrity.

```shell
fluxy module add biometric
```

--------------------------------

### Transition Modes

Source: https://getfluxy.vercel.app/docs/ecosystem/routing

Illustrates how to configure different transition animations between routes using `FxTransition`.

```APIDOC
## Transition Modes

### Description
Fluxy supports various built-in transitions via `FxTransition` for animating route changes.

### Method
N/A (Configuration)

### Endpoint
N/A (Configuration)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```dart
FxRoute(
  path: "/details",
  builder: (p, a) => DetailsPage(),
  transition: FxTransition.fade,
  transitionDuration: const Duration(milliseconds: 500),
)
```

### Response
N/A (Configuration)

#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### Install Fluxy Analytics Module

Source: https://getfluxy.vercel.app/docs/plugins/analytics

Use the Fluxy CLI to add the analytics module to your project, ensuring architectural integrity.

```bash
fluxy module add analytics
```

--------------------------------

### Defining Basic Routes

Source: https://getfluxy.vercel.app/docs/ecosystem/routing

Demonstrates how to define routes using FxRoute, specifying the path and a builder function for the UI.

```APIDOC
## Defining Basic Routes

### Description
Routes are defined using the `FxRoute` class. Each route requires a path and a builder that receives both URL parameters and optional transition arguments.

### Method
N/A (Configuration)

### Endpoint
N/A (Configuration)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```dart
final routes = [
  FxRoute(
    path: "/", 
    builder: (params, args) => const HomePage(),
  ),
  FxRoute(
    path: "/user/:id", 
    builder: (params, args) => UserPage(id: params['id']!),
  ),
];
```

### Response
N/A (Configuration)

#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### Configure Fluxy Boot Sequence

Source: https://getfluxy.vercel.app/docs/plugins/haptics

Initialize the Fluxy framework and register plugins in your main.dart file to enable the sensory core.

```dart
import 'package:fluxy/fluxy.dart';
import 'core/registry/fluxy_registry.dart'; 

void main() async {
  await Fluxy.init();
  Fluxy.registerRegistry(() => registerFluxyPlugins()); 
  Fluxy.autoRegister(); // Boots sensory core
  runApp(MyApp());
}
```

--------------------------------

### Install Fluxy Logger Module

Source: https://getfluxy.vercel.app/docs/plugins/logger

Adds the logger module to your Fluxy project using the command-line interface to maintain architectural integrity.

```bash
fluxy module add logger
```

--------------------------------

### Setup Melos for Workspace Management

Source: https://getfluxy.vercel.app/docs/quick-start

Activates the Melos tool for managing monorepos and bootstraps the workspace. This is recommended for modular Fluxy projects.

```bash
# 1. Activate Melos
dart pub global activate melos

# 2. Bootstrap workspace
fluxy melos bootstrap
```

--------------------------------

### Initialize Fluxy Project

Source: https://getfluxy.vercel.app/docs/tutorial

Initializes a new Fluxy application with the standard core and features folder structure. This command sets up the basic project scaffolding for a Fluxy application.

```bash
fluxy init task_manager
cd task_manager
```

--------------------------------

### Initialize Fluxy Authentication

Source: https://getfluxy.vercel.app/docs/plugins/auth

Demonstrates how to initialize the Fluxy platform and register the authentication module during application startup.

```dart
void main() async {
  await Fluxy.init();
  Fluxy.autoRegister(); // Automatically boots auth and session tracking
  
  runApp(MyApp());
}
```

--------------------------------

### Unified API Usage

Source: https://getfluxy.vercel.app/docs/plugins/permissions

Demonstrates how to access and use the permissions module through the stable `Fx.platform` gateway.

```APIDOC
## Usage (Unified API)

Access the module through the stable `Fx.platform` gateway.

```dart
// Request single permission
final status = await Fx.platform.permissions.request(FluxyPermission.camera);

// Reactive Status Watching
Fx(() {
  final status = Fx.platform.permissions.statusOf(FluxyPermission.camera).value;
  return Fx.text("Camera Status: ${status.name}");
});
```
```

--------------------------------

### Responsive Image Serving with Fx.responsiveImage

Source: https://getfluxy.vercel.app/docs/components/image

Explains how to use Fx.responsiveImage to serve different image assets based on screen size (xs, md, lg) for optimized performance.

```dart
Fx.responsiveImage(
  xs: "mobile-banner.jpg",
  md: "tablet-banner.jpg",
  lg: "desktop-huge.jpg",
  height: 300,
  fit: BoxFit.cover,
)
```

--------------------------------

### Install Fluxy Permissions Module (CLI)

Source: https://getfluxy.vercel.app/docs/plugins/permissions

Adds the permissions module to your Fluxy project using the command-line interface to maintain architectural integrity.

```bash
fluxy module add permissions
```

--------------------------------

### Implement Multimedia and Inputs

Source: https://getfluxy.vercel.app/docs/components/advanced

Shows how to use optimized image loading with caching and reactive dropdown menus that bind directly to signals.

```dart
Fx.image('logo.png').cover().rounded(12);

final selectedCategory = flux('Electronics');

Fx.dropdown(
  signal: selectedCategory,
  items: ['Electronics', 'Furniture', 'Clothing'],
)
```

--------------------------------

### Install Fluxy Geo Plugin

Source: https://getfluxy.vercel.app/docs/plugins/geo

Instructions for adding the fluxy_geo plugin to your project's dependencies via pubspec.yaml or using the Fluxy CLI.

```yaml
dependencies:
  fluxy_geo: ^1.0.0
```

```bash
fluxy module add geo
```
Tokens:
Raw