Adjust the position of the drag handler gesture detector in wolt_moda…

lib/src/content/wolt_modal_sheet_layout.dart

@@ -1,9 +1,12 @@
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:wolt_modal_sheet/src/content/components/paginating_group/paginating_widgets_group.dart';
 import 'package:wolt_modal_sheet/src/theme/wolt_modal_sheet_default_theme_data.dart';
 import 'package:wolt_modal_sheet/src/widgets/wolt_bottom_sheet_drag_handle.dart';
 import 'package:wolt_modal_sheet/wolt_modal_sheet.dart';
 
+const double _minInteractiveDimension = 48.0;
+
 /// The layout for the Wolt Modal Sheet.
 class WoltModalSheetLayout extends StatelessWidget {
   const WoltModalSheetLayout({
@@ -31,9 +34,24 @@ class WoltModalSheetLayout extends StatelessWidget {
             themeData?.navBarHeight ??
             defaultThemeData.navBarHeight)
         : 0.0;
+
     return Stack(
       children: [
         paginatingWidgetsGroup.mainContentAnimatedBuilder,
+        if (showDragHandle)
+          Positioned(
+            child: GestureDetector(
+              // By setting behavior to HitTestBehavior.opaque, the GestureDetector will capture touch
+              // events even if its child (the drag handle) isn't the exact size of the gesture.
+              // Effectively allowing the handler to capture drag gestures.
+              behavior: HitTestBehavior.opaque,
+              child: const Row(
+                children: [
+                  SizedBox(height: _minInteractiveDimension,),
+                ],
+              ),
+            ),
+          ),
         if (hasTopBarLayer)
           Positioned(
             left: 0,

lib/src/widgets/wolt_bottom_sheet_drag_handle.dart

@@ -3,8 +3,6 @@ import 'package:flutter/material.dart';
 import 'package:wolt_modal_sheet/src/theme/wolt_modal_sheet_default_theme_data.dart';
 import 'package:wolt_modal_sheet/wolt_modal_sheet.dart';
 
-const double _minInteractiveDimension = 48.0;
-
 class WoltBottomSheetDragHandle extends StatelessWidget {
   const WoltBottomSheetDragHandle({super.key});
 
@@ -16,28 +14,19 @@ class WoltBottomSheetDragHandle extends StatelessWidget {
         themeData?.dragHandleSize ?? defaultThemeData.dragHandleSize;
     final handleColor =
         themeData?.dragHandleColor ?? defaultThemeData.dragHandleColor;
+
     return Semantics(
       label: semanticsLabel(context),
       container: true,
-      child: SizedBox.square(
-        dimension: _minInteractiveDimension,
-        // By setting behavior to HitTestBehavior.opaque, the GestureDetector will capture touch
-        // events even if its child (the drag handle) isn't the exact size of the gesture.
-        // This will prevent the scrollable content below from receiving the touch events,
-        // effectively allowing the handler to capture drag gestures.
-        child: GestureDetector(
-          behavior: HitTestBehavior.opaque,
-          child: Align(
-            alignment: Alignment.topCenter,
-            child: Container(
-              margin: const EdgeInsets.only(top: 8.0),
-              height: handleSize.height,
-              width: handleSize.width,
-              decoration: BoxDecoration(
-                borderRadius: BorderRadius.circular(handleSize.height / 2),
-                color: handleColor,
-              ),
-            ),
+      child: Align(
+        alignment: Alignment.topCenter,
+        child: Container(
+          margin: const EdgeInsets.only(top: 8.0),
+          height: handleSize.height,
+          width: handleSize.width,
+          decoration: BoxDecoration(
+            borderRadius: BorderRadius.circular(handleSize.height / 2),
+            color: handleColor,
           ),
         ),
       ),

playground/lib/home/pages/sheet_page_with_custom_top_bar.dart

@@ -28,12 +28,11 @@ class SheetPageWithCustomTopBar {
         ),
       ),
       trailingNavBarWidget: WoltModalSheetCloseButton(onClosed: onClosed),
-      isTopBarLayerAlwaysVisible: false,
       topBar: _CustomTopBar(onClosed: onClosed, onBackPressed: onBackPressed),
       pageTitle: const ModalSheetTitle('Page with custom top bar'),
-      child: Column(
+      child: const Column(
         crossAxisAlignment: CrossAxisAlignment.start,
-        children: const [
+        children: [
           Padding(
             padding: EdgeInsets.all(16.0),
             child: Text(
@@ -71,16 +70,31 @@ class _CustomTopBar extends StatelessWidget {
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           const Center(child: ModalSheetTitle('Feeling lucky?')),
-          Expanded(
-            child: Padding(
-              padding: _searchBarPadding,
-              child: IconButton(
-                onPressed: () {},
-                tooltip: 'Search',
-                icon: const Icon(Icons.search),
-              ),
+          const Spacer(),
+          Padding(
+            padding: _searchBarPadding,
+            child: IconButton(
+              onPressed: () {
+                WoltModalSheet.show(
+                  context: context,
+                  modalTypeBuilder: (context) => WoltModalType.dialog,
+                  pageListBuilder: (sheetContext) => [
+                    WoltModalSheetPage(
+                      child: const SizedBox(),
+                      topBarTitle: const ModalSheetTitle(
+                        'Custom tab bar action!',
+                        textAlign: TextAlign.center,
+                      ),
+                      isTopBarLayerAlwaysVisible: true,
+                    )
+                  ],
+                );
+              },
+              tooltip: 'Custom Action',
+              icon: const Icon(Icons.accessibility, color: Colors.white,),
             ),
           ),
+          const SizedBox(width: 70,),
         ],
       ),
     );