Quickstart

Quick Setup

Get up and running with Hux UI in just a few minutes. This guide will help you create a simple Flutter app using Hux UI components.

For Designers: Check out the Figma library to explore all Hux UI components visually and use them in your design workflow.

Install Hux UI

Add Hux UI to your Flutter project:

flutter pub add hux

Configure Themes

Set up Hux UI themes in your main.dart:

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: 'Hux UI Quickstart',
      theme: HuxTheme.lightTheme,
      darkTheme: HuxTheme.darkTheme,
      home: QuickstartPage(),
    );
  }
}

Build Your First UI

Create a simple page with Hux UI components:

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,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Run Your App

Start your Flutter app to see Hux UI in action:

flutter run

What You Built

Congratulations! You just created a Flutter app with:

HuxCard - A beautiful card container with title and subtitle
HuxInput - An enhanced text input with icon and validation support
HuxDateInput - Date input with automatic formatting and calendar picker
HuxButton - Multiple button variants with loading states
Automatic theming - Light and dark mode support

Common Patterns

Here are some common patterns you’ll use with Hux UI:

Form Building

Combine text fields, buttons, and validation:

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'),
      ),
    ],
  ),
)

Loading States

Show loading indicators and overlays:

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),
    ],
  ),
)

Theme Customization

Customize colors and apply themes:

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)),
  ),
)

Data Display

Show data with charts and badges:

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,
        ),
      ],
    ),
  ],
)

Next Steps

Now that you’ve built your first Hux UI app, explore more features:

Component Reference

Explore all available components and their APIs

Theming Guide

Learn how to customize themes and design tokens

Advanced Examples

See complex implementations and best practices

Accessibility

Make your apps accessible with Hux UI

Get Help

If you need assistance:

Issues: GitHub Issues
Source Code: github.com/lofidesigner/hux
Package: pub.dev/packages/hux
Figma Library: Figma Community

The complete source code for this quickstart example is available in the Hux UI repository examples.

Getting Started

Components

Advanced

Quick Setup

What You Built

Common Patterns

Next Steps

Component Reference

Theming Guide

Advanced Examples

Accessibility

Get Help

​Quick Setup

​What You Built

​Common Patterns

​Next Steps

Component Reference

Theming Guide

Advanced Examples

Accessibility

​Get Help

Quick Setup

What You Built

Common Patterns

Next Steps

Get Help