Skip to main content

​
Requirements

Before installing Hux UI, ensure your development environment meets these requirements:
Flutter 3.16.0 or higher
Dart 3.0.0 or higher (included with Flutter)
  • Android (API level 21+)
  • iOS (iOS 12.0+)
  • Web (JS and WASM)
  • Windows (Windows 10+)
  • macOS (macOS 10.15+)
  • Linux (Ubuntu 18.04+)

​
Installation

​
Method 1: Using Flutter Command Line

Add Hux UI to your Flutter project using the command line: 
flutter pub add hux
This will automatically add the latest version of Hux UI to your pubspec.yaml file and run flutter pub get.

​
Method 2: Manual Installation

Alternatively, you can manually add Hux UI to your pubspec.yaml file:
pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  hux: ^0.4.0  # Use the latest version
Then run: 
flutter pub get

​
Import and Setup

​
1. Import Hux UI

Import Hux UI in your Dart files where you want to use the components: 
import 'package:hux/hux.dart';
This single import gives you access to all Hux UI components and utilities.

​
2. Configure Themes

Wrap your MaterialApp with Hux UI themes for the best experience:
main.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(),
    );
  }
}

​
3. Start Using Components

You’re now ready to use Hux UI components in your app: 
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.'),
            ),
          ],
        ),
      ),
    );
  }
}

​
Verification

To verify that Hux UI is properly installed and working:

​
1. Check Dependencies

Ensure these dependencies are listed in your pubspec.yaml: 
dependencies:
  hux: ^0.2.1
  flutter:
    sdk: flutter

​
2. Test Import

Create a simple test to verify the import:
test.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!');
}

​
3. Run Your App

Start your Flutter app: 
flutter run
If you see Hux UI components rendering correctly, the installation is complete!

​
Troubleshooting

If you encounter dependency conflicts, try:
flutter pub deps
flutter clean
flutter pub get
Check for version conflicts with other packages in your pubspec.yaml.
If you get import errors:
  1. Ensure you’re using the correct import: import 'package:hux/hux.dart';
  2. Check that the package is listed in your pubspec.yaml
  3. Run flutter pub get to fetch dependencies
  4. Restart your IDE/editor
If themes aren’t working correctly:
  1. Ensure you’re using HuxTheme.lightTheme and HuxTheme.darkTheme
  2. Check that MaterialApp is properly configured
  3. Verify theme mode settings
  4. Make sure components are wrapped in a MaterialApp context
For web applications, ensure you have the latest Flutter web support:
flutter config --enable-web
flutter create . --platforms web
For desktop platforms:
flutter config --enable-windows-desktop --enable-macos-desktop --enable-linux-desktop

​
Next Steps

Now that Hux UI is installed, you can:

Follow the Quickstart

Learn the basics with our quickstart guide

Explore Components

Discover all available UI components

Learn Theming

Customize themes and design tokens

View Examples

See practical implementation examples

​
Package Information

⌘I