Implemented review comments + Dev mode

packages/smooth_app/lib/generic_lib/bottom_sheets/smooth_bottom_sheet.dart

@@ -6,6 +6,7 @@ import 'package:smooth_app/generic_lib/bottom_sheets/smooth_draggable_bottom_she
 import 'package:smooth_app/generic_lib/design_constants.dart';
 import 'package:smooth_app/helpers/color_extension.dart';
 import 'package:smooth_app/helpers/haptic_feedback_helper.dart';
+import 'package:smooth_app/pages/product/product_page/header/reorder_bottom_sheet.dart';
 import 'package:smooth_app/resources/app_icons.dart' as icons;
 import 'package:smooth_app/themes/smooth_theme.dart';
 import 'package:smooth_app/themes/smooth_theme_colors.dart';
@@ -273,6 +274,27 @@ Future<T?> showSmoothAlertModalSheet<T>({
   );
 }
 
+void showSmoothReorderBottomSheet<T>(
+  BuildContext context, {
+  required List<T> items,
+  required ValueChanged<List<T>> onReorder,
+  ValueChanged<T>? onVisibilityToggle,
+  required LabelBuilder<T> labelBuilder,
+  required String title,
+}) {
+  showSmoothModalSheet(
+    context: context,
+    minHeight: 0.6,
+    builder: (_) => ReorderBottomSheet<T>(
+      items: items,
+      onReorder: onReorder,
+      onVisibilityToggle: onVisibilityToggle,
+      labelBuilder: labelBuilder,
+      title: title,
+    ),
+  );
+}
+
 class _SmoothListOfChoicesEndArrow extends StatelessWidget {
   const _SmoothListOfChoicesEndArrow();
 

packages/smooth_app/lib/l10n/app_en.arb

@@ -3824,5 +3824,13 @@
     "product_page_tab_folksonomy": "Folksonomy",
     "@product_page_tab_folksonomy": {
         "description": "Label of the folksonomy tab on the product page"
+    },
+    "product_page_reorder_tabs": "Reorder tabs",
+    "@product_page_reorder_tabs": {
+        "description": "Used for reorder tabs button and bottom sheet"
+    },
+    "dev_preferences_use_product_tabs_title": "Use tabs",
+    "@dev_preferences_use_product_tabs_title": {
+        "description": "Title for the preference to use tabs on the product page"
     }
 }

packages/smooth_app/lib/pages/preferences/user_preferences_dev_mode.dart

@@ -46,6 +46,7 @@ class UserPreferencesDevMode extends AbstractUserPreferences {
   static const String userPreferencesFolksonomyHost = '__folksonomyHost';
   static const String userPreferencesFlagEditIngredients = '__editIngredients';
   static const String userPreferencesFlagHideFolksonomy = '__hideFolksonomy';
+  static const String userPreferencesFlagUseProductTabs = '__useProductTabs';
   static const String userPreferencesFlagBoostedComparison =
       '__boostedComparison';
   static const String userPreferencesEnumScanMode = '__scanMode';
@@ -386,6 +387,18 @@ class UserPreferencesDevMode extends AbstractUserPreferences {
             _showSuccessMessage();
           },
         ),
+        UserPreferencesItemSwitch(
+          title: appLocalizations.dev_preferences_use_product_tabs_title,
+          value: userPreferences.getFlag(userPreferencesFlagUseProductTabs) ??
+              false,
+          onChanged: (bool value) async {
+            await userPreferences.setFlag(
+              userPreferencesFlagUseProductTabs,
+              value,
+            );
+            _showSuccessMessage();
+          },
+        ),
         UserPreferencesItemSection(
           label: appLocalizations.dev_mode_section_ui,
         ),

packages/smooth_app/lib/pages/product/product_page/header/product_page_tabs.dart

@@ -9,7 +9,6 @@ import 'package:smooth_app/knowledge_panel/knowledge_panels_builder.dart';
 import 'package:smooth_app/pages/folksonomy/folksonomy_card.dart';
 import 'package:smooth_app/pages/preferences/user_preferences_dev_mode.dart';
 import 'package:smooth_app/pages/prices/prices_card.dart';
-import 'package:smooth_app/pages/product/product_page/header/reorder_bottom_sheet.dart';
 import 'package:smooth_app/pages/product/website_card.dart';
 import 'package:smooth_app/widgets/smooth_tabbar.dart';
 
@@ -20,7 +19,7 @@ class ProductPageTab {
   });
 
   final String Function(BuildContext) labelBuilder;
-  final Widget Function(Product) builder;
+  final Widget Function(BuildContext, Product) builder;
 }
 
 class ProductPageTabBar extends StatelessWidget {
@@ -45,8 +44,8 @@ class ProductPageTabBar extends StatelessWidget {
                   label: tab.labelBuilder(context),
                   value: tab,
                 );
-              }).toList(),
-              onTabChanged: (ProductPageTab tab) {},
+              }).toList(growable: false),
+              onTabChanged: (_) {},
             )),
       ),
       pinned: true,
@@ -76,8 +75,8 @@ class ProductPageTabBar extends StatelessWidget {
 
       tabs.add(
         ProductPageTab(
-          labelBuilder: (BuildContext c) => knowledgePanelTitle.title,
-          builder: (Product p) => ListView.builder(
+          labelBuilder: (_) => knowledgePanelTitle.title,
+          builder: (_, __) => ListView.builder(
             padding: EdgeInsetsDirectional.zero,
             itemCount: children.length - 1,
             itemBuilder: (BuildContext context, int index) => children[index],
@@ -97,9 +96,9 @@ class ProductPageTabBar extends StatelessWidget {
     tabs.insert(
       0,
       ProductPageTab(
-        labelBuilder: (BuildContext c) =>
-            AppLocalizations.of(c).product_page_tab_for_me,
-        builder: (Product p) => Row(
+        labelBuilder: (BuildContext context) =>
+            AppLocalizations.of(context).product_page_tab_for_me,
+        builder: (BuildContext context, __) => Row(
           mainAxisAlignment: MainAxisAlignment.center,
           children: <Widget>[
             SmoothSimpleButton(
@@ -108,26 +107,29 @@ class ProductPageTabBar extends StatelessWidget {
                   context,
                   items: tabs.map((ProductPageTab tab) {
                     return tab;
-                  }).toList(),
+                  }).toList(growable: false),
                   onReorder: (List<ProductPageTab> reorderedItems) {
-                    tabs.clear();
-                    tabs.addAll(reorderedItems);
+                    tabs
+                      ..clear()
+                      ..addAll(reorderedItems);
                   },
                   labelBuilder: (
                     BuildContext context,
                     ProductPageTab item,
                     int index,
                   ) {
-                    return DefaultTextStyle.merge(
+                    return Text(
+                      item.labelBuilder(context),
                       style: const TextStyle(
                         fontWeight: FontWeight.bold,
                       ),
-                      child: Text(item.labelBuilder(context)),
                     );
                   },
+                  title: AppLocalizations.of(context).product_page_reorder_tabs,
                 );
               },
-              child: const Text('Reorder tabs'),
+              child:
+                  Text(AppLocalizations.of(context).product_page_reorder_tabs),
             ),
           ],
         ),
@@ -136,25 +138,25 @@ class ProductPageTabBar extends StatelessWidget {
     if (product.website?.trim().isNotEmpty == true) {
       tabs.add(
         ProductPageTab(
-          labelBuilder: (BuildContext c) =>
-              AppLocalizations.of(c).product_page_tab_website,
-          builder: (Product p) => ListView(
+          labelBuilder: (BuildContext context) =>
+              AppLocalizations.of(context).product_page_tab_website,
+          builder: (_, Product product) => ListView(
             padding: EdgeInsetsDirectional.zero,
             children: <Widget>[
-              WebsiteCard(p.website!),
+              WebsiteCard(product.website!),
             ],
           ),
         ),
       );
     }
     tabs.add(
       ProductPageTab(
-        labelBuilder: (BuildContext c) =>
-            AppLocalizations.of(c).product_page_tab_prices,
-        builder: (Product p) => ListView(
+        labelBuilder: (BuildContext context) =>
+            AppLocalizations.of(context).product_page_tab_prices,
+        builder: (_, Product product) => ListView(
           padding: EdgeInsetsDirectional.zero,
           children: <Widget>[
-            PricesCard(p),
+            PricesCard(product),
           ],
         ),
       ),
@@ -165,39 +167,18 @@ class ProductPageTabBar extends StatelessWidget {
         false) {
       tabs.add(
         ProductPageTab(
-          labelBuilder: (BuildContext c) =>
-              AppLocalizations.of(c).product_page_tab_folksonomy,
-          builder: (Product p) => ListView(
+          labelBuilder: (BuildContext context) =>
+              AppLocalizations.of(context).product_page_tab_folksonomy,
+          builder: (_, Product product) => ListView(
             padding: EdgeInsetsDirectional.zero,
-            children: <Widget>[FolksonomyCard(p)],
+            children: <Widget>[FolksonomyCard(product)],
           ),
         ),
       );
     }
 
     return tabs;
   }
-
-  static void showSmoothReorderBottomSheet<T>(
-    BuildContext context, {
-    required List<T> items,
-    required ValueChanged<List<T>> onReorder,
-    ValueChanged<T>? onVisibilityToggle,
-    required LabelBuilder<T> labelBuilder,
-    String title = 'Reorder Items',
-  }) {
-    showSmoothModalSheet(
-      context: context,
-      minHeight: 0.6,
-      builder: (_) => ReorderBottomSheet<T>(
-        items: items,
-        onReorder: onReorder,
-        onVisibilityToggle: onVisibilityToggle,
-        labelBuilder: labelBuilder,
-        title: title,
-      ),
-    );
-  }
 }
 
 class _TabBarDelegate extends SliverPersistentHeaderDelegate {
@@ -217,7 +198,7 @@ class _TabBarDelegate extends SliverPersistentHeaderDelegate {
     double shrinkOffset,
     bool overlapsContent,
   ) {
-    return Container(
+    return ColoredBox(
       color: Theme.of(context).scaffoldBackgroundColor,
       child: tabBar,
     );

packages/smooth_app/lib/pages/product/product_page/header/reorder_bottom_sheet.dart

@@ -19,7 +19,9 @@ class ReorderBottomSheet<T> extends StatelessWidget {
     required this.labelBuilder,
     this.onVisibilityToggle,
     required this.title,
-  }) : _items = items.map((T data) => _ReorderableItem<T>(data: data)).toList();
+  }) : _items = items
+            .map((T data) => _ReorderableItem<T>(data: data))
+            .toList(growable: false);
 
   final List<_ReorderableItem<T>> _items;
   final ValueChanged<List<T>> onReorder;
@@ -45,7 +47,7 @@ class ReorderBottomSheet<T> extends StatelessWidget {
             builder: (_, ScrollController scrollController) {
               return ClipRRect(
                 borderRadius: const BorderRadius.vertical(top: ROUNDED_RADIUS),
-                child: Container(
+                child: DecoratedBox(
                   decoration: BoxDecoration(
                     color: Theme.of(context).canvasColor,
                     borderRadius: const BorderRadius.vertical(
@@ -55,8 +57,8 @@ class ReorderBottomSheet<T> extends StatelessWidget {
                   child: Column(
                     crossAxisAlignment: CrossAxisAlignment.start,
                     children: <Widget>[
-                      const SmoothModalSheetHeader(
-                        title: 'Reorder tabs',
+                      SmoothModalSheetHeader(
+                        title: title,
                       ),
                       Expanded(
                         child: ReorderableListView.builder(
@@ -80,8 +82,10 @@ class ReorderBottomSheet<T> extends StatelessWidget {
                             return Container(
                               key: ValueKey<T>(item.data),
                               margin: const EdgeInsetsDirectional.only(
-                                  bottom: MEDIUM_SPACE),
-                              padding: const EdgeInsetsDirectional.all(12.0),
+                                bottom: MEDIUM_SPACE,
+                              ),
+                              padding:
+                                  const EdgeInsetsDirectional.all(MEDIUM_SPACE),
                               decoration: BoxDecoration(
                                 color: item.visible
                                     ? theme.primaryMedium
@@ -123,7 +127,7 @@ class ReorderBottomSheet<T> extends StatelessWidget {
                             provider.reorder(oldIndex, newIndex);
                             onReorder(provider.items
                                 .map((_ReorderableItem<T> item) => item.data)
-                                .toList());
+                                .toList(growable: false));
                           },
                         ),
                       ),
@@ -143,7 +147,7 @@ class _ReorderableItem<T> {
   _ReorderableItem({required this.data, this.visible = true});
 
   final T data;
-  bool visible;
+  final bool visible;
 
   _ReorderableItem<T> copyWith({bool? visible}) {
     return _ReorderableItem<T>(