feat: remove listenablebuilders from cart

This commit is contained in:
mike doornenbal 2024-07-09 10:00:46 +02:00
parent db1299f22b
commit 1b307e3084
2 changed files with 154 additions and 152 deletions

View file

@ -9,6 +9,7 @@ class DefaultShoppingCartItem extends StatelessWidget {
const DefaultShoppingCartItem({ const DefaultShoppingCartItem({
required this.product, required this.product,
required this.configuration, required this.configuration,
required this.onItemAddedRemoved,
super.key, super.key,
}); });
@ -17,112 +18,115 @@ class DefaultShoppingCartItem extends StatelessWidget {
/// Shopping cart configuration. /// Shopping cart configuration.
final ShoppingCartConfig configuration; final ShoppingCartConfig configuration;
/// Function that is called when an item is added or removed.
final Function() onItemAddedRemoved;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
var theme = Theme.of(context); var theme = Theme.of(context);
return ListenableBuilder( return Padding(
listenable: configuration.service, padding: const EdgeInsets.only(bottom: 20),
builder: (context, _) => Padding( child: ListTile(
padding: const EdgeInsets.only(bottom: 20), contentPadding: const EdgeInsets.only(top: 3, left: 4, bottom: 3),
child: ListTile( title: Column(
contentPadding: const EdgeInsets.only(top: 3, left: 4, bottom: 3), crossAxisAlignment: CrossAxisAlignment.start,
title: Column( children: [
crossAxisAlignment: CrossAxisAlignment.start, Text(
children: [ product.name,
Text( style: theme.textTheme.titleMedium,
product.name,
style: theme.textTheme.titleMedium,
),
IconButton(
padding: EdgeInsets.zero,
constraints: const BoxConstraints(),
onPressed: () async {
await showModalBottomSheet(
context: context,
backgroundColor: theme.colorScheme.surface,
builder: (context) => ProductItemPopup(
product: product,
configuration: configuration,
),
);
},
icon: Icon(
Icons.info_outline,
color: theme.colorScheme.primary,
),
),
],
),
leading: ClipRRect(
borderRadius: BorderRadius.circular(6),
child: Image.network(
product.imageUrl,
), ),
), IconButton(
trailing: Column( padding: EdgeInsets.zero,
children: [ constraints: const BoxConstraints(),
Row( onPressed: () async {
mainAxisSize: MainAxisSize.min, await showModalBottomSheet(
children: [ context: context,
if (product.hasDiscount && product.discountPrice != null) ...[ backgroundColor: theme.colorScheme.surface,
Text( builder: (context) => ProductItemPopup(
product.discountPrice!.toStringAsFixed(2), product: product,
style: theme.textTheme.labelSmall, configuration: configuration,
), ),
] else ...[ );
Text( },
product.price.toStringAsFixed(2), icon: Icon(
style: theme.textTheme.labelSmall, Icons.info_outline,
), color: theme.colorScheme.primary,
],
],
), ),
Row( ),
mainAxisAlignment: MainAxisAlignment.end, ],
mainAxisSize: MainAxisSize.min, ),
children: [ leading: ClipRRect(
IconButton( borderRadius: BorderRadius.circular(6),
constraints: const BoxConstraints(), child: Image.network(
padding: EdgeInsets.zero, product.imageUrl,
icon: const Icon( ),
Icons.remove, ),
color: Colors.black, trailing: Column(
), children: [
onPressed: () => Row(
configuration.service.removeOneProduct(product), mainAxisSize: MainAxisSize.min,
children: [
if (product.hasDiscount && product.discountPrice != null) ...[
Text(
product.discountPrice!.toStringAsFixed(2),
style: theme.textTheme.labelSmall,
), ),
Padding( ] else ...[
padding: const EdgeInsets.all(2), Text(
child: Container( product.price.toStringAsFixed(2),
alignment: Alignment.center, style: theme.textTheme.labelSmall,
decoration: BoxDecoration(
color: theme.colorScheme.primary,
borderRadius: BorderRadius.circular(4),
),
height: 30,
width: 30,
child: Text(
"${product.quantity}",
style: theme.textTheme.titleSmall,
textAlign: TextAlign.center,
),
),
),
IconButton(
constraints: const BoxConstraints(),
padding: EdgeInsets.zero,
icon: const Icon(
Icons.add,
color: Colors.black,
),
onPressed: () {
configuration.service.addProduct(product);
},
), ),
], ],
), ],
], ),
), Row(
mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
constraints: const BoxConstraints(),
padding: EdgeInsets.zero,
icon: const Icon(
Icons.remove,
color: Colors.black,
),
onPressed: () {
configuration.service.removeOneProduct(product);
onItemAddedRemoved();
},
),
Padding(
padding: const EdgeInsets.all(2),
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: theme.colorScheme.primary,
borderRadius: BorderRadius.circular(4),
),
height: 30,
width: 30,
child: Text(
"${product.quantity}",
style: theme.textTheme.titleSmall,
textAlign: TextAlign.center,
),
),
),
IconButton(
constraints: const BoxConstraints(),
padding: EdgeInsets.zero,
icon: const Icon(
Icons.add,
color: Colors.black,
),
onPressed: () {
configuration.service.addProduct(product);
onItemAddedRemoved();
},
),
],
),
],
), ),
), ),
); );

