feat: product scroll infinity and product category
This commit is contained in:
parent
6b1e56a46b
commit
beb9ead4da
5
lib/presentation/components/image/image.dart
Normal file
5
lib/presentation/components/image/image.dart
Normal file
@ -0,0 +1,5 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:cached_network_image/cached_network_image.dart';
|
||||
import 'package:shimmer/shimmer.dart';
|
||||
|
||||
part 'network_image.dart';
|
||||
68
lib/presentation/components/image/network_image.dart
Normal file
68
lib/presentation/components/image/network_image.dart
Normal file
@ -0,0 +1,68 @@
|
||||
part of 'image.dart';
|
||||
|
||||
class AppNetworkImage extends StatelessWidget {
|
||||
final String? url;
|
||||
final double? height;
|
||||
final double? width;
|
||||
final double? borderRadius;
|
||||
final BoxFit? fit;
|
||||
final bool? isCanZoom;
|
||||
final VoidCallback? onTap;
|
||||
|
||||
const AppNetworkImage({
|
||||
super.key,
|
||||
this.url,
|
||||
this.height,
|
||||
this.width,
|
||||
this.borderRadius = 0,
|
||||
this.fit = BoxFit.cover,
|
||||
this.isCanZoom = false,
|
||||
this.onTap,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
Widget customPhoto(
|
||||
double? heightx,
|
||||
double? widthx,
|
||||
BoxFit? fitx,
|
||||
double? radius,
|
||||
) {
|
||||
return CachedNetworkImage(
|
||||
imageUrl: url.toString(),
|
||||
placeholder: (context, url) => Shimmer.fromColors(
|
||||
baseColor: Colors.grey[300]!,
|
||||
highlightColor: Colors.grey[100]!,
|
||||
child: Container(
|
||||
height: height,
|
||||
width: width,
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.grey.shade300,
|
||||
borderRadius: BorderRadius.circular(radius ?? 0),
|
||||
),
|
||||
),
|
||||
),
|
||||
errorWidget: (context, url, error) => Container(
|
||||
height: height,
|
||||
width: width,
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.grey.shade200,
|
||||
borderRadius: BorderRadius.circular(radius ?? 0),
|
||||
),
|
||||
child: Icon(Icons.image_outlined, color: Colors.grey.shade400),
|
||||
),
|
||||
height: heightx,
|
||||
width: widthx,
|
||||
fit: fitx,
|
||||
);
|
||||
}
|
||||
|
||||
return GestureDetector(
|
||||
onTap: onTap,
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(borderRadius!),
|
||||
child: customPhoto(height, width, BoxFit.fill, borderRadius),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -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>(
|
||||
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: CustomScrollView(
|
||||
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.products),
|
||||
_buildEmptyState(state.products),
|
||||
_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',
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
117
lib/presentation/pages/product/widgets/product_card.dart
Normal file
117
lib/presentation/pages/product/widgets/product_card.dart
Normal 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;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,6 +10,7 @@ import file_selector_macos
|
||||
import package_info_plus
|
||||
import path_provider_foundation
|
||||
import shared_preferences_foundation
|
||||
import sqflite_darwin
|
||||
|
||||
func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
|
||||
ConnectivityPlusPlugin.register(with: registry.registrar(forPlugin: "ConnectivityPlusPlugin"))
|
||||
@ -17,4 +18,5 @@ func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
|
||||
FPPPackageInfoPlusPlugin.register(with: registry.registrar(forPlugin: "FPPPackageInfoPlusPlugin"))
|
||||
PathProviderPlugin.register(with: registry.registrar(forPlugin: "PathProviderPlugin"))
|
||||
SharedPreferencesPlugin.register(with: registry.registrar(forPlugin: "SharedPreferencesPlugin"))
|
||||
SqflitePlugin.register(with: registry.registrar(forPlugin: "SqflitePlugin"))
|
||||
}
|
||||
|
||||
112
pubspec.lock
112
pubspec.lock
@ -161,6 +161,30 @@ packages:
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "8.11.1"
|
||||
cached_network_image:
|
||||
dependency: "direct main"
|
||||
description:
|
||||
name: cached_network_image
|
||||
sha256: "7c1183e361e5c8b0a0f21a28401eecdbde252441106a9816400dd4c2b2424916"
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "3.4.1"
|
||||
cached_network_image_platform_interface:
|
||||
dependency: transitive
|
||||
description:
|
||||
name: cached_network_image_platform_interface
|
||||
sha256: "35814b016e37fbdc91f7ae18c8caf49ba5c88501813f73ce8a07027a395e2829"
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "4.1.1"
|
||||
cached_network_image_web:
|
||||
dependency: transitive
|
||||
description:
|
||||
name: cached_network_image_web
|
||||
sha256: "980842f4e8e2535b8dbd3d5ca0b1f0ba66bf61d14cc3a17a9b4788a3685ba062"
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "1.3.1"
|
||||
characters:
|
||||
dependency: transitive
|
||||
description:
|
||||
@ -422,6 +446,14 @@ packages:
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "9.1.1"
|
||||
flutter_cache_manager:
|
||||
dependency: transitive
|
||||
description:
|
||||
name: flutter_cache_manager
|
||||
sha256: "400b6592f16a4409a7f2bb929a9a7e38c72cceb8ffb99ee57bbf2cb2cecf8386"
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "3.4.1"
|
||||
flutter_gen_core:
|
||||
dependency: transitive
|
||||
description:
|
||||
@ -813,6 +845,14 @@ packages:
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "0.5.0"
|
||||
octo_image:
|
||||
dependency: transitive
|
||||
description:
|
||||
name: octo_image
|
||||
sha256: "34faa6639a78c7e3cbe79be6f9f96535867e879748ade7d17c9b1ae7536293bd"
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "2.1.0"
|
||||
package_config:
|
||||
dependency: transitive
|
||||
description:
|
||||
@ -973,6 +1013,14 @@ packages:
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "4.1.0"
|
||||
rxdart:
|
||||
dependency: transitive
|
||||
description:
|
||||
name: rxdart
|
||||
sha256: "5c3004a4a8dbb94bd4bf5412a4def4acdaa12e12f269737a5751369e12d1a962"
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "0.28.0"
|
||||
shared_preferences:
|
||||
dependency: "direct main"
|
||||
description:
|
||||
@ -1090,6 +1138,54 @@ packages:
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "1.10.1"
|
||||
sprintf:
|
||||
dependency: transitive
|
||||
description:
|
||||
name: sprintf
|
||||
sha256: "1fc9ffe69d4df602376b52949af107d8f5703b77cda567c4d7d86a0693120f23"
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "7.0.0"
|
||||
sqflite:
|
||||
dependency: transitive
|
||||
description:
|
||||
name: sqflite
|
||||
sha256: e2297b1da52f127bc7a3da11439985d9b536f75070f3325e62ada69a5c585d03
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "2.4.2"
|
||||
sqflite_android:
|
||||
dependency: transitive
|
||||
description:
|
||||
name: sqflite_android
|
||||
sha256: "2b3070c5fa881839f8b402ee4a39c1b4d561704d4ebbbcfb808a119bc2a1701b"
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "2.4.1"
|
||||
sqflite_common:
|
||||
dependency: transitive
|
||||
description:
|
||||
name: sqflite_common
|
||||
sha256: "6ef422a4525ecc601db6c0a2233ff448c731307906e92cabc9ba292afaae16a6"
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "2.5.6"
|
||||
sqflite_darwin:
|
||||
dependency: transitive
|
||||
description:
|
||||
name: sqflite_darwin
|
||||
sha256: "279832e5cde3fe99e8571879498c9211f3ca6391b0d818df4e17d9fff5c6ccb3"
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "2.4.2"
|
||||
sqflite_platform_interface:
|
||||
dependency: transitive
|
||||
description:
|
||||
name: sqflite_platform_interface
|
||||
sha256: "8dd4515c7bdcae0a785b0062859336de775e8c65db81ae33dd5445f35be61920"
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "2.4.0"
|
||||
stack_trace:
|
||||
dependency: transitive
|
||||
description:
|
||||
@ -1122,6 +1218,14 @@ packages:
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "1.4.1"
|
||||
synchronized:
|
||||
dependency: transitive
|
||||
description:
|
||||
name: synchronized
|
||||
sha256: c254ade258ec8282947a0acbbc90b9575b4f19673533ee46f2f6e9b3aeefd7c0
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "3.4.0"
|
||||
table_calendar:
|
||||
dependency: "direct main"
|
||||
description:
|
||||
@ -1170,6 +1274,14 @@ packages:
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "1.4.0"
|
||||
uuid:
|
||||
dependency: transitive
|
||||
description:
|
||||
name: uuid
|
||||
sha256: a5be9ef6618a7ac1e964353ef476418026db906c4facdedaa299b7a2e71690ff
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "4.5.1"
|
||||
vector_graphics:
|
||||
dependency: transitive
|
||||
description:
|
||||
|
||||
@ -41,6 +41,7 @@ dependencies:
|
||||
package_info_plus: ^8.3.1
|
||||
loader_overlay: ^5.0.0
|
||||
shimmer: ^3.0.0
|
||||
cached_network_image: ^3.4.1
|
||||
|
||||
dev_dependencies:
|
||||
flutter_test:
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user