Merge pull request #99 from surfstudio/drag_on_web

feat: Drag on web

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## [Unreleased, estimated N.N.N]
 
+## 4.0.2
+### Fixed
+* Drag on web
+
 ## 4.0.1
 ### Fixed
 * Sticking when closing at the end

README.md

@@ -33,7 +33,9 @@ There are 2 types of BottomSheets:
 ## Example
 #### Simple BottomSheet
 
-![](https://i.ibb.co/Xjntn3H/open-flexible-bottom-sheet.gif)
+![](assets/open-flexible-bottom-sheet.gif)
+
+![](assets/example-web.gif)
 
 To show bottomSheet, use :
 
@@ -66,7 +68,7 @@ Widget _buildBottomSheet(
 
 #### BottomSheet with height based on content
 
-![](https://i.ibb.co/gMcvMyp/example-with-height-base-on-content.gif)
+![](assets/example-with-height-base-on-content.gif)
 
 ```dart
 showFlexibleBottomSheet(
@@ -97,7 +99,7 @@ Widget _buildBottomSheet(
 
 #### Sticky BottomSheet
 
-![](https://i.ibb.co/bBz6pJk/open-sticky-bottom-sheet.gif)
+![](assets/open-sticky-bottom-sheet.gif)
 
 To show sticky BottomSheet, use:  
 **You have to return SliverChildListDelegate from builder !!!**

lib/src/flexible_bottom_sheet.dart

@@ -13,6 +13,8 @@
 // limitations under the License.
 import 'package:bottom_sheet/src/flexible_bottom_sheet_header_delegate.dart';
 import 'package:bottom_sheet/src/widgets/change_insets_detector.dart';
+import 'package:bottom_sheet/src/widgets/scroll_behavior_in_web.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
 
@@ -196,6 +198,7 @@ class _FlexibleBottomSheetState<T> extends State<FlexibleBottomSheet<T>> {
 
   bool _isClosing = false;
   bool _isAnimatingToMaxHeight = false;
+  final double _sizeWhenNeedClose = kIsWeb ? 0.10 : 0.01;
 
   @override
   void initState() {
@@ -264,7 +267,7 @@ class _FlexibleBottomSheetState<T> extends State<FlexibleBottomSheet<T>> {
   // Checking if the bottom sheet needs to be closed.
   void _checkNeedCloseBottomSheet(double extent) {
     if (widget.isCollapsible && !_isClosing) {
-      if (extent - widget.minHeight <= 0.01) {
+      if (extent - widget.minHeight <= _sizeWhenNeedClose) {
         _isClosing = true;
         _dismiss();
       }
@@ -337,7 +340,8 @@ class _FlexibleBottomSheetState<T> extends State<FlexibleBottomSheet<T>> {
               colorSchemeBackground,
         );
 
-    return NotificationListener<DraggableScrollableNotification>(
+    final behaviorScroll = _getScrollBehaviorInWeb();
+    final bottomSheet = NotificationListener<DraggableScrollableNotification>(
       onNotification: _scrolling,
       child: DraggableScrollableSheet(
         maxChildSize: _currentMaxChildSize,
@@ -410,6 +414,25 @@ class _FlexibleBottomSheetState<T> extends State<FlexibleBottomSheet<T>> {
         },
       ),
     );
+
+    return behaviorScroll == null
+        ? bottomSheet
+        : ScrollConfiguration(behavior: behaviorScroll, child: bottomSheet);
+  }
+
+  MaterialScrollBehavior? _getScrollBehaviorInWeb() {
+    final behaviorInWeb = ScrollBehaviorInWeb();
+
+    switch (defaultTargetPlatform) {
+      case TargetPlatform.android:
+      case TargetPlatform.iOS:
+        return null;
+      case TargetPlatform.fuchsia:
+      case TargetPlatform.linux:
+      case TargetPlatform.macOS:
+      case TargetPlatform.windows:
+        return behaviorInWeb;
+    }
   }
 }
 

lib/src/widgets/scroll_behavior_in_web.dart

@@ -0,0 +1,12 @@
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+
+/// For websites to work on the web and desktop
+class ScrollBehaviorInWeb extends MaterialScrollBehavior {
+  @override
+  Set<PointerDeviceKind> get dragDevices => {
+        PointerDeviceKind.touch,
+        PointerDeviceKind.mouse,
+        PointerDeviceKind.trackpad,
+      };
+}

pubspec.yaml

@@ -1,5 +1,5 @@
 name: bottom_sheet
-version: 4.0.1
+version: 4.0.2
 description: Flexible bottom sheet with the ability to scroll content even without a list.
 repository: "https://github.com/surfstudio/flutter-bottom-sheet"
 issue_tracker: "https://github.com/surfstudio/flutter-bottom-sheet/issues"