Complete Examples
Real-world examples showcasing how to use Appikorn Madix Widgets in production applications.
Overview
This page provides complete, copy-paste examples that demonstrate how to build common UI patterns using Appikorn Madix Widgets. Each example includes full implementation details and best practices.
🏠 Dashboard Example
A complete dashboard with charts, cards, and interactive elements.
import 'package:flutter/material.dart';
import 'package:appikorn_madix_widgets/appikorn_madix_widgets.dart';
class DashboardPage extends StatefulWidget {
_DashboardPageState createState() => _DashboardPageState();
}
class _DashboardPageState extends State<DashboardPage> {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: TextAppi(
text: 'Analytics Dashboard',
style: TextStyle(fontWeight: FontWeight.bold),
),
backgroundColor: Colors.blue[600],
elevation: 0,
),
body: SingleChildScrollView(
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Stats Cards Row
_buildStatsRow(),
SizedBox(height: 24),
// Charts Section
_buildChartsSection(),
SizedBox(height: 24),
// Recent Activity
_buildRecentActivity(),
],
),
),
);
}
Widget _buildStatsRow() {
return Row(
children: [
Expanded(child: _buildStatCard('Total Users', '12,345', Icons.people, Colors.blue)),
SizedBox(width: 16),
Expanded(child: _buildStatCard('Revenue', '\$45,678', Icons.attach_money, Colors.green)),
SizedBox(width: 16),
Expanded(child: _buildStatCard('Orders', '1,234', Icons.shopping_cart, Colors.orange)),
],
);
}
Widget _buildStatCard(String title, String value, IconData icon, Color color) {
return BoxAppi(
color: Colors.white,
borderRadius: 16,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
blurRadius: 8,
offset: Offset(0, 2),
),
],
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(icon, color: color, size: 24),
BoxAppi(
color: color.withOpacity(0.1),
borderRadius: 8,
padding: EdgeInsets.all(8),
child: Icon(Icons.trending_up, color: color, size: 16),
),
],
),
SizedBox(height: 16),
TextAppi(
text: value,
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.grey[800],
),
),
SizedBox(height: 4),
TextAppi(
text: title,
style: TextStyle(
fontSize: 14,
color: Colors.grey[600],
),
),
],
),
);
}
Widget _buildChartsSection() {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Revenue Chart
Expanded(
flex: 2,
child: BoxAppi(
color: Colors.white,
borderRadius: 16,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
blurRadius: 8,
offset: Offset(0, 2),
),
],
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextAppi(
text: 'Revenue Trend',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 20),
LineChartAppi(
data: [
LineChartData(x: 'Jan', y: 30000),
LineChartData(x: 'Feb', y: 35000),
LineChartData(x: 'Mar', y: 32000),
LineChartData(x: 'Apr', y: 45000),
LineChartData(x: 'May', y: 52000),
LineChartData(x: 'Jun', y: 48000),
],
height: 200,
lineColor: Colors.blue,
),
],
),
),
),
SizedBox(width: 16),
// Traffic Sources Pie Chart
Expanded(
child: BoxAppi(
color: Colors.white,
borderRadius: 16,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
blurRadius: 8,
offset: Offset(0, 2),
),
],
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextAppi(
text: 'Traffic Sources',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 20),
PieChartAppi(
data: [
PieChartData(label: 'Organic', value: 45, color: Colors.green),
PieChartData(label: 'Paid', value: 30, color: Colors.blue),
PieChartData(label: 'Social', value: 15, color: Colors.purple),
PieChartData(label: 'Direct', value: 10, color: Colors.orange),
],
height: 200,
showLegend: true,
legendPosition: LegendPosition.bottom,
),
],
),
),
),
],
);
}
Widget _buildRecentActivity() {
return BoxAppi(
color: Colors.white,
borderRadius: 16,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
blurRadius: 8,
offset: Offset(0, 2),
),
],
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextAppi(
text: 'Recent Activity',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 16),
...List.generate(5, (index) => _buildActivityItem(
'User ${index + 1} completed purchase',
'${index + 1} minutes ago',
Icons.shopping_bag,
Colors.green,
)),
],
),
);
}
Widget _buildActivityItem(String title, String time, IconData icon, Color color) {
return Padding(
padding: EdgeInsets.symmetric(vertical: 8),
child: Row(
children: [
BoxAppi(
color: color.withOpacity(0.1),
borderRadius: 8,
padding: EdgeInsets.all(8),
child: Icon(icon, color: color, size: 16),
),
SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextAppi(
text: title,
style: TextStyle(fontWeight: FontWeight.w500),
),
TextAppi(
text: time,
style: TextStyle(
fontSize: 12,
color: Colors.grey[600],
),
),
],
),
),
],
),
);
}
}
📝 User Profile Form
A comprehensive user profile form with validation and file upload.
class UserProfileForm extends StatefulWidget {
_UserProfileFormState createState() => _UserProfileFormState();
}
class _UserProfileFormState extends State<UserProfileForm> {
final _formKey = GlobalKey<FormState>();
final _firstNameController = TextEditingController();
final _lastNameController = TextEditingController();
final _emailController = TextEditingController();
final _phoneController = TextEditingController();
final _bioController = TextEditingController();
String? _selectedCountry;
bool _isLoading = false;
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: TextAppi(text: 'Edit Profile'),
backgroundColor: Colors.blue[600],
),
body: Form(
key: _formKey,
child: SingleChildScrollView(
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Profile Picture Section
_buildProfilePictureSection(),
SizedBox(height: 32),
// Personal Information
_buildSectionTitle('Personal Information'),
SizedBox(height: 16),
Row(
children: [
Expanded(
child: TextFieldAppi(
controller: _firstNameController,
label: 'First Name',
hintText: 'Enter your first name',
validator: (value) {
if (value == null || value.isEmpty) {
return 'First name is required';
}
return null;
},
),
),
SizedBox(width: 16),
Expanded(
child: TextFieldAppi(
controller: _lastNameController,
label: 'Last Name',
hintText: 'Enter your last name',
validator: (value) {
if (value == null || value.isEmpty) {
return 'Last name is required';
}
return null;
},
),
),
],
),
SizedBox(height: 16),
TextFieldAppi(
controller: _emailController,
label: 'Email Address',
hintText: 'example@domain.com',
keyboardType: TextInputType.emailAddress,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Email is required';
}
if (!RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$').hasMatch(value)) {
return 'Please enter a valid email';
}
return null;
},
),
SizedBox(height: 16),
TextFieldAppi(
controller: _phoneController,
label: 'Phone Number',
hintText: '+1 (555) 123-4567',
keyboardType: TextInputType.phone,
validator: (value) {
if (value != null && value.isNotEmpty) {
if (!RegExp(r'^\+?[\d\s\-\(\)]+$').hasMatch(value)) {
return 'Please enter a valid phone number';
}
}
return null;
},
),
SizedBox(height: 16),
// Country Dropdown
DropDownMenuAppi(
label: 'Country',
value: _selectedCountry,
items: [
'United States',
'Canada',
'United Kingdom',
'Australia',
'Germany',
'France',
'Japan',
'Other',
],
onChanged: (value) {
setState(() {
_selectedCountry = value;
});
},
),
SizedBox(height: 32),
// Bio Section
_buildSectionTitle('About'),
SizedBox(height: 16),
TextFieldAppi(
controller: _bioController,
label: 'Bio',
hintText: 'Tell us about yourself...',
maxLines: 4,
maxLength: 500,
keyboardType: TextInputType.multiline,
),
SizedBox(height: 32),
// Action Buttons
Row(
children: [
Expanded(
child: BoxAppi(
height: 48,
color: Colors.grey[200],
borderRadius: 8,
onTap: () => Navigator.pop(context),
child: Center(
child: TextAppi(
text: 'Cancel',
style: TextStyle(
fontWeight: FontWeight.w600,
color: Colors.grey[700],
),
),
),
),
),
SizedBox(width: 16),
Expanded(
child: BoxAppi(
height: 48,
color: Colors.blue[600],
borderRadius: 8,
onTap: _isLoading ? null : _saveProfile,
child: Center(
child: _isLoading
? CircleLoaderAppi(size: 20, color: Colors.white)
: TextAppi(
text: 'Save Changes',
style: TextStyle(
fontWeight: FontWeight.w600,
color: Colors.white,
),
),
),
),
),
],
),
],
),
),
),
);
}
Widget _buildProfilePictureSection() {
return Center(
child: Column(
children: [
BoxAppi(
width: 120,
height: 120,
borderRadius: 60,
color: Colors.grey[200],
border: Border.all(color: Colors.grey[300]!, width: 2),
child: Icon(
Icons.person,
size: 60,
color: Colors.grey[600],
),
),
SizedBox(height: 16),
BoxAppi(
color: Colors.blue[50],
borderRadius: 8,
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
onTap: () => _selectProfilePicture(),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.camera_alt, color: Colors.blue[600], size: 16),
SizedBox(width: 8),
TextAppi(
text: 'Change Photo',
style: TextStyle(
color: Colors.blue[600],
fontWeight: FontWeight.w600,
),
),
],
),
),
],
),
);
}
Widget _buildSectionTitle(String title) {
return TextAppi(
text: title,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.grey[800],
),
);
}
void _selectProfilePicture() {
// Implement image picker logic
print('Select profile picture');
}
void _saveProfile() async {
if (_formKey.currentState!.validate()) {
setState(() {
_isLoading = true;
});
// Simulate API call
await Future.delayed(Duration(seconds: 2));
setState(() {
_isLoading = false;
});
// Show success message
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: TextAppi(text: 'Profile updated successfully!'),
backgroundColor: Colors.green,
),
);
Navigator.pop(context);
}
}
}
🛒 E-commerce Product List
A product listing page with search, filters, and shopping cart integration.
class ProductListPage extends StatefulWidget {
_ProductListPageState createState() => _ProductListPageState();
}
class _ProductListPageState extends State<ProductListPage> {
final _searchController = TextEditingController();
List<Product> _products = [];
List<Product> _filteredProducts = [];
String _selectedCategory = 'All';
bool _isLoading = true;
void initState() {
super.initState();
_loadProducts();
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: TextAppi(text: 'Products'),
backgroundColor: Colors.blue[600],
actions: [
IconButton(
icon: Icon(Icons.shopping_cart),
onPressed: () => _openCart(),
),
],
),
body: Column(
children: [
// Search and Filter Section
_buildSearchAndFilter(),
// Products Grid
Expanded(
child: _isLoading
? Center(child: CircleLoaderAppi())
: _buildProductsGrid(),
),
],
),
);
}
Widget _buildSearchAndFilter() {
return BoxAppi(
color: Colors.white,
padding: EdgeInsets.all(16),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
blurRadius: 4,
offset: Offset(0, 2),
),
],
child: Column(
children: [
// Search Field
SearchableTextFieldAppi(
controller: _searchController,
hintText: 'Search products...',
onChanged: _filterProducts,
),
SizedBox(height: 16),
// Category Filter
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
'All',
'Electronics',
'Clothing',
'Books',
'Home',
'Sports',
].map((category) => _buildCategoryChip(category)).toList(),
),
),
],
),
);
}
Widget _buildCategoryChip(String category) {
final isSelected = _selectedCategory == category;
return Padding(
padding: EdgeInsets.only(right: 8),
child: ChipAppi(
label: category,
isSelected: isSelected,
onTap: () {
setState(() {
_selectedCategory = category;
});
_filterProducts(_searchController.text);
},
selectedColor: Colors.blue[600],
backgroundColor: Colors.grey[200],
),
);
}
Widget _buildProductsGrid() {
if (_filteredProducts.isEmpty) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.search_off, size: 64, color: Colors.grey[400]),
SizedBox(height: 16),
TextAppi(
text: 'No products found',
style: TextStyle(
fontSize: 18,
color: Colors.grey[600],
),
),
],
),
);
}
return GridView.builder(
padding: EdgeInsets.all(16),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: MediaQuery.of(context).size.width > 600 ? 3 : 2,
childAspectRatio: 0.75,
crossAxisSpacing: 16,
mainAxisSpacing: 16,
),
itemCount: _filteredProducts.length,
itemBuilder: (context, index) {
return _buildProductCard(_filteredProducts[index]);
},
);
}
Widget _buildProductCard(Product product) {
return BoxAppi(
color: Colors.white,
borderRadius: 12,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
blurRadius: 8,
offset: Offset(0, 2),
),
],
onTap: () => _openProductDetail(product),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Product Image
Expanded(
flex: 3,
child: BoxAppi(
width: double.infinity,
borderRadius: 12,
color: Colors.grey[100],
child: Icon(
Icons.image,
size: 48,
color: Colors.grey[400],
),
),
),
// Product Info
Expanded(
flex: 2,
child: Padding(
padding: EdgeInsets.all(12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextAppi(
text: product.name,
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 14,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
SizedBox(height: 4),
TextAppi(
text: '\$${product.price.toStringAsFixed(2)}',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.blue[600],
),
),
Spacer(),
// Add to Cart Button
BoxAppi(
width: double.infinity,
height: 32,
color: Colors.blue[600],
borderRadius: 6,
onTap: () => _addToCart(product),
child: Center(
child: TextAppi(
text: 'Add to Cart',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: 12,
),
),
),
),
],
),
),
),
],
),
);
}
void _loadProducts() async {
// Simulate API call
await Future.delayed(Duration(seconds: 1));
setState(() {
_products = [
Product(id: '1', name: 'Wireless Headphones', price: 99.99, category: 'Electronics'),
Product(id: '2', name: 'Cotton T-Shirt', price: 24.99, category: 'Clothing'),
Product(id: '3', name: 'Programming Book', price: 39.99, category: 'Books'),
Product(id: '4', name: 'Coffee Mug', price: 12.99, category: 'Home'),
Product(id: '5', name: 'Running Shoes', price: 89.99, category: 'Sports'),
Product(id: '6', name: 'Smartphone', price: 699.99, category: 'Electronics'),
];
_filteredProducts = _products;
_isLoading = false;
});
}
void _filterProducts(String query) {
setState(() {
_filteredProducts = _products.where((product) {
final matchesSearch = product.name.toLowerCase().contains(query.toLowerCase());
final matchesCategory = _selectedCategory == 'All' || product.category == _selectedCategory;
return matchesSearch && matchesCategory;
}).toList();
});
}
void _addToCart(Product product) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: TextAppi(text: '${product.name} added to cart'),
backgroundColor: Colors.green,
duration: Duration(seconds: 2),
),
);
}
void _openProductDetail(Product product) {
// Navigate to product detail page
print('Open product detail: ${product.name}');
}
void _openCart() {
// Navigate to cart page
print('Open cart');
}
}
class Product {
final String id;
final String name;
final double price;
final String category;
Product({
required this.id,
required this.name,
required this.price,
required this.category,
});
}
📊 Data Table Example
A comprehensive data table with sorting, filtering, and pagination.
class DataTableExample extends StatefulWidget {
_DataTableExampleState createState() => _DataTableExampleState();
}
class _DataTableExampleState extends State<DataTableExample> {
List<Employee> _employees = [];
List<Employee> _filteredEmployees = [];
final _searchController = TextEditingController();
int _currentPage = 0;
final int _itemsPerPage = 10;
void initState() {
super.initState();
_loadEmployees();
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: TextAppi(text: 'Employee Directory'),
backgroundColor: Colors.blue[600],
),
body: Column(
children: [
// Search and Actions
_buildSearchSection(),
// Data Table
Expanded(
child: TableWidgetAppi(
headers: [
TableHeader(title: 'Name', key: 'name'),
TableHeader(title: 'Position', key: 'position'),
TableHeader(title: 'Department', key: 'department'),
TableHeader(title: 'Salary', key: 'salary'),
TableHeader(title: 'Status', key: 'status'),
TableHeader(title: 'Actions', key: 'actions'),
],
rows: _buildTableRows(),
onSort: _handleSort,
showPagination: true,
currentPage: _currentPage,
totalPages: (_filteredEmployees.length / _itemsPerPage).ceil(),
onPageChanged: (page) {
setState(() {
_currentPage = page;
});
},
),
),
],
),
);
}
Widget _buildSearchSection() {
return BoxAppi(
color: Colors.white,
padding: EdgeInsets.all(16),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
blurRadius: 4,
offset: Offset(0, 2),
),
],
child: Row(
children: [
Expanded(
child: SearchableTextFieldAppi(
controller: _searchController,
hintText: 'Search employees...',
onChanged: _filterEmployees,
),
),
SizedBox(width: 16),
BoxAppi(
color: Colors.blue[600],
borderRadius: 8,
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
onTap: _addEmployee,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.add, color: Colors.white, size: 16),
SizedBox(width: 8),
TextAppi(
text: 'Add Employee',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w600,
),
),
],
),
),
],
),
);
}
List<TableRow> _buildTableRows() {
final startIndex = _currentPage * _itemsPerPage;
final endIndex = (startIndex + _itemsPerPage).clamp(0, _filteredEmployees.length);
final pageEmployees = _filteredEmployees.sublist(startIndex, endIndex);
return pageEmployees.map((employee) {
return TableRow(
cells: [
TableCell(
child: Row(
children: [
CircleWebImageAppi(
imageUrl: employee.avatarUrl,
radius: 20,
),
SizedBox(width: 12),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextAppi(
text: employee.name,
style: TextStyle(fontWeight: FontWeight.w600),
),
TextAppi(
text: employee.email,
style: TextStyle(
fontSize: 12,
color: Colors.grey[600],
),
),
],
),
],
),
),
TableCell(child: TextAppi(text: employee.position)),
TableCell(child: TextAppi(text: employee.department)),
TableCell(
child: TextAppi(
text: '\$${employee.salary.toStringAsFixed(0)}',
style: TextStyle(fontWeight: FontWeight.w600),
),
),
TableCell(
child: ChipAppi(
label: employee.status,
backgroundColor: _getStatusColor(employee.status),
textColor: Colors.white,
),
),
TableCell(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
icon: Icon(Icons.edit, size: 16),
onPressed: () => _editEmployee(employee),
),
IconButton(
icon: Icon(Icons.delete, size: 16, color: Colors.red),
onPressed: () => _deleteEmployee(employee),
),
],
),
),
],
);
}).toList();
}
Color _getStatusColor(String status) {
switch (status.toLowerCase()) {
case 'active':
return Colors.green;
case 'inactive':
return Colors.red;
case 'pending':
return Colors.orange;
default:
return Colors.grey;
}
}
void _loadEmployees() {
// Simulate loading employee data
_employees = [
Employee(
id: '1',
name: 'John Doe',
email: 'john@company.com',
position: 'Software Engineer',
department: 'Engineering',
salary: 85000,
status: 'Active',
avatarUrl: 'https://via.placeholder.com/40',
),
Employee(
id: '2',
name: 'Jane Smith',
email: 'jane@company.com',
position: 'Product Manager',
department: 'Product',
salary: 95000,
status: 'Active',
avatarUrl: 'https://via.placeholder.com/40',
),
// Add more employees...
];
_filteredEmployees = _employees;
}
void _filterEmployees(String query) {
setState(() {
_filteredEmployees = _employees.where((employee) {
return employee.name.toLowerCase().contains(query.toLowerCase()) ||
employee.email.toLowerCase().contains(query.toLowerCase()) ||
employee.position.toLowerCase().contains(query.toLowerCase()) ||
employee.department.toLowerCase().contains(query.toLowerCase());
}).toList();
_currentPage = 0; // Reset to first page
});
}
void _handleSort(String key, bool ascending) {
setState(() {
_filteredEmployees.sort((a, b) {
dynamic aValue, bValue;
switch (key) {
case 'name':
aValue = a.name;
bValue = b.name;
break;
case 'position':
aValue = a.position;
bValue = b.position;
break;
case 'department':
aValue = a.department;
bValue = b.department;
break;
case 'salary':
aValue = a.salary;
bValue = b.salary;
break;
default:
return 0;
}
if (ascending) {
return aValue.compareTo(bValue);
} else {
return bValue.compareTo(aValue);
}
});
});
}
void _addEmployee() {
// Navigate to add employee form
print('Add new employee');
}
void _editEmployee(Employee employee) {
// Navigate to edit employee form
print('Edit employee: ${employee.name}');
}
void _deleteEmployee(Employee employee) {
// Show confirmation dialog and delete
showDialog(
context: context,
builder: (context) => AlertDialog(
title: TextAppi(text: 'Delete Employee'),
content: TextAppi(text: 'Are you sure you want to delete ${employee.name}?'),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: TextAppi(text: 'Cancel'),
),
TextButton(
onPressed: () {
setState(() {
_employees.remove(employee);
_filteredEmployees.remove(employee);
});
Navigator.pop(context);
},
child: TextAppi(text: 'Delete', style: TextStyle(color: Colors.red)),
),
],
),
);
}
}
class Employee {
final String id;
final String name;
final String email;
final String position;
final String department;
final double salary;
final String status;
final String avatarUrl;
Employee({
required this.id,
required this.name,
required this.email,
required this.position,
required this.department,
required this.salary,
required this.status,
required this.avatarUrl,
});
}
🎯 Best Practices Summary
1. State Management
- Use proper state management patterns
- Dispose controllers and resources
- Handle loading and error states
2. Performance
- Use
constconstructors when possible - Implement lazy loading for large datasets
- Optimize rebuild cycles
3. User Experience
- Provide loading indicators
- Show meaningful error messages
- Implement proper validation
4. Accessibility
- Add semantic labels
- Ensure proper contrast ratios
- Support keyboard navigation
5. Responsive Design
- Use
LayoutBuilderfor adaptive layouts - Test on different screen sizes
- Implement proper breakpoints
These examples demonstrate real-world usage patterns and best practices for building production-ready applications with Appikorn Madix Widgets. Copy and adapt these examples to fit your specific needs!