Hux UI

https://docs.thehuxdesign.com
Admin
Hux UI is an open-source state-of-the-art UI library for Flutter providing 25+ customizable, modern...
Tokens:53,805
Snippets:514
Trust Score:6
Update:7 months ago
Show doc for...
Tokens:
Raw
### Install Hux UI Package

Source: https://docs.thehuxdesign.com/quickstart

Adds the Hux UI dependency to your existing Flutter project via the command line.

```bash
flutter pub add hux
```

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

### Implement Loading States with HuxLoadingOverlay

Source: https://docs.thehuxdesign.com/quickstart

Shows how to manage asynchronous operations using HuxLoadingOverlay to block interactions and display progress. It includes examples for both overlaying entire sections and standalone loading indicators.

```dart
HuxLoadingOverlay(
  isLoading: _isLoading,
  message: 'Processing...',
  child: Column(
    children: [
      HuxButton(
        onPressed: _isLoading ? null : _handleSubmit,
        isLoading: _isLoading,
        child: Text('Submit'),
      ),
      // Or standalone loading
      if (_isLoading) HuxLoading(size: HuxLoadingSize.medium),
    ],
  ),
)
```

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

### Display Data with Charts and Badges

Source: https://docs.thehuxdesign.com/quickstart

Provides an example of rendering data visualizations using HuxChart and status indicators using the HuxBadge component.

```dart
Column(
  children: [
    HuxChart.line(
      data: [
        {'x': 1, 'y': 10},
        {'x': 2, 'y': 20},
        {'x': 3, 'y': 15},
      ],
      xField: 'x',
      yField: 'y',
      title: 'Sales Data',
    ),
    SizedBox(height: 20),
    Row(
      children: [
        HuxBadge(
          label: 'New',
          variant: HuxBadgeVariant.primary,
        ),
        SizedBox(width: 8),
        HuxBadge(
          label: 'Success',
          variant: HuxBadgeVariant.success,
        ),
      ],
    ),
  ],
)
```

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

### Use Hux UI Components

Source: https://docs.thehuxdesign.com/installation

Demonstrates the usage of basic Hux UI components, such as `HuxButton` and `HuxCard`, within a Flutter widget. This example shows how to instantiate these components and apply their basic properties.

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Hux UI Demo')),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          children: [
            HuxButton(
              onPressed: () => print('Button pressed!'),
              child: Text('Primary Button'),
              variant: HuxButtonVariant.primary,
            ),
            SizedBox(height: 16),
            HuxCard(
              title: 'Welcome to Hux UI',
              child: Text('This is a Hux UI card component.'),
            ),
          ],
        ),
      ),
    );
  }
}

```

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

### Run Flutter Application

Source: https://docs.thehuxdesign.com/quickstart

Executes the command to launch the Flutter application on the connected device or emulator.

```bash
flutter run
```

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

### Build UI with Hux Components

Source: https://docs.thehuxdesign.com/quickstart

Demonstrates the implementation of HuxCard, HuxInput, and various HuxButton variants within a StatefulWidget. It includes state management for loading indicators.

```dart
class QuickstartPage extends StatefulWidget {
  @override
  _QuickstartPageState createState() => _QuickstartPageState();
}

