Installation

Requirements

Before installing Hux UI, ensure your development environment meets these requirements:

Flutter SDK

Flutter 3.22.0 or higher

Dart SDK

Dart 3.4.0 or higher (included with Flutter)

Platform Support

Android (API level 21+)
iOS (iOS 12.0+)
Web (JS and WASM)
Windows (Windows 10+)
macOS (macOS 10.15+)
Linux (Ubuntu 18.04+)

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: ^1.2.1  # 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: ^1.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

Dependency Conflicts

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.

Import Errors

If you get import errors:

Ensure you’re using the correct import: import 'package:hux/hux.dart';
Check that the package is listed in your pubspec.yaml
Run flutter pub get to fetch dependencies
Restart your IDE/editor

Theme Issues

If themes aren’t working correctly:

Ensure you’re using HuxTheme.lightTheme and HuxTheme.darkTheme
Check that MaterialApp is properly configured
Verify theme mode settings
Make sure components are wrapped in a MaterialApp context

Platform Specific Issues

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

Latest Version: 0.2.1
Package URL: pub.dev/packages/hux
Repository: github.com/lofidesigner/hux
License: MIT
Author: Zoe Gilbert

Getting Started

Components

Advanced

Installation

Requirements

Installation

Method 1: Using Flutter Command Line

Method 2: Manual Installation

Import and Setup

1. Import Hux UI

2. Configure Themes

3. Start Using Components

Verification

1. Check Dependencies

2. Test Import

3. Run Your App

Troubleshooting

Next Steps

Follow the Quickstart

Explore Components

Learn Theming

View Examples

Package Information

​Requirements

​Installation

​Method 1: Using Flutter Command Line

​Method 2: Manual Installation

​Import and Setup

​1. Import Hux UI

​2. Configure Themes

​3. Start Using Components

​Verification

​1. Check Dependencies

​2. Test Import

​3. Run Your App

​Troubleshooting

​Next Steps

Follow the Quickstart

Explore Components

Learn Theming

View Examples

​Package Information

Requirements

Installation

Method 1: Using Flutter Command Line

Method 2: Manual Installation

Import and Setup

1. Import Hux UI

2. Configure Themes

3. Start Using Components

Verification

1. Check Dependencies

2. Test Import

3. Run Your App

Troubleshooting

Next Steps

Package Information