A Flutter plugin to provide platform independent/dependent scrolling and panning functionality

by Flutter Awesome

A Flutter plugin to provide platform independent/dependant scrolling and panning functionality.

Features

  • This package can scroll horizontally and vertically, the scroll is locked once it is scrolled in a particular direction.
  • This package uses touch gestures on Mobile Platforms and Mouse/Trackpad inputs on Desktop/Web.

Getting started

Add dual_scroll: any to your pubspec.yaml under dependencies section as follows.

dependencies:
# Your other dependencies...
  dual_scroll: any
# Your other dependencies...

Run flutter pub get to get the package.

Alternatively, your editor might support

flutter pub get

Usage

Start by importing the package

import 'package:dual_scroll/dual_scroll.dart';

Use by wrapping the Widget You want to be scrollable in the following way:

return DualScroll(
    verticalScrollbar: ScrollBar.defaultScrollBar(),
    horizontalScrollbar: ScrollBar.defaultScrollBar(),
    child: Container(), /* Your child widget here*/
);

Usage with ListView/GridView/Scrollable Widgets as Child/Children

To use the DualScroll widget while having a ListView/GridView/Scrollable Widget(s) as its child/children, initialize DualScroll in this way:

return DualScroll(
    verticalScrollController: yourVerticalScrollController,
    horizontalScrollController: yourHorizontalScrollController,
    verticalScrollbar: ScrollBar.defaultScrollBar(),
    horizontalScrollbar: ScrollBar.defaultScrollBar(),
    child: Container(), /* Your child widget here*/
);

Customizing Additional Properties

You can pass ScrollBarSettings to the DualScroll widget in the constructor with appropriate parameter (It is not necessary to provide all parameters):

var scrollBarSettings = ScrollBarSettings(
    keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag, // Defaults to ScrollViewKeyboardDismissBehavior.manual
    clipBehavior: Clip.none, // Defaults to [Clip.hardEdge]
    verticalRestorationId: 'vertId', // Defaults to null
    horizontalRestorationId: 'horizId', // Defaults to null
    verticalPhysics = const ClampingScrollPhysics(), // Defaults to BouncingScrollPhysics
    horizontalPhysics = const ClampingScrollPhysics(), // Defaults to BouncingScrollPhysics
    verticalPadding: const EdgeInsets.all(8.0), //Defaults to null
    horizontalPadding: const EdgeInsets.all(8.0), //defaults to null
  );
  
  return DualScroll(
        // scrollBars and scrollControllers here
        settings: scrollBarSettings, //Optional
        pillColor: Colors.blueAccent, //Optional
        dimmedPillColor: Colors.blueAccent.withOpacity(0.8), //Optional
        trackColor: Colors.blueAccent.withOpacity(0.8), //Optional
        trackColorDimmed: Colors.blueAccent.withOpacity(0.6), //Optional
        hoverColor: Colors.blue.withOpacity(0.85), //Optional
        child: child, // Required
    );

Additional information

If you experience any issues, please file those here on Github. If you want to contribute to this repo, open a PR on Github. If you want to view the API in detail, visit dual_scroll on our website.

Also, We would really appreciate if you view our website and our apps.

GitHub

View Github