当用户滚动到 flutter web 中的小部件时如何播放动画

Question

我正在创建一个简单的颤振网页，其架构如下。

final scrollController = new ScrollController();

return Scaffold(
    body: SingleChildScrollView(
        controller: scrollController,
        child: Column(
          children: [
            Container(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [SplashInfo(), Blobs()],
                )),
            Container(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Performance(
                      scrollController: scrollController,
                    ),
                    PortfolioSplash(),
                  ],
                )),
          ],
        )));

我的目标是当用户向下滚动到某些小部件时播放动画。目前我有一个解决方案，涉及将滚动控制器作为参数发送给我想要设置动画的小部件。请参阅 Performance() 小部件。

在小部件中，我将侦听器添加到以硬编码阈值播放动画的控制器。我的实现如下所示：

void initState() {
    super.initState();

    animationController = AnimationController(vsync: this, duration: _duration)
      ..addListener(() {
        setState(() {});
      });
    animation = Tween(begin: 0.0, end: 12.5).animate(animationController);

    var listener;

    removeListener() {
      this.widget.scrollController.removeListener(listener);
    }

    listener = () {
      if (this.widget.scrollController.offset >=
              MediaQuery.of(context).size.height * 0.3 &&
          animationController.status == AnimationStatus.dismissed) {
        animationController.forward();
        removeListener();
      }
    };

    WidgetsBinding.instance.addPostFrameCallback(
        (_) => this.widget.scrollController.addListener(listener));
}

这似乎是实现这一目标的一个糟糕方法。首先对滚动阈值进行硬编码。此外，此实现似乎存在一些性能问题。