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