feat: add support for custom scroll behavoir

GeekyAnts · Jan 1, 2022 · 42cf721 · 42cf721
1 parent 268144a
commit 42cf721
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## [1.0.2] - Dec 24, 2021
+
+- Add support to send custom `ScrollBehavior` to widget. Fixes [this issue](https://github.com/GeekyAnts/infinite-carousel-flutter/issues/7).
+
 ## [1.0.1] - Jun 28, 2021
 
 - Fix: Null check operator used on null value.

diff --git a/README.md b/README.md
@@ -25,7 +25,7 @@ Add the package to `pubspec.yaml`
 
 ```yaml
 dependencies:
-  infinite_carousel: ^1.0.1
+  infinite_carousel: ^1.0.2
 ```
 
 After that import the package.
@@ -76,9 +76,26 @@ It also supports its own scroll controller called _`InfiniteScrollController`_ w
 | axisDirection  | Axis                                                        | Axis direction of carousel.                                                                                                                                                                                                                                                                                                                                                                                                                                    | Axis.horizontal          |
 | center         | bool                                                        | Align selected item to center of the viewport. When this is true, anchor property is ignored.                                                                                                                                                                                                                                                                                                                                                                  | true                     |
 
+## Flutter web
+
+Earlier, flutter allowed scrolling the widgets by dragging using the mouse. Now, by default, it allows scrolling widgets to be dragged by all PointerDeviceKinds except for PointerDeviceKind.mouse.
+
+If you want to support scrolling by drag, please pass the explicit `ScrollBehavior` to InfiniteCarousel.
+
+```dart
+scrollBehavior: ScrollConfiguration.of(context).copyWith(
+  dragDevices: {
+    // Allows to swipe in web browsers
+    PointerDeviceKind.touch,
+    PointerDeviceKind.mouse
+  },
+),
+```
+
+Reference: https://docs.flutter.dev/release/breaking-changes/default-scroll-behavior-drag
+
 ## Contributing
 
 Contributions of all kinds are welcome. Please read the [guidelines](.github/CONTRIBUTING.md) and [Code of Conduct](.github/CODE_OF_CONDUCT.md) before contributing.
 
-
 Images used in the gifs belong to their original authors and the links can be found in example project.
diff --git a/example/lib/screens/complex.dart b/example/lib/screens/complex.dart
@@ -1,3 +1,5 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:infinite_carousel/infinite_carousel.dart';
 
@@ -41,6 +43,15 @@ class _ComplexState extends State<Complex> {
                 center: _center,
                 anchor: _anchor,
                 velocityFactor: _velocityFactor,
+                scrollBehavior: kIsWeb
+                    ? ScrollConfiguration.of(context).copyWith(
+                        dragDevices: {
+                          // Allows to swipe in web browsers
+                          PointerDeviceKind.touch,
+                          PointerDeviceKind.mouse
+                        },
+                      )
+                    : null,
                 controller: _controller,
                 itemBuilder: (context, itemIndex, realIndex) {
                   final currentOffset = 120 * realIndex;

diff --git a/example/lib/screens/horizontal.dart b/example/lib/screens/horizontal.dart
@@ -1,3 +1,5 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:infinite_carousel/infinite_carousel.dart';
 
@@ -55,6 +57,15 @@ class _HorizontalState extends State<Horizontal> {
               child: InfiniteCarousel.builder(
                 itemCount: kDemoImages.length,
                 itemExtent: _itemExtent ?? 40,
+                scrollBehavior: kIsWeb
+                    ? ScrollConfiguration.of(context).copyWith(
+                        dragDevices: {
+                          // Allows to swipe in web browsers
+                          PointerDeviceKind.touch,
+                          PointerDeviceKind.mouse
+                        },
+                      )
+                    : null,
                 loop: _loop,
                 controller: _controller,
                 onIndexChanged: (index) {

diff --git a/example/lib/screens/vertical.dart b/example/lib/screens/vertical.dart
@@ -1,3 +1,5 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:infinite_carousel/infinite_carousel.dart';
 
@@ -19,6 +21,15 @@ class _VerticalState extends State<Vertical> {
           itemExtent: 300,
           loop: true,
           axisDirection: Axis.vertical,
+          scrollBehavior: kIsWeb
+              ? ScrollConfiguration.of(context).copyWith(
+                  dragDevices: {
+                    // Allows to swipe in web browsers
+                    PointerDeviceKind.touch,
+                    PointerDeviceKind.mouse
+                  },
+                )
+              : null,
           itemBuilder: (context, itemIndex, realIndex) {
             return Padding(
               padding: EdgeInsets.all(10.0),

diff --git a/lib/infinite_carousel.dart b/lib/infinite_carousel.dart
@@ -30,6 +30,7 @@ class InfiniteCarousel extends StatefulWidget {
     this.velocityFactor = 0.2,
     this.axisDirection = Axis.horizontal,
     this.center = true,
+    this.scrollBehavior,
   })  : assert(itemExtent > 0),
         assert(itemCount > 0),
         assert(velocityFactor > 0.0 && velocityFactor <= 1.0),
@@ -75,6 +76,9 @@ class InfiniteCarousel extends StatefulWidget {
   /// particular item after scrolling.
   final ScrollPhysics? physics;
 
+  /// Scroll behavior for [InfiniteCarousel].
+  final ScrollBehavior? scrollBehavior;
+
   /// Scroll controller for [InfiniteScrollPhysics].
   final ScrollController? controller;
 
@@ -181,6 +185,8 @@ class _InfiniteCarouselState extends State<InfiniteCarousel> {
             itemCount: widget.itemCount,
             physics: widget.physics ?? InfiniteScrollPhysics(),
             axisDirection: axisDirection,
+            scrollBehavior: widget.scrollBehavior ??
+                ScrollConfiguration.of(context).copyWith(scrollbars: false),
             viewportBuilder: (BuildContext context, ViewportOffset position) {
               return Viewport(
                 center: _forwardListKey,
@@ -215,6 +221,7 @@ class _InfiniteScrollable extends Scrollable {
     AxisDirection axisDirection = AxisDirection.right,
     ScrollController? controller,
     ScrollPhysics? physics,
+    ScrollBehavior? scrollBehavior,
     required this.itemExtent,
     required this.itemCount,
     required this.loop,
@@ -226,6 +233,7 @@ class _InfiniteScrollable extends Scrollable {
           controller: controller,
           physics: physics,
           viewportBuilder: viewportBuilder,
+          scrollBehavior: scrollBehavior,
         );
 
   final double itemExtent;

diff --git a/pubspec.yaml b/pubspec.yaml
@@ -1,6 +1,6 @@
 name: infinite_carousel
 description: Carousel in flutter. Supports infinite looping and gives control over anchor and velocity.
-version: 1.0.1
+version: 1.0.2
 homepage: https://github.com/GeekyAnts/infinite-carousel-flutter
 
 environment: