Merge pull request #104 from woltapp/fix-overflow-scroll-effect-hidde…

…n-when-top-bar-is-always-visible Fix overflow scroll effect visibility when top bar is always visible
woltapp · Dec 12, 2023 · a2f86e6 · a2f86e6
2 parents c07ee16 + d1c3e6e
commit a2f86e6
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 19 deletions.
diff --git a/lib/src/content/components/main_content/wolt_modal_sheet_main_content.dart b/lib/src/content/components/main_content/wolt_modal_sheet_main_content.dart
@@ -51,6 +51,8 @@ class _WoltModalSheetMainContentState extends State<WoltModalSheetMainContent> {
     final pageHasTopBarLayer = page.hasTopBarLayer ??
         themeData?.hasTopBarLayer ??
         defaultThemeData.hasTopBarLayer;
+    final isTopBarLayerAlwaysVisible =
+        pageHasTopBarLayer && page.isTopBarLayerAlwaysVisible == true;
     final navBarHeight = page.navBarHeight ??
         themeData?.navBarHeight ??
         defaultThemeData.navBarHeight;
@@ -76,7 +78,11 @@ class _WoltModalSheetMainContentState extends State<WoltModalSheetMainContent> {
                         heroImage: heroImage,
                         heroImageHeight: heroImageHeight,
                       )
-                    : SizedBox(height: topBarHeight);
+                    // If top bar layer is always visible, the padding is explicitly added to the
+                    // scroll view since top bar will not be integrated to scroll view at all.
+                    // Otherwise, we implicitly create a spacing as a part of the scroll view.
+                    : SizedBox(
+                        height: isTopBarLayerAlwaysVisible ? 0 : topBarHeight);
               } else {
                 final pageTitle = page.pageTitle;
                 return KeyedSubtree(
@@ -107,7 +113,13 @@ class _WoltModalSheetMainContentState extends State<WoltModalSheetMainContent> {
         }
         return false;
       },
-      child: scrollView,
+      child: Padding(
+        // The scroll view should be padded by the height of the top bar layer if it's always
+        // visible. Otherwise, over scroll effect will not be visible due to the top bar layer.
+        padding:
+            EdgeInsets.only(top: isTopBarLayerAlwaysVisible ? topBarHeight : 0),
+        child: scrollView,
+      ),
     );
   }
 }
diff --git a/playground/lib/home/pages/sheet_page_with_dynamic_page_properties.dart b/playground/lib/home/pages/sheet_page_with_dynamic_page_properties.dart
@@ -33,26 +33,36 @@ class SheetPageWithDynamicPageProperties {
       leadingNavBarWidget:
           WoltModalSheetBackButton(onBackPressed: onBackPressed),
       trailingNavBarWidget: WoltModalSheetCloseButton(onClosed: onClosed),
-      child: Padding(
-        padding: const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 100),
-        child: StatefulBuilder(
-            builder: (BuildContext context, StateSetter setState) {
-          return Row(
-            children: [
-              const Expanded(child: Text('Enable Drag for Bottom Sheet')),
-              Switch(
-                value: useOriginalPageValues,
-                onChanged: (newValue) {
-                  dynamicPageModel.value = dynamicPageModel.value.copyWith(
-                    enableDrag: newValue,
+      child: SingleChildScrollView(
+        child: Column(
+          children: [
+            Padding(
+              padding: const EdgeInsets.all(16.0),
+              child: StatefulBuilder(
+                builder: (BuildContext context, StateSetter setState) {
+                  return Row(
+                    children: [
+                      const Expanded(
+                          child: Text('Enable Drag for Bottom Sheet')),
+                      Switch(
+                        value: useOriginalPageValues,
+                        onChanged: (newValue) {
+                          dynamicPageModel.value =
+                              dynamicPageModel.value.copyWith(
+                            enableDrag: newValue,
+                          );
+                          setState(() =>
+                              useOriginalPageValues = !useOriginalPageValues);
+                        },
+                      ),
+                    ],
                   );
-                  setState(
-                      () => useOriginalPageValues = !useOriginalPageValues);
                 },
               ),
-            ],
-          );
-        }),
+            ),
+            const Placeholder(fallbackHeight: 1200, color: Colors.grey),
+          ],
+        ),
       ),
     );
   }