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,
),
],
),
);
}
}
Next Steps
Form Building
Learn advanced form patterns and validation
Theme Switching
Implement dynamic theme switching