Skip to main content

Command Palette

Search for a command to run...

Scrollbar and Scroll Behavior

Published
1 min read
Scrollbar and Scroll Behavior
M

I've mainly been doing backend web development. I also have a technology for web front-end, and recently I mainly develop Flutter packages.

The default ScrollBehavior.dragDevices of PlutoGrid is as follows.
(dragDevices is a setting that allows scrolling by dragging to the set pointer type.)

// In case of Mobile
{
  PointerDeviceKind.touch,
  PointerDeviceKind.stylus,
  PointerDeviceKind.invertedStylus,
  PointerDeviceKind.unknown,
}

// In case of desktop
{
  PointerDeviceKind.mouse,
  PointerDeviceKind.trackpad,
  PointerDeviceKind.unknown,
}

Since PointerDeviceKind.mouse is set in Desktop, it is difficult to select the text of PlutoCell by dragging (because it is scrolled by dragging).
In this case, you can customize dragDevices to remove PointerDeviceKind.mouse.

PlutoGrid(
  configuration: const PlutoGridConfiguration(
    scrollbar: PlutoGridScrollbarConfig(
      dragDevices: {
        // PointerDeviceKind.mouse,
        PointerDeviceKind.trackpad,
        PointerDeviceKind.unknown,
      },
    ),
  ),
),

If you remove PointerDeviceKind.mouse from Desktop to remove the drag-to-scroll action, horizontal or vertical scrolling can be done with the scroll bar.
In the case of Desktop, the scroll bar appears when hovering the mouse over the scroll bar area.

pluto_grid_scrollbar.gif