How to play animation when user scrolls to a widget in flutter web

Viewed 404

I am creating a simple flutter web page with an architecture like this.

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(),
                  ],
                )),
          ],
        )));

My goal is to play animations in some Widgets when the user scrolls down to them. Currently I have a solution that involves sending the scrollController in as an argument to the widgets I want to animate. See the Performance() widget.

In the widgets I add listeners to the controller that plays the animation at a hard-coded threshhold. My implementation looks like this:

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));
}

This seems like a bad way to achieve this. Firstly hard-coding the scrolling thresholds. Also, there seems to be some performance issues with this implementation.

0 Answers
Related