fix issue of overscrolling chips list causing bottom sheet to drag

deriv-com · Jun 24, 2024 · 2820d9c · 2820d9c
1 parent 5f48910
commit 2820d9c
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 23 deletions.
diff --git a/packages/deriv_mobile_chart_wrapper/lib/src/mobile_tools_ui/chips_list.dart b/packages/deriv_mobile_chart_wrapper/lib/src/mobile_tools_ui/chips_list.dart
@@ -31,7 +31,7 @@ class ChipsList extends StatelessWidget {
   final double horizontalPadding;
 
   @override
-  Widget build(BuildContext context) => Container(
+  Widget build(BuildContext context) => SizedBox(
         height: ThemeProvider.margin36,
         child: ListView.builder(
           scrollDirection: Axis.horizontal,

diff --git a/...deriv_mobile_chart_wrapper/lib/src/mobile_tools_ui/mobile_tools_bottom_sheet_content.dart b/...deriv_mobile_chart_wrapper/lib/src/mobile_tools_ui/mobile_tools_bottom_sheet_content.dart
@@ -58,28 +58,36 @@ class MobileToolsBottomSheetContent extends StatelessWidget {
   }
 
   Widget _buildChipsList() {
-    return const ChipsList(items: <CustomChip>[
-      CustomChip(
-        value: 'Active',
-        borderRadius: ThemeProvider.margin40,
-      ),
-      CustomChip(
-        value: 'All',
-        borderRadius: ThemeProvider.margin40,
-      ),
-      CustomChip(
-        value: 'Momentum',
-        borderRadius: ThemeProvider.margin40,
-      ),
-      CustomChip(
-        value: 'Volatility',
-        borderRadius: ThemeProvider.margin40,
-      ),
-      CustomChip(
-        value: 'Moving average',
-        borderRadius: ThemeProvider.margin40,
-      ),
-    ]);
+    // Overscroll behaviour of horizontal chips list sometimes triggers
+    // BottomSheet top <-> bottom dragging. That's why we're capturing the
+    // overscroll here so it doesn't propagate up to the BottomSheet.
+    return NotificationListener<OverscrollNotification>(
+      onNotification: (OverscrollNotification notification) {
+        return true;
+      },
+      child: const ChipsList(items: <CustomChip>[
+        CustomChip(
+          value: 'Active',
+          borderRadius: ThemeProvider.margin40,
+        ),
+        CustomChip(
+          value: 'All',
+          borderRadius: ThemeProvider.margin40,
+        ),
+        CustomChip(
+          value: 'Momentum',
+          borderRadius: ThemeProvider.margin40,
+        ),
+        CustomChip(
+          value: 'Volatility',
+          borderRadius: ThemeProvider.margin40,
+        ),
+        CustomChip(
+          value: 'Moving average',
+          borderRadius: ThemeProvider.margin40,
+        ),
+      ]),
+    );
   }
 
   Widget _buildHeader(BuildContext context) => Container(