class _QuickstartPageState extends State<QuickstartPage> {
  bool _isLoading = false;
  final _textController = TextEditingController();
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Hux UI Quickstart')),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            HuxCard(
              title: 'Welcome to Hux UI',
              subtitle: 'Modern Flutter components',
              child: Text('This is your first Hux UI app!'),
            ),
            SizedBox(height: 20),
            
            HuxInput(
              label: 'Enter your name',
              hint: 'Type here...',
              controller: _textController,
              prefixIcon: Icon(FeatherIcons.user),
            ),
            SizedBox(height: 20),
            
            HuxButton(
              onPressed: _isLoading ? null : () {
                setState(() { _isLoading = true; });
                Future.delayed(Duration(seconds: 2), () {
                  setState(() { _isLoading = false; });
                });
              },
              isLoading: _isLoading,
              child: Text('Get Started'),
              variant: HuxButtonVariant.primary,
            ),
            SizedBox(height: 20),
            
            Row(
              children: [
                Expanded(
                  child: HuxButton(
                    onPressed: () {},
                    child: Text('Secondary'),
                    variant: HuxButtonVariant.secondary,
                  ),
                ),
                SizedBox(width: 12),
                Expanded(
                  child: HuxButton(
                    onPressed: () {},
                    child: Text('Outline'),
                    variant: HuxButtonVariant.outline,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
```

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

### Customize Themes and Design Tokens

Source: https://docs.thehuxdesign.com/quickstart

Illustrates how to apply custom colors to components and use Hux design tokens for consistent styling across the application.

```dart
HuxButton(
  onPressed: () {},
  child: Text('Custom Color'),
  variant: HuxButtonVariant.primary,
  primaryColor: Colors.purple, // Custom primary color
)

// Or use design tokens
Container(
  color: HuxTokens.surfaceElevated(context),
  child: Text(
    'Themed content',
    style: TextStyle(color: HuxTokens.textPrimary(context)),
  ),
)
```

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

### Build Forms with HuxInput and HuxButton

Source: https://docs.thehuxdesign.com/quickstart

Demonstrates how to create a validated form using HuxInput and a submission button. It utilizes a GlobalKey for form state management and input validation logic.

```dart
Form(
  key: _formKey,
  child: Column(
    children: [
      HuxInput(
        label: 'Email',
        hint: 'Enter your email',
        validator: (value) {
          if (value?.isEmpty ?? true) {
            return 'Email is required';
          }
          return null;
        },
      ),
      SizedBox(height: 16),
      HuxButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            // Form is valid
          }
        },
        child: Text('Submit'),
      ),
    ],
  ),
)
```

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

### Initialize Hux UI Application in Flutter

Source: https://docs.thehuxdesign.com/examples/basic-usage

Demonstrates the basic setup of a Flutter application using Hux UI, including theme configuration and layout structure. It utilizes the HuxTheme, HuxCard, and HuxButton components to create a standard UI shell.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hux UI Example',
      theme: HuxTheme.lightTheme,
      darkTheme: HuxTheme.darkTheme,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Hux UI Demo')),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            HuxCard(
              title: 'Welcome',
              subtitle: 'Getting started with Hux UI',
              child: Text('This is a simple example app.'),
            ),
            SizedBox(height: 20),
            
            HuxButton(
              onPressed: () => print('Primary action'),
              child: Text('Primary Button'),
              variant: HuxButtonVariant.primary,
            ),
            SizedBox(height: 12),
            
            HuxButton(
              onPressed: () => print('Secondary action'),
              child: Text('Secondary Button'),
              variant: HuxButtonVariant.secondary,
            ),
          ],
        ),
      ),
    );
  }
}
```

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

### Verify Hux UI Dependencies in pubspec.yaml

Source: https://docs.thehuxdesign.com/installation

Checks the `pubspec.yaml` file to ensure that the Hux UI package and Flutter SDK are correctly listed as dependencies. This is a crucial step for verifying a successful installation.

```yaml
dependencies:
  hux: ^1.0.0
  flutter:
    sdk: flutter
```

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

### HuxKBD Examples: Inline with Text

Source: https://docs.thehuxdesign.com/components/kbd

Demonstrates embedding HuxKBD components within text to provide clear visual indicators for actions. This example shows how to use 'Enter' key representation next to text.

```dart
Row(
  children: [
    Text('Press'),
    SizedBox(width: 4),
    HuxKBD(shortcut: 'Enter'),
    SizedBox(width: 4),
    Text('to submit'),
  ],
)
```

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

### Configure Flutter Platforms

Source: https://docs.thehuxdesign.com/installation

Commands to enable support for web and desktop platforms in a Flutter project. These are required before building the application for these specific environments.

```bash
flutter config --enable-web
flutter create . --platforms web
flutter config --enable-windows-desktop --enable-macos-desktop --enable-linux-desktop
```

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

### HuxContextMenu Example with Menu Items

Source: https://docs.thehuxdesign.com/components/context-menu

An advanced example demonstrating the HuxContextMenu widget. It showcases how to populate the menuItems list with HuxContextMenuItem and HuxContextMenuDivider widgets for file, edit, and destructive operations. The child property is set to YourContentWidget.

```dart
HuxContextMenu(
  menuItems: [
    // File operations
    HuxContextMenuItem(
      text: 'New File',
      icon: FeatherIcons.filePlus,
      onTap: () => _createNewFile(),
    ),
    HuxContextMenuItem(
      text: 'Open',
      icon: FeatherIcons.folderOpen,
      onTap: () => _openFile(),
    ),
    const HuxContextMenuDivider(),
    
    // Edit operations
    HuxContextMenuItem(
      text: 'Cut',
      icon: FeatherIcons.scissors,
      onTap: () => _cutSelection(),
      isDisabled: !_hasSelection,
    ),
    HuxContextMenuItem(
      text: 'Copy',
      icon: FeatherIcons.copy,
      onTap: () => _copySelection(),
      isDisabled: !_hasSelection,
    ),
    HuxContextMenuItem(
      text: 'Paste',
      icon: FeatherIcons.clipboard,
      onTap: () => _pasteClipboard(),
      isDisabled: !_hasClipboardContent,
    ),
    const HuxContextMenuDivider(),
    
    // Destructive operations
    HuxContextMenuItem(
      text: 'Delete',
      icon: FeatherIcons.trash2,
      onTap: () => _deleteSelection(),
      isDestructive: true,
      isDisabled: !_hasSelection,
    ),
  ],
  child: YourContentWidget(),
)
```

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

### HuxKBD Examples: Combinations

Source: https://docs.thehuxdesign.com/components/kbd

Shows how to represent keyboard shortcut combinations using the HuxKBD component. This is ideal for displaying sequences of keys pressed together, such as '⌘⇧P'.

```dart
HuxKBD(shortcut: '⌘⇧P')
```

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

### Configure Hux UI Themes

Source: https://docs.thehuxdesign.com/quickstart

Sets up the Hux UI light and dark themes within the MaterialApp widget in main.dart. This ensures consistent styling across the application.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hux UI Quickstart',
      theme: HuxTheme.lightTheme,
      darkTheme: HuxTheme.darkTheme,
      home: QuickstartPage(),
    );
  }
}
```

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

### Dart Reusable Component Example

Source: https://docs.thehuxdesign.com/advanced/customization

Provides an example of creating a reusable component in Dart, specifically a PrimaryActionButton. This pattern encourages building encapsulated widgets that can be used consistently across the application, promoting maintainability and reducing code duplication.

```dart
// Create once, use everywhere
class PrimaryActionButton extends StatelessWidget {
  // Custom implementation
}
```

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

### Implement File Operation Context Menu

Source: https://docs.thehuxdesign.com/components/context-menu

A practical example of a file-specific context menu, demonstrating how to map custom file operation methods to menu item taps.

```dart
HuxContextMenu(
  menuItems: [
    HuxContextMenuItem(
      text: 'New File',
      icon: FeatherIcons.filePlus,
      onTap: () => _createNewFile(),
    ),
    HuxContextMenuItem(
      text: 'Open',
      icon: FeatherIcons.folderOpen,
      onTap: () => _openFile(),
    ),
    const HuxContextMenuDivider(),
    HuxContextMenuItem(
      text: 'Rename',
      icon: FeatherIcons.edit2,
      onTap: () => _renameFile(),
    ),
    HuxContextMenuItem(
      text: 'Delete',
      icon: FeatherIcons.trash2,
      onTap: () => _deleteFile(),
      isDestructive: true,
    ),
  ],
  child: FileIcon(),
)
```

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

### HuxTextarea Character Count Example in Dart

Source: https://docs.thehuxdesign.com/components/textarea

A specific example showing the HuxTextarea with `maxLength` and `showCharacterCount` enabled, providing visual feedback on remaining characters.

```dart
HuxTextarea(
  label: 'Message',
  maxLength: 500,
  showCharacterCount: true,
)
```

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

### Implement Command Palette in Dart

Source: https://docs.thehuxdesign.com/components/command

Demonstrates the basic setup of the HuxCommandItem and the showHuxCommand function to trigger the palette. It covers defining commands with metadata and handling selection callbacks.

```dart
import 'package:hux/hux.dart';

