apksel-dev/apskel-owner-flutter
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: product page

Browse Source
This commit is contained in:
efrilm 2025-08-13 16:32:08 +07:00
parent ac17c4d830
commit c9e5c8d178
2 changed files with 179 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

180
lib/presentation/pages/product/product_page.dart
View File

@ -18,10 +18,13 @@ class ProductPage extends StatefulWidget {
State<ProductPage> createState() => _ProductPageState();
}
enum ViewType { grid, list }
class _ProductPageState extends State<ProductPage>
with TickerProviderStateMixin {
String selectedCategory = 'Semua';
List<String> categories = ['Semua', 'Makanan', 'Minuman', 'Snack', 'Dessert'];
ViewType currentViewType = ViewType.grid;
// Animation
late AnimationController _rotationController;
@ -156,7 +159,7 @@ class _ProductPageState extends State<ProductPage>
slivers: [
_buildSliverAppBar(),
_buildCategoryFilter(),
_buildProductGrid(),
_buildProductContent(),
_buildEmptyState(),
],
),
@ -173,6 +176,12 @@ class _ProductPageState extends State<ProductPage>
actions: [
ActionIconButton(onTap: () {}, icon: LineIcons.search),
ActionIconButton(onTap: _showAddProductDialog, icon: LineIcons.plus),
ActionIconButton(
onTap: _toggleViewType,
icon: currentViewType == ViewType.grid
? LineIcons.list
: LineIcons.thLarge,
),
ActionIconButton(onTap: _showOptionsMenu, icon: LineIcons.filter),
],
);
@ -193,11 +202,17 @@ class _ProductPageState extends State<ProductPage>
);
}
Widget _buildProductGrid() {
Widget _buildProductContent() {
if (filteredProducts.isEmpty) {
return const SliverToBoxAdapter(child: SizedBox.shrink());
}
return currentViewType == ViewType.grid
? _buildProductGrid()
: _buildProductList();
}
Widget _buildProductGrid() {
return SliverPadding(
padding: const EdgeInsets.all(16.0),
sliver: SliverGrid(
@ -215,6 +230,153 @@ class _ProductPageState extends State<ProductPage>
);
}
Widget _buildProductList() {
return SliverPadding(
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
sliver: SliverList(
delegate: SliverChildBuilderDelegate((context, index) {
final product = filteredProducts[index];
return _buildProductListItem(product);
}, childCount: filteredProducts.length),
),
);
}
Widget _buildProductListItem(Product product) {
return Container(
margin: const EdgeInsets.only(bottom: 12.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.1),
spreadRadius: 1,
blurRadius: 6,
offset: const Offset(0, 2),
),
],
),
child: InkWell(
onTap: () {},
borderRadius: BorderRadius.circular(12),
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Row(
children: [
// Product Image
Container(
width: 80,
height: 80,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: AppColor.background,
),
child: ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Image.asset(
product.imageUrl,
fit: BoxFit.cover,
errorBuilder: (context, error, stackTrace) {
return Container(
color: AppColor.background,
child: Icon(
Icons.image_outlined,
color: AppColor.textLight,
size: 32,
),
);
},
),
),
),
const SizedBox(width: 12),
// Product Info
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
product.name,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 4),
Text(
product.category,
style: TextStyle(fontSize: 12, color: AppColor.textLight),
),
const SizedBox(height: 8),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Rp ${_formatPrice(product.price)}',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: AppColor.primary,
),
),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 8,
vertical: 4,
),
decoration: BoxDecoration(
color: product.isActive
? Colors.green.withOpacity(0.1)
: Colors.red.withOpacity(0.1),
borderRadius: BorderRadius.circular(12),
),
child: Text(
'Stock: ${product.stock}',
style: TextStyle(
fontSize: 12,
color: product.isActive
? Colors.green
: Colors.red,
fontWeight: FontWeight.w500,
),
),
),
],
),
],
),
),
// Action Button
IconButton(
onPressed: () {},
icon: const Icon(Icons.more_vert),
color: AppColor.textLight,
),
],
),
),
),
);
}
String _formatPrice(int price) {
return price.toString().replaceAllMapped(
RegExp(r'(\d{1,3})(?=(\d{3})+(?!\d))'),
(Match m) => '${m[1]}.',
);
}
void _toggleViewType() {
setState(() {
currentViewType = currentViewType == ViewType.grid
? ViewType.list
: ViewType.grid;
});
}
Widget _buildEmptyState() {
if (filteredProducts.isNotEmpty) {
return const SliverToBoxAdapter(child: SizedBox.shrink());
@ -283,6 +445,20 @@ class _ProductPageState extends State<ProductPage>
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
ListTile(
leading: Icon(
currentViewType == ViewType.grid ? Icons.list : Icons.grid_view,
),
title: Text(
currentViewType == ViewType.grid
? 'Tampilan List'
: 'Tampilan Grid',
),
onTap: () {
Navigator.pop(context);
_toggleViewType();
},
),
ListTile(
leading: const Icon(Icons.sort),
title: const Text('Urutkan'),

2
lib/presentation/pages/product/widgets/appbar.dart
View File

@ -9,7 +9,7 @@ class ProductAppbar extends StatelessWidget {
@override
Widget build(BuildContext context) {
return FlexibleSpaceBar(
centerTitle: true,
titlePadding: const EdgeInsets.only(left: 50, bottom: 16),
title: Text(
'Produk',
style: AppStyle.xl.copyWith(