Flutter 如何在用户滚动到Flatter web中的小部件时播放动画

Flutter 如何在用户滚动到Flatter web中的小部件时播放动画,flutter,flutter-web,flutter-animation,Flutter,Flutter Web,Flutter Animation,我正在创建一个简单的颤振网页,其架构如下 final scrollController = new ScrollController(); return Scaffold( body: SingleChildScrollView( controller: scrollController, child: Column( children: [ Container( child:

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

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(),
                  ],
                )),
          ],
        )));
我的目标是当用户向下滚动到一些小部件时,在它们中播放动画。目前,我有一个解决方案,包括将scrollController作为参数发送到我想要设置动画的小部件。请参阅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));
}
这似乎是实现这一目标的糟糕方式。首先对滚动阈值进行硬编码。此外,此实现似乎存在一些性能问题