final commands = [
  HuxCommandItem(
    id: 'toggle-theme',
    label: 'Toggle Theme',
    description: 'Switch between light and dark mode',
    shortcut: '⌘⇧T',
    icon: LucideIcons.sun,
    category: 'View',
    onExecute: () => print('Theme toggled'),
  ),
  HuxCommandItem(
    id: 'settings',
    label: 'Settings',
    description: 'Open application settings',
    shortcut: '⌘,',
    icon: LucideIcons.settings,
    category: 'Preferences',
    onExecute: () => print('Settings opened'),
  ),
];

showHuxCommand(
  context: context,
  commands: commands,
  placeholder: 'Type a command or search...',
  onCommandSelected: (command) {
    print('Selected: ${command.label}');
  },
);
```

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

### HuxTooltip for Navigation Hint in Dart

Source: https://docs.thehuxdesign.com/components/tooltip

Demonstrates how to use HuxTooltip to guide users through complex interfaces by providing hints for navigation actions, such as expanding a section. The tooltip is attached to an icon button, offering a clear instruction on its function. This example uses HuxTooltip with a HuxButton of the ghost variant.

```dart
HuxTooltip(
  message: 'Click to expand this section and see more options',
  child: HuxButton(
    onPressed: () {},
    variant: HuxButtonVariant.ghost,
    child: Icon(Icons.expand_more),
  ),
)
```

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

### HuxKBD Examples: Single Keys

Source: https://docs.thehuxdesign.com/components/kbd

Illustrates how to display individual modifier or action keys using the HuxKBD component. This is useful for showing keys like Command, Shift, Enter, or Esc.

```dart
Row(
  children: [
    HuxKBD(shortcut: '⌘'),
    HuxKBD(shortcut: '⇧'),
    HuxKBD(shortcut: 'Enter'),
  ],
)
```

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

### Dart Component Composition Best Practice

Source: https://docs.thehuxdesign.com/advanced/customization

Illustrates the recommended approach of composition over modification for building UI components in Dart. It shows a good example of wrapping a HuxButton within a Container with specific decorations, contrasting it with the discouraged practice of modifying internal implementations.

```dart
// ✅ Good - Composition
Container(
  decoration: BoxDecoration(...),
  child: HuxButton(...),
)

// ❌ Avoid - Modifying internal implementation
```

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

### Basic HuxBreadcrumbs Usage in Dart

Source: https://docs.thehuxdesign.com/components/breadcrumbs

Demonstrates the fundamental implementation of HuxBreadcrumbs with a list of items, including labels, icons, and tap handlers. This example showcases how to define the navigation trail for a page.

```dart
HuxBreadcrumbs(
  items: [
    HuxBreadcrumbItem(
      label: 'Home',
      icon: LucideIcons.home,
      onTap: () => context.showHuxSnackbar(
        message: 'Home',
        variant: HuxSnackbarVariant.info,
      ),
    ),
    HuxBreadcrumbItem(label: 'Products', onTap: () {}),
    HuxBreadcrumbItem(label: 'Smartphones', onTap: () {}),
    HuxBreadcrumbItem(label: 'iPhone 15 Pro', onTap: () {}, isActive: true),
  ],
)
```

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

### Define File Management Commands

Source: https://docs.thehuxdesign.com/components/command

A practical example of creating a list of file-related commands, each with specific icons, shortcuts, and execution logic.

```dart
final fileCommands = [
  HuxCommandItem(
    id: 'new-file',
    label: 'New File',
    shortcut: '⌘N',
    icon: LucideIcons.filePlus,
    category: 'File',
    onExecute: () => createNewFile(),
  ),
  HuxCommandItem(
    id: 'open-file',
    label: 'Open File',
    shortcut: '⌘O',
    icon: LucideIcons.folder,
    category: 'File',
    onExecute: () => openFileDialog(),
  ),
  HuxCommandItem(
    id: 'save-file',
    label: 'Save File',
    shortcut: '⌘S',
    icon: LucideIcons.save,
    category: 'File',
    onExecute: () => saveCurrentFile(),
  ),
];
```

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

### Implement Login Form with Hux UI

Source: https://docs.thehuxdesign.com/examples/basic-usage

Shows how to create a validated login form using HuxInput and HuxButton components. It includes state management for loading indicators and form validation logic using GlobalKey.

```dart
class LoginForm extends StatefulWidget {
  @override
  _LoginFormState createState() => _LoginFormState();
}

class _LoginFormState extends State<LoginForm> {
  final _formKey = GlobalKey<FormState>();
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();
  bool _isLoading = false;

  void _handleLogin() async {
    if (_formKey.currentState!.validate()) {
      setState(() {
        _isLoading = true;
      });

      await Future.delayed(Duration(seconds: 2));

      setState(() {
        _isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return HuxCard(
      title: 'Login',
      child: Form(
        key: _formKey,
        child: Column(
          children: [
            HuxInput(
              label: 'Email',
              hint: 'Enter your email',
              controller: _emailController,
              prefixIcon: Icon(FeatherIcons.mail),
              validator: (value) {
                if (value?.isEmpty ?? true) {
                  return 'Email is required';
                }
                return null;
              },
            ),
            SizedBox(height: 16),
            
            HuxInput(
              label: 'Password',
              hint: 'Enter your password',
              controller: _passwordController,
              prefixIcon: Icon(FeatherIcons.lock),
              obscureText: true,
              validator: (value) {
                if (value?.isEmpty ?? true) {
                  return 'Password is required';
                }
                return null;
              },
            ),
            SizedBox(height: 24),
            
            HuxButton(
              onPressed: _isLoading ? null : _handleLogin,
              isLoading: _isLoading,
              child: Text('Login'),
              variant: HuxButtonVariant.primary,
            ),
          ],
        ),
      ),
    );
  }
}
```

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

### Implement Basic HuxInput in Dart

Source: https://docs.thehuxdesign.com/components/input

A simple implementation of the HuxInput component featuring a label and a hint text to guide user input.

```dart
HuxInput(
  label: 'Email',
  hint: 'Enter your email address',
)
```

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

### Show Hux Dialog Example

Source: https://docs.thehuxdesign.com/components/dialog

Demonstrates how to use the `showHuxDialog` function to display a confirmation dialog. This function wraps `showDialog` for convenience. It takes context, title, content, and actions as parameters. The result can be used to determine user confirmation.

```dart
final bool? result = await showHuxDialog<bool>(
  context: context,
  title: 'Confirm Action',
  content: Text('Are you sure?'),
  actions: [
    HuxButton(
      onPressed: () => Navigator.of(context).pop(false),
      child: Text('Cancel'),
      variant: HuxButtonVariant.secondary,
    ),
    HuxButton(
      onPressed: () => Navigator.of(context).pop(true),
      child: Text('Confirm'),
    ),
  ],
);

if (result == true) {
  // User confirmed
  print('Action confirmed');
}
```

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

### Basic Form with HuxTextarea in Dart

Source: https://docs.thehuxdesign.com/components/textarea

An example of integrating HuxTextarea within a basic form structure, including other input components and validation logic.

```dart
Form(
  key: _formKey,
  child: Column(
    children: [
      HuxInput(
        label: 'Name',
        hint: 'Enter your name',
      ),
      const SizedBox(height: 16),
      HuxTextarea(
        label: 'Message',
        hint: 'Enter your message...',
        minLines: 4,
        maxLines: 8,
        maxLength: 1000,
        showCharacterCount: true,
        validator: (value) {
          if (value == null || value.isEmpty) {
            return 'Message is required';
          }
          return null;
        },
      ),
    ],
  ),
)
```

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

### Manage async state with HuxLoadingOverlay

Source: https://docs.thehuxdesign.com/components/loading

A complete example demonstrating how to manage loading state within a StatefulWidget to toggle the visibility of a HuxLoadingOverlay during an asynchronous operation.

```dart
class AsyncOperationExample extends StatefulWidget {
  @override
  _AsyncOperationExampleState createState() => _AsyncOperationExampleState();
}

class _AsyncOperationExampleState extends State<AsyncOperationExample> {
  bool _isLoading = false;

  void _performAsyncOperation() async {
    setState(() {
      _isLoading = true;
    });

    await Future.delayed(Duration(seconds: 3));

    setState(() {
      _isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return HuxLoadingOverlay(
      isLoading: _isLoading,
      message: 'Loading data...',
      child: Column(
        children: [
          HuxButton(
            onPressed: _isLoading ? null : _performAsyncOperation,
            isLoading: _isLoading,
            child: Text('Start Operation'),
          ),
        ],
      ),
    );
  }
}
```

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

### Info Snackbar Example (Dart)

Source: https://docs.thehuxdesign.com/components/snackbar

Displays an informational message using the HuxSnackbar component with the 'info' variant. It includes a message and an optional dismiss callback.

```dart
HuxSnackbar(
  message: 'Your changes have been saved successfully!',
  variant: HuxSnackbarVariant.info,
  onDismiss: () => print('Dismissed'),
)
```

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

### HuxInput with Helper Text (Dart)

Source: https://docs.thehuxdesign.com/components/input

Demonstrates how to use the HuxInput component with helper text to provide additional guidance to the user. This example shows a password input field with a prefix icon and helper text specifying password requirements.

```dart
HuxInput(
  label: 'Password',
  hint: 'Enter your password',
  prefixIcon: Icon(FeatherIcons.lock),
  obscureText: true,
  helperText: 'Password must be at least 6 characters',
)
```

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

### Implement HuxAlert Variants in Dart

Source: https://docs.thehuxdesign.com/components/alert

Examples of initializing the HuxAlert component with different semantic variants including info, success, and error states. These snippets demonstrate how to configure titles, messages, icons, and dismissal callbacks.

```dart
HuxAlert(
  variant: HuxAlertVariant.info,
  title: 'Information',
  message: 'This is an informational message for the user.',
  showIcon: true,
)
```

```dart
HuxAlert(
  variant: HuxAlertVariant.success,
  title: 'Success!',
  message: 'Operation completed successfully.',
  showIcon: true,
  onDismiss: () {
    // Handle dismissal
  },
)
```

```dart
HuxAlert(
  variant: HuxAlertVariant.destructive,
  title: 'Error',
  message: 'Something went wrong. Please try again.',
  showIcon: true,
  onDismiss: () {
    // Handle dismissal
  },
)
```

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

### Implement Date Selection Form

Source: https://docs.thehuxdesign.com/examples/basic-usage

Shows how to create a form with HuxInput and HuxDateInput components. It includes state management for date selection and custom validation logic to ensure the selected date is not in the past.

```dart
class DateSelectionForm extends StatefulWidget {
  @override
  _DateSelectionFormState createState() => _DateSelectionFormState();
}

class _DateSelectionFormState extends State<DateSelectionForm> {
  DateTime? _selectedDate;

  @override
  Widget build(BuildContext context) {
    return HuxCard(
      title: 'Event Details',
      child: Column(
        children: [
          HuxInput(
            label: 'Event Name',
            hint: 'Enter event name',
            prefixIcon: Icon(FeatherIcons.calendar),
          ),
          SizedBox(height: 16),
          
          HuxDateInput(
            label: 'Event Date',
            hint: 'MM/DD/YYYY',
            onDateChanged: (date) {
              setState(() {
                _selectedDate = date;
              });
            },
            validator: (date) {
              if (date == null) return 'Please select a date';
              if (date.isBefore(DateTime.now())) {
                return 'Date cannot be in the past';
              }
              return null;
            },
          ),
          SizedBox(height: 16),
          
          HuxButton(
            onPressed: _selectedDate != null ? () {
              print('Event scheduled for: $_selectedDate');
            } : null,
            child: Text('Schedule Event'),
            variant: HuxButtonVariant.primary,
          ),
        ],
      ),
    );
  }
}
```

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

### Success Snackbar Example (Dart)

Source: https://docs.thehuxdesign.com/components/snackbar

Demonstrates the HuxSnackbar component for success messages, utilizing the 'success' variant. It shows a confirmation message and a dismiss handler.

```dart
HuxSnackbar(
  message: 'Profile updated successfully!',
  variant: HuxSnackbarVariant.success,
  onDismiss: () => print('Dismissed'),
)
```

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

### Dismissible Snackbar Example (Dart)

Source: https://docs.thehuxdesign.com/components/snackbar

Demonstrates a HuxSnackbar that can be explicitly dismissed by the user. It includes a message and an `onDismiss` callback to handle the dismissal event.

```dart
HuxSnackbar(
  message: 'Click the X to dismiss this message',
  onDismiss: () {
    // Handle dismiss action
    print('Snackbar dismissed');
  },
)
```

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

### Full Width Snackbar Example (Dart)

Source: https://docs.thehuxdesign.com/components/snackbar

Shows how to make a HuxSnackbar span the full width of its container by setting the `width` property to `double.infinity`.

```dart
HuxSnackbar(
  message: 'Full width snackbar message',
  width: double.infinity,
)
```

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

### Warning Snackbar Example (Dart)

Source: https://docs.thehuxdesign.com/components/snackbar

Shows the HuxSnackbar component configured for warning messages using the 'warning' variant. It displays a warning message and a dismiss callback.

```dart
HuxSnackbar(
  message: 'You have unsaved changes. Save before leaving?',
  variant: HuxSnackbarVariant.warning,
  onDismiss: () => print('Dismissed'),
)
```

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

### Secondary Badge Example (Dart)

Source: https://docs.thehuxdesign.com/components/badge

Demonstrates how to use the secondary badge variant for displaying additional information or states with theme-aware secondary colors. This is useful for secondary features or supplementary info.

```dart
HuxBadge(
  label: 'Info',
  variant: HuxBadgeVariant.secondary,
)
```

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

### Implement HuxCard Component in Flutter

Source: https://docs.thehuxdesign.com/components/cards

Demonstrates the usage of the HuxCard component for rendering content. Includes examples for a basic card structure and a card variant that supports subtitles.

```dart
HuxCard(
  title: 'Card Title',
  child: Text('Card content goes here'),
)
```

```dart
HuxCard(
  title: 'Design System Update',
  subtitle: 'Version 2.1.0 • 2 hours ago',
  child: Text('New components and improved accessibility features'),
)
```

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

### HuxButton Full Width Example (Dart)

Source: https://docs.thehuxdesign.com/components/buttons

Demonstrates how to make a HuxButton take up the full available width. This is achieved by setting the 'width' property to HuxButtonWidth.expand. No external dependencies are required beyond the HuxButton widget itself.

```dart
HuxButton(
  onPressed: () {},
  child: Text('Full Width'),
  width: HuxButtonWidth.expand,
)
```

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

### Implement Settings Page UI with Flutter

Source: https://docs.thehuxdesign.com/examples/basic-usage

This snippet defines a stateful widget for a settings page. It manages local state for notifications, dark mode, and analytics, while organizing UI elements into categorized cards.

```dart
class SettingsPage extends StatefulWidget {
  @override
  _SettingsPageState createState() => _SettingsPageState();
}

class _SettingsPageState extends State<SettingsPage> {
  bool _notifications = true;
  bool _darkMode = false;
  bool _analytics = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Settings')),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            HuxCard(
              title: 'Preferences',
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text('Push Notifications'),
                      HuxSwitch(
                        value: _notifications,
                        onChanged: (value) {
                          setState(() {
                            _notifications = value;
                          });
                        },
                      ),
                    ],
                  ),
                  SizedBox(height: 16),
                  
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text('Dark Mode'),
                      HuxSwitch(
                        value: _darkMode,
                        onChanged: (value) {
                          setState(() {
                            _darkMode = value;
                          });
                        },
                      ),
                    ],
                  ),
                  SizedBox(height: 16),
                  
                  HuxCheckbox(
                    value: _analytics,
                    onChanged: (value) {
                      setState(() {
                        _analytics = value ?? false;
                      });
                    },
                    label: 'Share analytics data to help improve the app',
                  ),
                ],
              ),
            ),
            SizedBox(height: 20),
            
            HuxCard(
              title: 'Account',
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  HuxButton(
                    onPressed: () {},
                    child: Text('Change Password'),
                    variant: HuxButtonVariant.outline,
                  ),
                  SizedBox(height: 12),
                  
                  HuxButton(
                    onPressed: () {},
                    child: Text('Export Data'),
                    variant: HuxButtonVariant.outline,
                  ),
                  SizedBox(height: 12),
                  
                  HuxButton(
                    onPressed: () {},
                    child: Text('Delete Account'),
                    variant: HuxButtonVariant.outline,
                    primaryColor: HuxColors.red,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
```

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

### Add Hux UI to Flutter Project (Manual)

Source: https://docs.thehuxdesign.com/installation

Manually adds the Hux UI package to your Flutter project's `pubspec.yaml` file. After updating the file, you need to run `flutter pub get` to download the dependency.

```yaml
dependencies:
  flutter:
    sdk: flutter
  hux: ^1.0.0  # Use the latest version
```

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

### Configure Hux UI Themes in MaterialApp

Source: https://docs.thehuxdesign.com/installation

Configures the light and dark themes for Hux UI by wrapping your `MaterialApp` widget with `HuxTheme.lightTheme` and `HuxTheme.darkTheme`. This setup ensures consistent styling across your application and allows for theme mode switching.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My Hux UI App',
      
      // Configure light theme
      theme: HuxTheme.lightTheme,
      
      // Configure dark theme  
      darkTheme: HuxTheme.darkTheme,
      
      // Optional: Set theme mode
      themeMode: ThemeMode.system, // Follows system theme
      
      home: MyHomePage(),
    );
  }
}

```

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

### Test Hux UI Import in Dart

Source: https://docs.thehuxdesign.com/installation

A simple Dart test to confirm that the Hux UI library can be imported without errors. If this code compiles successfully, it indicates that the Hux UI package is correctly installed and accessible in your project.

```dart
import 'package:hux/hux.dart';

void main() {
  // If this compiles without errors, Hux UI is properly installed
  final button = HuxButton(
    onPressed: () {},
    child: Text('Test'),
  );
  print('Hux UI installed successfully!');
}

```

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

### Dart Theme Consistency with HuxTokens

Source: https://docs.thehuxdesign.com/advanced/customization

Emphasizes the importance of using HuxTokens for colors in Dart to maintain theme consistency. It presents a correct example using HuxTokens.textPrimary and contrasts it with an incorrect example using a hardcoded color like Colors.black.

```dart
// ✅ Good
color: HuxTokens.textPrimary(context)

// ❌ Avoid
color: Colors.black
```

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

### Simple OTP Input (Dart)

Source: https://docs.thehuxdesign.com/components/otp

Demonstrates the basic usage of HuxOtpInput with a specified length and callback functions for value changes and completion. It's a straightforward way to implement OTP input.

```dart
HuxOtpInput(
  length: 6,
  label: 'Verification Code',
  onChanged: (value) => print('OTP: $value'),
  onCompleted: (value) => print('Completed: $value'),
)
```

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

### Basic HuxKBD Usage

Source: https://docs.thehuxdesign.com/components/kbd

Demonstrates the fundamental way to render a HuxKBD component with a single shortcut. This is the simplest form of using the component to display a keyboard shortcut like '⌘K'.

```dart
HuxKBD(shortcut: '⌘K')
```

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

### Resolve Flutter Dependency Conflicts

Source: https://docs.thehuxdesign.com/installation

Commands to inspect and refresh Flutter project dependencies. Use these when encountering version conflicts or package resolution issues in pubspec.yaml.

```bash
flutter pub deps
flutter clean
flutter pub get
```

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

### Import Hux UI in Dart

Source: https://docs.thehuxdesign.com/installation

Imports all necessary components and utilities from the Hux UI library into your Dart file. This single import statement provides access to the entire library.

```dart
import 'package:hux/hux.dart';
```

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

### Build a Reusable CustomActionButton Component (Dart)

Source: https://docs.thehuxdesign.com/advanced/customization

Provides a Dart code example for creating a reusable `CustomActionButton` widget by composing HuxButton. It includes logic for destructive variants and icon integration.

```dart
class CustomActionButton extends StatelessWidget {
  final String label;
  final IconData icon;
  final VoidCallback onPressed;
  final bool isDestructive;

  const CustomActionButton({
    required this.label,
    required this.icon,
    required this.onPressed,
    this.isDestructive = false,
  });

  @override
  Widget build(BuildContext context) {
    return HuxButton(
      onPressed: onPressed,
      variant: isDestructive 
          ? HuxButtonVariant.outline 
          : HuxButtonVariant.primary,
      icon: icon,
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(icon, size: 18),
          SizedBox(width: 8),
          Text(label),
        ],
      ),
    );
  }
}
```

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

### Build Profile Page with Hux UI

Source: https://docs.thehuxdesign.com/examples/basic-usage

Demonstrates how to construct a profile page layout using HuxCard, HuxAvatar, and HuxBadge components. It showcases the integration of user information, status badges, and an avatar group within a structured Flutter Scaffold.

```dart
class ProfilePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Profile')),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          children: [
            HuxCard(
              child: Row(
                children: [
                  HuxAvatar(
                    name: 'John Doe',
                    size: HuxAvatarSize.large,
                  ),
                  SizedBox(width: 16),
                  
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          'John Doe',
                          style: Theme.of(context).textTheme.titleLarge,
                        ),
                        Text(
                          'john.doe@example.com',
                          style: TextStyle(
                            color: HuxTokens.textSecondary(context),
                          ),
                        ),
                        SizedBox(height: 8),
                        
                        Row(
                          children: [
                            HuxBadge(
                              label: 'Pro',
                              variant: HuxBadgeVariant.primary,
                            ),
                            SizedBox(width: 8),
                            HuxBadge(
                              label: 'Verified',
                              variant: HuxBadgeVariant.success,
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(height: 20),
            
            HuxCard(
              title: 'Team Members',
              child: HuxAvatarGroup(
                avatars: [
                  HuxAvatar(name: 'Alice Smith'),
                  HuxAvatar(name: 'Bob Johnson'),
                  HuxAvatar(
                    useGradient: true,
                    gradientVariant: HuxAvatarGradient.bluePurple,
                  ),
                  HuxAvatar(name: 'Carol Williams'),
                  HuxAvatar(name: 'David Brown'),
                ],
                overlap: true,
                maxVisible: 4,
              ),
            ),
          ],
        ),
      ),
    );
  }
}
```

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

### Flutter App Initialization with Hux UI Components

Source: https://docs.thehuxdesign.com/index

This Dart code snippet demonstrates how to set up a basic Flutter application using Hux UI components. It shows the initialization of MaterialApp with Hux UI's light and dark themes and the usage of HuxButton, HuxInput, HuxDateInput, and HuxCard components within the app's body. This example highlights the integration of Hux UI's theming and component system.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hux UI Demo',
      theme: HuxTheme.lightTheme,
      darkTheme: HuxTheme.darkTheme,
      home: Scaffold(
        body: Column(
          children: [
            HuxButton(
              onPressed: () => print('Hello Hux!'),
              child: Text('Get Started'),
              variant: HuxButtonVariant.primary,
            ),
            HuxInput(
              label: 'Your Name',
              hint: 'Enter your name',
            ),
            HuxDateInput(
              label: 'Birth Date',
              onDateChanged: (date) => print('Selected: $date'),
            ),
            HuxCard(
              title: 'Welcome to Hux UI',
              subtitle: 'Build beautiful Flutter apps',
              child: Text('Start creating amazing user interfaces'),
            ),
          ],
        ),
      ),
    );
  }
}
```

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

### Implement Basic and Confirmation Dialogs in Flutter

Source: https://docs.thehuxdesign.com/components/dialog

Demonstrates how to initialize a standard HuxDialog with basic content and a confirmation dialog variant using action buttons for user interaction.

```dart
HuxDialog(
  title: 'Basic Dialog',
  content: Text('This is a basic dialog with Hux styling.'),
  actions: [
    HuxButton(
      onPressed: () => Navigator.of(context).pop(),
      child: Text('Close'),
      variant: HuxButtonVariant.secondary,
    ),
  ],
);

