feat: remove listenablebuilder from product page

packages/flutter_order_details/lib/src/widgets/default_next_button.dart

@@ -1,7 +1,6 @@
 import "package:flutter/material.dart";
 import "package:flutter_order_details/flutter_order_details.dart";
 
-
 /// Default next button for the order details page.
 class DefaultNextButton extends StatelessWidget {
   /// Constructor for the default next button for the order details page.
@@ -15,10 +14,13 @@ class DefaultNextButton extends StatelessWidget {
 
   /// Configuration for the order details page.
   final OrderDetailConfiguration configuration;
+
   /// Controller for the form.
   final FlutterFormController controller;
+
   /// Current step in the form.
   final int currentStep;
+
   /// Whether the form is checking pages.
   final bool checkingPages;
   @override

packages/flutter_product_page/lib/src/product_page_screen.dart

@@ -1,3 +1,4 @@
+import "package:collection/collection.dart";
 import "package:flutter/material.dart";
 import "package:flutter_product_page/flutter_product_page.dart";
 import "package:flutter_product_page/src/services/category_service.dart";
@@ -5,41 +6,44 @@ import "package:flutter_product_page/src/widgets/defaults/default_appbar.dart";
 import "package:flutter_product_page/src/widgets/defaults/default_error.dart";
 import "package:flutter_product_page/src/widgets/defaults/default_no_content.dart";
 import "package:flutter_product_page/src/widgets/defaults/default_shopping_cart_button.dart";
+import "package:flutter_product_page/src/widgets/defaults/selected_categories.dart";
 import "package:flutter_product_page/src/widgets/shop_selector.dart";
 import "package:flutter_product_page/src/widgets/weekly_discount.dart";
 import "package:flutter_shopping_interface/flutter_shopping_interface.dart";
 
 /// A page that displays products.
-class ProductPageScreen extends StatelessWidget {
+class ProductPageScreen extends StatefulWidget {
   /// Constructor for the product page.
   const ProductPageScreen({
     required this.configuration,
-    this.initialBuildShopId,
     super.key,
   });
 
   /// Configuration for the product page.
   final ProductPageConfiguration configuration;
 
-  /// An optional initial shop ID to select. This overrides the initialShopId
+  @override
-  /// from the configuration.
+  State<ProductPageScreen> createState() => _ProductPageScreenState();
-  final String? initialBuildShopId;
+}
 
+class _ProductPageScreenState extends State<ProductPageScreen> {
   @override
   Widget build(BuildContext context) => Scaffold(
-        appBar: configuration.appBarBuilder?.call(context) ??
+        appBar: widget.configuration.appBarBuilder?.call(context) ??
             DefaultAppbar(
-              configuration: configuration,
+              configuration: widget.configuration,
             ),
-        bottomNavigationBar: configuration.bottomNavigationBar,
+        bottomNavigationBar: widget.configuration.bottomNavigationBar,
         body: SafeArea(
           child: Padding(
-            padding: configuration.pagePadding,
+            padding: widget.configuration.pagePadding,
             child: FutureBuilder(
               // ignore: discarded_futures
-              future: configuration.shops(),
+              future: widget.configuration.shops(),
-              builder: (BuildContext context, AsyncSnapshot data) {
+              builder: (context, snapshot) {
-                if (data.connectionState == ConnectionState.waiting) {
+                List<Shop>? shops;
+
+                if (snapshot.connectionState == ConnectionState.waiting) {
                   return const Column(
                     mainAxisSize: MainAxisSize.max,
                     mainAxisAlignment: MainAxisAlignment.center,
@@ -49,106 +53,47 @@ class ProductPageScreen extends StatelessWidget {
                   );
                 }
 
-                if (data.hasError) {
+                if (snapshot.hasError) {
-                  return configuration.errorBuilder?.call(
+                  return widget.configuration.errorBuilder?.call(
                         context,
-                        data.error,
+                        snapshot.error,
                       ) ??
                       DefaultError(
-                        error: data.error,
+                        error: snapshot.error,
                       );
                 }
 
-                List<Shop>? shops = data.data;
+                shops = snapshot.data;
 
                 if (shops == null || shops.isEmpty) {
-                  return configuration.errorBuilder?.call(
+                  return widget.configuration.errorBuilder?.call(
                         context,
-                        data.error,
+                        snapshot.error,
                       ) ??
-                      DefaultError(error: data.error);
+                      DefaultError(error: snapshot.error);
                 }
 
-                if (initialBuildShopId != null) {
+                if (widget.configuration.initialShopId != null) {
-                  Shop? initialShop;
+                  var initialShop = shops.firstWhereOrNull(
-
+                    (shop) => shop.id == widget.configuration.initialShopId,
-                  for (var shop in shops) {
+                  );
-                    if (shop.id == initialBuildShopId) {
+                  if (initialShop != null) {
-                      initialShop = shop;
+                    widget.configuration.shoppingService.shopService.selectShop(
-                      break;
+                      initialShop,
-                    }
+                    );
+                  } else {
+                    widget.configuration.shoppingService.shopService.selectShop(
+                      shops.first,
+                    );
                   }
-
-                  configuration.shoppingService.shopService
-                      .selectShop(initialShop ?? shops.first);
-                } else if (configuration.initialShopId != null) {
-                  Shop? initialShop;
-
-                  for (var shop in shops) {
-                    if (shop.id == configuration.initialShopId) {
-                      initialShop = shop;
-                      break;
-                    }
-                  }
-
-                  configuration.shoppingService.shopService
-                      .selectShop(initialShop ?? shops.first);
                 } else {
-                  configuration.shoppingService.shopService
+                  widget.configuration.shoppingService.shopService.selectShop(
-                      .selectShop(shops.first);
+                    shops.first,
+                  );
                 }
-
+                return _ProductPageContent(
-                return ListenableBuilder(
+                  configuration: widget.configuration,
-                  listenable: configuration.shoppingService.shopService,
+                  shops: shops,
-                  builder: (BuildContext context, Widget? _) {
-                    configuration.onShopSelectionChange?.call(
-                      configuration.shoppingService.shopService.selectedShop!,
-                    );
-                    return Stack(
-                      children: [
-                        SingleChildScrollView(
-                          child: Column(
-                            crossAxisAlignment: CrossAxisAlignment.start,
-                            children: [
-                              configuration.shopselectorBuilder?.call(
-                                    context,
-                                    configuration,
-                                    shops,
-                                    configuration
-                                        .shoppingService.shopService.selectShop,
-                                  ) ??
-                                  ShopSelector(
-                                    configuration: configuration,
-                                    shops: shops,
-                                    onTap: configuration
-                                        .shoppingService.shopService.selectShop,
-                                  ),
-                              configuration.selectedCategoryBuilder?.call(
-                                    configuration,
-                                  ) ??
-                                  SelectedCategories(
-                                    configuration: configuration,
-                                  ),
-                              _ShopContents(
-                                configuration: configuration,
-                              ),
-                            ],
-                          ),
-                        ),
-                        Align(
-                          alignment: Alignment.bottomCenter,
-                          child: configuration.shoppingCartButtonBuilder != null
-                              ? configuration.shoppingCartButtonBuilder!(
-                                  context,
-                                  configuration,
-                                )
-                              : DefaultShoppingCartButton(
-                                  configuration: configuration,
-                                ),
-                        ),
-                      ],
-                    );
-                  },
                 );
               },
             ),
@@ -157,33 +102,130 @@ class ProductPageScreen extends StatelessWidget {
       );
 }
 
-class _ShopContents extends StatelessWidget {
+class _ProductPageContent extends StatefulWidget {
+  const _ProductPageContent({
+    required this.configuration,
+    required this.shops,
+  });
+
+  final ProductPageConfiguration configuration;
+
+  final List<Shop> shops;
+
+  @override
+  State<_ProductPageContent> createState() => _ProductPageContentState();
+}
+
+class _ProductPageContentState extends State<_ProductPageContent> {
+  @override
+  Widget build(BuildContext context) => Stack(
+        children: [
+          SingleChildScrollView(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                // shop selector
+                widget.configuration.shopselectorBuilder?.call(
+                      context,
+                      widget.configuration,
+                      widget.shops,
+                      widget
+                          .configuration.shoppingService.shopService.selectShop,
+                    ) ??
+                    ShopSelector(
+                      configuration: widget.configuration,
+                      shops: widget.shops,
+                      onTap: (shop) {
+                        widget.configuration.shoppingService.shopService
+                            .selectShop(shop);
+                      },
+                    ),
+                // selected categories
+                widget.configuration.selectedCategoryBuilder?.call(
+                      widget.configuration,
+                    ) ??
+                    SelectedCategories(
+                      configuration: widget.configuration,
+                    ),
+                // products
+                _ShopContents(
+                  configuration: widget.configuration,
+                ),
+              ],
+            ),
+          ),
+
+          // button
+          Align(
+            alignment: Alignment.bottomCenter,
+            child: widget.configuration.shoppingCartButtonBuilder != null
+                ? widget.configuration.shoppingCartButtonBuilder!(
+                    context,
+                    widget.configuration,
+                  )
+                : DefaultShoppingCartButton(
+                    configuration: widget.configuration,
+                  ),
+          ),
+        ],
+      );
+}
+
+class _ShopContents extends StatefulWidget {
   const _ShopContents({
     required this.configuration,
   });
 
   final ProductPageConfiguration configuration;
 
+  @override
+  State<_ShopContents> createState() => _ShopContentsState();
+}
+
+class _ShopContentsState extends State<_ShopContents> {
+  @override
+  void initState() {
+    widget.configuration.shoppingService.shopService.addListener(_listen);
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    widget.configuration.shoppingService.shopService.removeListener(_listen);
+    super.dispose();
+  }
+
+  void _listen() {
+    setState(() {});
+  }
+
   @override
   Widget build(BuildContext context) {
     var theme = Theme.of(context);
     return Padding(
       padding: EdgeInsets.symmetric(
-        horizontal: configuration.pagePadding.horizontal,
+        horizontal: widget.configuration.pagePadding.horizontal,
       ),
       child: FutureBuilder(
         // ignore: discarded_futures
-        future: configuration.getProducts(
+        future: widget.configuration.getProducts(
-          configuration.shoppingService.shopService.selectedShop!,
+          widget.configuration.shoppingService.shopService.selectedShop!,
         ),
         builder: (context, snapshot) {
+          List<Product> productPageContent;
+
           if (snapshot.connectionState == ConnectionState.waiting) {
-            return const Center(child: CircularProgressIndicator.adaptive());
+            return SizedBox(
+              height: MediaQuery.of(context).size.height * 0.7,
+              child: const Center(
+                child: CircularProgressIndicator.adaptive(),
+              ),
+            );
           }
 
           if (snapshot.hasError) {
-            if (configuration.errorBuilder != null) {
+            if (widget.configuration.errorBuilder != null) {
-              return configuration.errorBuilder!(
+              return widget.configuration.errorBuilder!(
                 context,
                 snapshot.error,
               );
@@ -192,13 +234,11 @@ class _ShopContents extends StatelessWidget {
             }
           }
 
-          List<Product> productPageContent;
-
           productPageContent =
-              configuration.shoppingService.productService.products;
+              widget.configuration.shoppingService.productService.products;
 
           if (productPageContent.isEmpty) {
-            return configuration.noContentBuilder?.call(context) ??
+            return widget.configuration.noContentBuilder?.call(context) ??
                 const DefaultNoContent();
           }
 
@@ -210,15 +250,15 @@ class _ShopContents extends StatelessWidget {
             children: [
               // Discounted product
               if (discountedproducts.isNotEmpty) ...[
-                configuration.discountBuilder?.call(
+                widget.configuration.discountBuilder?.call(
                       context,
-                      configuration,
+                      widget.configuration,
                       discountedproducts,
                     ) ??
                     Padding(
                       padding: const EdgeInsets.symmetric(horizontal: 16),
                       child: WeeklyDiscount(
-                        configuration: configuration,
+                        configuration: widget.configuration,
                         product: discountedproducts.first,
                       ),
                     ),
@@ -227,15 +267,15 @@ class _ShopContents extends StatelessWidget {
                 padding:
                     const EdgeInsets.symmetric(horizontal: 16, vertical: 24),
                 child: Text(
-                  configuration.translations.categoryItemListTitle,
+                  widget.configuration.translations.categoryItemListTitle,
                   style: theme.textTheme.titleLarge,
                   textAlign: TextAlign.start,
                 ),
               ),
 
-              configuration.categoryListBuilder?.call(
+              widget.configuration.categoryListBuilder?.call(
                     context,
-                    configuration,
+                    widget.configuration,
                     productPageContent,
                   ) ??
                   Padding(
@@ -244,15 +284,11 @@ class _ShopContents extends StatelessWidget {
                       children: [
                         // Products
 
-                        ListenableBuilder(
+                        getCategoryList(
-                          listenable:
+                          context,
-                              configuration.shoppingService.productService,
+                          widget.configuration,
-                          builder: (context, _) => getCategoryList(
+                          widget.configuration.shoppingService.productService
-                            context,
+                              .products,
-                            configuration,
-                            configuration
-                                .shoppingService.productService.products,
-                          ),
                         ),
 
                         // Bottom padding so the last product is not cut off
@@ -268,55 +304,3 @@ class _ShopContents extends StatelessWidget {
     );
   }
 }
-
-/// Selected categories.
-class SelectedCategories extends StatelessWidget {
-  /// Constructor for the selected categories.
-  const SelectedCategories({
-    required this.configuration,
-    super.key,
-  });
-
-  /// Configuration for the product page.
-  final ProductPageConfiguration configuration;
-
-  @override
-  Widget build(BuildContext context) {
-    var theme = Theme.of(context);
-    return ListenableBuilder(
-      listenable: configuration.shoppingService.productService,
-      builder: (context, _) => Padding(
-        padding: const EdgeInsets.only(left: 4),
-        child: SingleChildScrollView(
-          scrollDirection: Axis.horizontal,
-          child: Row(
-            children: [
-              for (var category in configuration
-                  .shoppingService.productService.selectedCategories) ...[
-                Padding(
-                  padding: const EdgeInsets.only(right: 8),
-                  child: Chip(
-                    backgroundColor: theme.colorScheme.primary,
-                    deleteIcon: const Icon(
-                      Icons.close,
-                      color: Colors.white,
-                    ),
-                    onDeleted: () {
-                      configuration.shoppingService.productService
-                          .selectCategory(category);
-                    },
-                    label: Text(
-                      category,
-                      style: theme.textTheme.bodyMedium
-                          ?.copyWith(color: Colors.white),
-                    ),
-                  ),
-                ),
-              ],
-            ],
-          ),
-        ),
-      ),
-    );
-  }
-}

packages/flutter_product_page/lib/src/widgets/defaults/default_shopping_cart_button.dart

@@ -2,7 +2,7 @@ import "package:flutter/material.dart";
 import "package:flutter_product_page/flutter_product_page.dart";
 
 /// Default shopping cart button for the product page.
-class DefaultShoppingCartButton extends StatelessWidget {
+class DefaultShoppingCartButton extends StatefulWidget {
   /// Constructor for the default shopping cart button for the product page.
   const DefaultShoppingCartButton({
     required this.configuration,
@@ -12,35 +12,56 @@ class DefaultShoppingCartButton extends StatelessWidget {
   /// Configuration for the product page.
   final ProductPageConfiguration configuration;
 
+  @override
+  State<DefaultShoppingCartButton> createState() =>
+      _DefaultShoppingCartButtonState();
+}
+
+class _DefaultShoppingCartButtonState extends State<DefaultShoppingCartButton> {
+  @override
+  void initState() {
+    super.initState();
+    widget.configuration.shoppingService.shoppingCartService
+        .addListener(_listen);
+  }
+
+  @override
+  void dispose() {
+    widget.configuration.shoppingService.shoppingCartService
+        .removeListener(_listen);
+    super.dispose();
+  }
+
+  void _listen() {
+    setState(() {});
+  }
+
   @override
   Widget build(BuildContext context) {
     var theme = Theme.of(context);
 
-    return ListenableBuilder(
+    return Padding(
-      listenable: configuration.shoppingService.shoppingCartService,
+      padding: const EdgeInsets.symmetric(horizontal: 60),
-      builder: (context, widget) => Padding(
+      child: SizedBox(
-        padding: const EdgeInsets.symmetric(horizontal: 60),
+        width: double.infinity,
-        child: SizedBox(
+        child: FilledButton(
-          width: double.infinity,
+          onPressed: widget.configuration.shoppingService.shoppingCartService
-          child: FilledButton(
+                  .products.isNotEmpty
-            onPressed: configuration
+              ? widget.configuration.onNavigateToShoppingCart
-                    .shoppingService.shoppingCartService.products.isNotEmpty
+              : null,
-                ? configuration.onNavigateToShoppingCart
+          style: theme.filledButtonTheme.style?.copyWith(
-                : null,
+            backgroundColor: WidgetStateProperty.all(
-            style: theme.filledButtonTheme.style?.copyWith(
+              theme.colorScheme.primary,
-              backgroundColor: WidgetStateProperty.all(
-                theme.colorScheme.primary,
-              ),
             ),
-            child: Padding(
+          ),
-              padding: const EdgeInsets.symmetric(
+          child: Padding(
-                horizontal: 16.0,
+            padding: const EdgeInsets.symmetric(
-                vertical: 12,
+              horizontal: 16.0,
-              ),
+              vertical: 12,
-              child: Text(
+            ),
-                configuration.translations.navigateToShoppingCart,
+            child: Text(
-                style: theme.textTheme.displayLarge,
+              widget.configuration.translations.navigateToShoppingCart,
-              ),
+              style: theme.textTheme.displayLarge,
             ),
           ),
         ),

packages/flutter_product_page/lib/src/widgets/defaults/selected_categories.dart

@@ -0,0 +1,72 @@
+import "package:flutter/material.dart";
+import "package:flutter_product_page/flutter_product_page.dart";
+
+/// Selected categories.
+class SelectedCategories extends StatefulWidget {
+  /// Constructor for the selected categories.
+  const SelectedCategories({
+    required this.configuration,
+    super.key,
+  });
+
+  /// Configuration for the product page.
+  final ProductPageConfiguration configuration;
+
+  @override
+  State<SelectedCategories> createState() => _SelectedCategoriesState();
+}
+
+class _SelectedCategoriesState extends State<SelectedCategories> {
+  @override
+  void initState() {
+    widget.configuration.shoppingService.productService.addListener(_listen);
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    widget.configuration.shoppingService.productService.removeListener(_listen);
+    super.dispose();
+  }
+
+  void _listen() {
+    setState(() {});
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    var theme = Theme.of(context);
+    return Padding(
+      padding: const EdgeInsets.only(left: 4),
+      child: SingleChildScrollView(
+        scrollDirection: Axis.horizontal,
+        child: Row(
+          children: [
+            for (var category in widget.configuration.shoppingService
+                .productService.selectedCategories) ...[
+              Padding(
+                padding: const EdgeInsets.only(right: 8),
+                child: Chip(
+                  backgroundColor: theme.colorScheme.primary,
+                  deleteIcon: const Icon(
+                    Icons.close,
+                    color: Colors.white,
+                  ),
+                  onDeleted: () {
+                    widget.configuration.shoppingService.productService
+                        .selectCategory(category);
+                  },
+                  label: Text(
+                    category,
+                    style: theme.textTheme.bodyMedium
+                        ?.copyWith(color: Colors.white),
+                  ),
+                ),
+              ),
+            ],
+          ],
+        ),
+      ),
+    );
+  }
+}

packages/flutter_product_page/lib/src/widgets/shop_selector.dart

@@ -5,7 +5,7 @@ import "package:flutter_product_page/src/widgets/spaced_wrap.dart";
 import "package:flutter_shopping_interface/flutter_shopping_interface.dart";
 
 /// Shop selector widget that displays a list to navigate between shops.
-class ShopSelector extends StatelessWidget {
+class ShopSelector extends StatefulWidget {
   /// Constructor for the shop selector.
   const ShopSelector({
     required this.configuration,
@@ -33,30 +33,53 @@ class ShopSelector extends StatelessWidget {
   /// Padding on the buttons.
   final double paddingOnButtons;
 
+  @override
+  State<ShopSelector> createState() => _ShopSelectorState();
+}
+
+class _ShopSelectorState extends State<ShopSelector> {
+  @override
+  void initState() {
+    widget.configuration.shoppingService.shopService.addListener(_listen);
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    widget.configuration.shoppingService.shopService.removeListener(_listen);
+    super.dispose();
+  }
+
+  void _listen() {
+    setState(() {});
+  }
+
   @override
   Widget build(BuildContext context) {
-    if (shops.length == 1) {
+    if (widget.shops.length == 1) {
       return const SizedBox.shrink();
     }
 
-    if (configuration.shopSelectorStyle == ShopSelectorStyle.spacedWrap) {
+    if (widget.configuration.shopSelectorStyle ==
+        ShopSelectorStyle.spacedWrap) {
       return SpacedWrap(
-        shops: shops,
+        shops: widget.shops,
         selectedItem:
-            configuration.shoppingService.shopService.selectedShop!.id,
+            widget.configuration.shoppingService.shopService.selectedShop!.id,
-        onTap: onTap,
+        onTap: widget.onTap,
         width: MediaQuery.of(context).size.width - (16 * 2),
-        paddingBetweenButtons: paddingBetweenButtons,
+        paddingBetweenButtons: widget.paddingBetweenButtons,
-        paddingOnButtons: paddingOnButtons,
+        paddingOnButtons: widget.paddingOnButtons,
       );
     }
 
     return HorizontalListItems(
-      shops: shops,
+      shops: widget.shops,
-      selectedItem: configuration.shoppingService.shopService.selectedShop!.id,
+      selectedItem:
-      onTap: onTap,
+          widget.configuration.shoppingService.shopService.selectedShop!.id,
-      paddingBetweenButtons: paddingBetweenButtons,
+      onTap: widget.onTap,
-      paddingOnButtons: paddingOnButtons,
+      paddingBetweenButtons: widget.paddingBetweenButtons,
+      paddingOnButtons: widget.paddingOnButtons,
     );
   }
 }

packages/flutter_shopping/lib/src/configuration/shopping_configuration.dart

@@ -14,7 +14,6 @@ class ShoppingConfiguration {
     this.onNavigateToShoppingCart,
     this.getProductsInShoppingCart,
     this.shoppingCartButtonBuilder,
-    this.initialShopid,
     this.productBuilder,
     this.onShopSelectionChange,
     this.productPageTranslations,
@@ -82,9 +81,6 @@ class ShoppingConfiguration {
   final Widget Function(BuildContext, ProductPageConfiguration)?
       shoppingCartButtonBuilder;
 
-  /// Initial shop that will be selected
-  final String? initialShopid;
-
   /// ProductPage item builder
   final Widget Function(
     BuildContext,

packages/flutter_shopping/lib/src/flutter_shopping_navigator_userstory.dart

@@ -37,10 +37,8 @@ class ShoppingProductPage extends StatelessWidget {
   Widget build(BuildContext context) {
     var service = shoppingConfiguration.shoppingService;
     return ProductPageScreen(
-      initialBuildShopId: shoppingConfiguration.initialShopid,
       configuration: ProductPageConfiguration(
         shoppingService: service,
-        initialShopId: shoppingConfiguration.initialShopid,
         shoppingCartButtonBuilder:
             shoppingConfiguration.shoppingCartButtonBuilder,
         productBuilder: shoppingConfiguration.productBuilder,

packages/flutter_shopping_local/lib/service/local_product_service.dart

@@ -62,7 +62,17 @@ class LocalProductService with ChangeNotifier implements ProductService {
         description: "This is a delicious Brown fish",
       ),
     ];
+
+    // only return items that match the selectedcategories
     _allProducts = List.from(_products);
+
+    _products = _products.where((element) {
+      if (_selectedCategories.isEmpty) {
+        return true;
+      }
+      return _selectedCategories.contains(element.category);
+    }).toList();
+
     return Future.value(_products);
   }