Flutter UI diagonal scrolling with snap - flutter

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