HuxDialog(
  title: 'Confirm Action',
  subtitle: 'Are you sure you want to proceed?',
  content: Text('This action cannot be undone. Please confirm that you want to continue.'),
  actions: [
    HuxButton(
      onPressed: () => Navigator.of(context).pop(false),
      child: Text('Cancel'),
      variant: HuxButtonVariant.secondary,
    ),
    HuxButton(
      onPressed: () => Navigator.of(context).pop(true),
      child: Text('Confirm'),
    ),
  ],
);
```

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

### Custom Width Snackbar Example (Dart)

Source: https://docs.thehuxdesign.com/components/snackbar

Demonstrates setting a specific width for a HuxSnackbar. This example sets the width to 300 pixels.

```dart
HuxSnackbar(
  message: 'Custom width snackbar',
  width: 300,
)
```

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

### HuxTextarea Basic Usage in Dart

Source: https://docs.thehuxdesign.com/components/textarea

Demonstrates the basic implementation of the HuxTextarea component with label and hint text. It allows for setting minimum and maximum lines for the textarea.

```dart
HuxTextarea(
  label: 'Description',
  hint: 'Enter a description...',
  minLines: 3,
  maxLines: 6,
)
```

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

### Error Snackbar Example (Dart)

Source: https://docs.thehuxdesign.com/components/snackbar

Illustrates how to use the HuxSnackbar component for error notifications with the 'error' variant. This example includes an error message and a dismiss action.

```dart
HuxSnackbar(
  message: 'Failed to save changes. Please try again.',
  variant: HuxSnackbarVariant.error,
  onDismiss: () => print('Dismissed'),
)
```

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

### Implement Basic Pagination with HuxPagination

Source: https://docs.thehuxdesign.com/components/pagination

Demonstrates the basic implementation of the HuxPagination component, requiring the current page, total pages, and a callback function to handle navigation events.

```dart
import 'package:hux/hux.dart';

