From d5309b81984a6a945245fb3c58469df1b36b7c5d Mon Sep 17 00:00:00 2001 From: mike doornenbal Date: Thu, 27 Jun 2024 14:29:35 +0200 Subject: [PATCH] fix: add popup to shopping cart --- .../lib/src/config/shopping_cart_config.dart | 18 ++++- .../config/shopping_cart_localizations.dart | 4 ++ .../lib/src/widgets/product_item_popup.dart | 65 +++++++++++++++++++ .../lib/src/widgets/shopping_cart_screen.dart | 3 +- 4 files changed, 86 insertions(+), 4 deletions(-) create mode 100644 packages/flutter_shopping_cart/lib/src/widgets/product_item_popup.dart diff --git a/packages/flutter_shopping_cart/lib/src/config/shopping_cart_config.dart b/packages/flutter_shopping_cart/lib/src/config/shopping_cart_config.dart index 27b0814..1860ce3 100644 --- a/packages/flutter_shopping_cart/lib/src/config/shopping_cart_config.dart +++ b/packages/flutter_shopping_cart/lib/src/config/shopping_cart_config.dart @@ -1,5 +1,6 @@ import "package:flutter/material.dart"; import "package:flutter_shopping/flutter_shopping.dart"; +import "package:flutter_shopping_cart/src/widgets/product_item_popup.dart"; Widget _defaultNoContentBuilder(BuildContext context) => const SizedBox.shrink(); @@ -53,6 +54,7 @@ you must use the onConfirmOrder callback.""", Locale locale, Product product, ProductService productService, + ShoppingCartConfig configuration, ) productItemBuilder; final Widget Function(BuildContext context) _noContentBuilder; @@ -115,6 +117,7 @@ Widget _defaultProductItemBuilder( Locale locale, Product product, ProductService service, + ShoppingCartConfig configuration, ) { var theme = Theme.of(context); return Padding( @@ -128,9 +131,18 @@ Widget _defaultProductItemBuilder( product.name, style: theme.textTheme.titleMedium, ), - Icon( - Icons.info_outline, - color: theme.colorScheme.primary, + IconButton( + 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, + ), ), ], ), diff --git a/packages/flutter_shopping_cart/lib/src/config/shopping_cart_localizations.dart b/packages/flutter_shopping_cart/lib/src/config/shopping_cart_localizations.dart index fe90400..b1c793d 100644 --- a/packages/flutter_shopping_cart/lib/src/config/shopping_cart_localizations.dart +++ b/packages/flutter_shopping_cart/lib/src/config/shopping_cart_localizations.dart @@ -8,6 +8,7 @@ class ShoppingCartLocalizations { this.placeOrder = "Order", this.sum = "Subtotal:", this.cartTitle = "Products", + this.close = "close", }); /// Locale for the shopping cart. @@ -26,4 +27,7 @@ class ShoppingCartLocalizations { /// Title for the shopping cart. This title will be displayed at the top of /// the shopping cart. final String cartTitle; + + /// Localization for the close button for the popup. + final String close; } diff --git a/packages/flutter_shopping_cart/lib/src/widgets/product_item_popup.dart b/packages/flutter_shopping_cart/lib/src/widgets/product_item_popup.dart new file mode 100644 index 0000000..0c57633 --- /dev/null +++ b/packages/flutter_shopping_cart/lib/src/widgets/product_item_popup.dart @@ -0,0 +1,65 @@ +import "package:flutter/material.dart"; +import "package:flutter_shopping/flutter_shopping.dart"; + +/// A popup that displays the product item. +class ProductItemPopup extends StatelessWidget { + /// Constructor for the product item popup. + const ProductItemPopup({ + required this.product, + required this.configuration, + super.key, + }); + + /// The product to display. + final Product product; + + /// Configuration for the product page. + final ShoppingCartConfig configuration; + + @override + Widget build(BuildContext context) { + var theme = Theme.of(context); + + return SingleChildScrollView( + child: Padding( + padding: const EdgeInsets.all(32), + child: SizedBox( + width: double.infinity, + child: Column( + children: [ + Text( + product.description, + style: theme.textTheme.bodySmall, + textAlign: TextAlign.center, + ), + Padding( + padding: const EdgeInsets.only(top: 20, left: 40, right: 40), + child: SizedBox( + width: double.infinity, + child: FilledButton( + onPressed: () => Navigator.of(context).pop(), + style: theme.filledButtonTheme.style?.copyWith( + backgroundColor: WidgetStateProperty.all( + theme.colorScheme.primary, + ), + ), + child: Padding( + padding: const EdgeInsets.symmetric( + horizontal: 16.0, + vertical: 8.0, + ), + child: Text( + configuration.localizations.close, + style: theme.textTheme.displayLarge, + ), + ), + ), + ), + ), + ], + ), + ), + ), + ); + } +} diff --git a/packages/flutter_shopping_cart/lib/src/widgets/shopping_cart_screen.dart b/packages/flutter_shopping_cart/lib/src/widgets/shopping_cart_screen.dart index 1c49205..faa4ee9 100644 --- a/packages/flutter_shopping_cart/lib/src/widgets/shopping_cart_screen.dart +++ b/packages/flutter_shopping_cart/lib/src/widgets/shopping_cart_screen.dart @@ -54,6 +54,7 @@ class ShoppingCartScreen extends StatelessWidget { configuration.localizations.locale, product, configuration.productService, + configuration, ), // Additional whitespace at the bottom to make sure the // last product(s) are not hidden by the bottom sheet. @@ -216,7 +217,7 @@ class _DefaultSumBottomSheet extends StatelessWidget { ), const Spacer(), Text( - totalPrice.toStringAsFixed(2), + "€ ${totalPrice.toStringAsFixed(2)}", style: theme.textTheme.bodyMedium, ), ],