Skip to main content

Command Palette

Search for a command to run...

Scrollbar and Scroll Behavior

Updated
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

PlutoGrid

Part 1 of 12

PlutoGrid is a data grid. It is a Flutter package that allows you to easily edit large amounts of data with the keyboard. It can be used on any platform supported by Flutter.

Up next

Shortcuts

PlutoGrid has default shortcut keys set, and users can change or set shortcut keys. Shortcut Range The scope of the shortcut depends on the focus. PlutoGrid : In the state that TextField is not focused. You can set custom shortcut keys. TextField :...