HuxPagination(
  currentPage: 5,
  totalPages: 20,
  onPageChanged: (page) {
    print('Selected page: $page');
  },
)
```

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

### Implement HuxTooltip in Flutter

Source: https://docs.thehuxdesign.com/components/tooltip

Demonstrates the implementation of the HuxTooltip component, covering basic usage, icon integration, color customization, positioning adjustments, and timing configurations.

```dart
// Basic Usage
HuxTooltip(
  message: 'This is a helpful tooltip',
  child: Icon(Icons.info),
)

// Standard Tooltip with Button
HuxTooltip(
  message: 'This is a tooltip message',
  child: HuxButton(
    onPressed: () {},
    child: Text('Save'),
  ),
)

// Tooltip with Icon
HuxTooltip(
  message: 'New feature',
  icon: Icons.info_outline,
  child: HuxButton(
    onPressed: () {},
    child: Text('Help'),
  ),
)

// Custom Colors
HuxTooltip(
  message: 'Custom styled tooltip',
  backgroundColor: Colors.deepPurple,
  textColor: Colors.white,
  child: Text('Hover me'),
)

// Positioning
HuxTooltip(
  message: 'Tooltip above the element',
  preferBelow: false,
  verticalOffset: 20.0,
  child: Icon(Icons.info),
)

