在Flutter中滚动时如何为列表中的项目设置动画

Question

我想在Flutter中创建一个网格列表视图，其效果类似于右下所示。瓷砖的移动与速度成比例地延迟。可以看到类似的效果here。

我尝试修改SliverGridDelegate的实现，以根据滚动速度增加mainAxisStride的值。

在我的CustomScrollView中，我放置了经过修改的SliverGrid（SliverAnimatedGrid），并使用了基于SliverGridDelegateWithFixedCrossAxisCount的自定义委托SliverGridDelegateWithFixedCrossAxisCountAndAnimation。

SliverGridDelegateWithFixedCrossAxisCountAndAnimation接受ScrollController，并在getLayout(SliverConstraints constraints)函数中使用其速度来增加mainAxisStride的网格。

当前实施：

  @override
  SliverGridLayout getLayout(SliverConstraints constraints) {
    assert(_debugAssertIsValid());
    final double usableCrossAxisExtent =
        constraints.crossAxisExtent - crossAxisSpacing * (crossAxisCount - 1);
    final double childCrossAxisExtent = usableCrossAxisExtent / crossAxisCount;
    final double childMainAxisExtent = childCrossAxisExtent / childAspectRatio;
    // Here accessing scroll controller velocity
    final velocity = (controller.position.activity.velocity / 100.0).clamp(0, 20);
    return SliverGridRegularTileLayout(
      crossAxisCount: crossAxisCount,
      mainAxisStride: childMainAxisExtent + mainAxisSpacing + velocity,
      crossAxisStride: childCrossAxisExtent + crossAxisSpacing,
      childMainAxisExtent: childMainAxisExtent,
      childCrossAxisExtent: childCrossAxisExtent,
      reverseCrossAxis: axisDirectionIsReversed(constraints.crossAxisDirection),
    );
  }

不幸的是，这很麻烦，并且存在一些错误，因为controller.position.activity除了测试或滚动控制器的子类之外不应被访问。

完整的示例可以在this gist中找到。

您对如何有效实现此效果或类似效果有任何想法吗？