Hux UI #

A modern Flutter UI package with beautiful, customizable components designed for clean and consistent user interfaces.

Features #

🎨 Modern Design - Clean, minimal design language
🌙 Dark Mode Support - Built-in light and dark theme support
📊 Data Visualization - Beautiful animated charts for data presentation
📱 Responsive - Components adapt to different screen sizes
🎯 Customizable - Extensive customization options
🚀 Easy to Use - Simple, intuitive API

Components #

Buttons #

HuxButton - Customizable button with multiple variants (primary, secondary, outline, ghost)
Multiple sizes (small, medium, large)
Loading states and icon support

[HuxButton Variants]

Cards #

HuxCard - Flexible card component with optional header, title, and actions
Customizable padding, margin, and border radius
Tap handling support

[HuxCard Examples]

Inputs #

HuxTextField - Enhanced text input with consistent styling

[HuxTextField Component]

HuxCheckbox - Interactive checkbox with custom styling and labels
Label, helper text, and error state support
Multiple sizes and validation

[HuxCheckbox Component]

Date & Time Pickers #

showHuxDatePickerDialog - Modern date picker with month/year selection
showHuxTimePickerDialog - Clean time picker with hour/minute dropdowns
Theme-aware styling with Hux design tokens
Responsive calendar grid and smart navigation

Widgets #

HuxLoading - Customizable loading indicators
HuxLoadingOverlay - Full-screen loading overlay

[HuxLoading Indicators]

HuxChart - Beautiful data visualization with line and bar charts

[HuxChart Visualization]

Context Menu #

HuxContextMenu - Right-click context menus with smart positioning
HuxContextMenuItem - Individual menu items with icons and states
HuxContextMenuDivider - Visual separators for menu groups
Cross-platform support with proper web context menu handling

[HuxContextMenu Component]

Right-click the example app components to see context menus in action!

Switch #

HuxSwitch - Toggle switch with smooth animations between on/off states

[HuxSwitch Component]

Feedback & Status #

HuxBadge - Status indicators and notification counters with semantic variants

[HuxBadge Component]

HuxAlert - Message boxes with variants (info, success, error) and dismissible functionality

[HuxAlert Component]

Avatar #

HuxAvatar - Circular user images with initials fallback, custom colors, and beautiful gradient variants
HuxAvatarGroup - Display multiple avatars with overlapping or spaced layouts

[HuxAvatar Component]

Theme #

HuxTheme - Pre-configured light and dark themes
HuxColors - Comprehensive color palette

Documentation #

📚 Complete Documentation - Visit our comprehensive documentation site for detailed guides, API references, and examples.

Quick Links #

Installation #

flutter pub add hux

Usage #

Basic Setup #

Wrap your app with the Hux theme:

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: MyHomePage(),
    );
  }
}

Using Components #

Button

HuxButton(
  onPressed: () => print('Button pressed'),
  child: Text('Primary Button'),
  variant: HuxButtonVariant.primary,
  size: HuxButtonSize.medium,
  icon: Icons.star,
)

Text Field

HuxTextField(
  label: 'Email',
  hint: 'Enter your email',
  prefixIcon: Icon(Icons.email),
  onChanged: (value) => print(value),
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Please enter your email';
    }
    return null;
  },
)

Card

HuxCard(
  title: 'Card Title',
  subtitle: 'Card subtitle',
  action: IconButton(
    icon: Icon(Icons.more_vert),
    onPressed: () {},
  ),
  child: Text('Card content goes here'),
  onTap: () => print('Card tapped'),
)

Date & Time Pickers

// Date picker
final DateTime? selectedDate = await showHuxDatePickerDialog(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(2020),
  lastDate: DateTime(2030),
);

// Time picker
final TimeOfDay? selectedTime = await showHuxTimePickerDialog(
  context: context,
  initialTime: TimeOfDay.now(),
);

Loading

// Simple loading indicator
HuxLoading(size: HuxLoadingSize.medium)

// Loading overlay
HuxLoadingOverlay(
  isLoading: true,
  message: 'Loading...',
  child: YourContent(),
)

Charts

// Line chart
HuxChart.line(
  data: [
    {'x': 1, 'y': 10},
    {'x': 2, 'y': 20},
    {'x': 3, 'y': 15},
  ],
  xField: 'x',
  yField: 'y',
  title: 'Sales Over Time',
  subtitle: 'Monthly data',
  primaryColor: Colors.blue,
)

// Bar chart
HuxChart.bar(
  data: [
    {'category': 'A', 'value': 30},
    {'category': 'B', 'value': 45},
    {'category': 'C', 'value': 25},
  ],
  xField: 'category',
  yField: 'value',
  title: 'Category Analysis',
)

HuxContextMenu(
  menuItems: [
    HuxContextMenuItem(
      text: 'Copy',
      icon: FeatherIcons.copy,
      onTap: () => print('Copy action'),
    ),
    HuxContextMenuItem(
      text: 'Paste',
      icon: FeatherIcons.clipboard,
      onTap: () => print('Paste action'),
      isDisabled: true,
    ),
    const HuxContextMenuDivider(),
    HuxContextMenuItem(
      text: 'Delete',
      icon: FeatherIcons.trash2,
      onTap: () => print('Delete action'),
      isDestructive: true,
    ),
  ],
  child: Container(
    padding: const EdgeInsets.all(20),
    child: const Text('Right-click me!'),
  ),
)

Avatar & Avatar Group

// Simple avatar with initials
HuxAvatar(
  name: 'John Doe',
  size: HuxAvatarSize.medium,
)

// Gradient avatar
HuxAvatar(
  useGradient: true,
  gradientVariant: HuxAvatarGradient.bluePurple,
  size: HuxAvatarSize.medium,
)

// Avatar group with overlap
HuxAvatarGroup(
  avatars: [
    HuxAvatar(name: 'Alice'),
    HuxAvatar(name: 'Bob'),
    HuxAvatar(useGradient: true, gradientVariant: HuxAvatarGradient.greenBlue),
  ],
  overlap: true,
  maxVisible: 3,
)

Badges & Alerts

// Badge variants
HuxBadge(
  label: 'New',
  variant: HuxBadgeVariant.primary,
  size: HuxBadgeSize.small,
)

// Alert with dismissal
HuxAlert(
  variant: HuxAlertVariant.success,
  title: 'Success!',
  message: 'Operation completed successfully.',
  showIcon: true,
  onDismiss: () => print('Alert dismissed'),
)

Customization #

All components can be customized using the provided parameters. For more advanced customization, you can extend the theme or override specific component styles.

Custom Colors #

// Access predefined colors
Container(
  color: HuxColors.primary,
  child: Text('Primary colored container'),
)

Contributing #

Contributions are welcome! Please feel free to submit a Pull Request.

License #

This project is licensed under the MIT License - see the LICENSE file for details.

hux 0.2.3 hux: ^0.2.3 copied to clipboard

Metadata