LinearProgressIndicator 动画 Flutter

Question

我正在尝试创建一个带有页面滑块轮播和进度栏的页面。当轮播移动到另一个页面时，我希望进度条通过动画从一个值更新为另一个值。我尝试过LinearProgressIndicator，但我不知道如何将动画从旧值设置为新值。这就是我所拥有的

LinearProgressIndicator(
  minHeight: 2,
  value: currentPageIndex/(pages.length - 1)
)

currentPageIndex使用setState()外部方法更新。

有什么办法可以做到吗？提前致谢。

Answer 1

“推荐”的方法是使用TweenAnimationBuilder，您可以在此处了解更多信息。本质上，这是一个简单的动画，并不真正需要外部控制器。

以这段代码为例：

TweenAnimationBuilder<double>(
    duration: const Duration(milliseconds: 250),
    curve: Curves.easeInOut,
    tween: Tween<double>(
        begin: 0,
        end: <your-current-value>,
    ),
    builder: (context, value, _) =>
        LinearProgressIndicator(value: value),
),

您可以更改动画的持续时间和动画的曲线。当您更新值时，进度指示器应自动在先前值和新值之间显示动画！