How to scroll CupertinoDatePicker with mouse drags?

Issue

I used a CupertinoDatePicker in a Flutter project that also should be deployed as a web app. But the CupertinoDatePicker only reacts to the mouse wheel, not to drag events. I think that this is unexpected behavior for many users.
Is there a way to tell the CupertinoDatePicker that it should also be draggable in addition to listening for mouse scroll events?

Code to reproduce:

CupertinoDatePicker(
  onDateTimeChanged: (v) => print(v),
),

Solution

You can override the scroll behavior and enable mouse drag like

ScrollConfiguration(
  behavior: MyCustomScrollBehavior(),
  child: CupertinoDatePicker(
    onDateTimeChanged: (v) => print(v),
  ),
),
class MyCustomScrollBehavior extends MaterialScrollBehavior {
  // Override behavior methods and getters like dragDevices
  @override
  Set<PointerDeviceKind> get dragDevices => {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
        // etc.
      };
}

More about default-scroll-behavior-drag migration-guide

Answered By – Yeasin Sheikh

Answer Checked By – David Goodson (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *