1"use strict";(self.webpackChunkdocumentation=self.webpackChunkdocumentation||[]).push([[5440],{8453:(n,e,t)=>{t.d(e,{R:()=>l,x:()=>a});var o=t(6540);const i={},r=o.createContext(i);function l(n){const e=o.useContext(r);return o.useMemo((function(){return"function"==typeof n?n(e):{...e,...n}}),[e,n])}function a(n){let e;return e=n.disableParentContext?"function"==typeof n.components?n.components(i):n.components||i:l(n.components),o.createElement(r.Provider,{value:e},n.children)}},9043:(n,e,t)=>{t.r(e),t.d(e,{assets:()=>s,contentTitle:()=>a,default:()=>p,frontMatter:()=>l,metadata:()=>o,toc:()=>d});const o=JSON.parse('{"id":"examples/complete-examples","title":"Complete Examples","description":"Real-world examples showcasing how to use Appikorn Madix Widgets in production applications.","source":"@site/docs/examples/complete-examples.md","sourceDirName":"examples","slug":"/examples/complete-examples","permalink":"/docs/examples/complete-examples","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"HydratedAppi","permalink":"/docs/widgets/hydrated_appi"},"next":{"title":"API Reference","permalink":"/docs/api/api-reference"}}');var i=t(4848),r=t(8453);const l={},a="Complete Examples",s={},d=[{value:"Overview",id:"overview",level:2},{value:"\ud83c\udfe0 Dashboard Example",id:"-dashboard-example",level:2},{value:"\ud83d\udcdd User Profile Form",id:"-user-profile-form",level:2},{value:"\ud83d\uded2 E-commerce Product List",id:"-e-commerce-product-list",level:2},{value:"\ud83d\udcca Data Table Example",id:"-data-table-example",level:2},{value:"\ud83c\udfaf Best Practices Summary",id:"-best-practices-summary",level:2},{value:"1. State Management",id:"1-state-management",level:3},{value:"2. Performance",id:"2-performance",level:3},{value:"3. User Experience",id:"3-user-experience",level:3},{value:"4. Accessibility",id:"4-accessibility",level:3},{value:"5. Responsive Design",id:"5-responsive-design",level:3}];function c(n){const e={code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",hr:"hr",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.R)(),...n.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.header,{children:(0,i.jsx)(e.h1,{id:"complete-examples",children:"Complete Examples"})}),"\n",(0,i.jsx)(e.p,{children:"Real-world examples showcasing how to use Appikorn Madix Widgets in production applications."}),"\n",(0,i.jsx)(e.h2,{id:"overview",children:"Overview"}),"\n",(0,i.jsx)(e.p,{children:"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."}),"\n",(0,i.jsx)(e.h2,{id:"-dashboard-example",children:"\ud83c\udfe0 Dashboard Example"}),"\n",(0,i.jsx)(e.p,{children:"A complete dashboard with charts, cards, and interactive elements."}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-dart",children:"import 'package:flutter/material.dart';\nimport 'package:appikorn_madix_widgets/appikorn_madix_widgets.dart';\n\nclass DashboardPage extends StatefulWidget {\n @override\n _DashboardPageState createState() => _DashboardPageState();\n}\n\nclass _DashboardPageState extends State<DashboardPage> {\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(\n title: TextAppi(\n text: 'Analytics Dashboard',\n style: TextStyle(fontWeight: FontWeight.bold),\n ),\n backgroundColor: Colors.blue[600],\n elevation: 0,\n ),\n body: SingleChildScrollView(\n padding: EdgeInsets.all(16),\n child: Column(\n crossAxisAlignment: CrossAxisAlignment.start,\n children: [\n // Stats Cards Row\n _buildStatsRow(),\n SizedBox(height: 24),\n \n // Charts Section\n _buildChartsSection(),\n SizedBox(height: 24),\n \n // Recent Activity\n _buildRecentActivity(),\n ],\n ),\n ),\n );\n }
1\n\n Widget _buildStatsRow() {\n return Row(\n children: [\n Expanded(child: _buildStatCard('Total Users', '12,345', Icons.people, Colors.blue)),\n SizedBox(width: 16),\n Expanded(child: _buildStatCard('Revenue', '\\$45,678', Icons.attach_money, Colors.green)),\n SizedBox(width: 16),\n Expanded(child: _buildStatCard('Orders', '1,234', Icons.shopping_cart, Colors.orange)),\n ],\n );\n }\n\n Widget _buildStatCard(String title, String value, IconData icon, Color color) {\n return BoxAppi(\n color: Colors.white,\n borderRadius: 16,\n boxShadow: [\n BoxShadow(\n color: Colors.black.withOpacity(0.1),\n blurRadius: 8,\n offset: Offset(0, 2),\n ),\n ],\n padding: EdgeInsets.all(20),\n child: Column(\n crossAxisAlignment: CrossAxisAlignment.start,\n children: [\n Row(\n mainAxisAlignment: MainAxisAlignment.spaceBetween,\n children: [\n Icon(icon, color: color, size: 24),\n BoxAppi(\n color: color.withOpacity(0.1),\n borderRadius: 8,\n padding: EdgeInsets.all(8),\n child: Icon(Icons.trending_up, color: color, size: 16),\n ),\n ],\n ),\n SizedBox(height: 16),\n TextAppi(\n text: value,\n style: TextStyle(\n fontSize: 24,\n fontWeight: FontWeight.bold,\n color: Colors.grey[800],\n ),\n ),\n SizedBox(height: 4),\n TextAppi(\n text: title,\n style: TextStyle(\n fontSize: 14,\n color: Colors.grey[600],\n ),\n ),\n ],\n ),\n );\n }\n\n Widget _buildChartsSection() {\n return Row(\n crossAxisAlignment: CrossAxisAlignment.start,\n children: [\n // Revenue Chart\n Expanded(\n flex: 2,\n child: BoxAppi(\n color: Colors.white,\n borderRadius: 16,\n boxShadow: [\n BoxShadow(\n color: Colors.black.withOpacity(0.1),\n blurRadius: 8,\n offset: Offset(0, 2),\n ),\n ],\n padding: EdgeInsets.all(20),\n child: Column(\n crossAxisAlignment: CrossAxisAlignment.start,\n children: [\n TextAppi(\n text: 'Revenue Trend',\n style: TextStyle(\n fontSize: 18,\n fontWeight: FontWeight.bold,\n ),\n ),\n SizedBox(height: 20),\n LineChartAppi(\n data: [\n LineChartData(x: 'Jan', y: 30000),\n LineChartData(x: 'Feb', y: 35000),\n LineChartData(x: 'Mar', y: 32000),\n LineChartData(x: 'Apr', y: 45000),\n LineChartData(x: 'May', y: 52000),\n LineChartData(x: 'Jun', y: 48000),\n ],\n height: 200,\n lineColor: Colors.blue,\n ),\n ],\n ),\n ),\n ),\n SizedBox(width: 16),\n \n // Traffic Sources Pie Chart\n Expanded(\n child: BoxAppi(\n color: Colors.white,\n borderRadius: 16,\n boxShadow: [\n BoxShadow(\n color: Colors.black.withOpacity(0.1),\n blurRadius: 8,\n offset: Offset(0, 2),\n ),\n ],\n padding: EdgeInsets.all(20),\n child: Column(\n crossAxisAlignment: CrossAxisAlignment.start,\n children: [\n TextAppi(\n text: 'Traffic Sources',\n style: TextStyle(\n fontSize: 18,\n fontWeight: FontWeight.bold,\n ),\n ),\n SizedBox(height: 20),\n PieChartAppi(\n data: [\n PieChartData(label: 'Organic', value: 45, color: Colors.green),\n PieChartData(label: 'Paid', value: 30, color: Colors.blue),\n PieChartData(label: 'Social', value: 15, color: Colors.purple),\n PieChartData(label: 'Direct', value: 10, color: Colors.orange),\n ],\n height: 200,\n showLegend: true,\n legendPosition: LegendPosition.bottom,\n ),\n ],\n ),\n ),\n ),\n ],\n );\n }\n\n Widget _buildRecentActivity() {\n return BoxAppi(\n color: Colors.white,\n borderRadius: 16,\n boxShadow: [\n BoxShadow(\n color: Colors.black.withOpacity(0.1),\n blurRadius: 8,\n offset: Offset(0, 2),\n ),\n ],\n padding: EdgeInsets.all(20),\n child: Column(\n crossAxisAlignment: CrossAxisAlignment.
1start,\n children: [\n TextAppi(\n text: 'Recent Activity',\n style: TextStyle(\n fontSize: 18,\n fontWeight: FontWeight.bold,\n ),\n ),\n SizedBox(height: 16),\n ...List.generate(5, (index) => _buildActivityItem(\n 'User ${index + 1} completed purchase',\n '${index + 1} minutes ago',\n Icons.shopping_bag,\n Colors.green,\n )),\n ],\n ),\n );\n }\n\n Widget _buildActivityItem(String title, String time, IconData icon, Color color) {\n return Padding(\n padding: EdgeInsets.symmetric(vertical: 8),\n child: Row(\n children: [\n BoxAppi(\n color: color.withOpacity(0.1),\n borderRadius: 8,\n padding: EdgeInsets.all(8),\n child: Icon(icon, color: color, size: 16),\n ),\n SizedBox(width: 12),\n Expanded(\n child: Column(\n crossAxisAlignment: CrossAxisAlignment.start,\n children: [\n TextAppi(\n text: title,\n style: TextStyle(fontWeight: FontWeight.w500),\n ),\n TextAppi(\n text: time,\n style: TextStyle(\n fontSize: 12,\n color: Colors.grey[600],\n ),\n ),\n ],\n ),\n ),\n ],\n ),\n );\n }\n}\n"})}),"\n",(0,i.jsx)(e.h2,{id:"-user-profile-form",children:"\ud83d\udcdd User Profile Form"}),"\n",(0,i.jsx)(e.p,{children:"A comprehensive user profile form with validation and file upload."}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-dart",children:"class UserProfileForm extends StatefulWidget {\n @override\n _UserProfileFormState createState() => _UserProfileFormState();\n}\n\nclass _UserProfileFormState extends State<UserProfileForm> {\n final _formKey = GlobalKey<FormState>();\n final _firstNameController = TextEditingController();\n final _lastNameController = TextEditingController();\n final _emailController = TextEditingController();\n final _phoneController = TextEditingController();\n final _bioController = TextEditingController();\n \n String? _selectedCountry;\n bool _isLoading = false;\n\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(\n title: TextAppi(text: 'Edit Profile'),\n backgroundColor: Colors.blue[600],\n ),\n body: Form(\n key: _formKey,\n child: SingleChildScrollView(\n padding: EdgeInsets.all(16),\n child: Column(\n crossAxisAlignment: CrossAxisAlignment.start,\n children: [\n // Profile Picture Section\n _buildProfilePictureSection(),\n SizedBox(height: 32),\n \n // Personal Information\n _buildSectionTitle('Personal Information'),\n SizedBox(height: 16),\n \n Row(\n children: [\n Expanded(\n child: TextFieldAppi(\n controller: _firstNameController,\n label: 'First Name',\n hintText: 'Enter your first name',\n validator: (value) {\n if (value == null || value.isEmpty) {\n return 'First name is required';\n }\n return null;\n },\n ),\n ),\n SizedBox(width: 16),\n Expanded(\n child: TextFieldAppi(\n controller: _lastNameController,\n label: 'Last Name',\n hintText: 'Enter your last name',\n validator: (value) {\n if (value == null || value.isEmpty) {\n return 'Last name is required';\n }\n return null;\n },\n ),\n ),\n ],\n ),\n \n SizedBox(height: 16),\n \n TextFieldAppi(\n controller: _emailController,\n label: 'Email Address',\n hintText: '[email protected]',\n keyboardType: TextInputType.emailAddress,\n validator: (value) {\n if (value == null || value.isEmpty) {\n return 'Email is required';\n }\n if (!RegExp(r'^[\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4}$').hasMatch(value)) {\n return 'Please enter a valid email';\n }\n return null;\n },\n ),\n \n SizedBox(height: 16),\n \n TextFieldAppi(\n controller: _phoneController,\n label: 'Phone Number',\n hintText: '+1 (555) 123-4567',\n keyboardType: TextInputType.phone,\n validator: (value) {\n if (value != null && value.isNotEmpty) {\n if (!RegExp(r'^\\+?[\\d\\s\\-\\(\\)]+$').hasMatch(value)) {\n return 'Please enter a valid phone number';\n }\n }\n return null;\n },\n ),\n \n SizedBox(height: 16),\n \n // Country Dropdown\n DropDownMenuAppi(\n label: 'Country',\n value: _selectedCountry,\n items: [\n 'United States',\n 'Canada',\n 'United Kingdom',\n 'Australia',\n 'Germany',\n 'France',\n 'Japan',\n 'Other',\n ],\n onChanged: (value) {\n setState(() {\n _selectedCountry = value;\n });\n },\n ),\n \n SizedBox(height: 32),\n \n // Bio Section\n _buildSectionTitle('About'),\n SizedBox(height: 16),\n \n TextFieldAppi(\n controller: _bioController,\n label: 'Bio',\n hintText: 'Tell us about yourself...',\n maxLines: 4,\n maxLength: 500,\n keyboardType: TextInputType.multiline,\n ),\n \n SizedBox(height: 32),\n \n // Action Buttons\n Row(\n children: [\n Expanded(\n child: BoxAppi(\n height: 48,\n color: Colors.grey[200],\n borderRadius: 8,\n onTap: () => Navigator.pop(context),\n child: Center(\n child: TextAppi(\n text: 'Cancel',\n style: TextStyle(\n fontWeight: FontWeight.w600,\n color: Colors.grey[700],\n ),\n ),\n ),\n ),\n ),\n SizedBox(width: 16),\n Expanded(\n child: BoxAppi(\n height: 48,\n color: Colors.blue[600],\n borderRadius: 8,\n onTap: _isLoading ? null : _saveProfile,\n child: Center(\n child: _isLoading\n ? CircleLoaderAppi(size: 20, color: Colors.white)\n : TextAppi(\n text: 'Save Changes',\n style: TextStyle(\n fontWeight: FontWeight.w600,\n color: Colors.white,\n ),\n ),\n ),\n ),\n ),\n ],\n ),\n ],\n ),\n ),\n ),\n );\n }
1\n\n Widget _buildProfilePictureSection() {\n return Center(\n child: Column(\n children: [\n BoxAppi(\n width: 120,\n height: 120,\n borderRadius: 60,\n color: Colors.grey[200],\n border: Border.all(color: Colors.grey[300]!, width: 2),\n child: Icon(\n Icons.person,\n size: 60,\n color: Colors.grey[600],\n ),\n ),\n SizedBox(height: 16),\n BoxAppi(\n color: Colors.blue[50],\n borderRadius: 8,\n padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),\n onTap: () => _selectProfilePicture(),\n child: Row(\n mainAxisSize: MainAxisSize.min,\n children: [\n Icon(Icons.camera_alt, color: Colors.blue[600], size: 16),\n SizedBox(width: 8),\n TextAppi(\n text: 'Change Photo',\n style: TextStyle(\n color: Colors.blue[600],\n fontWeight: FontWeight.w600,\n ),\n ),\n ],\n ),\n ),\n ],\n ),\n );\n }\n\n Widget _buildSectionTitle(String title) {\n return TextAppi(\n text: title,\n style: TextStyle(\n fontSize: 18,\n fontWeight: FontWeight.bold,\n color: Colors.grey[800],\n ),\n );\n }\n\n void _selectProfilePicture() {\n // Implement image picker logic\n print('Select profile picture');\n }\n\n void _saveProfile() async {\n if (_formKey.currentState!.validate()) {\n setState(() {\n _isLoading = true;\n });\n\n // Simulate API call\n await Future.delayed(Duration(seconds: 2));\n\n setState(() {\n _isLoading = false;\n });\n\n // Show success message\n ScaffoldMessenger.of(context).showSnackBar(\n SnackBar(\n content: TextAppi(text: 'Profile updated successfully!'),\n backgroundColor: Colors.green,\n ),\n );\n\n Navigator.pop(context);\n }\n }\n}\n"})}),"\n",(0,i.jsx)(e.h2,{id:"-e-commerce-product-list",children:"\ud83d\uded2 E-commerce Product List"}),"\n",(0,i.jsx)(e.p,{children:"A product listing page with search, filters, and shopping cart integration."}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-dart",children:"class ProductListPage extends StatefulWidget {\n @override\n _ProductListPageState createState() => _ProductListPageState();\n}\n\nclass _ProductListPageState extends State<ProductListPage> {\n final _searchController = TextEditingController();\n List<Product> _products = [];\n List<Product> _filteredProducts = [];\n String _selectedCategory = 'All';\n bool _isLoading = true;\n\n @override\n void initState() {\n super.initState();\n _loadProducts();\n }\n\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(\n title: TextAppi(text: 'Products'),\n backgroundColor: Colors.blue[600],\n actions: [\n IconButton(\n icon: Icon(Icons.shopping_cart),\n onPressed: () => _openCart(),\n ),\n ],\n ),\n body: Column(\n children: [\n // Search and Filter Section\n _buildSearchAndFilter(),\n \n // Products Grid\n Expanded(\n child: _isLoading\n ? Center(child: CircleLoaderAppi())\n : _buildProductsGrid(),\n ),\n ],\n ),\n );\n }\n\n Widget _buildSearchAndFilter() {\n return BoxAppi(\n color: Colors.white,\n padding: EdgeInsets.all(16),\n boxShadow: [\n BoxShadow(\n color: Colors.black.withOpacity(0.1),\n blurRadius: 4,\n offset: Offset(0, 2),\n ),\n ],\n child: Column(\n children: [\n // Search Field\n SearchableTextFieldAppi(\n controller: _searchController,\n hintText: 'Search products...',\n onChanged: _filterProducts,\n ),\n \n SizedBox(height: 16),\n \n // Category Filter\n SingleChildScrollView(\n scrollDirection: Axis.horizontal,\n child: Row(\n children: [\n 'All',\n 'Ele
1ctronics',\n 'Clothing',\n 'Books',\n 'Home',\n 'Sports',\n ].map((category) => _buildCategoryChip(category)).toList(),\n ),\n ),\n ],\n ),\n );\n }\n\n Widget _buildCategoryChip(String category) {\n final isSelected = _selectedCategory == category;\n return Padding(\n padding: EdgeInsets.only(right: 8),\n child: ChipAppi(\n label: category,\n isSelected: isSelected,\n onTap: () {\n setState(() {\n _selectedCategory = category;\n });\n _filterProducts(_searchController.text);\n },\n selectedColor: Colors.blue[600],\n backgroundColor: Colors.grey[200],\n ),\n );\n }\n\n Widget _buildProductsGrid() {\n if (_filteredProducts.isEmpty) {\n return Center(\n child: Column(\n mainAxisAlignment: MainAxisAlignment.center,\n children: [\n Icon(Icons.search_off, size: 64, color: Colors.grey[400]),\n SizedBox(height: 16),\n TextAppi(\n text: 'No products found',\n style: TextStyle(\n fontSize: 18,\n color: Colors.grey[600],\n ),\n ),\n ],\n ),\n );\n }\n\n return GridView.builder(\n padding: EdgeInsets.all(16),\n gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(\n crossAxisCount: MediaQuery.of(context).size.width > 600 ? 3 : 2,\n childAspectRatio: 0.75,\n crossAxisSpacing: 16,\n mainAxisSpacing: 16,\n ),\n itemCount: _filteredProducts.length,\n itemBuilder: (context, index) {\n return _buildProductCard(_filteredProducts[index]);\n },\n );\n }\n\n Widget _buildProductCard(Product product) {\n return BoxAppi(\n color: Colors.white,\n borderRadius: 12,\n boxShadow: [\n BoxShadow(\n color: Colors.black.withOpacity(0.1),\n blurRadius: 8,\n offset: Offset(0, 2),\n ),\n ],\n onTap: () => _openProductDetail(product),\n child: Column(\n crossAxisAlignment: CrossAxisAlignment.start,\n children: [\n // Product Image\n Expanded(\n flex: 3,\n child: BoxAppi(\n width: double.infinity,\n borderRadius: 12,\n color: Colors.grey[100],\n child: Icon(\n Icons.image,\n size: 48,\n color: Colors.grey[400],\n ),\n ),\n ),\n \n // Product Info\n Expanded(\n flex: 2,\n child: Padding(\n padding: EdgeInsets.all(12),\n child: Column(\n crossAxisAlignment: CrossAxisAlignment.start,\n children: [\n TextAppi(\n text: product.name,\n style: TextStyle(\n fontWeight: FontWeight.w600,\n fontSize: 14,\n ),\n maxLines: 2,\n overflow: TextOverflow.ellipsis,\n ),\n \n SizedBox(height: 4),\n \n TextAppi(\n text: '\\$${product.price.toStringAsFixed(2)}',\n style: TextStyle(\n fontSize: 16,\n fontWeight: FontWeight.bold,\n color: Colors.blue[600],\n ),\n ),\n \n Spacer(),\n \n // Add to Cart Button\n BoxAppi(\n width: double.infinity,\n height: 32,\n color: Colors.blue[600],\n borderRadius: 6,\n onTap: () => _addToCart(product),\n child: Center(\n child: TextAppi(\n text: 'Add to Cart',\n style: TextStyle(\n color: Colors.white,\n fontWeight: FontWeight.w600,\n fontSize: 12,\n ),\n ),\n ),\n ),\n ],\n ),\n ),\n ),\n ],\n ),\n );\n }\n\n void _loadProducts() async {\n // Simulate API call\n await Future.delayed(Duration(seconds: 1));\n \n setState(() {\n _products = [\n Product(id: '1', name: 'Wireless Headphones', price: 99.99, category: 'Electronics'),\n Product(id: '2', name: 'Cotton T-Shirt', price: 24.99, category: 'Clothing'),\n Product(id: '3', name: 'Programming Book', price: 39.99, category: 'Books'),\n Product(id: '4', name: 'Coffee Mug', price: 12.99, category: 'Home'),\n Product(id: '5', name: 'Running Shoes', price: 89.99, category: 'Sports'),\n Product(id: '6', name: 'Smartphone', price: 699.99, category: 'Electronics'),\n ];\n _filteredProducts = _products;\n _isLoading = false;\n });\n }
1\n\n void _filterProducts(String query) {\n setState(() {\n _filteredProducts = _products.where((product) {\n final matchesSearch = product.name.toLowerCase().contains(query.toLowerCase());\n final matchesCategory = _selectedCategory == 'All' || product.category == _selectedCategory;\n return matchesSearch && matchesCategory;\n }).toList();\n });\n }\n\n void _addToCart(Product product) {\n ScaffoldMessenger.of(context).showSnackBar(\n SnackBar(\n content: TextAppi(text: '${product.name} added to cart'),\n backgroundColor: Colors.green,\n duration: Duration(seconds: 2),\n ),\n );\n }\n\n void _openProductDetail(Product product) {\n // Navigate to product detail page\n print('Open product detail: ${product.name}');\n }\n\n void _openCart() {\n // Navigate to cart page\n print('Open cart');\n }\n}\n\nclass Product {\n final String id;\n final String name;\n final double price;\n final String category;\n\n Product({\n required this.id,\n required this.name,\n required this.price,\n required this.category,\n });\n}\n"})}),"\n",(0,i.jsx)(e.h2,{id:"-data-table-example",children:"\ud83d\udcca Data Table Example"}),"\n",(0,i.jsx)(e.p,{children:"A comprehensive data table with sorting, filtering, and pagination."}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-dart",children:"class DataTableExample extends StatefulWidget {\n @override\n _DataTableExampleState createState() => _DataTableExampleState();\n}\n\nclass _DataTableExampleState extends State<DataTableExample> {\n List<Employee> _employees = [];\n List<Employee> _filteredEmployees = [];\n final _searchController = TextEditingController();\n int _currentPage = 0;\n final int _itemsPerPage = 10;\n\n @override\n void initState() {\n super.initState();\n _loadEmployees();\n }\n\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(\n title: TextAppi(text: 'Employee Directory'),\n backgroundColor: Colors.blue[600],\n ),\n body: Column(\n children: [\n // Search and Actions\n _buildSearchSection(),\n \n // Data Table\n Expanded(\n child: TableWidgetAppi(\n headers: [\n TableHeader(title: 'Name', key: 'name'),\n TableHeader(title: 'Position', key: 'position'),\n TableHeader(title: 'Department', key: 'department'),\n TableHeader(title: 'Salary', key: 'salary'),\n TableHeader(title: 'Status', key: 'status'),\n TableHeader(title: 'Actions', key: 'actions'),\n ],\n rows: _buildTableRows(),\n onSort: _handleSort,\n showPagination: true,\n currentPage: _currentPage,\n totalPages: (_filteredEmployees.length / _itemsPerPage).ceil(),\n onPageChanged: (page) {\n setState(() {\n _currentPage = page;\n });\n },\n ),\n ),\n ],\n ),\n );\n }\n\n Widget _buildSearchSection() {\n return BoxAppi(\n color: Colors.white,\n padding: EdgeInsets.all(16),\n boxShadow: [\n BoxShadow(\n color: Colors.black.withOpacity(0.1),\n blurRadius: 4,\n offset: Offset(0, 2),\n ),\n ],\n child: Row(\n children: [\n Expanded(\n child: SearchableTextFieldAppi(\n controller: _searchController,\n hintText: 'Search employees...',\n onChanged: _filterEmployees,\n ),\n ),\n SizedBox(width: 16),\n BoxAppi(\n color: Colors.blue[600],\n borderRadius: 8,\n padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),\n onTap: _addEmployee,\n child: Row(\n mainAxisSize: MainAxisSize.min,\n children: [\n Icon(Icons.add, color: Colors.white, size: 16),\n SizedBox(width: 8),\n TextAppi(\n text: 'Add Employee',\n style: TextStyle(\n color: Colors.white,\n fontWeight: FontWeight.w600,\n ),\n ),\n ],\n ),\n ),\n ],\n ),\n );\n }\n\n List<TableRow> _buildTableRows() {\n final startIndex = _currentPage * _itemsPerPage;\n final endIndex = (startIndex + _itemsPerPage).clamp(0, _filteredEmployees.length);\n final pageEmployees = _filteredEmployees.sublist(startIndex, endIndex);\n\n return pageEmployees.map((employee) {\n return TableRow(\n cells: [\n TableCell(\n child: Row(\n children: [\n CircleWebImageAppi(\n imageUrl: employee.avatarUrl,\n radius: 20,\n ),\n SizedBox(width: 12),\n Column(\n crossAxisAlignment: CrossAxisAlignment.
1start,\n children: [\n TextAppi(\n text: employee.name,\n style: TextStyle(fontWeight: FontWeight.w600),\n ),\n TextAppi(\n text: employee.email,\n style: TextStyle(\n fontSize: 12,\n color: Colors.grey[600],\n ),\n ),\n ],\n ),\n ],\n ),\n ),\n TableCell(child: TextAppi(text: employee.position)),\n TableCell(child: TextAppi(text: employee.department)),\n TableCell(\n child: TextAppi(\n text: '\\$${employee.salary.toStringAsFixed(0)}',\n style: TextStyle(fontWeight: FontWeight.w600),\n ),\n ),\n TableCell(\n child: ChipAppi(\n label: employee.status,\n backgroundColor: _getStatusColor(employee.status),\n textColor: Colors.white,\n ),\n ),\n TableCell(\n child: Row(\n mainAxisSize: MainAxisSize.min,\n children: [\n IconButton(\n icon: Icon(Icons.edit, size: 16),\n onPressed: () => _editEmployee(employee),\n ),\n IconButton(\n icon: Icon(Icons.delete, size: 16, color: Colors.red),\n onPressed: () => _deleteEmployee(employee),\n ),\n ],\n ),\n ),\n ],\n );\n }).toList();\n }\n\n Color _getStatusColor(String status) {\n switch (status.toLowerCase()) {\n case 'active':\n return Colors.green;\n case 'inactive':\n return Colors.red;\n case 'pending':\n return Colors.orange;\n default:\n return Colors.grey;\n }\n }\n\n void _loadEmployees() {\n // Simulate loading employee data\n _employees = [\n Employee(\n id: '1',\n name: 'John Doe',\n email: '[email protected]',\n position: 'Software Engineer',\n department: 'Engineering',\n salary: 85000,\n status: 'Active',\n avatarUrl: 'https://via.placeholder.com/40',\n ),\n Employee(\n id: '2',\n name: 'Jane Smith',\n email: '[email protected]',\n position: 'Product Manager',\n department: 'Product',\n salary: 95000,\n status: 'Active',\n avatarUrl: 'https://via.placeholder.com/40',\n ),\n // Add more employees...\n ];\n _filteredEmployees = _employees;\n }\n\n void _filterEmployees(String query) {\n setState(() {\n _filteredEmployees = _employees.where((employee) {\n return employee.name.toLowerCase().contains(query.toLowerCase()) ||\n employee.email.toLowerCase().contains(query.toLowerCase()) ||\n employee.position.toLowerCase().contains(query.toLowerCase()) ||\n employee.department.toLowerCase().contains(query.toLowerCase());\n }).toList();\n _currentPage = 0; // Reset to first page\n });\n }\n\n void _handleSort(String key, bool ascending) {\n setState(() {\n _filteredEmployees.sort((a, b) {\n dynamic aValue, bValue;\n switch (key) {\n case 'name':\n aValue = a.name;\n bValue = b.name;\n break;\n case 'position':\n aValue = a.position;\n bValue = b.position;\n break;\n case 'department':\n aValue = a.department;\n bValue = b.department;\n break;\n case 'salary':\n aValue = a.salary;\n bValue = b.salary;\n break;\n default:\n return 0;\n }\n \n if (ascending) {\n return aValue.compareTo(bValue);\n } else {\n return bValue.compareTo(aValue);\n }\n });\n });\n }\n\n void _addEmployee() {\n // Navigate to add employee form\n print('Add new employee');\n }\n\n void _editEmployee(Employee employee) {\n // Navigate to edit employee form\n print('Edit employee: ${employee.name}');\n }\n\n void _deleteEmployee(Employee employee) {\n // Show confirmation dialog and delete\n showDialog(\n context: context,\n builder: (context) => AlertDialog(\n title: TextAppi(text: 'Delete Employee'),\n content: TextAppi(text: 'Are you sure you want to delete ${employee.name}?'),\n actions: [\n TextButton(\n onPressed: () => Navigator.pop(context),\n child: TextAppi(text: 'Cancel'),\n ),\n TextButton(\n onPressed: () {\n setState(() {\n _employees.remove(employee);\n _filteredEmployees.remove(employee);\n });\n Navigator.pop(context);\n },\n child: TextAppi(text: 'Delete', style: TextStyle(color: Colors.red)),\n ),\n ],\n ),\n );\n }\n}
1\n\nclass Employee {\n final String id;\n final String name;\n final String email;\n final String position;\n final String department;\n final double salary;\n final String status;\n final String avatarUrl;\n\n Employee({\n required this.id,\n required this.name,\n required this.email,\n required this.position,\n required this.department,\n required this.salary,\n required this.status,\n required this.avatarUrl,\n });\n}\n"})}),"\n",(0,i.jsx)(e.h2,{id:"-best-practices-summary",children:"\ud83c\udfaf Best Practices Summary"}),"\n",(0,i.jsx)(e.h3,{id:"1-state-management",children:"1. State Management"}),"\n",(0,i.jsxs)(e.ul,{children:["\n",(0,i.jsx)(e.li,{children:"Use proper state management patterns"}),"\n",(0,i.jsx)(e.li,{children:"Dispose controllers and resources"}),"\n",(0,i.jsx)(e.li,{children:"Handle loading and error states"}),"\n"]}),"\n",(0,i.jsx)(e.h3,{id:"2-performance",children:"2. Performance"}),"\n",(0,i.jsxs)(e.ul,{children:["\n",(0,i.jsxs)(e.li,{children:["Use ",(0,i.jsx)(e.code,{children:"const"})," constructors when possible"]}),"\n",(0,i.jsx)(e.li,{children:"Implement lazy loading for large datasets"}),"\n",(0,i.jsx)(e.li,{children:"Optimize rebuild cycles"}),"\n"]}),"\n",(0,i.jsx)(e.h3,{id:"3-user-experience",children:"3. User Experience"}),"\n",(0,i.jsxs)(e.ul,{children:["\n",(0,i.jsx)(e.li,{children:"Provide loading indicators"}),"\n",(0,i.jsx)(e.li,{children:"Show meaningful error messages"}),"\n",(0,i.jsx)(e.li,{children:"Implement proper validation"}),"\n"]}),"\n",(0,i.jsx)(e.h3,{id:"4-accessibility",children:"4. Accessibility"}),"\n",(0,i.jsxs)(e.ul,{children:["\n",(0,i.jsx)(e.li,{children:"Add semantic labels"}),"\n",(0,i.jsx)(e.li,{children:"Ensure proper contrast ratios"}),"\n",(0,i.jsx)(e.li,{children:"Support keyboard navigation"}),"\n"]}),"\n",(0,i.jsx)(e.h3,{id:"5-responsive-design",children:"5. Responsive Design"}),"\n",(0,i.jsxs)(e.ul,{children:["\n",(0,i.jsxs)(e.li,{children:["Use ",(0,i.jsx)(e.code,{children:"LayoutBuilder"})," for adaptive layouts"]}),"\n",(0,i.jsx)(e.li,{children:"Test on different screen sizes"}),"\n",(0,i.jsx)(e.li,{children:"Implement proper breakpoints"}),"\n"]}),"\n",(0,i.jsx)(e.hr,{}),"\n",(0,i.jsx)(e.p,{children:"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!"})]})}function p(n={}){const{wrapper:e}={...(0,r.R)(),...n.components};return e?(0,i.jsx)(e,{...n,children:(0,i.jsx)(c,{...n})}):c(n)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.