Flutter web app TableView problem - cannot scroll horizontally on a Mac

Question

I have a Flutter web app that uses a TableView.builder widget to create a matrix of cells. The matrix almost always will require horizontal and vertical scrolling.

Running this in Chrome on a Windows 10 PC I use the shift mouse wheel action to handle horizontal scrolling.

I’ve noticed that the same action does not work on Mac hardware. Any suggestions on how to fix this?

Answer 1

Found the answer, and I've packaged into a widget

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class DualAxisScrollWrapper extends StatelessWidget {
  final Widget child;
  final ScrollController horizontalController;
  final ScrollController verticalController;

  const DualAxisScrollWrapper({
    super.key,
    required this.child,
    required this.horizontalController,
    required this.verticalController,
  });

  @override
  Widget build(BuildContext context) {
    return Listener(
      onPointerSignal: (pointerSignal) {
        if (pointerSignal is PointerScrollEvent) {
          final isShiftPressed = HardwareKeyboard.instance.logicalKeysPressed.contains(LogicalKeyboardKey.shiftLeft) ||
              HardwareKeyboard.instance.logicalKeysPressed.contains(LogicalKeyboardKey.shiftRight);

          if (isShiftPressed) {
            horizontalController.jumpTo(
              horizontalController.offset + pointerSignal.scrollDelta.dy,
            );
          } else {
            verticalController.jumpTo(
              verticalController.offset + pointerSignal.scrollDelta.dy,
            );
          }
        }
      },
      child: child,
    );
  }
}