feat: add builders for productpage

This commit is contained in:
mike doornenbal 2024-07-08 11:36:49 +02:00
parent f28828b07e
commit b736072497
7 changed files with 114 additions and 38 deletions

View file

@ -26,6 +26,9 @@ class ProductPageConfiguration {
this.discountDescription, this.discountDescription,
this.noContentBuilder, this.noContentBuilder,
this.errorBuilder, this.errorBuilder,
this.shopselectorBuilder,
this.discountBuilder,
this.categoryListBuilder,
}) { }) {
onProductDetail ??= _onProductDetail; onProductDetail ??= _onProductDetail;
discountDescription ??= _defaultDiscountDescription; discountDescription ??= _defaultDiscountDescription;
@ -45,13 +48,13 @@ class ProductPageConfiguration {
final Future<List<Product>> Function(Shop shop) getProducts; final Future<List<Product>> Function(Shop shop) getProducts;
/// The localizations for the product page. /// The localizations for the product page.
ProductPageTranslations translations; final ProductPageTranslations translations;
/// Builder for the product item. These items will be displayed in the list /// Builder for the product item. These items will be displayed in the list
/// for each product in their seperated category. This builder should only /// for each product in their seperated category. This builder should only
/// build the widget for one specific product. This builder has a default /// build the widget for one specific product. This builder has a default
/// in-case the developer does not override it. /// in-case the developer does not override it.
Widget Function( final Widget Function(
BuildContext context, BuildContext context,
Product product, Product product,
ProductPageConfiguration configuration, ProductPageConfiguration configuration,
@ -66,7 +69,7 @@ class ProductPageConfiguration {
/// The builder for the shopping cart. This builder should return a widget /// The builder for the shopping cart. This builder should return a widget
/// that navigates to the shopping cart overview page. /// that navigates to the shopping cart overview page.
Widget Function( final Widget Function(
BuildContext context, BuildContext context,
ProductPageConfiguration configuration, ProductPageConfiguration configuration,
)? shoppingCartButtonBuilder; )? shoppingCartButtonBuilder;
@ -93,29 +96,53 @@ class ProductPageConfiguration {
final Function() onNavigateToShoppingCart; final Function() onNavigateToShoppingCart;
/// The style of the shop selector. /// The style of the shop selector.
ShopSelectorStyle shopSelectorStyle; final ShopSelectorStyle shopSelectorStyle;
/// The padding for the page. /// The padding for the page.
EdgeInsets pagePadding; final EdgeInsets pagePadding;
/// Optional app bar that you can pass to the product page screen. /// Optional app bar that you can pass to the product page screen.
final Widget? bottomNavigationBar; final Widget? bottomNavigationBar;
/// Optional app bar that you can pass to the order detail screen. /// Optional app bar that you can pass to the order detail screen.
PreferredSizeWidget Function(BuildContext context)? appBarBuilder; final PreferredSizeWidget Function(BuildContext context)? appBarBuilder;
/// Builder for the no content widget. This builder is used when there is no /// Builder for the no content widget. This builder is used when there is no
/// content to display. /// content to display.
Widget Function( final Widget Function(
BuildContext context, BuildContext context,
)? noContentBuilder; )? noContentBuilder;
/// Builder for the error widget. This builder is used when there is an error /// Builder for the error widget. This builder is used when there is an error
/// to display. /// to display.
Widget Function( final Widget Function(
BuildContext context, BuildContext context,
Object? error, Object? error,
)? errorBuilder; )? errorBuilder;
/// Builder for the shop selector. This builder is used to build the shop
/// selector that will be displayed in the product page.
final Widget Function(
BuildContext context,
ProductPageConfiguration configuration,
List<Shop> shops,
Function(Shop shop) onShopSelectionChange,
)? shopselectorBuilder;
/// Builder for the discount widget. This builder is used to build the
/// discount widget that will be displayed in the product page.
final Widget Function(
BuildContext context,
ProductPageConfiguration configuration,
List<Product> discountedProducts,
)? discountBuilder;
/// Builder for the list of items that are displayed in the product page.
final Widget Function(
BuildContext context,
ProductPageConfiguration configuration,
List<Product> products,
)? categoryListBuilder;
} }
Future<void> _onProductDetail( Future<void> _onProductDetail(

View file

@ -6,6 +6,8 @@ class ProductPageTranslations {
this.discountTitle = "Weekly offer", this.discountTitle = "Weekly offer",
this.failedToLoadImageExplenation = "Failed to load image", this.failedToLoadImageExplenation = "Failed to load image",
this.close = "Close", this.close = "Close",
this.categoryItemListTitle = "What would you like to order",
this.appBarTitle = "ProductPage",
}); });
/// Message to navigate to the shopping cart /// Message to navigate to the shopping cart
@ -19,4 +21,10 @@ class ProductPageTranslations {
/// Close button for the product page /// Close button for the product page
final String close; final String close;
/// Title for the category item list
final String categoryItemListTitle;
/// Title for the app bar
final String appBarTitle;
} }

View file

@ -27,8 +27,10 @@ class ProductPageScreen extends StatelessWidget {
@override @override
Widget build(BuildContext context) => Scaffold( Widget build(BuildContext context) => Scaffold(
appBar: appBar: configuration.appBarBuilder?.call(context) ??
configuration.appBarBuilder?.call(context) ?? const DefaultAppbar(), DefaultAppbar(
configuration: configuration,
),
bottomNavigationBar: configuration.bottomNavigationBar, bottomNavigationBar: configuration.bottomNavigationBar,
body: SafeArea( body: SafeArea(
child: Padding( child: Padding(
@ -129,6 +131,12 @@ class _ProductPage extends StatelessWidget {
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
configuration.shopselectorBuilder?.call(
context,
configuration,
shops,
configuration.shoppingService.shopService.selectShop,
) ??
ShopSelector( ShopSelector(
configuration: configuration, configuration: configuration,
shops: shops, shops: shops,
@ -207,6 +215,7 @@ class _ShopContents extends StatelessWidget {
child: Column( child: Column(
children: [ children: [
// Products // Products
getCategoryList( getCategoryList(
context, context,
configuration, configuration,
@ -227,6 +236,11 @@ class _ShopContents extends StatelessWidget {
children: [ children: [
// Discounted product // Discounted product
if (discountedproducts.isNotEmpty) ...[ if (discountedproducts.isNotEmpty) ...[
configuration.discountBuilder?.call(
context,
configuration,
discountedproducts,
) ??
Padding( Padding(
padding: const EdgeInsets.symmetric(horizontal: 16), padding: const EdgeInsets.symmetric(horizontal: 16),
child: WeeklyDiscount( child: WeeklyDiscount(
@ -239,12 +253,17 @@ class _ShopContents extends StatelessWidget {
padding: padding:
const EdgeInsets.symmetric(horizontal: 16, vertical: 24), const EdgeInsets.symmetric(horizontal: 16, vertical: 24),
child: Text( child: Text(
"What would you like to order?", configuration.translations.categoryItemListTitle,
style: theme.textTheme.titleLarge, style: theme.textTheme.titleLarge,
textAlign: TextAlign.start, textAlign: TextAlign.start,
), ),
), ),
configuration.categoryListBuilder?.call(
context,
configuration,
productPageContent,
) ??
productList, productList,
], ],
); );

View file

@ -1,12 +1,17 @@
import "package:flutter/material.dart"; import "package:flutter/material.dart";
import "package:flutter_product_page/flutter_product_page.dart";
/// Default appbar for the product page. /// Default appbar for the product page.
class DefaultAppbar extends StatelessWidget implements PreferredSizeWidget { class DefaultAppbar extends StatelessWidget implements PreferredSizeWidget {
/// Constructor for the default appbar for the product page. /// Constructor for the default appbar for the product page.
const DefaultAppbar({ const DefaultAppbar({
required this.configuration,
super.key, super.key,
}); });
/// Configuration for the product page.
final ProductPageConfiguration configuration;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
var theme = Theme.of(context); var theme = Theme.of(context);
@ -17,7 +22,7 @@ class DefaultAppbar extends StatelessWidget implements PreferredSizeWidget {
IconButton(onPressed: () {}, icon: const Icon(Icons.filter_alt)), IconButton(onPressed: () {}, icon: const Icon(Icons.filter_alt)),
], ],
title: Text( title: Text(
"Product page", configuration.translations.appBarTitle,
style: theme.textTheme.headlineLarge, style: theme.textTheme.headlineLarge,
), ),
); );

View file

@ -26,6 +26,9 @@ class ShoppingConfiguration {
this.discountDescription, this.discountDescription,
this.noContentBuilder, this.noContentBuilder,
this.errorBuilder, this.errorBuilder,
this.categoryListBuilder,
this.shopselectorBuilder,
this.discountBuilder,
/// ShoppingCart configurations /// ShoppingCart configurations
this.onConfirmOrder, this.onConfirmOrder,
@ -114,6 +117,30 @@ class ShoppingConfiguration {
/// Function that will be called when there is an error /// Function that will be called when there is an error
final Widget Function(BuildContext, Object?)? errorBuilder; final Widget Function(BuildContext, Object?)? errorBuilder;
/// Builder for the shop selector. This builder is used to build the shop
/// selector that will be displayed in the product page.
final Widget Function(
BuildContext context,
ProductPageConfiguration configuration,
List<Shop> shops,
Function(Shop shop) onShopSelectionChange,
)? shopselectorBuilder;
/// Builder for the discount widget. This builder is used to build the
/// discount widget that will be displayed in the product page.
final Widget Function(
BuildContext context,
ProductPageConfiguration configuration,
List<Product> discountedProducts,
)? discountBuilder;
/// Builder for the list of items that are displayed in the product page.
final Widget Function(
BuildContext context,
ProductPageConfiguration configuration,
List<Product> products,
)? categoryListBuilder;
/// Function that will be called when the order button on /// Function that will be called when the order button on
/// the shopping cart page is pressed /// the shopping cart page is pressed
final Function(List<Product>)? onConfirmOrder; final Function(List<Product>)? onConfirmOrder;
@ -162,12 +189,6 @@ class ShoppingConfiguration {
/// Shopping cart app bar builder /// Shopping cart app bar builder
final AppBar Function(BuildContext)? shoppingCartAppBarBuilder; final AppBar Function(BuildContext)? shoppingCartAppBarBuilder;
// = _defaultPages,
// = const OrderDetailTranslations(),
// = _defaultAppBar,
// = _defaultNextButtonBuilder,
// = _defaultOrderSuccess,
/// Function that gets called when the user navigates to the next /// Function that gets called when the user navigates to the next
/// step of the order details /// step of the order details
final dynamic Function( final dynamic Function(

View file

@ -52,6 +52,9 @@ class ShoppingProductPage extends StatelessWidget {
discountDescription: shoppingConfiguration.discountDescription, discountDescription: shoppingConfiguration.discountDescription,
noContentBuilder: shoppingConfiguration.noContentBuilder, noContentBuilder: shoppingConfiguration.noContentBuilder,
errorBuilder: shoppingConfiguration.errorBuilder, errorBuilder: shoppingConfiguration.errorBuilder,
shopselectorBuilder: shoppingConfiguration.shopselectorBuilder,
discountBuilder: shoppingConfiguration.discountBuilder,
categoryListBuilder: shoppingConfiguration.categoryListBuilder,
shops: () async { shops: () async {
if (shoppingConfiguration.onGetShops != null) { if (shoppingConfiguration.onGetShops != null) {
return shoppingConfiguration.onGetShops!(); return shoppingConfiguration.onGetShops!();

View file

@ -35,13 +35,6 @@ dependencies:
url: https://github.com/Iconica-Development/flutter_shopping url: https://github.com/Iconica-Development/flutter_shopping
ref: 2.0.0 ref: 2.0.0
path: packages/flutter_shopping_local path: packages/flutter_shopping_local
dependency_overrides:
flutter_product_page:
path: ../flutter_product_page
flutter_shopping_cart:
path: ../flutter_shopping_cart
flutter_order_details:
path: ../flutter_order_details
dev_dependencies: dev_dependencies:
flutter_test: flutter_test: