feat: Product page - manage user lists in a bottom sheet (#5778)

* Add to user lists in a bottom sheet

* Better support dark mode

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

@@ -4,6 +4,8 @@ import 'package:flutter/material.dart';
 import 'package:flutter/semantics.dart';
 import 'package:smooth_app/generic_lib/bottom_sheets/smooth_draggable_bottom_sheet_route.dart';
 import 'package:smooth_app/generic_lib/design_constants.dart';
+import 'package:smooth_app/resources/app_icons.dart' as icons;
+import 'package:smooth_app/themes/smooth_theme_colors.dart';
 
 Future<T?> showSmoothModalSheet<T>({
   required BuildContext context,
@@ -90,47 +92,65 @@ class SmoothModalSheet extends StatelessWidget {
 class SmoothModalSheetHeader extends StatelessWidget implements SizeWidget {
   const SmoothModalSheetHeader({
     required this.title,
+    this.prefix,
     this.suffix,
+    this.foregroundColor,
+    this.backgroundColor,
   });
 
   static const double MIN_HEIGHT = 50.0;
 
   final String title;
+  final SizeWidget? prefix;
   final SizeWidget? suffix;
+  final Color? foregroundColor;
+  final Color? backgroundColor;
 
   @override
   Widget build(BuildContext context) {
     final Color primaryColor = Theme.of(context).primaryColor;
 
-    return Container(
-      height: suffix is SmoothModalSheetHeaderButton ? double.infinity : null,
-      color: primaryColor.withOpacity(0.2),
-      constraints: const BoxConstraints(minHeight: MIN_HEIGHT),
-      padding: EdgeInsetsDirectional.only(
-        start: VERY_LARGE_SPACE,
-        top: VERY_SMALL_SPACE,
-        bottom: VERY_SMALL_SPACE,
-        end: VERY_LARGE_SPACE -
-            (suffix?.requiresPadding == true ? 0 : LARGE_SPACE),
-      ),
-      child: IntrinsicHeight(
-        child: Row(
-          children: <Widget>[
-            Expanded(
-              child: Semantics(
-                sortKey: const OrdinalSortKey(1.0),
-                child: Text(
-                  title,
-                  maxLines: 1,
-                  overflow: TextOverflow.ellipsis,
-                  style: Theme.of(context).textTheme.titleLarge?.copyWith(
-                        fontWeight: FontWeight.bold,
-                      ),
+    return IconTheme(
+      data: IconThemeData(color: foregroundColor),
+      child: Container(
+        height: suffix is SmoothModalSheetHeaderButton ? double.infinity : null,
+        color: backgroundColor ?? primaryColor.withOpacity(0.2),
+        constraints: const BoxConstraints(minHeight: MIN_HEIGHT),
+        padding: EdgeInsetsDirectional.only(
+          start: (prefix?.requiresPadding == true ? 0 : VERY_LARGE_SPACE),
+          top: VERY_SMALL_SPACE,
+          bottom: VERY_SMALL_SPACE,
+          end: VERY_LARGE_SPACE -
+              (suffix?.requiresPadding == true ? 0 : LARGE_SPACE),
+        ),
+        child: IntrinsicHeight(
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.center,
+            children: <Widget>[
+              if (prefix != null)
+                Padding(
+                  padding:
+                      const EdgeInsetsDirectional.only(end: BALANCED_SPACE),
+                  child: prefix,
+                ),
+              Expanded(
+                child: Semantics(
+                  sortKey: const OrdinalSortKey(1.0),
+                  child: Text(
+                    title,
+                    maxLines: 1,
+                    overflow: TextOverflow.ellipsis,
+                    style: Theme.of(context).textTheme.titleLarge?.copyWith(
+                          fontWeight: FontWeight.bold,
+                          fontSize: 18.0,
+                          color: foregroundColor,
+                        ),
+                  ),
                 ),
               ),
-            ),
-            if (suffix != null) suffix!
-          ],
+              if (suffix != null) suffix!
+            ],
+          ),
         ),
       ),
     );
@@ -245,9 +265,11 @@ class SmoothModalSheetHeaderCloseButton extends StatelessWidget
     implements SizeWidget {
   const SmoothModalSheetHeaderCloseButton({
     this.semanticsOrder,
+    this.addPadding,
   });
 
   final double? semanticsOrder;
+  final bool? addPadding;
 
   @override
   Widget build(BuildContext context) {
@@ -264,7 +286,9 @@ class SmoothModalSheetHeaderCloseButton extends StatelessWidget
           customBorder: const CircleBorder(),
           child: const Padding(
             padding: EdgeInsets.all(MEDIUM_SPACE),
-            child: Icon(Icons.clear),
+            child: icons.Close(
+              size: 15.0,
+            ),
           ),
         ),
       ),
@@ -275,8 +299,34 @@ class SmoothModalSheetHeaderCloseButton extends StatelessWidget
   double widgetHeight(BuildContext context) =>
       (MEDIUM_SPACE * 2) + (Theme.of(context).iconTheme.size ?? 20.0);
 
+  @override
+  bool get requiresPadding => addPadding ?? false;
+}
+
+class SmoothModalSheetHeaderPrefixIndicator extends StatelessWidget
+    implements SizeWidget {
+  const SmoothModalSheetHeaderPrefixIndicator({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final SmoothColorsThemeExtension extension =
+        Theme.of(context).extension<SmoothColorsThemeExtension>()!;
+
+    return Container(
+      width: 10.0,
+      height: 10.0,
+      decoration: BoxDecoration(
+        color: extension.secondaryNormal,
+        shape: BoxShape.circle,
+      ),
+    );
+  }
+
   @override
   bool get requiresPadding => false;
+
+  @override
+  double widgetHeight(BuildContext context) => 10.0;
 }
 
 abstract class SizeWidget implements Widget {

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

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
+import 'package:provider/provider.dart';
 
 class SmoothDraggableBottomSheet extends StatefulWidget {
   const SmoothDraggableBottomSheet({
@@ -172,20 +173,23 @@ class _SmoothDraggableContentState extends State<_SmoothDraggableContent> {
   Widget build(BuildContext context) {
     return Scrollbar(
       controller: widget.scrollController,
-      child: CustomScrollView(
-        cacheExtent: widget.cacheExtent,
-        key: _contentKey,
-        controller: widget.scrollController,
-        slivers: <Widget>[
-          SliverPersistentHeader(
-            pinned: true,
-            delegate: _SliverHeader(
-              child: widget.headerBuilder(context),
-              height: widget.headerHeight,
+      child: ChangeNotifierProvider<ScrollController>.value(
+        value: widget.scrollController,
+        child: CustomScrollView(
+          cacheExtent: widget.cacheExtent,
+          key: _contentKey,
+          controller: widget.scrollController,
+          slivers: <Widget>[
+            SliverPersistentHeader(
+              pinned: true,
+              delegate: _SliverHeader(
+                child: widget.headerBuilder(context),
+                height: widget.headerHeight,
+              ),
             ),
-          ),
-          widget.bodyBuilder(context),
-        ],
+            widget.bodyBuilder(context),
+          ],
+        ),
       ),
     );
   }

packages/smooth_app/lib/l10n/app_en.arb

@@ -1572,6 +1572,10 @@
     "@user_list_subtitle_product": {
         "description": "Subtitle of a paragraph about user lists in a product context"
     },
+    "user_list_title": "Your lists",
+    "@user_list_title": {
+        "description": "Label for the user lists (when the user wants to add a product to a list)"
+    },
     "user_list_add_product": "Add the product to your lists",
     "@user_list_add_product": {
         "description": "Label for the dialog to add a product to a list"
@@ -1616,6 +1620,10 @@
     "@user_list_name_error_same": {
         "description": "Validation error about the renamed name that is the same as the initial list name"
     },
+    "user_list_name_input_hint": "Name of the list",
+    "@user_list_name_input_hint": {
+        "description": "A hint to indicate that the user should input a name of a list"
+    },
     "try_again": "Try Again",
     "@try_again": {
         "description": "Label for buttons that try to repeat a failed action"