View file

@ -6,7 +6,7 @@ import "package:flutter_shopping_cart/src/widgets/default_shopping_cart_item.dar
import "package:flutter_shopping_cart/src/widgets/default_sum_bottom_sheet_builder.dart"; import "package:flutter_shopping_cart/src/widgets/default_sum_bottom_sheet_builder.dart";
/// Shopping cart screen widget. /// Shopping cart screen widget.
class ShoppingCartScreen extends StatelessWidget { class ShoppingCartScreen extends StatefulWidget {
/// Creates a shopping cart screen. /// Creates a shopping cart screen.
const ShoppingCartScreen({ const ShoppingCartScreen({
required this.configuration, required this.configuration,
@ -16,26 +16,31 @@ class ShoppingCartScreen extends StatelessWidget {
/// Configuration for the shopping cart screen. /// Configuration for the shopping cart screen.
final ShoppingCartConfig configuration; final ShoppingCartConfig configuration;
@override
State<ShoppingCartScreen> createState() => _ShoppingCartScreenState();
}
class _ShoppingCartScreenState extends State<ShoppingCartScreen> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
var theme = Theme.of(context); var theme = Theme.of(context);
return Scaffold( return Scaffold(
appBar: appBar: widget.configuration.appBarBuilder?.call(context) ??
configuration.appBarBuilder?.call(context) ?? const DefaultAppbar(), const DefaultAppbar(),
body: SafeArea( body: SafeArea(
child: Stack( child: Stack(
fit: StackFit.expand, fit: StackFit.expand,
children: [ children: [
Padding( Padding(
padding: configuration.pagePadding, padding: widget.configuration.pagePadding,
child: SingleChildScrollView( child: SingleChildScrollView(
child: Column( child: Column(
children: [ children: [
if (configuration.titleBuilder != null) ...{ if (widget.configuration.titleBuilder != null) ...{
configuration.titleBuilder!( widget.configuration.titleBuilder!(
context, context,
configuration.translations.cartTitle, widget.configuration.translations.cartTitle,
), ),
} else ...{ } else ...{
Padding( Padding(
@ -45,7 +50,7 @@ class ShoppingCartScreen extends StatelessWidget {
child: Row( child: Row(
children: [ children: [
Text( Text(
configuration.translations.cartTitle, widget.configuration.translations.cartTitle,
style: theme.textTheme.titleLarge, style: theme.textTheme.titleLarge,
textAlign: TextAlign.start, textAlign: TextAlign.start,
), ),
@ -53,30 +58,32 @@ class ShoppingCartScreen extends StatelessWidget {
), ),
), ),
}, },
ListenableBuilder( Column(
listenable: configuration.service, children: [
builder: (context, _) => Column( for (var product
children: [ in widget.configuration.service.products)
for (var product in configuration.service.products) widget.configuration.productItemBuilder?.call(
configuration.productItemBuilder?.call( context,
context, product,
product, widget.configuration,
configuration, ) ??
) ?? DefaultShoppingCartItem(
DefaultShoppingCartItem( product: product,
product: product, configuration: widget.configuration,
configuration: configuration, onItemAddedRemoved: () {
), setState(() {});
},
),
// Additional whitespace at // Additional whitespace at
// the bottom to make sure the last // the bottom to make sure the last
// product(s) are not hidden by the bottom sheet. // product(s) are not hidden by the bottom sheet.
SizedBox( SizedBox(
height: configuration.confirmOrderButtonHeight + height:
configuration.sumBottomSheetHeight, widget.configuration.confirmOrderButtonHeight +
), widget.configuration.sumBottomSheetHeight,
], ),
), ],
), ),
], ],
), ),
@ -85,7 +92,7 @@ class ShoppingCartScreen extends StatelessWidget {
Align( Align(
alignment: Alignment.bottomCenter, alignment: Alignment.bottomCenter,
child: _BottomSheet( child: _BottomSheet(
configuration: configuration, configuration: widget.configuration,
), ),
), ),
], ],
@ -106,28 +113,19 @@ class _BottomSheet extends StatelessWidget {
Widget build(BuildContext context) => Column( Widget build(BuildContext context) => Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
ListenableBuilder( configuration.sumBottomSheetBuilder?.call(context, configuration) ??
listenable: configuration.service, DefaultSumBottomSheetBuilder(
builder: (BuildContext context, Widget? child) => configuration: configuration,
configuration.sumBottomSheetBuilder ),
?.call(context, configuration) ?? configuration.confirmOrderButtonBuilder?.call(
DefaultSumBottomSheetBuilder( context,
configuration: configuration, configuration,
), configuration.onConfirmOrder,
), ) ??
ListenableBuilder( DefaultConfirmOrderButton(
listenable: configuration.service, configuration: configuration,
builder: (context, _) => onConfirmOrder: configuration.onConfirmOrder,
configuration.confirmOrderButtonBuilder?.call( ),
context,
configuration,
configuration.onConfirmOrder,
) ??
DefaultConfirmOrderButton(
configuration: configuration,
onConfirmOrder: configuration.onConfirmOrder,
),
),
], ],
); );
} }