Installation

​

Requirements

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

​

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:

dependencies:
  flutter:
    sdk: flutter
  hux: ^0.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:

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:

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

​

Next Steps

Now that Hux UI is installed, you can:

​

Package Information

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