// Timing
HuxTooltip(
  message: 'Quick tooltip',
  waitDuration: Duration(milliseconds: 200),
  showDuration: Duration(seconds: 5),
  child: Icon(Icons.info),
)
```

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

### Nested Cards Example (Dart)

Source: https://docs.thehuxdesign.com/components/cards

Illustrates how HuxCard components can be nested within each other to create hierarchical content structures. This example shows a parent card containing two child cards.

```dart
HuxCard(
  title: 'Parent Card',
  child: Column(
    children: [
      HuxCard(
        title: 'Child Card 1',
        child: Text('Nested content'),
      ),
      HuxCard(
        title: 'Child Card 2',
        child: Text('More nested content'),
      ),
    ],
  ),
)
```

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

### Basic HuxDatePicker Usage in Dart

Source: https://docs.thehuxdesign.com/components/date-picker

Demonstrates the fundamental implementation of HuxDatePicker. It requires initial, first, and last dates, along with a callback for date changes and a placeholder text. No external dependencies are strictly required for this basic setup.

```dart
HuxDatePicker(
  initialDate: DateTime.now(),
  firstDate: DateTime(2000),
  lastDate: DateTime(2100),
  onDateChanged: (date) {
    print('Selected date: $date');
  },
  placeholder: 'Select Date',
)
```

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

### Disabled HuxTextarea Example in Dart

Source: https://docs.thehuxdesign.com/components/textarea

Demonstrates how to disable user interaction with the HuxTextarea component by setting the `enabled` property to false.

```dart
HuxTextarea(
  label: 'Notes',
  hint: 'This field is disabled',
  enabled: false,
  minLines: 3,
  maxLines: 6,
)
```

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

### Simple Snackbar Usage (Dart)

Source: https://docs.thehuxdesign.com/components/snackbar

A basic example of the HuxSnackbar component displaying only a message. This is the simplest way to show a notification.

```dart
HuxSnackbar(
  message: 'This is a simple snackbar message',
)
```

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

### Basic Form Example with Hux UI Components (Dart)

Source: https://docs.thehuxdesign.com/examples/form-building

Demonstrates a basic form structure using Hux UI components in Dart. It includes input fields for name and birth date, along with a submit button. Validation is implemented for required fields.

```dart
Form(
  key: _formKey,
  child: Column(
    children: [
      HuxInput(
        label: 'Full Name',
        hint: 'Enter your full name',
        validator: (value) {
          if (value?.isEmpty ?? true) return 'Name is required';
          return null;
        },
      ),
      SizedBox(height: 16),
      
      HuxDateInput(
        label: 'Birth Date',
        onDateChanged: (date) => _birthDate = date,
        validator: (date) {
          if (date == null) return 'Birth date is required';
          return null;
        },
      ),
      SizedBox(height: 16),
      
      HuxButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            // Form is valid, proceed
          }
        },
        child: Text('Submit'),
        variant: HuxButtonVariant.primary,
      ),
    ],
  ),
)
```

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

### Auto-Dismiss Snackbar Example (Dart)

Source: https://docs.thehuxdesign.com/components/snackbar

Shows a HuxSnackbar configured to automatically disappear after a specified duration. It uses the `autoDismiss` and `dismissDuration` properties.

```dart
HuxSnackbar(
  message: 'This will disappear in 5 seconds',
  autoDismiss: true,
  dismissDuration: Duration(seconds: 5),
)
```

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

### Custom Colors Snackbar (Dart)

Source: https://docs.thehuxdesign.com/components/snackbar

Illustrates how to customize the background and text colors of a HuxSnackbar. This example uses `Colors.deepPurple` for the background and `Colors.white` for the text.

```dart
HuxSnackbar(
  message: 'Custom styled snackbar',
  variant: HuxSnackbarVariant.info,
  backgroundColor: Colors.deepPurple,
  textColor: Colors.white,
)
```

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

### Implement Basic Context Menu in Flutter

Source: https://docs.thehuxdesign.com/components/context-menu

Demonstrates the implementation of a standard HuxContextMenu with basic menu items and event handlers. This component wraps a child widget to trigger the menu on interaction.

```dart
HuxContextMenu(
  menuItems: [
    HuxContextMenuItem(
      text: 'Copy',
      icon: FeatherIcons.copy,
      onTap: () => print('Copy action'),
    ),
    HuxContextMenuItem(
      text: 'Paste',
      icon: FeatherIcons.clipboard,
      onTap: () => print('Paste action'),
    ),
  ],
  child: Text('Right-click me!'),
)
```

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

### HuxTextarea with Character Count in Dart

Source: https://docs.thehuxdesign.com/components/textarea

Shows how to enable character counting for the HuxTextarea component. This is useful when a maximum length is defined to guide user input.

```dart
HuxTextarea(
  label: 'Comments',
  hint: 'Enter your comments...',
  minLines: 4,
  maxLines: 8,
  maxLength: 500,
  showCharacterCount: true,
)
```
Tokens:
Raw