Basic Usage Examples

Overview

This page showcases common usage patterns and implementations using Hux UI components. These examples are taken from real-world scenarios and demonstrate best practices.

Complete App Example

Here’s a minimal but complete Flutter app using Hux UI:

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 Example',
      theme: HuxTheme.lightTheme,
      darkTheme: HuxTheme.darkTheme,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Hux UI Demo')),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            HuxCard(
              title: 'Welcome',
              subtitle: 'Getting started with Hux UI',
              child: Text('This is a simple example app.'),
            ),
            SizedBox(height: 20),
            
            HuxButton(
              onPressed: () => print('Primary action'),
              child: Text('Primary Button'),
              variant: HuxButtonVariant.primary,
            ),
            SizedBox(height: 12),
            
            HuxButton(
              onPressed: () => print('Secondary action'),
              child: Text('Secondary Button'),
              variant: HuxButtonVariant.secondary,
            ),
          ],
        ),
      ),
    );
  }
}

Form Example

class LoginForm extends StatefulWidget {
  @override
  _LoginFormState createState() => _LoginFormState();
}

class _LoginFormState extends State<LoginForm> {
  final _formKey = GlobalKey<FormState>();
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();
  bool _isLoading = false;

  void _handleLogin() async {
    if (_formKey.currentState!.validate()) {
      setState(() {
        _isLoading = true;
      });

      // Simulate login
      await Future.delayed(Duration(seconds: 2));

      setState(() {
        _isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return HuxCard(
      title: 'Login',
      child: Form(
        key: _formKey,
        child: Column(
          children: [
            HuxInput(
              label: 'Email',
              hint: 'Enter your email',
              controller: _emailController,
              prefixIcon: Icon(FeatherIcons.mail),
              validator: (value) {
                if (value?.isEmpty ?? true) {
                  return 'Email is required';
                }
                return null;
              },
            ),
            SizedBox(height: 16),
            
            HuxInput(
              label: 'Password',
              hint: 'Enter your password',
              controller: _passwordController,
              prefixIcon: Icon(FeatherIcons.lock),
              obscureText: true,
              validator: (value) {
                if (value?.isEmpty ?? true) {
                  return 'Password is required';
                }
                return null;
              },
            ),
            SizedBox(height: 24),
            
            HuxButton(
              onPressed: _isLoading ? null : _handleLogin,
              isLoading: _isLoading,
              child: Text('Login'),
              variant: HuxButtonVariant.primary,
            ),
          ],
        ),
      ),
    );
  }
}

Settings Page Example

class SettingsPage extends StatefulWidget {
  @override
  _SettingsPageState createState() => _SettingsPageState();
}

class _SettingsPageState extends State<SettingsPage> {
  bool _notifications = true;
  bool _darkMode = false;
  bool _analytics = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Settings')),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            HuxCard(
              title: 'Preferences',
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text('Push Notifications'),
                      HuxSwitch(
                        value: _notifications,
                        onChanged: (value) {
                          setState(() {
                            _notifications = value;
                          });
                        },
                      ),
                    ],
                  ),
                  SizedBox(height: 16),
                  
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text('Dark Mode'),
                      HuxSwitch(
                        value: _darkMode,
                        onChanged: (value) {
                          setState(() {
                            _darkMode = value;
                          });
                        },
                      ),
                    ],
                  ),
                  SizedBox(height: 16),
                  
                  HuxCheckbox(
                    value: _analytics,
                    onChanged: (value) {
                      setState(() {
                        _analytics = value ?? false;
                      });
                    },
                    label: 'Share analytics data to help improve the app',
                  ),
                ],
              ),
            ),
            SizedBox(height: 20),
            
            HuxCard(
              title: 'Account',
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  HuxButton(
                    onPressed: () {},
                    child: Text('Change Password'),
                    variant: HuxButtonVariant.outline,
                  ),
                  SizedBox(height: 12),
                  
                  HuxButton(
                    onPressed: () {},
                    child: Text('Export Data'),
                    variant: HuxButtonVariant.outline,
                  ),
                  SizedBox(height: 12),
                  
                  HuxButton(
                    onPressed: () {},
                    child: Text('Delete Account'),
                    variant: HuxButtonVariant.outline,
                    primaryColor: HuxColors.red,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Profile Page Example

class ProfilePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Profile')),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          children: [
            HuxCard(
              child: Row(
                children: [
                  HuxAvatar(
                    name: 'John Doe',
                    size: HuxAvatarSize.large,
                  ),
                  SizedBox(width: 16),
                  
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          'John Doe',
                          style: Theme.of(context).textTheme.titleLarge,
                        ),
                        Text(
                          '[email protected]',
                          style: TextStyle(
                            color: HuxTokens.textSecondary(context),
                          ),
                        ),
                        SizedBox(height: 8),
                        
                        Row(
                          children: [
                            HuxBadge(
                              label: 'Pro',
                              variant: HuxBadgeVariant.primary,
                            ),
                            SizedBox(width: 8),
                            HuxBadge(
                              label: 'Verified',
                              variant: HuxBadgeVariant.success,
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(height: 20),
            
            HuxCard(
              title: 'Team Members',
              child: HuxAvatarGroup(
                avatars: [
                  HuxAvatar(name: 'Alice Smith'),
                  HuxAvatar(name: 'Bob Johnson'),
                  HuxAvatar(
                    useGradient: true,
                    gradientVariant: HuxAvatarGradient.bluePurple,
                  ),
                  HuxAvatar(name: 'Carol Williams'),
                  HuxAvatar(name: 'David Brown'),
                ],
                overlap: true,
                maxVisible: 4,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

These examples demonstrate common patterns you’ll use when building apps with Hux UI. For more complex examples, check out the full example app.

Date Input Example

class DateSelectionForm extends StatefulWidget {
  @override
  _DateSelectionFormState createState() => _DateSelectionFormState();
}

class _DateSelectionFormState extends State<DateSelectionForm> {
  DateTime? _selectedDate;

  @override
  Widget build(BuildContext context) {
    return HuxCard(
      title: 'Event Details',
      child: Column(
        children: [
          HuxInput(
            label: 'Event Name',
            hint: 'Enter event name',
            prefixIcon: Icon(FeatherIcons.calendar),
          ),
          SizedBox(height: 16),
          
                      HuxDateInput(
              label: 'Event Date',
              hint: 'MM/DD/YYYY',
              onDateChanged: (date) {
                setState(() {
                  _selectedDate = date;
                });
              },
              validator: (date) {
                if (date == null) return 'Please select a date';
                if (date.isBefore(DateTime.now())) {
                  return 'Date cannot be in the past';
                }
                return null;
              },
            ),
          SizedBox(height: 16),
          
          HuxButton(
            onPressed: _selectedDate != null ? () {
              print('Event scheduled for: $_selectedDate');
            } : null,
            child: Text('Schedule Event'),
            variant: HuxButtonVariant.primary,
          ),
        ],
      ),
    );
  }
}

Usage Examples

Basic Usage Examples

Overview

Complete App Example

Form Example

Settings Page Example

Profile Page Example

Date Input Example

Next Steps

Form Building

Theme Switching

Usage Examples

​Overview

​Complete App Example

​Form Example

​Settings Page Example

​Profile Page Example

​Date Input Example

​Next Steps

Form Building

Theme Switching

Overview

Complete App Example

Form Example

Settings Page Example

Profile Page Example

Date Input Example

Next Steps