Flutter web app TableView.builder horizontal scroll not working on a Mac

Help General
1

Hello,

I have a Flutter web app that is using a TableView.builder widget to create a grid with many columns and rows.

When I run this in Chrome on a Windows PC then the horizontal scroll works with a Shift+mouse wheel action.

The same horizontal action is not working for Chrome on a Mac. Any suggestions on how to fix this?

2

I’ve found a solution. Simply wrap your TableView in this widget…

i

mport '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,
    );
  }
}