Skip to main content

​
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.
1

Install Hux UI

Add Hux UI to your Flutter project:
flutter pub add hux
2

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

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

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:
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'),
      ),
    ],
  ),
)
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),
    ],
  ),
)
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)),
  ),
)
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:
The complete source code for this quickstart example is available in the Hux UI repository examples.