diff --git a/lib/src/content/wolt_modal_sheet_layout.dart b/lib/src/content/wolt_modal_sheet_layout.dart index 77e1b904..f990125c 100644 --- a/lib/src/content/wolt_modal_sheet_layout.dart +++ b/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, diff --git a/lib/src/widgets/wolt_bottom_sheet_drag_handle.dart b/lib/src/widgets/wolt_bottom_sheet_drag_handle.dart index 63eb69be..b8d98c28 100644 --- a/lib/src/widgets/wolt_bottom_sheet_drag_handle.dart +++ b/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, ), ), ), diff --git a/playground/lib/home/pages/sheet_page_with_custom_top_bar.dart b/playground/lib/home/pages/sheet_page_with_custom_top_bar.dart index f70e6b1f..29aa762f 100644 --- a/playground/lib/home/pages/sheet_page_with_custom_top_bar.dart +++ b/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,), ], ), );