flutterdartflutter-layoutflutter-cupertinocupertinopicker

How to scroll CupertinoDatePicker with mouse drags?


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