Flutter UI diagonal scrolling with snap

Question

I'm trying to create a widget like in the video for scrolling in all directions with a snapping option

https://cdn.dribbble.com/users/5576/screenshots/7406355/media/30bf6f1d359b8b409cc25c612de9432c.mp4

what I'm tried till now

 Widget build(BuildContext context) {
    return InteractiveViewer(
      constrained: false,
      transformationController: _transformController,
      onInteractionStart: _onPanStarted,
      onInteractionUpdate: _onPanUpdated,
      onInteractionEnd: _onPanEnd,
      scaleEnabled: false,
      panEnabled: true,
      child: _buildGrid(),
    );
  }

and build function is

 Widget _buildGrid() {
   
    Table _table = Table(
      defaultColumnWidth: FixedColumnWidth(_cardWidth),
      children: List.generate(
        _rows.length,
        (x) => _rows[x],
      ),
    );

    return _table;
  }

snapping function when dragging is ended

_snapTo({bool animate = true}) {
    if (_animationController.isAnimating) {
      _animationController.stop();
    }
    // moving to
    var xDistance =
        _currentOffset.getTranslation().x - _oldOffset.getTranslation().x;
    var yDistance =
        _currentOffset.getTranslation().y - _oldOffset.getTranslation().y;

    if (xDistance > 20) {
      _currentCol--;
      _direction = Direction.LEFT;
    } else if (xDistance < -20) {
      _currentCol++;
      _direction = Direction.RIGHT;
    }
    if (yDistance > 30) {
      _currentRow--;
      if (_direction == Direction.RIGHT) {
        _direction = Direction.TOP_RIGHT;
      } else if (_direction == Direction.LEFT) {
        _direction = Direction.TOP_LEFT;
      } else {
        _direction = Direction.TOP;
      }
    } else if (yDistance < -30) {
      _currentRow++;
      if (_direction == Direction.RIGHT) {
        _direction = Direction.DOWN_RIGHT;
      } else if (_direction == Direction.LEFT) {
        _direction = Direction.DOWN_LEFT;
      } else {
        _direction = Direction.DOWN;
      }
    }

    print("$_currentCol,$_currentRow");
    log("${xDistance.toInt()},${yDistance.toInt()}");
    // Getting x,y to move to

    var dx = (_currentCol * _cardWidth) - ((Get.width - _cardWidth) / 2);
    var dy = (_currentRow * _cardHeight) - ((Get.height - _cardHeight) / 2);

    var matrix = Matrix4.translationValues(-dx, -dy, 0);

    _animation = Matrix4Tween(begin: _currentOffset, end: matrix).animate(
      CurvedAnimation(
        parent: _animationController,
        curve: Curves.linear,
      ),
    );

    if (_currentOffset == matrix) return;
    if (animate) {
      _animationController.forward(from: 0);
    } else {
      setState(() {
        _transformController.value = matrix;
      });
    }

    // ..reset();
    // ..animateTo(1);

    _oldOffset = matrix;
    // setState(() {});
    // _animationController.reset();
  }

any suggestion will be appreciated

Answer 1

等待大神答复