Use case

(Especially for Flutter Web)

I haven't found a way of creating a table view that scrolls smoothly to both directions. None of the currently available widgets and packages provide a solution for displaying and interacting with thousands of rows smoothly.

Proposal

The perfect table widget for my needs must include these features:

1. It must scroll smoothly for both directions, horizontally and vertically.

2. Also, a bool property for locking the scroll direction after the scroll direction detected. (If it is horizontal, lock it to be scrolled only horizontally, else to be scrolled only vertically. This should be optional. Of course, the default behavior must be both directions. )

3. Cells should be rendered on-demand as ListView.builder does. Otherwise, there will be a huge performance loss.

What I Have Done

In the below example, I made something close to the solution.

Cons:

• I must hardcode the width via SizedBox
• Gestures are recognized wrong when using a laptop touchpad. (On MacBook Pro, dragging with 2 fingers) So, the scrolling is not smooth. It can't decide on which ListView to scroll. One can only scroll horizontally (SingleChildScrollView ) and the other one (ListView.builder) can only scroll vertically. I could wrap all of them with a listener widget to lock the scroll direction temporarily until the scroll gesture from user ends.

Error Code (Flutter Web, Chrome, each time laptop touchpad 2 finger swiping):

════════ Exception caught by gesture library ═══════════════════════════════════
Assertion failed: org-dartlang-app:///packages/flutter/src/gestures/pointer_signal_resolver.dart:32:12
_currentEvent == null || _currentEvent == event
is not true

Pros:

• At least, since there is a ListView.builder, the rows are generated on-demand. So I can scroll vertically very smoothly. It runs with high performance.
• Headers (titles of columns) are always visible. Aka, pinned on top.

Example

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  primary: true,
  dragStartBehavior: DragStartBehavior.down,
  physics: ClampingScrollPhysics(),
  child: Column(
    children: <Widget>[
      SizedBox(
        width: 1000,
        child: RowHeaders(),
      ),
      Expanded(
        child: SizedBox(
          width: 1000,
          child: ListView.builder(
            dragStartBehavior: DragStartBehavior.down,
            itemCount: 5000,
            itemBuilder: (context, i) {
              return CustomRowWidget();
            },
          ),
        ),
      ),
    ],
  ),
),