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

feat: product scroll infinity and product category

Browse Source
This commit is contained in:
efrilm
2025-08-17 19:29:46 +07:00
parent 6b1e56a46b
commit beb9ead4da
8 changed files with 575 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/presentation/pages/product/product_page.dart
+245 -159
View File
@@ -2,6 +2,7 @@ import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:line_icons/line_icons.dart';
import 'package:shimmer/shimmer.dart';
import '../../../application/category/category_loader/category_loader_bloc.dart';
import '../../../application/product/product_loader/product_loader_bloc.dart';
@@ -13,6 +14,7 @@ import '../../components/appbar/appbar.dart';
import '../../components/button/button.dart';
import '../../components/widgets/empty_widget.dart';
import 'widgets/category_delegate.dart';
import 'widgets/product_card.dart';
import 'widgets/product_tile.dart';
@RoutePage()
@@ -45,6 +47,7 @@ class _ProductPageState extends State<ProductPage>
with TickerProviderStateMixin {
Category selectedCategory = Category.addAllData();
ViewType currentViewType = ViewType.grid;
ScrollController scrollController = ScrollController();
@override
initState() {
@@ -53,20 +56,42 @@ class _ProductPageState extends State<ProductPage>
@override
Widget build(BuildContext context) {
return BlocBuilder<ProductLoaderBloc, ProductLoaderState>(
builder: (context, state) {
return Scaffold(
backgroundColor: AppColor.background,
body: CustomScrollView(
slivers: [
_buildSliverAppBar(),
_buildCategoryFilter(),
_buildProductContent(state.products),
_buildEmptyState(state.products),
],
),
return BlocListener<ProductLoaderBloc, ProductLoaderState>(
listenWhen: (previous, current) =>
previous.categoryId != current.categoryId,
listener: (context, state) {
context.read<ProductLoaderBloc>().add(
ProductLoaderEvent.fetched(isRefresh: true),
);
},
child: BlocBuilder<ProductLoaderBloc, ProductLoaderState>(
builder: (context, state) {
return Scaffold(
backgroundColor: AppColor.background,
body: NotificationListener<ScrollNotification>(
onNotification: (notification) {
if (notification is ScrollEndNotification &&
scrollController.position.extentAfter == 0) {
context.read<ProductLoaderBloc>().add(
ProductLoaderEvent.fetched(),
);
return true;
}
return true;
},
child: CustomScrollView(
controller: scrollController,
slivers: [
_buildSliverAppBar(),
_buildCategoryFilter(),
_buildProductContent(state),
],
),
),
);
},
),
);
}
@@ -92,6 +117,10 @@ class _ProductPageState extends State<ProductPage>
Widget _buildCategoryFilter() {
return BlocBuilder<CategoryLoaderBloc, CategoryLoaderState>(
builder: (context, state) {
if (state.isFetching && state.categories.isEmpty) {
return _buildCategoryShimmer();
}
return SliverPersistentHeader(
pinned: true,
delegate: ProductCategoryHeaderDelegate(
@@ -101,6 +130,15 @@ class _ProductPageState extends State<ProductPage>
setState(() {
selectedCategory = category;
});
if (category.id == Category.addAllData().id) {
context.read<ProductLoaderBloc>().add(
ProductLoaderEvent.categoryIdChanged(''),
);
} else {
context.read<ProductLoaderBloc>().add(
ProductLoaderEvent.categoryIdChanged(category.id),
);
}
},
),
);
@@ -108,14 +146,202 @@ class _ProductPageState extends State<ProductPage>
);
}
Widget _buildProductContent(List<Product> products) {
if (products.isEmpty) {
return const SliverToBoxAdapter(child: SizedBox.shrink());
Widget _buildCategoryShimmer() {
return SliverToBoxAdapter(
child: Container(
height: 60,
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Shimmer.fromColors(
baseColor: Colors.grey[300]!,
highlightColor: Colors.grey[100]!,
child: Row(
children: List.generate(
4,
(index) => Container(
margin: EdgeInsets.only(right: index < 3 ? 12 : 0),
width: 80,
height: 35,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
),
),
),
),
),
),
);
}
Widget _buildProductContent(ProductLoaderState state) {
if (state.isFetching && state.products.isEmpty) {
return currentViewType == ViewType.grid
? _buildProductGridShimmer()
: _buildProductListShimmer();
}
if (state.products.isEmpty && !state.isFetching) {
return SliverToBoxAdapter(
child: EmptyWidget(
title: 'Tidak ada produk ditemukan',
message: 'Coba ubah filter atau tambah produk baru',
),
);
}
return currentViewType == ViewType.grid
? _buildProductGrid(products)
: _buildProductList(products);
? _buildProductGrid(state.products)
: _buildProductList(state.products);
}
Widget _buildProductGridShimmer() {
return SliverPadding(
padding: const EdgeInsets.all(16.0),
sliver: SliverGrid(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 0.85,
crossAxisSpacing: 16.0,
mainAxisSpacing: 16.0,
),
delegate: SliverChildBuilderDelegate((context, index) {
return _buildProductTileShimmer();
}, childCount: 6), // Show 6 shimmer items
),
);
}
Widget _buildProductTileShimmer() {
return Shimmer.fromColors(
baseColor: Colors.grey[300]!,
highlightColor: Colors.grey[100]!,
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Image shimmer
Expanded(
flex: 3,
child: Container(
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
),
),
),
// Content shimmer
Expanded(
flex: 2,
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: double.infinity,
height: 16,
color: Colors.white,
),
const SizedBox(height: 8),
Container(width: 100, height: 12, color: Colors.white),
const Spacer(),
Container(width: 80, height: 14, color: Colors.white),
],
),
),
),
],
),
),
);
}
Widget _buildProductListShimmer() {
return SliverPadding(
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
sliver: SliverList(
delegate: SliverChildBuilderDelegate((context, index) {
return _buildProductListItemShimmer();
}, childCount: 8), // Show 8 shimmer items
),
);
}
Widget _buildProductListItemShimmer() {
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: Shimmer.fromColors(
baseColor: Colors.grey[300]!,
highlightColor: Colors.grey[100]!,
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Row(
children: [
// Image shimmer
Container(
width: 80,
height: 80,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
),
),
const SizedBox(width: 12),
// Content shimmer
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: double.infinity,
height: 16,
color: Colors.white,
),
const SizedBox(height: 8),
Container(width: 120, height: 12, color: Colors.white),
const SizedBox(height: 12),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(width: 100, height: 16, color: Colors.white),
Container(
width: 60,
height: 24,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
),
),
],
),
],
),
),
const SizedBox(width: 8),
// Action button shimmer
Container(width: 24, height: 24, color: Colors.white),
],
),
),
),
);
}
Widget _buildProductGrid(List<Product> products) {
@@ -124,7 +350,7 @@ class _ProductPageState extends State<ProductPage>
sliver: SliverGrid(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 0.85,
childAspectRatio: 0.75,
crossAxisSpacing: 16.0,
mainAxisSpacing: 16.0,
),
@@ -142,139 +368,12 @@ class _ProductPageState extends State<ProductPage>
sliver: SliverList(
delegate: SliverChildBuilderDelegate((context, index) {
final product = products[index];
return _buildProductListItem(product);
return ProductCard(product: product);
}, childCount: products.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(
'',
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: ',
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
@@ -282,17 +381,4 @@ class _ProductPageState extends State<ProductPage>
: ViewType.grid;
});
}
Widget _buildEmptyState(List<Product> products) {
if (products.isNotEmpty) {
return const SliverToBoxAdapter(child: SizedBox.shrink());
}
return SliverToBoxAdapter(
child: EmptyWidget(
title: 'Tidak ada produk ditemukan',
message: 'Coba ubah filter atau tambah produk baru',
),
);
}
}
lib/presentation/pages/product/widgets/product_card.dart
+117
View File
@@ -0,0 +1,117 @@
import 'package:flutter/material.dart';
import '../../../../common/extension/extension.dart';
import '../../../../common/theme/theme.dart';
import '../../../../domain/product/product.dart';
import '../../../components/image/image.dart';
class ProductCard extends StatelessWidget {
const ProductCard({super.key, required this.product, this.onTap});
final Product product;
final VoidCallback? onTap;
@override
Widget build(BuildContext context) {
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: onTap,
borderRadius: BorderRadius.circular(12),
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Row(
children: [
// Product Image
_buildProductImage(),
const SizedBox(width: 12),
// Product Info
Expanded(child: _buildProductInfo()),
],
),
),
),
);
}
Widget _buildProductImage() {
return Container(
width: 80,
height: 80,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: AppColor.background,
),
child: ClipRRect(
borderRadius: BorderRadius.circular(8),
child: AppNetworkImage(url: product.imageUrl, fit: BoxFit.cover),
),
);
}
Widget _buildProductInfo() {
return 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.description,
style: TextStyle(fontSize: 12, color: AppColor.textLight),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 8),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
product.price.currencyFormatRp,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: AppColor.primary,
),
),
Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: _getStatusColor().withOpacity(0.1),
borderRadius: BorderRadius.circular(12),
),
child: Text(
product.isActive ? 'AKTIF' : 'NONAKTIF',
style: TextStyle(
fontSize: 12,
color: _getStatusColor(),
fontWeight: FontWeight.w500,
),
),
),
],
),
],
);
}
Color _getStatusColor() {
return product.isActive ? Colors.green : Colors.red;
}
}
lib/presentation/pages/product/widgets/product_tile.dart
+25 -24
View File
@@ -1,7 +1,9 @@
import 'package:flutter/material.dart';
import '../../../../common/extension/extension.dart';
import '../../../../common/theme/theme.dart';
import '../../../../domain/product/product.dart';
import '../../../components/image/image.dart';
import '../../../components/spacer/spacer.dart';
class ProductTile extends StatelessWidget {
@@ -90,7 +92,7 @@ class ProductTile extends StatelessWidget {
Widget _buildProductImage() {
return Expanded(
flex: 2,
flex: 3,
child: Container(
width: double.infinity,
decoration: const BoxDecoration(
@@ -100,12 +102,12 @@ class ProductTile extends StatelessWidget {
topRight: Radius.circular(12.0),
),
),
child: Stack(
children: [
Center(
child: Icon(Icons.image, size: 32, color: AppColor.textLight),
),
],
child: ClipRRect(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(12.0),
topRight: Radius.circular(12.0),
),
child: AppNetworkImage(url: product.imageUrl, fit: BoxFit.cover),
),
),
);
@@ -133,7 +135,7 @@ class ProductTile extends StatelessWidget {
),
const SizedBox(height: 2),
Text(
_formatPrice(product.price),
product.price.currencyFormatRp,
style: AppStyle.xs.copyWith(
color: product.isActive
? AppColor.primary
@@ -151,30 +153,20 @@ class ProductTile extends StatelessWidget {
Widget _buildBottomInfo() {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Flexible(
child: Text(
'Stok: ',
style: AppStyle.xs.copyWith(
color: AppColor.textSecondary,
fontSize: 9,
),
overflow: TextOverflow.ellipsis,
),
),
Container(
padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 1),
decoration: BoxDecoration(
color: AppColor.primaryLight.withOpacity(0.1),
color: _getPrinterTypeColor().withOpacity(0.1),
borderRadius: BorderRadius.circular(3.0),
),
child: Text(
'',
product.printerType.toUpperCase(),
style: AppStyle.xs.copyWith(
color: product.isActive
? AppColor.primary
? _getPrinterTypeColor()
: AppColor.textSecondary,
fontSize: 8,
fontWeight: FontWeight.w500,
@@ -185,7 +177,16 @@ class ProductTile extends StatelessWidget {
);
}
String _formatPrice(int price) {
return 'Rp ${price.toString().replaceAllMapped(RegExp(r'(\d{1,3})(?=(\d{3})+(?!\d))'), (Match m) => '${m[1]}.')}';
Color _getPrinterTypeColor() {
switch (product.printerType.toLowerCase()) {
case 'kitchen':
return Colors.orange;
case 'bar':
return Colors.blue;
case 'receipt':
return AppColor.primary;
default:
return AppColor.primary;
}
}
}