renolation/retail
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add detail, fetch products, categories

Browse Source
This commit is contained in:
Phuoc Nguyen
2025-10-15 17:46:50 +07:00
parent 4038f8e8a6
commit 02e5fd4244
12 changed files with 814 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
lib/features/products/presentation/pages/products_page.dart
View File

@@ -2,13 +2,17 @@ import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../widgets/product_grid.dart';
import '../widgets/product_search_bar.dart';
import '../widgets/product_list_item.dart';
import '../providers/products_provider.dart';
import '../providers/selected_category_provider.dart' as product_providers;
import '../providers/filtered_products_provider.dart';
import '../../domain/entities/product.dart';
import '../../../categories/presentation/providers/categories_provider.dart';
/// Products page - displays all products in a grid
/// View mode for products display
enum ViewMode { grid, list }
/// Products page - displays all products in a grid or list
class ProductsPage extends ConsumerStatefulWidget {
const ProductsPage({super.key});
@@ -18,6 +22,7 @@ class ProductsPage extends ConsumerStatefulWidget {
class _ProductsPageState extends ConsumerState<ProductsPage> {
ProductSortOption _sortOption = ProductSortOption.nameAsc;
ViewMode _viewMode = ViewMode.grid;
@override
Widget build(BuildContext context) {
@@ -43,6 +48,23 @@ class _ProductsPageState extends ConsumerState<ProductsPage> {
appBar: AppBar(
title: const Text('Products'),
actions: [
// View mode toggle
IconButton(
icon: Icon(
_viewMode == ViewMode.grid
? Icons.view_list_rounded
: Icons.grid_view_rounded,
),
onPressed: () {
setState(() {
_viewMode =
_viewMode == ViewMode.grid ? ViewMode.list : ViewMode.grid;
});
},
tooltip: _viewMode == ViewMode.grid
? 'Switch to list view'
: 'Switch to grid view',
),
// Sort button
PopupMenuButton<ProductSortOption>(
icon: const Icon(Icons.sort),
@@ -195,11 +217,13 @@ class _ProductsPageState extends ConsumerState<ProductsPage> {
),
),
),
// Product grid
// Product grid or list
Expanded(
child: ProductGrid(
sortOption: _sortOption,
),
child: _viewMode == ViewMode.grid
? ProductGrid(
sortOption: _sortOption,
)
: _buildListView(),
),
],
),
@@ -223,4 +247,84 @@ class _ProductsPageState extends ConsumerState<ProductsPage> {
),
);
}
/// Build list view for products
Widget _buildListView() {
final filteredProducts = ref.watch(filteredProductsProvider);
// Apply sorting
final sortedProducts = _sortProducts(filteredProducts, _sortOption);
if (sortedProducts.isEmpty) {
return const Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.inventory_2_outlined,
size: 64,
color: Colors.grey,
),
SizedBox(height: 16),
Text(
'No products found',
style: TextStyle(
fontSize: 16,
color: Colors.grey,
),
),
SizedBox(height: 8),
Text(
'Try adjusting your filters',
style: TextStyle(
fontSize: 14,
color: Colors.grey,
),
),
],
),
);
}
return ListView.builder(
padding: const EdgeInsets.symmetric(vertical: 8),
itemCount: sortedProducts.length,
itemBuilder: (context, index) {
return ProductListItem(
product: sortedProducts[index],
onTap: () {
// TODO: Navigate to product detail or add to cart
},
);
},
);
}
/// Sort products based on selected option
List<Product> _sortProducts(List<Product> products, ProductSortOption option) {
final sorted = List<Product>.from(products);
switch (option) {
case ProductSortOption.nameAsc:
sorted.sort((a, b) => a.name.compareTo(b.name));
break;
case ProductSortOption.nameDesc:
sorted.sort((a, b) => b.name.compareTo(a.name));
break;
case ProductSortOption.priceAsc:
sorted.sort((a, b) => a.price.compareTo(b.price));
break;
case ProductSortOption.priceDesc:
sorted.sort((a, b) => b.price.compareTo(a.price));
break;
case ProductSortOption.newest:
sorted.sort((a, b) => b.createdAt.compareTo(a.createdAt));
break;
case ProductSortOption.oldest:
sorted.sort((a, b) => a.createdAt.compareTo(b.createdAt));
break;
}
return sorted;
}
}

