是否有任何替代方法可以转换小部件来为 PageView.builder 内的小部件的比例设置动画？

Question

我正在尝试在PageView.builder的帮助下构建设计。 我不想使用插件，因为这种设计有点不同，而且如果我想尝试新的东西，我也不能变得更灵活。

设计非常简单，我正在尝试使用PageView构建一个bottomNav 。 该设计对我来说看起来像Carousel ，因此决定使用PageView go ，如果我错了，请纠正我。 它不仅是滑动小部件。 如果我按下任何可见CircleAvatar ，它将来到中间（我们可以说是活跃的）

到目前为止，我实现了这一点

在这里您可以看到由于Transform的差距差异。 它正在占用空间。 我尝试使用AnimatedSize小部件，但无法模仿这种设计。

据我所知的代码

PageView.builder(
    controller: pageController,
    scrollDirection: Axis.horizontal,
    itemCount: pages.length,
    onPageChanged: (index) => setState(() {}),
    scrollBehavior: NoScrollGlowBehaviour(),
    itemBuilder: (context, index) {
    return GestureDetector(
    onTap: () => gotoPage(index),
    child: _buildBottomNavAnimated(index),
);

Widget _buildBottomNavAnimated(int index) {
    Matrix4 matrix4 = Matrix4.identity();
    //computing matrix based on diff currentPage values
    return Transform(
      transform: matrix4,
      alignment: Alignment.center,
      child: CircleAvatar(
        backgroundColor: pages[index],
        child: const FlutterLogo(
          size: 20,
        ),
      ),
    );
}

我只是在上面添加了最少的必需代码。 对于完整代码dartpad 。 万一需要检查图像寻求帮助

我也想，如果除了PageView和Transform之外也可以实现这种设计。