flutterdev.in › Packages › middle_click_autoscroll

middle_click_autoscroll

Middle-click autoscroll for Flutter desktop and web. Browser-style wheel-click scrolling with anchor indicator, cursors, nested scrollables and both axes.

v0.1.1160/160 pub pointsMITAndroidiOSmacOSWindowsLinuxWeb
middle_click_autoscroll: ^0.1.1

Middle-click autoscroll for Flutter desktop & web. This package brings browser-style middle-mouse-button autoscroll to Flutter scrollables through one widget, MiddleClickAutoscroll. Press the mouse wheel, move the pointer away from the anchor and the content scrolls, faster the further you move. Click again (or release after dragging) to stop.

Flutter's scrollables do not do this on their own; this package fills the gap reported in flutter/flutter#66537. It is pure Dart: no platform channels, no native code.

Middle-click autoscroll: the anchor indicator appears and the list scrolls while the pointer is held away from it

The web example: middle-click drops the anchor, moving the pointer away scrolls (faster the further you go), moving to the other side scrolls back, and a click stops it.

Features

Install

dependencies:
  middle_click_autoscroll: ^0.1.1

Usage

import 'package:middle_click_autoscroll/middle_click_autoscroll.dart';

MiddleClickAutoscroll(
  child: ListView.builder(
    itemCount: 1000,
    itemBuilder: (context, i) => ListTile(title: Text('Item $i')),
  ),
);

Wrap high in the tree (for example around a whole page) and every scrollable below gets autoscroll; the one under the pointer is chosen at press time.

Options

MiddleClickAutoscroll(
  mode: AutoscrollMode.toggle,          // auto | toggle | hold
  deadZoneRadius: 20,                   // px
  speedCurve: const LinearAutoscrollSpeedCurve(pixelsPerSecondPerPixel: 8),
  maxSpeed: 4000,                       // px/s per axis
  controller: myScrollController,       // optional: drive this instead
  indicatorBuilder: (context, details) => MyAnchor(details: details),
  cursorResolver: (details) => SystemMouseCursors.move,
  preventBrowserDefaults: true,         // web only
  onAutoscrollStart: (details) {},
  onAutoscrollEnd: () {},
  child: ...,
);
Mode Press + release without moving Press, drag out of the dead zone, release
auto (default) keeps scrolling until next click stops
toggle keeps scrolling until next click keeps scrolling until next click
hold stops stops

Speed curves: AutoscrollSpeedCurve.chrome, LinearAutoscrollSpeedCurve, PowerAutoscrollSpeedCurve, CallbackAutoscrollSpeedCurve((d) => ...) or your own subclass. The pure helpers computeAutoscrollVelocity and computeAutoscrollDirection are exported for custom indicators.

AutoscrollDetails (given to builders and callbacks) contains the anchor, pointer, current velocity, snapped AutoscrollDirection, which axes can scroll and whether the autoscroll is latched.

Platform support

Platform Autoscroll Cursors Stops when pointer leaves window Browser default blocking
macOS yes yes yes n/a
Windows yes yes yes n/a
Linux yes yes yes n/a
Web yes yes yes best effort
Android / iOS with a mouse (tablets, ChromeOS, DeX) where the OS shows cursors embedder dependent n/a

Limitations

Example

example/ contains a desktop/web app with vertical, horizontal, 2D grid, nested and controller-driven tabs, and live controls for every option.

More Flutter packages