14
lib/features/products/presentation/providers/products_provider.dart
View File

@@ -101,17 +101,3 @@ class SearchQuery extends _$SearchQuery {
state = query;
}
}
/// Provider for filtered products
@riverpod
List<Product> filteredProducts(Ref ref) {
final products = ref.watch(productsProvider).value ?? [];
final query = ref.watch(searchQueryProvider);
if (query.isEmpty) return products;
return products.where((p) =>
p.name.toLowerCase().contains(query.toLowerCase()) ||
p.description.toLowerCase().contains(query.toLowerCase())
).toList();
}

46
lib/features/products/presentation/providers/products_provider.g.dart
View File

@@ -116,49 +116,3 @@ abstract class _$SearchQuery extends $Notifier<String> {
element.handleValue(ref, created);
}
}
/// Provider for filtered products
@ProviderFor(filteredProducts)
const filteredProductsProvider = FilteredProductsProvider._();
/// Provider for filtered products
final class FilteredProductsProvider
extends $FunctionalProvider<List<Product>, List<Product>, List<Product>>
with $Provider<List<Product>> {
/// Provider for filtered products
const FilteredProductsProvider._()
: super(
from: null,
argument: null,
retry: null,
name: r'filteredProductsProvider',
isAutoDispose: true,
dependencies: null,
$allTransitiveDependencies: null,
);
@override
String debugGetCreateSourceHash() => _$filteredProductsHash();
@$internal
@override
$ProviderElement<List<Product>> $createElement($ProviderPointer pointer) =>
$ProviderElement(pointer);
@override
List<Product> create(Ref ref) {
return filteredProducts(ref);
}
/// {@macro riverpod.override_with_value}
Override overrideWithValue(List<Product> value) {
return $ProviderOverride(
origin: this,
providerOverride: $SyncValueProvider<List<Product>>(value),
);
}
}
String _$filteredProductsHash() => r'e4e0c549c454576fc599713a5237435a8dd4b277';

131
lib/features/products/presentation/widgets/product_list_item.dart Normal file
View File

@@ -0,0 +1,131 @@
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
import '../../domain/entities/product.dart';
import '../../../../shared/widgets/price_display.dart';
/// Product list item widget for list view
class ProductListItem extends StatelessWidget {
final Product product;
final VoidCallback? onTap;
const ProductListItem({
super.key,
required this.product,
this.onTap,
});
@override
Widget build(BuildContext context) {
return Card(
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: InkWell(
onTap: onTap,
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Row(
children: [
// Product Image
ClipRRect(
borderRadius: BorderRadius.circular(8),
child: SizedBox(
width: 80,
height: 80,
child: product.imageUrl != null
? CachedNetworkImage(
imageUrl: product.imageUrl!,
fit: BoxFit.cover,
placeholder: (context, url) => const Center(
child: CircularProgressIndicator(),
),
errorWidget: (context, url, error) => Container(
color: Theme.of(context)
.colorScheme
.surfaceContainerHighest,
child: Icon(
Icons.image_not_supported,
color:
Theme.of(context).colorScheme.onSurfaceVariant,
),
),
)
: Container(
color: Theme.of(context)
.colorScheme
.surfaceContainerHighest,
child: Icon(
Icons.inventory_2_outlined,
color:
Theme.of(context).colorScheme.onSurfaceVariant,
),
),
),
),
const SizedBox(width: 16),
// Product Info
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
product.name,
style: Theme.of(context).textTheme.titleMedium?.copyWith(
fontWeight: FontWeight.w600,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 4),
if (product.description.isNotEmpty)
Text(
product.description,
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 8),
Row(
children: [
PriceDisplay(price: product.price),
const Spacer(),
// Stock Badge
Container(
padding: const EdgeInsets.symmetric(
horizontal: 8,
vertical: 4,
),
decoration: BoxDecoration(
color: _getStockColor(context, product.stockQuantity),
borderRadius: BorderRadius.circular(12),
),
child: Text(
'Stock: ${product.stockQuantity}',
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: Colors.white,
fontWeight: FontWeight.w600,
),
),
),
],
),
],
),
),
],
),
),
),
);
}
Color _getStockColor(BuildContext context, int stock) {
if (stock == 0) {
return Colors.red;
} else if (stock < 5) {
return Colors.orange;
} else {
return Colors.green;
}
}
}